我們實現(xiàn)的是一個微信tab主界面昔头，效果如下：
頁面布局
由上面效果圖展示可以得知，該布局最終可由三部分組成考杉，頂部策精、中間可變內(nèi)容區(qū)域、底部
1.頂部布局崇棠，頂部布局非常簡單咽袜，就是一個LinearLayout，為其設(shè)置一個背景圖枕稀，然后里面包含一個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設(shè)置成id_container萎坷，并沒有在里面添加任何具體的內(nèi)容凹联，因為具體的內(nèi)容要在后面動態(tài)的添加的。這里設(shè)置android:layout_weight="1"意思是哆档，除了頂部和底部（因為頂部和底部高度都設(shè)定好了）的高度外蔽挠，其余的高度都被FramLayout占有。
3.底部設(shè)計瓜浸，我們可以這樣設(shè)計底部：可以將底部（水平的LinearLayout）分成四塊（四個垂直的LinearLayout）澳淑，每一塊（LinearLayout）包含一個ImageView和一個TextView.ImageView用來顯示當(dāng)前Tab圖標(biāo)比原，TextView用來顯示當(dāng)前Tab的標(biāo)題，代碼如下：
<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="設(shè)置"
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的功能兄一，最終寫下以下代碼，敬請指導(dǎo)：
public class WeixinFragment extends Fragment {
private int layoutID;
//優(yōu)化后的HashMap
SparseArray<View> views;
View rootView;
/**
* 構(gòu)造帶參構(gòu)造函數(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對應(yīng)的布局加入到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);
//下面四個是底部圖標(biāo)初始化
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.設(shè)置點擊事件
為底部四個LinearLayout設(shè)置點擊事件渡讼，這樣不管時點擊底部的圖標(biāo)還是底部的文字部分都會觸發(fā)圖標(biāo)和內(nèi)容區(qū)域的變化骂束。代碼如下：
private void initEvent() {
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAdress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}
5.onClick方法實現(xiàn)
該方法是設(shè)置點擊事件自動生成的，在這里需要我們判斷是哪個觸發(fā)了事件成箫，然后執(zhí)行相應(yīng)的操作展箱。比如，如果是點擊了底部微信的圖標(biāo)（或文字）時蹬昌，則應(yīng)將微信的圖標(biāo)變亮混驰，并將中間內(nèi)容區(qū)域變成相應(yīng)區(qū)域，如剛開始的效果展示圖皂贩。代碼如下：
@Override
public void onClick(View view) {
//在觸發(fā)相應(yīng)事件之前栖榨，應(yīng)先將所有圖標(biāo)變暗，該函數(shù)就是實現(xiàn)該功能
resetImg();
switch (view.getId()) {
case R.id.id_tab_weixin:
//如果點擊的是微信圖標(biāo)明刷，就跳轉(zhuǎn)到第一個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ù)點擊底部圖標(biāo)進行中間FramLayout內(nèi)容變化的控制部分
private void setSelect(int i) {
//將所選圖片變?yōu)榱辽? //切換對應(yīng)的內(nèi)容區(qū)域
//首先拿到Fragment的內(nèi)容管理器
FragmentManager fm = getSupportFragmentManager();
//開啟事務(wù)
FragmentTransaction transaction = fm.beginTransaction();
//i代表要填充的是哪個頁面
switch (i) {
case 0:
//將FramLayout的內(nèi)容填充為Tab01 transaction.replace(R.id.id_container,fragments.get(R.layout.tab01));
//將圖標(biāo)微信變成亮色
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;
}
//最后事務(wù)進行提交
transaction.commit();
}
