首先，我们已经知道微信布局是包含三块部分，一块顶部，一块底部，剩下的就是中间的部分。最终实现的效果就是点击底部的图标，中间的内容区域相应变化，图标颜色也相应的变化；左右滑动内容区域，内容区域变化，底部相应的图标颜色也相应的变化，在这里我们只讲述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;
}
}
结果展示
在中间区域可以左右滑动，内容区域会相应的变化，底部按钮也会相应的变化
网友评论