Android UI-实现底部切换标签（fragment)

Android UI-实现底部切换标签（fragment)

前言

本篇博客要分享的一个UI效果——实现底部切换标签，想必大家在一些应用上面遇到过这种效果了，最典型的就是微信了，可以左右滑动切换页面，也可以点击标签页滑动页面，它们是如何实现的呢，本篇博客为了简单只介绍如何实现点击底部切换标签页。

先来看看我们想实现的效果图：

这样的页面实现起来其实很简单的，首先我们从布局入手：

分为三部分

第一部分：顶部导航栏布局

第二部分：中部显示内容布局

第三部分：底部标签布局

/BottomTabDemo/res/layout/activity_main.xml

[html]  view plain copy

1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     android:layout_width="match_parent"  
3.     android:layout_height="match_parent" >  
4.   
5.     <RelativeLayout  
6.         android:id="@+id/rl_main"  
7.         android:layout_width="match_parent"  
8.         android:layout_height="match_parent" >  
9.   
10.         <!-- 顶部 -->  
11.   
12.         <RelativeLayout  
13.             android:id="@+id/top_tab"  
14.             android:layout_width="match_parent"  
15.             android:layout_height="50dip"  
16.             android:background="@color/topbar_bg" >  
17.   
18.             <ImageView  
19.                 android:id="@+id/iv_logo"  
20.                 android:layout_width="wrap_content"  
21.                 android:layout_height="wrap_content"  
22.                 android:layout_centerInParent="true"  
23.                 android:focusable="false"  
24.                 android:src="@drawable/zhidao_logo"  
25.                 android:contentDescription="@null" />  
26.   
27.         </RelativeLayout>  
28.   
29.         <!-- 底部tab -->  
30.   
31.         <LinearLayout  
32.             android:id="@+id/ll_bottom_tab"  
33.             android:layout_width="match_parent"  
34.             android:layout_height="54dp"  
35.             android:layout_alignParentBottom="true"  
36.             android:gravity="center_vertical"  
37.             android:orientation="horizontal"   
38.             android:baselineAligned="true">  
39.   
40.             <RelativeLayout  
41.                 android:id="@+id/rl_know"  
42.                 android:layout_width="0dp"  
43.                 android:layout_height="wrap_content"  
44.                 android:layout_weight="1.0" >  
45.   
46.                 <ImageView  
47.                     android:id="@+id/iv_know"  
48.                     android:layout_width="wrap_content"  
49.                     android:layout_height="wrap_content"  
50.                     android:layout_centerHorizontal="true"  
51.                     android:src="@drawable/btn_know_nor"   
52.                     android:contentDescription="@null"/>  
53.   
54.                 <TextView  
55.                     android:id="@+id/tv_know"  
56.                     android:layout_width="wrap_content"  
57.                     android:layout_height="wrap_content"  
58.                     android:layout_below="@id/iv_know"  
59.                     android:layout_centerHorizontal="true"  
60.                     android:text="@string/bottom_tab_know"  
61.                     android:textColor="@color/bottomtab_normal"  
62.                     android:textSize="12sp" />  
63.             </RelativeLayout>  
64.   
65.             <RelativeLayout  
66.                 android:id="@+id/rl_want_know"  
67.                 android:layout_width="0dp"  
68.                 android:layout_height="wrap_content"  
69.                 android:layout_weight="1.0" >  
70.   
71.                 <ImageView  
72.                     android:id="@+id/iv_i_want_know"  
73.                     android:layout_width="wrap_content"  
74.                     android:layout_height="wrap_content"  
75.                     android:layout_centerHorizontal="true"  
76.                     android:src="@drawable/btn_wantknow_nor"  
77.                     android:contentDescription="@null" />  
78.   
79.                 <TextView  
80.                     android:id="@+id/tv_i_want_know"  
81.                     android:layout_width="wrap_content"  
82.                     android:layout_height="wrap_content"  
83.                     android:layout_below="@+id/iv_i_want_know"  
84.                     android:layout_centerHorizontal="true"  
85.                     android:text="@string/bottom_tab_wantknow"  
86.                     android:textColor="@color/bottomtab_normal"  
87.                     android:textSize="12sp" />  
88.             </RelativeLayout>  
89.   
90.             <RelativeLayout  
91.                 android:id="@+id/rl_me"  
92.                 android:layout_width="0dp"  
93.                 android:layout_height="wrap_content"  
94.                 android:layout_weight="1.0" >  
95.   
96.                 <ImageView  
97.                     android:id="@+id/iv_me"  
98.                     android:layout_width="wrap_content"  
99.                     android:layout_height="wrap_content"  
100.                     android:layout_centerHorizontal="true"  
101.                     android:src="@drawable/btn_my_nor"  
102.                     android:contentDescription="@null" />  
103.                   
104.   
105.                 <TextView  
106.                     android:id="@+id/tv_me"  
107.                     android:layout_width="wrap_content"  
108.                     android:layout_height="wrap_content"  
109.                     android:layout_below="@+id/iv_me"  
110.                     android:layout_centerHorizontal="true"  
111.                     android:text="@string/bottom_tab_my"  
112.                     android:textColor="@color/bottomtab_normal"  
113.                     android:textSize="12sp" />  
114.             </RelativeLayout>  
115.         </LinearLayout>  
116.   
117.         <!-- 内容部分， fragment切换 -->  
118.   
119.         <LinearLayout  
120.             android:id="@+id/content_layout"  
121.             android:layout_width="match_parent"  
122.             android:layout_height="match_parent"  
123.             android:layout_above="@+id/line"  
124.             android:layout_below="@+id/top_tab"  
125.             android:orientation="vertical" >  
126.         </LinearLayout>  
127.   
128.         <View  
129.             android:id="@+id/line"  
130.             android:layout_width="match_parent"  
131.             android:layout_height="1dp"  
132.             android:layout_above="@id/ll_bottom_tab"  
133.             android:background="@color/line" />  
134.     </RelativeLayout>  
135.       
136. </FrameLayout>  

以上是布局代码，下面就介绍如何通过点击标签切换Fragment：

我们会发现，初始的时候是选中第一个标签页，图片和字体的颜色区别于另外两个标签页，所以我们要做的就是切换标签的时候，就改变标签的状态

主要改两个内容：

• 图片
• 文字颜色

然后我们切换标签显示的是不同的Fragment，这里我们有三个Fragment，所以我们定义三个不同的Fragment界面：

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/ZhidaoFragment.java

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/IWantKnowFragment.java

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MeFragment.java

每个Fragment对应不同的布局文件：

/BottomTabDemo/res/layout/main_tab1_fragment.xml

/BottomTabDemo/res/layout/main_tab2_fragment.xml

/BottomTabDemo/res/layout/main_tab3_fragment.xml

ok，这些定义好之后，我们就在主界面上编写切换的代码了，如何对Fragment进行切换呢，定义以下方法：

[java]  view plain copy

1. /** 
2.      * 添加或者显示碎片 
3.      *  
4.      * @param transaction 
5.      * @param fragment 
6.      */  
7.     private void addOrShowFragment(FragmentTransaction transaction,  
8.             Fragment fragment) {  
9.         if (currentFragment == fragment)  
10.             return;  
11.   
12.         if (!fragment.isAdded()) { // 如果当前fragment未被添加，则添加到Fragment管理器中  
13.             transaction.hide(currentFragment)  
14.                     .add(R.id.content_layout, fragment).commit();  
15.         } else {  
16.             transaction.hide(currentFragment).show(fragment).commit();  
17.         }  
18.   
19.         currentFragment = fragment;  
20.     }  

完整代码如下：

/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MainActivity.java

[java]  view plain copy

1. package com.xiaowu.bottomtab.demo;  
2.   
3.   
4.   
5. import android.os.Bundle;  
6. import android.support.v4.app.Fragment;  
7. import android.support.v4.app.FragmentActivity;  
8. import android.support.v4.app.FragmentTransaction;  
9. import android.view.View;  
10. import android.view.View.OnClickListener;  
11. import android.widget.ImageView;  
12. import android.widget.RelativeLayout;  
13. import android.widget.TextView;  
14.   
15. /** 
16.  * 主Activity 
17.  *  
18.  * @author wwj_748 
19.  *  
20.  */  
21. public class MainActivity extends FragmentActivity implements OnClickListener {  
22.   
23.     // 三个tab布局  
24.     private RelativeLayout knowLayout, iWantKnowLayout, meLayout;  
25.   
26.     // 底部标签切换的Fragment  
27.     private Fragment knowFragment, iWantKnowFragment, meFragment,  
28.             currentFragment;  
29.     // 底部标签图片  
30.     private ImageView knowImg, iWantKnowImg, meImg;  
31.     // 底部标签的文本  
32.     private TextView knowTv, iWantKnowTv, meTv;  
33.   
34.     @Override  
35.     protected void onCreate(Bundle savedInstanceState) {  
36.         super.onCreate(savedInstanceState);  
37.         setContentView(R.layout.activity_main);  
38.   
39.         initUI();  
40.         initTab();  
41.     }  
42.   
43.     /** 
44.      * 初始化UI 
45.      */  
46.     private void initUI() {  
47.         knowLayout = (RelativeLayout) findViewById(R.id.rl_know);  
48.         iWantKnowLayout = (RelativeLayout) findViewById(R.id.rl_want_know);  
49.         meLayout = (RelativeLayout) findViewById(R.id.rl_me);  
50.         knowLayout.setOnClickListener(this);  
51.         iWantKnowLayout.setOnClickListener(this);  
52.         meLayout.setOnClickListener(this);  
53.   
54.         knowImg = (ImageView) findViewById(R.id.iv_know);  
55.         iWantKnowImg = (ImageView) findViewById(R.id.iv_i_want_know);  
56.         meImg = (ImageView) findViewById(R.id.iv_me);  
57.         knowTv = (TextView) findViewById(R.id.tv_know);  
58.         iWantKnowTv = (TextView) findViewById(R.id.tv_i_want_know);  
59.         meTv = (TextView) findViewById(R.id.tv_me);  
60.   
61.     }  
62.   
63.     /** 
64.      * 初始化底部标签 
65.      */  
66.     private void initTab() {  
67.         if (knowFragment == null) {  
68.             knowFragment = new ZhidaoFragment();  
69.         }  
70.   
71.         if (!knowFragment.isAdded()) {  
72.             // 提交事务  
73.             getSupportFragmentManager().beginTransaction()  
74.                     .add(R.id.content_layout, knowFragment).commit();  
75.   
76.             // 记录当前Fragment  
77.             currentFragment = knowFragment;  
78.             // 设置图片文本的变化  
79.             knowImg.setImageResource(R.drawable.btn_know_pre);  
80.             knowTv.setTextColor(getResources()  
81.                     .getColor(R.color.bottomtab_press));  
82.             iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);  
83.             iWantKnowTv.setTextColor(getResources().getColor(  
84.                     R.color.bottomtab_normal));  
85.             meImg.setImageResource(R.drawable.btn_my_nor);  
86.             meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  
87.   
88.         }  
89.   
90.     }  
91.   
92.     @Override  
93.     public void onClick(View view) {  
94.         switch (view.getId()) {  
95.         case R.id.rl_know: // 知道  
96.             clickTab1Layout();  
97.             break;  
98.         case R.id.rl_want_know: // 我想知道  
99.             clickTab2Layout();  
100.             break;  
101.         case R.id.rl_me: // 我的  
102.             clickTab3Layout();  
103.             break;  
104.         default:  
105.             break;  
106.         }  
107.     }  
108.   
109.     /** 
110.      * 点击第一个tab 
111.      */  
112.     private void clickTab1Layout() {  
113.         if (knowFragment == null) {  
114.             knowFragment = new ZhidaoFragment();  
115.         }  
116.         addOrShowFragment(getSupportFragmentManager().beginTransaction(), knowFragment);  
117.           
118.         // 设置底部tab变化  
119.         knowImg.setImageResource(R.drawable.btn_know_pre);  
120.         knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));  
121.         iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);  
122.         iWantKnowTv.setTextColor(getResources().getColor(  
123.                 R.color.bottomtab_normal));  
124.         meImg.setImageResource(R.drawable.btn_my_nor);  
125.         meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  
126.     }  
127.   
128.     /** 
129.      * 点击第二个tab 
130.      */  
131.     private void clickTab2Layout() {  
132.         if (iWantKnowFragment == null) {  
133.             iWantKnowFragment = new IWantKnowFragment();  
134.         }  
135.         addOrShowFragment(getSupportFragmentManager().beginTransaction(), iWantKnowFragment);  
136.           
137.         knowImg.setImageResource(R.drawable.btn_know_nor);  
138.         knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  
139.         iWantKnowImg.setImageResource(R.drawable.btn_wantknow_pre);  
140.         iWantKnowTv.setTextColor(getResources().getColor(  
141.                 R.color.bottomtab_press));  
142.         meImg.setImageResource(R.drawable.btn_my_nor);  
143.         meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  
144.   
145.     }  
146.   
147.     /** 
148.      * 点击第三个tab 
149.      */  
150.     private void clickTab3Layout() {  
151.         if (meFragment == null) {  
152.             meFragment = new MeFragment();  
153.         }  
154.           
155.         addOrShowFragment(getSupportFragmentManager().beginTransaction(), meFragment);  
156.         knowImg.setImageResource(R.drawable.btn_know_nor);  
157.         knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));  
158.         iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);  
159.         iWantKnowTv.setTextColor(getResources().getColor(  
160.                 R.color.bottomtab_normal));  
161.         meImg.setImageResource(R.drawable.btn_my_pre);  
162.         meTv.setTextColor(getResources().getColor(R.color.bottomtab_press));  
163.           
164.     }  
165.   
166.     /** 
167.      * 添加或者显示碎片 
168.      *  
169.      * @param transaction 
170.      * @param fragment 
171.      */  
172.     private void addOrShowFragment(FragmentTransaction transaction,  
173.             Fragment fragment) {  
174.         if (currentFragment == fragment)  
175.             return;  
176.   
177.         if (!fragment.isAdded()) { // 如果当前fragment未被添加，则添加到Fragment管理器中  
178.             transaction.hide(currentFragment)  
179.                     .add(R.id.content_layout, fragment).commit();  
180.         } else {  
181.             transaction.hide(currentFragment).show(fragment).commit();  
182.         }  
183.   
184.         currentFragment = fragment;  
185.     }  
186.   
187. }  

源码下载：http://download.csdn.net/detail/wwj_748/8495621