首先，我們已經(jīng)知道微信布局是包含三塊部分，一塊頂部，一塊底部，剩下的就是中間的部分。最終實現(xiàn)的效果就是點擊底部的圖標(biāo)，中間的內(nèi)容區(qū)域相應(yīng)變化，圖標(biāo)顏色也相應(yīng)的變化；左右滑動內(nèi)容區(qū)域，內(nèi)容區(qū)域變化，底部相應(yīng)的圖標(biāo)顏色也相應(yīng)的變化，在這里我們只講述ViewPager部分，頂部和底部的設(shè)計，可以觀看代碼自行了解。
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組件，并設(shè)置它的PagerAdapter，需要重寫PagerAdapter
mAdapter = new PagerAdapter() {
//PagerAdapter只緩存三張要顯示的圖片，如果滑動圖片超出了緩存范圍，就會調(diào)用這個方法，將圖片銷毀
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mView.get(position));
}
// 當(dāng)要顯示的圖片可以進(jìn)行緩存時，會調(diào)用這個方法進(jìn)行圖片的初始化，我們將要顯示的ImageView加入到ViewGroup，然后作為返回值即可
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = mView.get(position);
container.addView(view);
return view;
}
// 需要獲得滑動控件的數(shù)量，這里我們以滑動的微信界面為例，那么這里就應(yīng)該展示的微信界面圖片的ImageView數(shù)量
@Override
public int getCount() {
return mView.size();
}
//來判斷顯示的是否是同一張圖片，這里我們將兩個參數(shù)比較返回即可
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
};
mViewPager.setAdapter(mAdapter);
ViewPager的適配器就是PagerAdapter，它的基類提供適配器來填充ViewPager內(nèi)部。其實ViewPager 應(yīng)該和Fragment一起使用，至少google官方是這么想的，但是在3.0之下，我們沒有必要這樣做。當(dāng)你實現(xiàn)一個PagerAdapter時，一般至少需要覆蓋以下四種方法：
- destroyItem(ViewGroup container, int position, Object object)
- isViewFromObject(View view, Object object)
- instantiateItem(ViewGroup container, int position)
- getCount()
4.為底部圖標(biāo)（ImageView類型）、ViewPager 添加點擊事件
//點擊事件就是實現(xiàn)tab切換時，下面圖標(biāo)顏色的變化
private void initEvents() {
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAdress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
//當(dāng)ViewPager的內(nèi)容區(qū)域發(fā)生變化時，相應(yīng)的底部圖標(biāo)也發(fā)生變化，重寫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) {
}
});
}
//用來實現(xiàn)底部圖標(biāo)點擊事件
@Override
public void onClick(View view) {
//實現(xiàn)之前，首先把所有底部圖標(biāo)變?yōu)榘瞪? resetImg();
//然后根據(jù)點擊的是哪個圖標(biāo)再進(jìn)行相應(yīng)圖標(biāo)變成亮色
switch (view.getId()) {
case R.id.id_tab_weixin:
//如果點擊的是微信圖標(biāo)，就跳轉(zhuǎn)到第一個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;
}
}
結(jié)果展示
在中間區(qū)域可以左右滑動，內(nèi)容區(qū)域會相應(yīng)的變化，底部按鈕也會相應(yīng)的變化
