1. 程式人生 > >Android經典底部選項卡整合方式之一

Android經典底部選項卡整合方式之一

先上效果圖:
底部選項卡效果圖
許多應用都會帶有這種底部選項卡,應用非常廣泛,所以現總結一套模式,方便以後使用:
其設計模式非常簡單:RadioGroup+RadioButton+FrameLayout+Fragment
1.MainActivity的佈局:

<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" tools:context=".MainActivity" > <FrameLayout android:id="@+id/fl" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" > </FrameLayout> <RadioGroup android:id="@+id/rg
" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/bottom_tab_bg" android:gravity="center_vertical" android:orientation="horizontal" > <RadioButton android:id="@+id/rb1" android:layout_width="
0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/selector_home" android:gravity="center" android:text="選項1" android:textColor="@color/selector_color_text" /> <RadioButton android:id="@+id/rb2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/selector_center" android:gravity="center" android:text="選項2" android:textColor="@color/selector_color_text" /> <RadioButton android:id="@+id/rb3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/selector_smartservice" android:gravity="center" android:text="選項3" android:textColor="@color/selector_color_text" /> <RadioButton android:id="@+id/rb4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/selector_gov" android:gravity="center" android:text="選項4" android:textColor="@color/selector_color_text" /> <RadioButton android:id="@+id/rb5" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/selector_setting" android:gravity="center" android:text="選項5" android:textColor="@color/selector_color_text" /> </RadioGroup> </LinearLayout>

注意:RadioButton 中有一個屬性:android:button=”@null” 可以去掉RadioButton上的一個小圈圈

2.MainActivity中的程式碼:

public class MainActivity extends FragmentActivity {

    private ArrayList<Fragment> fragmentsList = new ArrayList<Fragment>();
    private RadioGroup group;

    @Override
    protected void onCreate(Bundle arg0) {
        super.onCreate(arg0);
        setContentView(R.layout.activity_main);
        group = (RadioGroup) findViewById(R.id.rg);

        // 給group設定監聽事件,在監聽事件實現fragment之間的切換
        OnCheckedChangeListener listener = new MyOnCheckedChangeListener();
        group.setOnCheckedChangeListener(listener);

        // 選中首頁,否則開始啟動的時候畫面展示白板
        group.check(R.id.rb1);
    }

    private class MyOnCheckedChangeListener implements OnCheckedChangeListener {
        // 在構造方法中創造fragment
        public MyOnCheckedChangeListener() {
            // 將new出來的fragment放置在集合中,以便後續取用
            fragmentsList.add(new Fragment1());
            fragmentsList.add(new Fragment2());
            fragmentsList.add(new Fragment3());
            fragmentsList.add(new Fragment4());
            fragmentsList.add(new Fragment5());
        }

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            // 當選中某一個radio的時候,就展現某一個fragment,用到fragment的事務
            FragmentTransaction ft = getSupportFragmentManager()
                    .beginTransaction();
            switch (checkedId) {
            case R.id.rb1:
                ft.replace(R.id.fl, fragmentsList.get(0));
                break;
            case R.id.rb2:
                ft.replace(R.id.fl, fragmentsList.get(1));
                break;
            case R.id.rb3:
                ft.replace(R.id.fl, fragmentsList.get(2));
                break;
            case R.id.rb4:
                ft.replace(R.id.fl, fragmentsList.get(3));
                break;
            case R.id.rb5:
                ft.replace(R.id.fl, fragmentsList.get(4));
                break;
            default:
                break;
            }
            // 最後事務一定要提交
            ft.commit();
        }

    }
}