Android经典底部选项卡集成方式之一

本文详细介绍了底部选项卡导航的设计模式,包括布局、代码实现及切换逻辑,旨在简化应用开发过程,提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先上效果图:
底部选项卡效果图
许多应用都会带有这种底部选项卡,应用非常广泛,所以现总结一套模式,方便以后使用:
其设计模式非常简单: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();
        }

    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值