仿微信4.2滑动Tab效果

一、简要介绍

原文参考：微信4.2滑动Tab

仿微信4.2滑动Tab效果，主要是利用ViewPager、Fragment以及开源项目BadgeView实现。

二、具体使用步骤

1、ViewPagerr用于实现多页面的切换效果，该类存在于Google的兼容包android-support-v4.jar里面。具体使用，分三个步骤：

a:布局文件中添加，代码如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <include layout="@layout/navigation" />
    <-- 添加ViewPager -->
    <android.support.v4.view.ViewPager
        android:id="@+id/main_view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

b:为ViewPager添加需要显示的页面，这里使用的是继承自Fragment的View，代码如下:

1
2
3
4
5
6
7
8
public class Page1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        return inflater.inflate(R.layout.page1, container, false);
    }
}
1
2
3
4
mPages = new ArrayList<Fragment>();
mPages.add(new Page1());
mPages.add(new Page2());
mPages.add(new Page3());

c:实例化PageAdapter，并为ViewPager加载PageAdapter，这里我们使用的是FragmentPagerAdapter代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()){
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mPages.size();
    }
    @Override
    public Fragment getItem(int arg0) {
        // TODO Auto-generated method stub
        return mPages.get(arg0);
    }
};
mViewPager.setAdapter(mAdapter);

需要实现滑动的时候动画效果，还需要使用监听ViewPager滑动事件，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        initColor();
        switch (arg0) {
        case 0:
            tView1.setTextColor(Color.parseColor("#008000"));
            break;
        case 1:
            tView2.setTextColor(Color.parseColor("#008000"));
            break;
        case 2:
            tView3.setTextColor(Color.parseColor("#008000"));
            break;
        default:
            break;
        }
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub
        LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) mLine.getLayoutParams();
        layoutParams.leftMargin = arg0 * oneWidth + (int)(arg1 * oneWidth);
        mLine.setLayoutParams(layoutParams);//根据滑动设置导航下方的提示条（设置该view的margin值）
    }
    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub
    }
});

2、BadgeView的使用

BadgeView用于显示消息提醒数目标记，使用方法很简单：实例化BadgeView对象-设置相关属性-设置消息数目-将该BadgeView添加到要显示的View中，示例代码如下：

1
2
3
mBadgeView = new BadgeView(this);
mBadgeView.setBadgeCount(17);
mLinearLayout.addView(mBadgeView);

三、完整代码

https://github.com/whilu/AndroidUtils/tree/master/WeChatTabDemo