APP製作圖文混排頁面製作流程?

2.0新版的自由模式相比老版本來說,實現了非常靈活的圖文混排功能,能隨意做出各種各樣的圖文頁面,下面給大家例舉2個,學會了大家就能根據需要自己隨心配置圖文頁面啦

第一種

首先新建一個應用,填寫基本資訊儲存。進入操作介面後在左邊新建一個頁面,這裡就不細說了。建好頁面後,就可以在右邊的控制元件面板中拖拽控制元件到模擬器中進行頁面配置了。

先拖一個單行文字控制元件到模擬器中,拖拽邊緣把它靠在頂部,並填滿左右兩側(座標[0,0];寬320,高42),然後點選它,右側面板已切換到了對應的控制元件屬性欄,輸入標題文字,設定居中、加粗,14號大小,這時模擬器裡也出現了對應的文字效果。

APP製作圖文混排頁面製作流程

將一個圖片控制元件拖動到模擬器裡,拉大至合適大小,上面貼緊文字控制元件,兩側貼緊邊框(座標[0,42];寬320,高220)。然後點選它,在右側切換的圖片控制元件屬性中點選“上傳圖片”進入圖片庫面板,再點選上傳在本地圖片中選擇一張確認上傳,上傳完成後該圖片出現在了“我的圖片中”,雙擊它或勾選後點確認,圖片便出現在了模擬器中,填充滿了剛才設定的圖片控制元件框。

APP製作圖文混排頁面製作流程

APP製作圖文混排頁面製作流程

APP製作圖文混排頁面製作流程

再拖動一個多行文字控制元件到圖片的下方,設定好大小(座標[0,262];寬320,高220),點選它,在右側的控制元件屬性欄中輸入內容,調整文字,這裡設定的是14大小,不加粗。模擬器也同步出現了效果。

APP製作圖文混排頁面製作流程

點選模擬器上的儲存按鈕,這個圖文混排頁面就做好了~

APP製作圖文混排頁面製作流程

第二種

新建頁面,與上一種一樣,先拖一個單行文字控制元件到模擬器,拖拽到如圖位置和大小(座標[0,0];寬320,高42)。然後點選它,在右側控制元件屬性欄中輸入文字。

拖一個多行文字控制元件到模擬器中,如圖調整位置和大小(座標[0,43];寬320,高271),然後點選它,在控制元件屬性欄輸入一段文字,並使用回車、空格鍵將文字排版成如圖所示效果,在左上留出空白。排版時對照模擬器修改,十分方便哦。

APP製作圖文混排頁面製作流程

拖一共圖片控制元件到剛才的多行文字控制元件上的空白位置,調整好大小位置(座標[0,43];寬152,高204),然後點選它,在控制元件屬性欄中上傳一張圖片後確認,這種不規則式的排版就做好了。

APP製作圖文混排頁面製作流程

再拖一個圖片控制元件到下方,調整好大小位置(座標[0,314];寬320,高188),然後點選它,在右側控制元件屬性欄中上傳一張圖片後確認。

APP製作圖文混排頁面製作流程

點選儲存按鈕,如圖所示的圖文混排頁面就完成了。

APP製作圖文混排頁面製作流程

圖文, 流程, 頁面, 模式, 圖文混排,
相關問題答案