Android UI-實現底部切換標籤（fragment)

標籤：切換頁面   導航   src   android   add   raw   string   param   顏色   

Android UI-實現底部切換標籤（fragment)

前言本篇部落格要分享的一個UI效果——實現底部切換標籤，想必大家在一些應用上面遇到過這樣的效果了，最典型的就是了，能夠左右滑動切換頁面。也能夠點擊標籤頁滑動頁面，它們是怎樣實現的呢，本篇部落格為了簡單僅僅介紹怎樣實現點擊底部切換標籤頁。先來看看我們想實現的：這樣的頁面實現起來事實上非常easy的，首先我們從布局入手：分為三部分第一部分：頂部導覽列布局第二部分：中部顯示內容布局第三部分：底部標籤布局
/BottomTabDemo/res/layout/activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <RelativeLayout        android:id="@+id/rl_main"        android:layout_width="match_parent"        android:layout_height="match_parent" >        <!-- 頂部 -->        <RelativeLayout            android:id="@+id/top_tab"            android:layout_width="match_parent"            android:layout_height="50dip"            android:background="@color/topbar_bg" >            <ImageView                android:id="@+id/iv_logo"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerInParent="true"                android:focusable="false"                android:src="@drawable/zhidao_logo"                android:contentDescription="@null" />        </RelativeLayout>        <!-- 底部tab -->        <LinearLayout            android:id="@+id/ll_bottom_tab"            android:layout_width="match_parent"            android:layout_height="54dp"            android:layout_alignParentBottom="true"            android:gravity="center_vertical"            android:orientation="horizontal"             android:baselineAligned="true">            <RelativeLayout                android:id="@+id/rl_know"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1.0" >                <ImageView                    android:id="@+id/iv_know"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerHorizontal="true"                    android:src="@drawable/btn_know_nor"                     android:contentDescription="@null"/>                <TextView                    android:id="@+id/tv_know"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_below="@id/iv_know"                    android:layout_centerHorizontal="true"                    android:text="@string/bottom_tab_know"                    android:textColor="@color/bottomtab_normal"                    android:textSize="12sp" />            </RelativeLayout>            <RelativeLayout                android:id="@+id/rl_want_know"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1.0" >                <ImageView                    android:id="@+id/iv_i_want_know"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerHorizontal="true"                    android:src="@drawable/btn_wantknow_nor"                    android:contentDescription="@null" />                <TextView                    android:id="@+id/tv_i_want_know"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_below="@+id/iv_i_want_know"                    android:layout_centerHorizontal="true"                    android:text="@string/bottom_tab_wantknow"                    android:textColor="@color/bottomtab_normal"                    android:textSize="12sp" />            </RelativeLayout>            <RelativeLayout                android:id="@+id/rl_me"                android:layout_width="0dp"                android:layout_height="wrap_content"                android:layout_weight="1.0" >                <ImageView                    android:id="@+id/iv_me"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerHorizontal="true"                    android:src="@drawable/btn_my_nor"                    android:contentDescription="@null" />                                <TextView                    android:id="@+id/tv_me"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_below="@+id/iv_me"                    android:layout_centerHorizontal="true"                    android:text="@string/bottom_tab_my"                    android:textColor="@color/bottomtab_normal"                    android:textSize="12sp" />            </RelativeLayout>        </LinearLayout>        <!-- 內容部分。 fragment切換 -->        <LinearLayout            android:id="@+id/content_layout"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:layout_above="@+id/line"            android:layout_below="@+id/top_tab"            android:orientation="vertical" >        </LinearLayout>        <View            android:id="@+id/line"            android:layout_width="match_parent"            android:layout_height="1dp"            android:layout_above="@id/ll_bottom_tab"            android:background="@color/line" />    </RelativeLayout>    </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進行切換呢，定義以下方法：

/** * 加入或者顯示片段 *  * @param transaction * @param fragment */private void addOrShowFragment(FragmentTransaction transaction,Fragment fragment) {if (currentFragment == fragment)return;if (!fragment.isAdded()) { // 假設當前fragment未被加入。則加入到Fragment管理器中transaction.hide(currentFragment).add(R.id.content_layout, fragment).commit();} else {transaction.hide(currentFragment).show(fragment).commit();}currentFragment = fragment;}

完整代碼例如以下：/BottomTabDemo/src/com/xiaowu/bottomtab/demo/MainActivity.java

package com.xiaowu.bottomtab.demo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentTransaction;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageView;import android.widget.RelativeLayout;import android.widget.TextView;/** * 主Activity *  * @author wwj_748 *  */public class MainActivity extends FragmentActivity implements OnClickListener {// 三個tab布局private RelativeLayout knowLayout, iWantKnowLayout, meLayout;// 底部標籤切換的Fragmentprivate Fragment knowFragment, iWantKnowFragment, meFragment,currentFragment;// 底部標籤圖片private ImageView knowImg, iWantKnowImg, meImg;// 底部標籤的文本private TextView knowTv, iWantKnowTv, meTv;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initUI();initTab();}/** * 初始化UI */private void initUI() {knowLayout = (RelativeLayout) findViewById(R.id.rl_know);iWantKnowLayout = (RelativeLayout) findViewById(R.id.rl_want_know);meLayout = (RelativeLayout) findViewById(R.id.rl_me);knowLayout.setOnClickListener(this);iWantKnowLayout.setOnClickListener(this);meLayout.setOnClickListener(this);knowImg = (ImageView) findViewById(R.id.iv_know);iWantKnowImg = (ImageView) findViewById(R.id.iv_i_want_know);meImg = (ImageView) findViewById(R.id.iv_me);knowTv = (TextView) findViewById(R.id.tv_know);iWantKnowTv = (TextView) findViewById(R.id.tv_i_want_know);meTv = (TextView) findViewById(R.id.tv_me);}/** * 初始化底部標籤 */private void initTab() {if (knowFragment == null) {knowFragment = new ZhidaoFragment();}if (!knowFragment.isAdded()) {// 提交事務getSupportFragmentManager().beginTransaction().add(R.id.content_layout, knowFragment).commit();// 記錄當前FragmentcurrentFragment = knowFragment;// 設定圖片文本的變化knowImg.setImageResource(R.drawable.btn_know_pre);knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);iWantKnowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));meImg.setImageResource(R.drawable.btn_my_nor);meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));}}@Overridepublic void onClick(View view) {switch (view.getId()) {case R.id.rl_know: // 知道clickTab1Layout();break;case R.id.rl_want_know: // 我想知道clickTab2Layout();break;case R.id.rl_me: // 我的clickTab3Layout();break;default:break;}}/** * 點擊第一個tab */private void clickTab1Layout() {if (knowFragment == null) {knowFragment = new ZhidaoFragment();}addOrShowFragment(getSupportFragmentManager().beginTransaction(), knowFragment);// 設定底部tab變化knowImg.setImageResource(R.drawable.btn_know_pre);knowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);iWantKnowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));meImg.setImageResource(R.drawable.btn_my_nor);meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));}/** * 點擊第二個tab */private void clickTab2Layout() {if (iWantKnowFragment == null) {iWantKnowFragment = new IWantKnowFragment();}addOrShowFragment(getSupportFragmentManager().beginTransaction(), iWantKnowFragment);knowImg.setImageResource(R.drawable.btn_know_nor);knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));iWantKnowImg.setImageResource(R.drawable.btn_wantknow_pre);iWantKnowTv.setTextColor(getResources().getColor(R.color.bottomtab_press));meImg.setImageResource(R.drawable.btn_my_nor);meTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));}/** * 點擊第三個tab */private void clickTab3Layout() {if (meFragment == null) {meFragment = new MeFragment();}addOrShowFragment(getSupportFragmentManager().beginTransaction(), meFragment);knowImg.setImageResource(R.drawable.btn_know_nor);knowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));iWantKnowImg.setImageResource(R.drawable.btn_wantknow_nor);iWantKnowTv.setTextColor(getResources().getColor(R.color.bottomtab_normal));meImg.setImageResource(R.drawable.btn_my_pre);meTv.setTextColor(getResources().getColor(R.color.bottomtab_press));}/** * 加入或者顯示片段 *  * @param transaction * @param fragment */private void addOrShowFragment(FragmentTransaction transaction,Fragment fragment) {if (currentFragment == fragment)return;if (!fragment.isAdded()) { // 假設當前fragment未被加入，則加入到Fragment管理器中transaction.hide(currentFragment).add(R.id.content_layout, fragment).commit();} else {transaction.hide(currentFragment).show(fragment).commit();}currentFragment = fragment;}}

原始碼下載：http://download.csdn.net/detail/wwj_748/8495621

轉載請註明：IT_xiao小巫

部落格地址：http://blog.csdn.net/wwj_748
移動開發狂熱者群：299402133

Android UI-實現底部切換標籤（fragment)