本節(jié)將結(jié)合上一節(jié)所講的內(nèi)容實(shí)現(xiàn)仿微信的Tab切換效果，下面通過代碼進(jìn)行講解。
主布局文件（activity_main.xml）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom" />
</LinearLayout>主布局包括一個(gè)ViewPager控件和導(dǎo)入的bottom布局文件，使用include標(biāo)簽可以導(dǎo)入布局文件，將通用布局抽取為一個(gè)布局文件，這樣更有利于系統(tǒng)后期維護(hù)。
底部欄文件（bottom.xml）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#ffffffff"
android:orientation="horizontal" >
<LinearLayout
android:id="@+id/ll_chat"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_chat"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#0000"
android:src="@drawable/chat_yes" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#b6b3b3" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_frd"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_frd"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#0000"
android:src="@drawable/frd_no" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通訊錄"
android:textColor="#b6b3b3" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_find"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_find"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#0000"
android:src="@drawable/find_no" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="發(fā)現(xiàn)"
android:textColor="#b6b3b3" />
</LinearLayout>
<LinearLayout
android:id="@+id/ll_me"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/img_me"
android:layout_width="40dp"
android:layout_height="40dp"
android:background="#0000"
android:src="@drawable/me_no" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我"
android:textColor="#b6b3b3" />
</LinearLayout>
</LinearLayout>底部欄布局文件采用線性布局的方式，主要包括四個(gè)LinearLayout，設(shè)置這四個(gè)LinearLayout的layout_width值為0dp，并設(shè)置其layout_weight屬性值為1，可以讓四個(gè)LinearLayout平分屏幕寬度。同時(shí)，每個(gè)LinearLayout中包含了一個(gè)ImageView用于顯示圖片，一個(gè)TextView用于顯示文本信息。
子View布局文件（tab01.xml）
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="聊天頁(yè)"
android:textSize="30sp" >
</TextView>
</LinearLayout>本例ViewPager共包含了四個(gè)子View，每個(gè)子View只是TextView文本屬性不同，因此，其余tab02-tab04的代碼就不再貼出。 Fragment代碼（MyFragment1.java） 本例使用ViewPager+FragmentStatePagerAdapter來實(shí)現(xiàn)，因此需要準(zhǔn)備Fragment類的數(shù)據(jù)集：
public class MyFragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab01,null);
}
}同樣只是這些Fragment數(shù)據(jù)集只是其中布局文件的不同，MyFragment2-MyFragment4的代碼就不再貼出。 適配器類代碼（ViewPagerFragmentAdapter.java）
public class ViewPagerFragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> datas;
public ViewPagerFragmentAdapter(FragmentManager fm,List<Fragment> datas) {
super(fm);
this.datas=datas;
}
@Override
public Fragment getItem(int position) {//返回子View對(duì)象
return datas.get(position);
}
@Override
public int getCount() {//返回子View的個(gè)數(shù)
return datas.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {//初始子View方法
return super.instantiateItem(container, position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {//銷毀子View
super.destroyItem(container, position, object);
}
}繼承自FragmentStatePagerAdapter，說明當(dāng)子View不在當(dāng)前窗口時(shí)，可以被內(nèi)存回收，同時(shí)覆寫了四個(gè)必須要實(shí)現(xiàn)的方法。由于這些方法在上節(jié)中已經(jīng)講解，這里就不再重復(fù)。
MainActivity代碼（MainActivity.java）
public class MainActivity extends FragmentActivity implements OnClickListener {
//主要要繼承自FragmentActivity,這樣才能在初始適配器類是使用getSupportFragmentManager方法獲取FragmentManager對(duì)象
private ViewPager mViewPager;
private List<Fragment> datas;
private ViewPagerFragmentAdapter viewPagerFragmentAdapter;
private LinearLayout mLLChat,mLLFrd,mLLFind,mLLMe;
private ImageView mImageViewChat,mImageViewFrd,mImageViewFind,mImageViewMe;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initDatas();//初始化數(shù)據(jù)集
initView();// 初始化控件
initEvent();// 注冊(cè)單擊監(jiān)聽
viewPagerFragmentAdapter=new ViewPagerFragmentAdapter(getSupportFragmentManager(),datas);//初始化適配器類
mViewPager.setAdapter(viewPagerFragmentAdapter);
}
private void initDatas() {
datas=new ArrayList<Fragment>();
datas.add(new MyFragment1());
datas.add(new MyFragment2());
datas.add(new MyFragment3());
datas.add(new MyFragment4());
}
private void initEvent() {
mLLChat.setOnClickListener(this);
mLLFrd.setOnClickListener(this);
mLLFind.setOnClickListener(this);
mLLMe.setOnClickListener(this);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {//ViewPager滑動(dòng)切換監(jiān)聽
@Override
public void onPageSelected(int arg0) {
int currentItem=mViewPager.getCurrentItem();
resetImag();
switch (currentItem) {
case 0:
mImageViewChat.setImageResource(R.drawable.chat_yes);
break;
case 1:
mImageViewFrd.setImageResource(R.drawable.frd_yes);
break;
case 2:
mImageViewFind.setImageResource(R.drawable.find_yes);
break;
case 3:
mImageViewMe.setImageResource(R.drawable.me_yes);
break;
default:
break;
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.viewpager);
mLLChat = (LinearLayout) findViewById(R.id.ll_chat);
mLLFrd = (LinearLayout) findViewById(R.id.ll_frd);
mLLFind = (LinearLayout) findViewById(R.id.ll_find);
mLLMe = (LinearLayout) findViewById(R.id.ll_me);
mImageViewChat = (ImageView) findViewById(R.id.img_chat);
mImageViewFrd = (ImageView) findViewById(R.id.img_frd);
mImageViewFind = (ImageView) findViewById(R.id.img_find);
mImageViewMe = (ImageView) findViewById(R.id.img_me);
}
@Override
public void onClick(View v) {
resetImag();
switch (v.getId()) {
case R.id.ll_chat:
mViewPager.setCurrentItem(0);
mImageViewChat.setImageResource(R.drawable.chat_yes);
break;
case R.id.ll_frd:
mViewPager.setCurrentItem(1);
mImageViewFrd.setImageResource(R.drawable.frd_yes);
break;
case R.id.ll_find:
mViewPager.setCurrentItem(2);
mImageViewFind.setImageResource(R.drawable.find_yes);
break;
case R.id.ll_me:
mViewPager.setCurrentItem(3);
mImageViewMe.setImageResource(R.drawable.me_yes);
break;
default:
break;
}
}
private void resetImag() {//重置圖片
mImageViewChat.setImageResource(R.drawable.chat_no);
mImageViewFrd.setImageResource(R.drawable.frd_no);
mImageViewFind.setImageResource(R.drawable.find_no);
mImageViewMe.setImageResource(R.drawable.me_no);
}
}這里實(shí)現(xiàn)了底部欄中四個(gè)LinearLayout的單擊事件監(jiān)聽，用來處理圖片切換邏輯。同時(shí)實(shí)現(xiàn)了OnPageChangeListener接口，監(jiān)聽頁(yè)面切換，更改對(duì)應(yīng)的底部欄圖片。記得每次處理圖片更改時(shí)都需要先調(diào)用resetImag（圖片初始化方法），否則可能會(huì)出現(xiàn)連續(xù)幾個(gè)底部欄菜單被選中的情況，讀者可以自行測(cè)試。
在四個(gè)LinearLayout單擊事件處理時(shí)，用到了ViewPager的setCurrentItem方法，這個(gè)方法可以用來設(shè)置ViewPager的當(dāng)前頁(yè)。 運(yùn)行項(xiàng)目實(shí)例如下：
http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/18-1.png" alt="這里寫圖片描述" />
http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/18-2.png" alt="這里寫圖片描述" />
這個(gè)實(shí)例很實(shí)用，可以直接用到項(xiàng)目的初始界面設(shè)計(jì)中。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多