首先，我們已經知道微信布局是包含三塊部分，一塊頂部，一塊底部，剩下的就是中間的部分。最終實現的效果就是點擊底部的圖標，中間的內容區域相應變化，圖標顏色也相應的變化；左右滑動內容區域，內容區域變化，底部相應的圖標顏色也相應的變化，在這里我們只講述ViewPager部分，頂部和底部的設計，可以觀看代碼自行了解。
ViewPager
ViewPager的功能就是可以使視圖滑動，使用它需要三個步驟：
1.在布局文件中加入
<android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#fff">
</android.support.v4.view.ViewPager>
2.加載要顯示的頁面
LayoutInflater mInflater = LayoutInflater.from(this);
View tab01 = mInflater.inflate(R.layout.tab01, null);
View tab02 = mInflater.inflate(R.layout.tab02, null);
View tab03 = mInflater.inflate(R.layout.tab03, null);
View tab04 = mInflater.inflate(R.layout.tab04, null);
//private List<View> mView = new ArrayList<View>();
mView.add(tab01);
mView.add(tab02);
mView.add(tab03);
mView.add(tab04);
3.在Activity中實例化ViewPager組件，并設置它的PagerAdapter，需要重寫PagerAdapter
mAdapter = new PagerAdapter() {
//PagerAdapter只緩存三張要顯示的圖片，如果滑動圖片超出了緩存范圍，就會調用這個方法，將圖片銷毀
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mView.get(position));
}
// 當要顯示的圖片可以進行緩存時，會調用這個方法進行圖片的初始化，我們將要顯示的ImageView加入到ViewGroup，然后作為返回值即可
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mView.get(position);
container.addView(view);
return view;
}
// 需要獲得滑動控件的數量，這里我們以滑動的微信界面為例，那么這里就應該展示的微信界面圖片的ImageView數量
@Override
public int getCount() {
return mView.size();
}
//來判斷顯示的是否是同一張圖片，這里我們將兩個參數比較返回即可
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
mViewPager.setAdapter(mAdapter);
ViewPager的適配器就是PagerAdapter，它的基類提供適配器來填充ViewPager內部。其實ViewPager 應該和Fragment一起使用，至少google官方是這么想的，但是在3.0之下，我們沒有必要這樣做。當你實現一個PagerAdapter時，一般至少需要覆蓋以下四種方法：
- destroyItem(ViewGroup container, int position, Object object)
- isViewFromObject(View view, Object object)
- instantiateItem(ViewGroup container, int position)
- getCount()
4.為底部圖標（ImageView類型）、ViewPager 添加點擊事件
//點擊事件就是實現tab切換時，下面圖標顏色的變化
private void initEvents() {
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAdress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
//當ViewPager的內容區域發生變化時，相應的底部圖標也發生變化，重寫onPageSelected方法
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
int currentItem = mViewPager.getCurrentItem();
resetImg();
switch (currentItem) {
case 0:
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
mSettingnImg.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
//用來實現底部圖標點擊事件
@Override
public void onClick(View view) {
//實現之前，首先把所有底部圖標變為暗色
resetImg();
//然后根據點擊的是哪個圖標再進行相應圖標變成亮色
switch (view.getId()) {
case R.id.id_tab_weixin:
//如果點擊的是微信圖標，就跳轉到第一個tab
mViewPager.setCurrentItem(0);
mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);
break;
case R.id.id_tab_frd:
mViewPager.setCurrentItem(1);
mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case R.id.id_tab_address:
mViewPager.setCurrentItem(2);
mAddressImg.setImageResource(R.drawable.tab_address_pressed);
break;
case R.id.id_tab_setting:
mViewPager.setCurrentItem(3);
mSettingnImg.setImageResource(R.drawable.tab_settings_pressed);
break;
default:
break;
}
}
結果展示
在中間區域可以左右滑動，內容區域會相應的變化，底部按鈕也會相應的變化
