Android之仿微信Tab滑动

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

 

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

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:layout_width="match_parent"
 5     android:layout_height="40.0dip"
 6     android:background="@drawable/topbar_bg" >
 7 
 8     <LinearLayout
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:gravity="center"
12         android:orientation="horizontal"
13         android:paddingLeft="10.0dip" >
14 
15         <ImageView
16             android:layout_width="30.0dip"
17             android:layout_height="wrap_content"
18             android:layout_marginRight="5.0dip"
19             android:contentDescription="@string/app_name"
20             android:src="@drawable/topbar_icon" />
21 
22         <TextView
23             android:layout_width="wrap_content"
24             android:layout_height="wrap_content"
25             android:text="微信"
26             android:textColor="#d3d3d3"
27             android:textSize="18.0sp" />
28     </LinearLayout>
29 
30     <LinearLayout
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:layout_alignParentRight="true"
34         android:orientation="horizontal" >
35 
36         <ImageView
37             android:layout_width="30.0dip"
38             android:layout_height="wrap_content"
39             android:layout_marginRight="5.0dip"
40             android:contentDescription="@string/app_name"
41             android:src="@drawable/topbar_search" />
42 
43         <ImageView
44             android:layout_width="30.0dip"
45             android:layout_height="wrap_content"
46             android:layout_marginRight="5.0dip"
47             android:contentDescription="@string/app_name"
48             android:src="@drawable/topbar_add" />
49 
50         <ImageView
51             android:layout_width="30.0dip"
52             android:layout_height="wrap_content"
53             android:layout_marginRight="5.0dip"
54             android:contentDescription="@string/app_name"
55             android:src="@drawable/topbar_more" />
56     </LinearLayout>
57 
58 </RelativeLayout>

追上面一条的布局代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="30.0dip"
 5     android:background="#eee"
 6     android:orientation="vertical" >
 7 
 8     <LinearLayout
 9         android:layout_width="fill_parent"
10         android:layout_height="27.0dip"
11         android:orientation="horizontal" >
12 
13         <LinearLayout
14             android:id="@+id/tabbar_chat_layout"
15             android:layout_width="0.0dip"
16             android:layout_height="match_parent"
17             android:layout_weight="1"
18             android:gravity="center"
19             android:orientation="horizontal" >
20 
21             <TextView
22                 android:id="@+id/tabbar_tchat"
23                 android:layout_width="wrap_content"
24                 android:layout_height="wrap_content"
25                 android:text="聊天"
26                 android:textColor="#008000"
27                 android:textSize="15.0sp" />
28         </LinearLayout>
29 
30         <LinearLayout
31             android:layout_width="0.0dip"
32             android:layout_height="match_parent"
33             android:layout_weight="1"
34             android:gravity="center" >
35 
36             <TextView
37                 android:id="@+id/tabbar_tdiscover"
38                 android:layout_width="wrap_content"
39                 android:layout_height="wrap_content"
40                 android:text="发现"
41                 android:textColor="#ff000000"
42                 android:textSize="15.0sp" />
43         </LinearLayout>
44 
45         <LinearLayout
46             android:layout_width="0.0dip"
47             android:layout_height="match_parent"
48             android:layout_weight="1"
49             android:gravity="center" >
50 
51             <TextView
52                 android:id="@+id/tabbar_tconn"
53                 android:layout_width="wrap_content"
54                 android:layout_height="wrap_content"
55                 android:text="通讯录"
56                 android:textColor="#ff000000"
57                 android:textSize="15.0sp" />
58         </LinearLayout>
59     </LinearLayout>
60 
61     <ImageView
62         android:id="@+id/tabbar_tabline"
63         android:layout_width="100.0dip"
64         android:layout_height="3.0dip"
65         android:background="@drawable/tabline"
66         android:contentDescription="@string/app_name" />
67 
68 </LinearLayout>

标签条的布局代码

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <include layout="@layout/sideworks_topbar" />
 8 
 9     <include layout="@layout/sideworks_tabbar" />
10 
11     <android.support.v4.view.ViewPager
12         android:id="@+id/viewpager"
13         android:layout_width="fill_parent"
14         android:layout_height="0.0dip"
15         android:layout_weight="1" >
16     </android.support.v4.view.ViewPager>
17 
18 </LinearLayout>

MainActivity界面布局代码

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:background="#ffffffff" >
 6 
 7     <TextView
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:layout_centerInParent="true"
11         android:text="This is CHAT fragment page."
12         android:textColor="#ff000000"
13         android:textSize="22.0sp" />
14 
15 </RelativeLayout>

第一个标签页的布局代码（三个标签页布局一样，这里只列出第一个）

  1 public class MainActivity extends FragmentActivity {
  2     private ViewPager viewPager;
  3     private FragmentPagerAdapter adapter;
  4     private List<Fragment> data;
  5     private TextView tChat, tDiscover, tConn;
  6     private LinearLayout chatLayout;
  7     private BadgeView badgeView;
  8     private ImageView tabLine;
  9     private int widthTabLine;
 10     private int currentPageIndex;
 11 
 12     @Override
 13     protected void onCreate(Bundle savedInstanceState) {
 14         super.onCreate(savedInstanceState);
 15         setContentView(R.layout.activity_main);
 16 
 17         initView();
 18     }
 19 
 20     // 设置TabLine长度占屏幕的三分之一
 21     private void initTabLine() {
 22         // 获取屏幕宽度1/3的长度
 23         DisplayMetrics metrics = new DisplayMetrics();
 24         getWindow().getWindowManager().getDefaultDisplay().getMetrics(metrics);
 25         widthTabLine = metrics.widthPixels / 3;
 26         // 设置宽度占1/3
 27         LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
 28         layoutParams.width = widthTabLine;
 29         tabLine.setLayoutParams(layoutParams);
 30     }
 31 
 32     private void initView() {
 33         viewPager = (ViewPager) findViewById(R.id.viewpager);
 34         tChat = (TextView) findViewById(R.id.tabbar_tchat);
 35         tDiscover = (TextView) findViewById(R.id.tabbar_tdiscover);
 36         tConn = (TextView) findViewById(R.id.tabbar_tconn);
 37         chatLayout = (LinearLayout) findViewById(R.id.tabbar_chat_layout);
 38         tabLine = (ImageView) findViewById(R.id.tabbar_tabline);
 39 
 40         initTabLine();
 41 
 42         data = new ArrayList<Fragment>();
 43 
 44         // ViewPager的三个页面
 45         ChatTabPage chatTabPage = new ChatTabPage();
 46         DiscoverTabPage discoverTabPage = new DiscoverTabPage();
 47         ConnTabPage connTabPage = new ConnTabPage();
 48         data.add(chatTabPage);
 49         data.add(discoverTabPage);
 50         data.add(connTabPage);
 51 
 52         adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
 53             @Override
 54             public int getCount() {
 55                 return data.size();
 56             }
 57 
 58             @Override
 59             public Fragment getItem(int position) {
 60                 return data.get(position);
 61             }
 62         };
 63 
 64         viewPager.setAdapter(adapter);
 65 
 66         // ViewPager滑动结束后，改变Tabbar中的字体颜色
 67         viewPager.setOnPageChangeListener(new OnPageChangeListener() {
 68             @Override
 69             public void onPageSelected(int position) {
 70                 resetTextView();
 71                 switch (position) {
 72                 case 0:
 73                     // 当滑动回第一个页面时，在“聊天”旁边增加一个“七条信息”的提示
 74                     if (badgeView != null) {
 75                         chatLayout.removeView(badgeView);
 76                     }
 77                     badgeView = new BadgeView(MainActivity.this);
 78                     tChat.setTextColor(Color.parseColor("#008000"));
 79                     badgeView.setBadgeCount(7);
 80                     chatLayout.addView(badgeView);
 81                     break;
 82                 case 1:
 83                     tDiscover.setTextColor(Color.parseColor("#008000"));
 84                     break;
 85                 case 2:
 86                     tConn.setTextColor(Color.parseColor("#008000"));
 87                     break;
 88                 }
 89                 currentPageIndex = position;
 90             }
 91 
 92             @Override
 93             public void onPageScrolled(int position, float positionOffset, int positionOffsetPx) {
 94                 // TabLine随着手指滑动而变化位置
 95                 LayoutParams layoutParams = (LayoutParams) tabLine.getLayoutParams();
 96                 if (currentPageIndex == position) {
 97                     layoutParams.leftMargin = (int) ((positionOffset + currentPageIndex) * widthTabLine);
 98                 } else {
 99                     layoutParams.leftMargin = (int) ((positionOffset - 1 + currentPageIndex) * widthTabLine);
100                 }
101                 tabLine.setLayoutParams(layoutParams);
102             }
103 
104             @Override
105             public void onPageScrollStateChanged(int arg0) {
106 
107             }
108         });
109     }
110 
111     // 重置三个TextView的字体颜色
112     protected void resetTextView() {
113         tChat.setTextColor(Color.BLACK);
114         tDiscover.setTextColor(Color.BLACK);
115         tConn.setTextColor(Color.BLACK);
116     }
117 }

MainActivity中的JAVA代码