安卓開發1 微信頁面框架設計
一、本專案完成的功能
1.做出類微信app的首頁
2.頂部顯示app應用標題
3.中間是一整塊的空白主頁面（后面的實驗會添加內容）
4.底部是四個功能選擇按鈕，點擊不同的按鈕，按鈕會變色，同時中間的內容頁面會跟隨按鈕切換
二、專案的具體步驟
1.準備作業
1.1 去掉自帶的app標題欄
修改src\main\res\values\themes.xml檔案中標簽為style的配置資訊為Theme.AppCompat.Light.NoActionBar，如下圖：
1.2 匯入圖片
把該專案中用到的ui圖片復制粘貼到專案的檔案夾MyWeChat\app\src\main\res\drawable中，
2.設計ui布局
2.1 top.xml
LinearLayout中添加一個TextView，設定尺寸，文本內容，字體顏色和背景顏色等
注意：
要將gravity設為水平居中，需要先把外層LinearLayout的o設為垂直才有效；
其中weight設為1height設為0dp或者只用height設為默認值wrap_content；
text用@string/app_name，
2.2 bottom.xml
2.2.1 在已有的LinearLayout中增加一個LinearLayout，在該LinearLayout中放入ImageButton（需要選擇對應的圖片）和TextView，設定最外層LinearLayout的高度，背景（可用已有的圖片），配置TextView的字體顏色大小和居中，配置ImageButton的背景顏色，
注意：
ImageButton需要設定contentDescription為@string/app_name，
2.2.2 復制粘貼三個LinearLayout后，需要設定平鋪，方法是寬度都設為0dp，weight都設為1，同時需要修改每個LinearLayout中ImageButton和TextView的id（避免復制粘貼導致的id重復），同時增加每個LinearLayout的id（以便于后邊把ImageButton和TextView合起來作為一個可以點擊的按鈕）；
注意：
通過warning提示，需要把LinearLayout的baselineAligned設為false
2.3 基本布局檔案（activity_main.xml）
2.3.1 用include將top和bottom加入到該xml視圖中（外層LinearLayout布局設為垂直）
2.3.2 添加FrameLayout（增加id，以便于后期對該內容進行復制），寬度設為0dp，weight設為1，
2.4 中間內容檔案
2.4.1 新建xml檔案，添加文字內容，設定字體大小風格和居中，復制粘貼生成另外三個檔案，修改文字內容即可，
2.4.2 要實作點擊bottom不同按鈕用以切換中間內容，大體思路是為4個內容xml界面配置4個FrameLayout，再把它們壓縮成一個FrameLayout，寫到程式中，做一個子視窗，具體步驟是在main/java目錄中新建一個FrameLayout，自帶的xml洗掉，其中onCreateView函式中的xml改為剛剛自己創建的內容xml的名字，復制粘貼生成另外三個檔案，修改相關內容即可，
2.5 主活動函式的java代碼
2.5.1 用4個Fragment類創建4個實體物件，創建FragmentManager物件
2.5.2 撰寫initFragment函式把4個Fragment放到FrameLayout中
2.5.3 撰寫initView函式用來找到需要點擊的控制元件ImageButton和LinearLayout
2.5.4 撰寫setSelect函式用來bottom中四個按鈕狀態的切換
具體步驟：撰寫hideFragment函式隱藏所有內容頁面，通過傳入不同的值顯示某一個內容頁面，同時改變控制元件顏色
2.5.5 監聽太多，需要把監聽聚集到一個函式中
具體步驟：MainActivity后加implements View.OnClickListener并且重寫onClick函式
2.5.6 撰寫resetImg函式用來把圖示變灰，該函式放在onClick函式中
2.5.7 （優化）撰寫initEvent函式用來實作只在bottom區域監聽（全屏監聽很占記憶體）
2.5.8 在onCreate中呼叫 initView(); initFragment(); initEvent(); setSelect(0);
三、效果展示
四、代碼實作
代碼倉庫地址：https://gitee.com/ma-zhipeng/WeChat
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/272914.html
標籤：其他