Fragment實例精講－底部導覽列的實作(方法2)

本節引言：

上一節我們使用LinearLayout + TextView實現了底部導覽列的效果，每次點擊我們都要重置所有TextView的狀態，然後選取點擊的TextView，有點麻煩是吧，接下來我們用另一種方法： RadioGroup + RadioButton來實現我們上一節的效果！

1.一些碎碎念

本節用到的是實現單選效果的RadioButton，如果你不熟悉，或者沒用過，可先移步到：RadioButton簡單點說就是我們就是一個RadioGroup包著四個RadioButton，和前面一樣用比例來劃分:1:1:1:1；
另外我們只需重寫RadioGroup的onCheckedChange，判斷checkid即可知道點擊的是哪一個RadioButton！好的，下面開始堆碼！

2.實作流程

PS:這裡的素材什麼的，直接使用的是上一節的素材！另外drawable類別的資源都是將selected 狀態修改成checked！

Step 1：寫底部選項的一些資源檔案

圖片Drawable資源：tab_menu_channel.xml

#<? xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
< ！

#其他三個照葫蘆畫瓢！

文字資源：

tab_menu_text.xml

#<?xml version="1.0" encoding="utf-8"?>

< ;selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:color="@color/text_yellow" android:state_checked="true" /> ;

###########################################################################################################################################################################

背景資源：tab_menu_bg.xml

<選取器 xmlns :android ="http://schemas.android.com/apk/res/android">

        < 1c90 「 />

#

       parent" />
        < /形狀>


#

Step 2：寫我們的Activity佈局

在前面用TextView實作底部導覽列我們就發現了一個問題，每個TextView的屬性都幾乎是差不多的，而在建議那裡我們也說讓大家把相同的屬性抽取出來寫到Style中，可能部分朋友懶或不知道如何抽出來，用，這裡就給大家示範下：

首先我們取出其中一個RadioGroup的標籤：

我們可以把每個RadioButton都相同的屬性抽取出來，寫入到style.xml檔案中：

    0dp
    1

    @drawable/tab_menu_bg
    @null< /item># 中心
    3dp
    @drawable/tab_menu_text
    18sp

然後我們的activity_main.xml中的RadioButton就用不著次次都寫相同的程式碼了，只要讓RadioButton的style="@style/tab_menu_item"就可以了！

activity_main.xml:

<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="match_parent"
    android: ="../styletext

#            android:id="@+id/ly_top_bar"
        "
        android :background= "../style/images/bg_topbar">

                    "
            android:layout_height= "match_parent"
            android:layout_centerInParent="true"
            #            android:textColor="@color/text_topbar "
            android :textSize="18sp" />

                    . #            android:layout_alignParentBottom= "true"
            android :background="../style/images/div_white" />
##

        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="../style/images/bg_white"
                 android : id="@+id/rb_channel"
            style="@style/tab_menu_item"
           android:text="@string/tab_menu_alert" />
##                    android:id="@+id/rb_message"
         android:drawableTop="@drawable/tab_menu_message"
            android :text ="@string/tab_menu_profile" />

                   _item"
            android :drawableTop=" @drawable/tab_menu_better"
            android:text="@string/tab_menu_pay" />

    rb_setting"
            style="@style /tab_menu_item"
            android:drawableTop="@drawable/tab_menu_setting"
       ioGroup>
##    <瀏覽
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
android:layout_height="2px"
        android:layout_above="@id/rg_tab_bar"
        android„ ##        android:id="@+id/ly_content"
        android:layout_width="match_parent"
  :layout_above="@id/div_tab_bar"
        android :layout_below="@id/ly_top_bar"></FrameLayout>

</RelativeLayout>

#Step 3：隱藏頂部導覽列

#AndroidManifest.xml設定下theme屬性

android:theme="@style/Theme.AppCompat.NoActionBar"

Step 4：建立一個Fragment的簡單佈局與類別：

直接複製上一節的佈局跟Fragment：

fg_content.xml:

#<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="match_parent"

android:layout_height="match_parent"

    android:layout_height="match_parent"
¢ #    <TextView
        android:id="@+id/txt_content"
        and      android:gravity="center"
        android:text="呵呵"
        android:textColor="@color/text_yellow"
        and？ #

MyFragment.java:

/**
* 由 Coder-pig 創立於 2015 年 8 月 29 日 0028。 */
public class MyFragment 擴充 Fragment {

private String content;
    public MyFragment(String content) {
        this.content = content;
    }
# View,10550000>O. Group 容器, Bundle savedInstanceState) {
View view收到#        返回檢視;
    }
}

#

Step 5：寫MainActivity.java

這個比起TextView實作簡單多了，就不詳細講解了，很簡單，直接上程式碼：

MainActivity.java

/**
* 由 Coder-pig 創立於 2015 年 8 月 29 日 0028。 */
public 類別 MainActivity 擴充 AppCompatActivity 實作 RadioGroup.OnCheckedChangeListener{

    private RadioGroup rg_tab_bar;## //片段物件
    private MyFragment fg1,fg2,fg3,fg4;
    private FragmentManager fManager;
##   {
        super.onCreate ( saveInstanceState);
        setContentView(R.layout.activity_main);
        fManager = Id(R.id.rg_tab_bar);
        rg_tab_bar.setOnCheckedChangeListener(this ) ;
        //獲取第一個單選按鈕，並設置其為選中狀態
        rb_channel = (RadioButton) findViewById(R.id.rb_channel);
        rb_channel.setChecked(true);
}

##    @Override
#    public void onCheckedChanged(RadioGroup group, int checkedId) {##o      hideAllFragment(fTransaction);
switch (checkedId){
           case R.id.rb_channel:
                      fg1 = new MyFragment("第一個片段");
              . id.ly_content,fg1);
                }else{
                          }
                break;
            case R.rb null){
                    fg2 = new MyFragment("第二個Fragment"); R.id.ly_content,fg2);
                }else{
                  }
                break;
            if(fg3 == null){
                    fg3 = new MyFragment("第三個 (R.id.ly_content,fg3);
                }else{
        }else{
                    fTransaction.show(g3);
           break;
           case R.id.rb_setting:
                     fg 4 = new MyFragment("第四個Fragment");
                    fTransaction.add(R.id.ly_content,fg4);# fTransaction.show(fg4);
                }
             fTransaction.commit();
    }

    //隱藏所有Fragment
    private void hideAllFragment (FragmentTransaction fragmentTransaction){
        if(fg1 != null)fragmentTransaction.hide(fg1);
        if(fg3 != null)fragmentTransaction .hide(fg3);
        if(fg4 != null)fragmentTransaction.hide(fg4);
    }

}

PS:

在上一節忘記講一點了，FragmentTransaction只能使用一次，每次使用都要呼叫FragmentManager 的beginTransaction()方法獲得FragmentTransaction事務物件哦！

3.運行效果圖

其實和上一節實現的效果是一樣的：

4.程式碼下載：

FragmentDemo2.zip

：

FragmentDemo2.zip 下載5.本節小結：

本節講解的是實現底部導覽列的第二種方法:RadioGroup + RadioButton，有了單選，我們就不用像TextView一樣，每次點擊後先重置所有TextView的Selected狀態，再讓點擊的TextView 的Selected為true，這樣就可以寫少一點程式碼了~本節就到這裡~謝謝

#

← Fragment實例精講－底部導覽列的實作(方法1)

Fragment實例精講－底部導覽列的實作(方法3) →

提交