Android之仿微信Tab滑动

这个项目实现了以下的功能：有三个标签聊天、发现和通讯录，左右滑动下面的ViewPager可以切换不同的标签，且标签下面的蓝色条可以随着手指的滑动来实时滑动。另外，如果第二次滑动到“聊天”界面，可以在“聊天”旁边添加一个“七条信息”的BadgeView。具体的运行效果如下。

 

下面上代码。顺便说一下，使用BadgeView的话，我们需要导入它的JAR包，点击这里下载。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="40.0dip"
    android:background="@drawable/topbar_bg" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        android:paddingLeft="10.0dip" >

        <ImageView
            android:layout_width="30.0dip"
            android:layout_height="wrap_content"
            android:layout_marginRight="5.0dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/topbar_icon" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#d3d3d3"
            android:textSize="18.0sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:orientation="horizontal" >

        <ImageView
            android:layout_width="30.0dip"
            android:layout_height="wrap_content"
            android:layout_marginRight="5.0dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/topbar_search" />

        <ImageView
            android:layout_width="30.0dip"
            android:layout_height="wrap_content"
            android:layout_marginRight="5.0dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/topbar_add" />

        <ImageView
            android:layout_width="30.0dip"
            android:layout_height="wrap_content"
            android:layout_marginRight="5.0dip"
            android:contentDescription="@string/app_name"
            android:src="@drawable/topbar_more" />
    </LinearLayout>

</RelativeLayout>

<?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="30.0dip"
    android:background="#eee"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="27.0dip"
        android:orientation="horizontal" >

        <LinearLayout
            android:id="@+id/tabbar_chat_layout"
            android:layout_width="0.0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/tabbar_tchat"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="聊天"
                android:textColor="#008000"
                android:textSize="15.0sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0.0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/tabbar_tdiscover"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="发现"
                android:textColor="#ff000000"
                android:textSize="15.0sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0.0dip"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center" >

            <TextView
                android:id="@+id/tabbar_tconn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="通讯录"
                android:textColor="#ff000000"
                android:textSize="15.0sp" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/tabbar_tabline"
        android:layout_width="100.0dip"
        android:layout_height="3.0dip"
        android:background="@drawable/tabline"
        android:contentDescription="@string/app_name" />

</LinearLayout>

<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/sideworks_topbar" />

    <include layout="@layout/sideworks_tabbar" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0.0dip"
        android:layout_weight="1" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffffff" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="This is CHAT fragment page."
        android:textColor="#ff000000"
        android:textSize="22.0sp" />

</RelativeLayout>

public class MainActivity extends FragmentActivity {
    private ViewPager viewPager;
    private FragmentPagerAdapter adapter;
    private List<Fragment> data;
    private TextView tChat, tDiscover, tConn;
    private LinearLayout chatLayout;
    private BadgeView badgeView;
    private ImageView tabLine;
    private int widthTabLine;
    private int currentPageIndex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    // 设置TabLine长度占屏幕的三分之一
    private void initTabLine() {
        // 获取屏幕宽度1/3的长度
        DisplayMetrics metrics = new DisplayMetrics();
        getWindow().getWindowManager().getDefaultDisplay().getMetrics(metrics);
        widthTabLine = metrics.widthPixels / 3;
        // 设置宽度占1/3
        LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
        layoutParams.width = widthTabLine;
        tabLine.setLayoutParams(layoutParams);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        tChat = (TextView) findViewById(R.id.tabbar_tchat);
        tDiscover = (TextView) findViewById(R.id.tabbar_tdiscover);
        tConn = (TextView) findViewById(R.id.tabbar_tconn);
        chatLayout = (LinearLayout) findViewById(R.id.tabbar_chat_layout);
        tabLine = (ImageView) findViewById(R.id.tabbar_tabline);

        initTabLine();

        data = new ArrayList<Fragment>();

        // ViewPager的三个页面
        ChatTabPage chatTabPage = new ChatTabPage();
        DiscoverTabPage discoverTabPage = new DiscoverTabPage();
        ConnTabPage connTabPage = new ConnTabPage();
        data.add(chatTabPage);
        data.add(discoverTabPage);
        data.add(connTabPage);

        adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public int getCount() {
                return data.size();
            }

            @Override
            public Fragment getItem(int position) {
                return data.get(position);
            }
        };

        viewPager.setAdapter(adapter);

        // ViewPager滑动结束后，改变Tabbar中的字体颜色
        viewPager.setOnPageChangeListener(new OnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                resetTextView();
                switch (position) {
                case 0:
                    // 当滑动回第一个页面时，在“聊天”旁边增加一个“七条信息”的提示
                    if (badgeView != null) {
                        chatLayout.removeView(badgeView);
                    }
                    badgeView = new BadgeView(MainActivity.this);
                    tChat.setTextColor(Color.parseColor("#008000"));
                    badgeView.setBadgeCount(7);
                    chatLayout.addView(badgeView);
                    break;
                case 1:
                    tDiscover.setTextColor(Color.parseColor("#008000"));
                    break;
                case 2:
                    tConn.setTextColor(Color.parseColor("#008000"));
                    break;
                }
                currentPageIndex = position;
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) {
                // TabLine随着手指滑动而变化位置
                LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
                if (currentPageIndex == position) {
                    layoutParams.leftMargin = (int) ((positionOffset + currentPageIndex) * widthTabLine);
                } else {
                    layoutParams.leftMargin = (int) ((positionOffset - 1 + currentPageIndex) * widthTabLine);
                }
                tabLine.setLayoutParams(layoutParams);
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    // 重置三个TextView的字体颜色
    protected void resetTextView() {
        tChat.setTextColor(Color.BLACK);
        tDiscover.setTextColor(Color.BLACK);
        tConn.setTextColor(Color.BLACK);
    }
}