實作APP門戶界面框架設計
門戶界面要求：根據課程實操實作APP門戶界面框架設計，至少包含4個tab頁，能實作tab頁之間的點擊切換；
主要步驟
一、設計一個自己喜歡的布局
在設計自己最想要的界面布局之前先要考慮好準備使用哪些布局控制元件，這里我們可以參考微信里面的實際主題布局，我很喜歡微信那種簡介輕松的主題風味所以我的界面設定的很簡單
上面這張界面圖中分為三個層次，分別是頂部微信標題布局、中間內容展示布局和底部的界面選擇欄布局，
關于頂部布局
1.頂部布局我使用了一個LinearLayout作為主控制元件附加一個textView作為文本顯示
關于中間布局
1.中間部分主要是用來展示進入微信后的初始界面和點擊四個底部選項（訊息、聯系人、發現和我）所顯示的對應內容，所以我們一共要準備5個中間部分界面用來輪流使用，
2.關于如何展示這五個界面我使用了6個FrameLaout
先選一個FrameLaout作為中間部分界面的載體，讓后把其余5個用來展示界面切換的控制元件存放到這個主載體中進行集中控制，
關于底部布局
底部狀態欄我們要同時展示四個圖示和其對應的文本，每一個單獨的選擇欄之間是呈現縱向分布的，每個狀態欄里的圖示和文本是呈現橫向分布的，所以在這里我是
1.先使用一個LinearLaout(horizontal)用來存放四個狀態欄（訊息、聯系人、發現和我）
2.在使用四個LinearLaout(vertical)分別用來實作四個狀態欄具體的展示
3.在四個LinearLaout(vertical)里各自使用一個ImageView和textView用來顯示圖示和對應文字
這里要注意的是我們的四個狀態欄的位置都是均勻分布的，所以我們要在每一個LinearLaout(vertical)標簽里面設定一個屬性來使得四個圖示的間距都相同
android:layout_weight="1"
4.關于圖示的外形，這個我們除了使用Android Studio里自帶圖示外，我們還可以自己添加自己喜歡的圖示步驟如下：
（1）當我們把imageView拖到指定的地方后會彈出一個視窗
（2）我們點擊左上角的?圖示選著紅框的這個進入一個新的界面
（3）在紅色標記處我們可以選擇自己自定義的圖片的路徑來添加圖示
（4）還有一種更為間的方法就是把事先準備好的圖片直接拖入mipmap進行使用
以上的布局設計都是在activity_main.xml檔案里實作的，接下來的功能效果實作均在MainActivity.java里實作
二、具體技術功能實作
初始化控制元件
1.這里的初始化控制元件指的是創建布局檔案中某些被使用控制元件的型別對應的物件來與那些用于展示界面的控制元件建立聯系，就是通過這些創建的物件用于呼叫那些控制元件來實作各種變化效果及功能，這里我們主要通過findViewById()函式來實作物件和控制元件之間的聯系，
2.先定義我們需要使用的物件
//底端選單欄LinearLayout
private LinearLayout lchat, lfriend, lfind, lmine;
//中間頁面切換展示FrameLayout
private FrameLayout fragment_0,fragment_1,fragment_2,fragment_3,fragment_4;
//底端選單欄Imageview
private ImageView ichat, ifriend, ifind, imine,idog;
//底端文本 textView
private TextView wx_xiaoxi;
private TextView wx_pengyou;
private TextView wx_faxian;
private TextView wx_wo;
3.然后通過findViewById()函式來對控制元件進行初始換，使其與對應控制元件建立聯系
private void InitView(){
lchat = findViewById(R.id.xiaoxi);
lfriend = findViewById(R.id.lianxiren);
lfind = findViewById(R.id.faxian);
lmine = findViewById(R.id.wo);
ichat = findViewById(R.id.weixin_chat);
ifriend = findViewById(R.id.weixin_friend);
ifind = findViewById(R.id.weixin_find);
imine = findViewById(R.id.weixin_mine);
idog = findViewById(R.id.ivdog);
wx_xiaoxi = findViewById(R.id.tv_xiaoxi);
wx_pengyou = findViewById(R.id.tv_pengyou);
wx_faxian = findViewById(R.id.tv_faxian);
wx_wo = findViewById(R.id.tv_wo);
fragment_0 =findViewById(R.id.fra_start);
fragment_1 =findViewById(R.id.fra_xiaoxi);
fragment_2 =findViewById(R.id.fra_lianxiren);
fragment_3 =findViewById(R.id.fra_faxian);
fragment_4 =findViewById(R.id.fra_wo);
}
點擊觸發事件
在切換微信界面時我們是通過點擊對應的位置的圖示來實作內容界面的輪流展示的，并且在我們點擊對應的圖示時，圖示和對應的文字也會產生變化，
1.首先要讓MainActivity繼承一個onClickListener介面用來事件點擊觸發事件，在繼承后需要加入一個onClick函式(下面會用到)，不然會報錯
public class MainActivity extends AppCompatActivity implements View.OnClickListener
2.通過使用setOnClickListener()函式來設定LinearLayout監聽，目的就是當我們點擊這個LinearLayout控制元件里的內容時可以回應與之對應發生的事件
private void InitEvent(){
//設定LinearLayout監聽
lchat.setOnClickListener(this);
lfriend.setOnClickListener(this);
lfind.setOnClickListener(this);
lmine.setOnClickListener(this);
}
3.在之前提到的onClick()函式里撰寫詳細的事件觸發程序
public void onClick(View view) {
//每次點擊之后，將所有的ImageView和TextView設定為未選中
restartButton();
//再根據所選，進行跳轉頁面，并將ImageView和TextView設定為選中
switch(view.getId()){
case R.id.xiaoxi:
ichat.setImageResource(R.mipmap.chat_2);
wx_xiaoxi.setTextColor(getResources().getColor(R.color.colorTextViewPress));
fragment_1.setVisibility(View.VISIBLE);
break;
case R.id.lianxiren:
ifriend.setImageResource(R.mipmap.linkmenblack_2);
wx_pengyou.setTextColor(getResources().getColor(R.color.colorTextViewPress));
fragment_2.setVisibility(View.VISIBLE);
break;
case R.id.faxian:
ifind.setImageResource(R.mipmap.find_2);
wx_faxian.setTextColor(getResources().getColor(R.color.colorTextViewPress));
fragment_3.setVisibility(View.VISIBLE);
break;
case R.id.wo:
imine.setImageResource(R.mipmap.mine_2);
wx_wo.setTextColor(getResources().getColor(R.color.colorTextViewPress));
fragment_4.setVisibility(View.VISIBLE);
idog.setImageResource(R.mipmap.dog_2);
idog.setScaleX(1.2f);
idog.setScaleY(0.95f);
break;
}
}
在上面的onClick()函式使用了很多函式下面逐個介紹核心函式
（1）setImageResource()是用來設定圖片源的，當我們點擊底部圖示時圖示會變色，實際上就時把點擊前的圖示換成了點擊后的圖示(最后環節會展示)，
（2）setTextColor(）用來設定字體的顏色，使用這個來改變我們點擊后字體的顏色變化，
（3）getColor()用來獲取具體顏色樣式，具體顏色樣式可以事先在valus目錄下的colors.xml檔案里建立
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="purple_200">#FFBB86FC</color>
<color name="purple_500">#FF6200EE</color>
<color name="purple_700">#FF3700B3</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorTextViewNormal">#7F7F7F</color>
<color name="colorTextViewPress">#3ECA07</color>
</resources>
（4）setVisibility()函式是我們實作中間部分內容切換的重要函式，它的功能是控制framLaout控制元件里的所有內容是否展示
（5）restartButton()是我自己定義的一個函式，用于每次點擊圖示觸發事件改變界面效果之前重新設定各個控制元件的展示狀態，也是我們實作界面變化效果的核心函式
//重新設定ImageView和TextView的狀態
private void restartButton(){
//設定為未點擊狀態
ichat.setImageResource(R.mipmap.chat_1);
ichat.setScaleX(0.9f);
ichat.setScaleY(0.9f);
ifriend.setImageResource(R.mipmap.linkmenblack);
ifriend.setScaleY(0.75f);
ifriend.setScaleX(0.75f);
ifind.setImageResource(R.mipmap.find);
ifind.setScaleX(0.825f);
ifind.setScaleY(0.825f);
imine.setImageResource(R.mipmap.mine);
imine.setScaleX(0.75f);
imine.setScaleY(0.8f);
fragment_0.setVisibility(View.INVISIBLE);
fragment_1.setVisibility(View.INVISIBLE);
fragment_2.setVisibility(View.INVISIBLE);
fragment_3.setVisibility(View.INVISIBLE);
fragment_4.setVisibility(View.INVISIBLE);
//設定為灰色
wx_xiaoxi.setTextColor(getResources().getColor(R.color.black));
wx_pengyou.setTextColor(getResources().getColor(R.color.black));
wx_faxian.setTextColor(getResources().getColor(R.color.black));
wx_wo.setTextColor(getResources().getColor(R.color.black));
}
三、成品展示
初始界面
訊息界面
聯系人界面
發現界面
我的界面
最后簡單感想：
千萬不要隨便洗掉那些看似無用的檔案！我當初看見res目錄下一個看似無處無害的檔案給洗掉了讓后就報了一個錯誤
這個錯誤后我直接蒙了，也不知道怎么解決，瞎轉悠半天才在下面這個地方找到錯誤原因，果然要想找錯誤bug還是看下面錯誤提示欄來的快，
這次微信界面的圖示都是自己手畫的（android自帶的圖示太笨了），雖然畫出來的圖示和實際微信的圖示差距有點大，不過用著自己制作的圖示還是蠻舒服的，
聯系人圖示的三條桿都畫歪了不知道看不看得出來，
這是上面專案的原始碼地址（沒有使用Fragment）
這里是一個改進版的app門戶專案原始碼地址（使用了Fragment進行頁面切換）
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/308891.html
標籤：其他