我們實現(xiàn)的是一個微信tab主界面，效果如下：
頁面布局
由上面效果圖展示可以得知，該布局最終可由三部分組成，頂部、中間可變內(nèi)容區(qū)域、底部
1.頂部布局，頂部布局非常簡單，就是一個LinearLayout，為其設置一個背景圖，然后里面包含一個TextView，代碼如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@drawable/title_bar"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold"
/>
</LinearLayout>
2.第一步，首先要在主界面布局activity_main.xml中添加FrameLayout代碼如下：
<FrameLayout
android:id="@+id/id_container"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
這里只是給FrameLayout的id設置成id_container，并沒有在里面添加任何具體的內(nèi)容，因為具體的內(nèi)容要在后面動態(tài)的添加的。這里設置android:layout_weight="1"意思是，除了頂部和底部（因為頂部和底部高度都設定好了）的高度外，其余的高度都被FramLayout占有。
3.底部設計，我們可以這樣設計底部：可以將底部（水平的LinearLayout）分成四塊（四個垂直的LinearLayout），每一塊（LinearLayout）包含一個ImageView和一個TextView.ImageView用來顯示當前Tab圖標，TextView用來顯示當前Tab的標題，代碼如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/bottom_bar"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_weixin_pressed" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#fff" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_find_frd_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="#fff" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_address_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_address_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通訊錄"
android:textColor="#fff" />
</LinearLayout>
<LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<ImageButton
android:id="@+id/id_tab_setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/tab_settings_normal" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="設置"
android:textColor="#fff" />
</LinearLayout>
</LinearLayout>
代碼實現(xiàn)控制
1.Fragment的實現(xiàn)
因為我們有四個Tab，正常來說，我們要實現(xiàn)四個Fragment和他們的布局，如下（以第一個微信Tab為例）：
public class WeixinFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01, container, false);
}
}
其他三個也依次創(chuàng)建其他三個布局的Fragment，這是一般做法。因為這四個布局的Fragment的代碼基本一致，所以我考慮能不能只寫一個Fragment就可以實現(xiàn)這四個Fragment的功能，最終寫下以下代碼，敬請指導：
public class WeixinFragment extends Fragment {
private int layoutID;
//優(yōu)化后的HashMap
SparseArray<View> views;
View rootView;
/**
* 構造帶參構造函數(shù)
* @param layoutID 布局的ID
* @param context 傳入上下文
*/
public WeixinFragment(int layoutID, Context context) {
this.layoutID = layoutID;
views = new SparseArray<>();
rootView = LayoutInflater.from(context).inflate(layoutID,null);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return rootView;
}
}
2.在MainACtivity中首先初始化4個Fragment
fragments是HashMap<Integer, WeixinFragment> 類型，初始化4個Fragment，就是將這個4個Tab對應的布局加入到HashMap中。
private void initFragments() {
fragments.put(R.layout.tab01, new WeixinFragment(R.layout.tab01, this));
fragments.put(R.layout.tab02, new WeixinFragment(R.layout.tab02, this));
fragments.put(R.layout.tab03, new WeixinFragment(R.layout.tab03, this));
fragments.put(R.layout.tab04, new WeixinFragment(R.layout.tab04, this));
}
3.初始化控件
private void initView() {
//這四個是底部的四個LinearLayout初始化
mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAdress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting);
//下面四個是底部圖標初始化
mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);
mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);
mSettingnImg = (ImageButton) findViewById(R.id.id_tab_setting_img);
}
4.設置點擊事件
為底部四個LinearLayout設置點擊事件，這樣不管時點擊底部的圖標還是底部的文字部分都會觸發(fā)圖標和內(nèi)容區(qū)域的變化。代碼如下：
private void initEvent() {
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAdress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}
5.onClick方法實現(xiàn)
該方法是設置點擊事件自動生成的，在這里需要我們判斷是哪個觸發(fā)了事件，然后執(zhí)行相應的操作。比如，如果是點擊了底部微信的圖標（或文字）時，則應將微信的圖標變亮，并將中間內(nèi)容區(qū)域變成相應區(qū)域，如剛開始的效果展示圖。代碼如下：
@Override
public void onClick(View view) {
//在觸發(fā)相應事件之前，應先將所有圖標變暗，該函數(shù)就是實現(xiàn)該功能
resetImg();
switch (view.getId()) {
case R.id.id_tab_weixin:
//如果點擊的是微信圖標，就跳轉到第一個tab
setSelect(0);
break;
case R.id.id_tab_frd:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_setting:
setSelect(3);
break;
default:
break;
}
}
/**
* 將所有的圖片切換為暗色
*/
private void resetImg() {
mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);
mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);
mAddressImg.setImageResource(R.drawable.tab_address_normal);
mSettingnImg.setImageResource(R.drawable.tab_settings_normal);
}
6.setSelect函數(shù)實現(xiàn)
該函數(shù)是用來實現(xiàn)根據(jù)點擊底部圖標進行中間FramLayout內(nèi)容變化的控制部分
private void setSelect(int i) {
//將所選圖片變?yōu)榱辽? //切換對應的內(nèi)容區(qū)域
//首先拿到Fragment的內(nèi)容管理器
FragmentManager fm = getSupportFragmentManager();
//開啟事務
FragmentTransaction transaction = fm.beginTransaction();
//i代表要填充的是哪個頁面
switch (i) {
case 0:
//將FramLayout的內(nèi)容填充為Tab01 transaction.replace(R.id.id_container,fragments.get(R.layout.tab01));
//將圖標微信變成亮色
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.replace(R.id.id_container,fragments.get(R.layout.tab02));
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
//如果mTab01沒有初始化，則進行初始化
transaction.replace(R.id.id_container,fragments.get(R.layout.tab03));
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
transaction.replace(R.id.id_container,fragments.get(R.layout.tab04));
mSettingnImg.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
//最后事務進行提交
transaction.commit();
}
