1. 程式人生 > >仿御泥坊 完美實現電商類專案底部選項卡切換Fragment頁面

仿御泥坊 完美實現電商類專案底部選項卡切換Fragment頁面

此為Activity頁面XML佈局

<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=".HomeActivity" >
    //為fragment建立一個容器
    <FrameLayout
        android:id="@+
id/main_content"
android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#d7cbcb" /> //底部radiobutton切換 <RadioGroup android:id="@+
id/tab_menu"
android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <RadioButton android:id="@+id/tab_home" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:button="@null" android:checked="true" android:drawableTop="@drawable/tabhome_selector" android:gravity="center_horizontal|bottom" android:paddingTop="2dp" android:text="@string/tabhome" android:textColor="@color/tab_selector_tv_color" /> <RadioButton android:id="@+id/tab_classify" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/classify_selector" android:gravity="center_horizontal|bottom" android:paddingTop="2dp" android:text="@string/tabclassfiy" android:textColor="@color/tab_selector_tv_color" /> <RadioButton android:id="@+id/tab_shop" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/shopping_selector" android:gravity="center_horizontal|bottom" android:paddingTop="2dp" android:text="@string/tabshopping" android:textColor="@color/tab_selector_tv_color" /> <RadioButton android:id="@+id/tab_user" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_weight="1" android:button="@null" android:drawableTop="@drawable/user_selector" android:gravity="center_horizontal|bottom" android:paddingTop="2dp" android:text="@string/tabuser" android:textColor="@color/tab_selector_tv_color" /> </RadioGroup> </LinearLayout>

此為主Activity程式碼 附帶一個雙擊返回鍵退出應用

public class HomeActivity extends FragmentActivity {
    // 退出時的時間
    private long mExitTime;
    private home_frag home;
    private classify_frag classify;
    private shopping_frag shop;
    private user_frag user;
    private RadioGroup tab_menu;
    @SuppressWarnings("unused")
    private RadioButton tab_home;
    private FragmentManager manager;
    private FragmentTransaction transaction;
    private NetworkInfo networkInfo;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_home);
        info();
        // 設定fragment
        home = new home_frag();
        classify = new classify_frag();
        manager = getSupportFragmentManager();
        shop = new shopping_frag();
        user = new user_frag();
        transaction = manager.beginTransaction();
        FragmentTransaction trnTransaction = getSupportFragmentManager().beginTransaction();
        trnTransaction.add(R.id.main_content, home, "home");
        trnTransaction.add(R.id.main_content, classify, "classify");
        trnTransaction.add(R.id.main_content, shop, "shop");
        trnTransaction.add(R.id.main_content, user, "user");
        switchTag("home");
        trnTransaction.commit();
        // 監聽切換fragment
        infoView();

    }

    // 獲取控制元件
    private void info() {
        tab_home = (RadioButton) findViewById(R.id.tab_home);
    }

    public void infoView() {
        tab_menu = (RadioGroup) findViewById(R.id.tab_menu);
        tab_menu.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {

                switch (checkedId) {
                case R.id.tab_home:
                    switchTag("home");
                    break;
                case R.id.tab_classify:
                    switchTag("classify");
                    break;
                case R.id.tab_shop:
                    switchTag("shop");
                    break;
                case R.id.tab_user:
                    switchTag("user");
                    break;
                default:
                    break;
                }

            }
        });
    }

    private void switchTag(String str) {
        FragmentTransaction transaction = manager.beginTransaction();
        if (str.equals("home")) {
            transaction.show(home);
            transaction.hide(classify);
            transaction.hide(shop);
            transaction.hide(user);
        } else if (str.equals("classify")) {
            transaction.show(classify);
            transaction.hide(home);
            transaction.hide(shop);
            transaction.hide(user);
        } else if (str.equals("shop")) {
            transaction.show(shop);
            transaction.hide(classify);
            transaction.hide(home);
            transaction.hide(user);
        } else if (str.equals("user")) {
            transaction.show(user);
            transaction.hide(classify);
            transaction.hide(shop);
            transaction.hide(home);
        }
        transaction.commit();
    }

    // 對返回鍵進行監聽
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if (keyCode == KeyEvent.KEYCODE_BACK && event.getRepeatCount() == 0) {
            exit();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }

    @SuppressLint("ShowToast")
    public void exit() {
        if ((System.currentTimeMillis() - mExitTime) > 2000) {
            Toast.makeText(HomeActivity.this, "再按一次退出應用", 0).show();
            mExitTime = System.currentTimeMillis();
        } else {
            finish();
            System.exit(0);
        }
    }
}

之後就是建立四個fragment 在這裡就不往上上傳了
以下再將RadioButton的狀態選擇器為大家上傳
這是其中一個只需要更改圖片即可

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

    <item android:drawable="@drawable/bottom_tab_user_selected" android:state_checked="true"></item>
    <item android:drawable="@drawable/bottom_tab_user_normal" android:state_checked="false"></item>

</selector>

字型顏色的改變顏色

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

    <item android:state_checked="true" android:color="#fc6b87"/>
    <item android:state_checked="false" android:color="#9c9c9c"/>
    <item android:color="#9c9c9c"/>

</selector>