android 底部栏中间按钮突出

最新推荐文章于 2025-06-29 09:59:57 发布

原创最新推荐文章于 2025-06-29 09:59:57 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了一种底部导航栏的设计方法，通过使用RelativeLayout和RadioGroup等组件实现了灵活的底部菜单切换效果，并结合Fragment实现了页面内容的动态加载。

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

使用include标签

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<RadioGroup
    android:id="@+id/index_radio_group_bottom_bar"
    android:layout_alignParentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:orientation="horizontal">
    <RadioButton
        android:id="@+id/index_radio_home_bottom_bar"
        android:drawableTop="@drawable/index_bottom_home_tab"
        style="@style/IndexBottomBar"
        android:text="@string/index_bottom_home_tab"
        android:drawablePadding="-10dp"
        />
    <RadioButton
        android:drawablePadding="-10dp"
        android:id="@+id/index_radio_community_bottom_bar"
        android:drawableTop="@drawable/index_bottom_community_tab"
        style="@style/IndexBottomBar"
        android:text="@string/index_bottom_community_tab"
        />
    <RadioButton
        style="@style/IndexBottomBar"/>
    <RadioButton
        android:drawablePadding="-10dp"
        android:id="@+id/index_radio_mall_bottom_bar"
        android:text="@string/index_bottom_mall_tab"
        android:drawableTop="@drawable/index_bottom_mall_tab"
        style="@style/IndexBottomBar"/>
    <RadioButton
        android:drawablePadding="-10dp"
        android:id="@+id/index_radio_main_bottom_bar"
        android:text="@string/index_bottom_main_tab"
        android:drawableTop="@drawable/index_bottom_main_tab"
        style="@style/IndexBottomBar"/>
</RadioGroup>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/index_radio_group_bottom_bar"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/index_bottom_line"/>
</RelativeLayout>

《style》的设置

<style name="IndexBottomBar">
    <item name="android:layout_width">0dp</item>
    <item name="android:padding">5dp</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:layout_weight">1</item>
    <item name="android:button">@null</item><!--去除RadioButton默认带的圆点-->
    <item name="android:gravity">center</item>
    <item name="android:textSize">12sp</item>
    <item name="android:background">@android:color/transparent</item>
</style>

activity界面

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/index_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <include layout="@layout/index_bottom_bar"/>

突出按钮的设置
    <RelativeLayout
        android:id="@+id/index_bottom_line"
        android:layout_width="65dp"
        android:layout_height="65dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" >
        <RadioButton
            android:id="@+id/index_bottom_popuwindown"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:button="@null"
            android:background="@android:color/transparent"
            android:drawablePadding="2dp"
            android:drawableTop="@drawable/bottom_popuwindown"
            android:text="@string/index_bottom_popuwindown_tab"
            android:textSize="12sp"/>
    </RelativeLayout>
</RelativeLayout>

activity设置

private void initToolbar() {
    StatusBarUtil.setTranslucent(IndexActivity.this);
    mManager = getSupportFragmentManager();
    //底部栏的实现
    mIndexRadioGroupBottomBar.setOnCheckedChangeListener(this);
    mIndexRadioHomeBottomBar.setChecked(true);
}


@Override
public void onCheckedChanged(RadioGroup radioGroup, int i) {
    FragmentTransaction transaction = mManager.beginTransaction();
    hide(transaction);
    switch (i){
        case R.id.index_radio_home_bottom_bar:
            if (mIndexFragment == null){
                mIndexFragment = getInstanceIndexFragment();
                transaction.add(R.id.index_frame_layout,mIndexFragment);
            }else {
                transaction.show(mIndexFragment);
            }
            break;
        case R.id.index_radio_community_bottom_bar:
            if (mCommunityFragment == null){
                mCommunityFragment = CommunityFragment.getInstanceCommunityFragment();
                transaction.add(R.id.index_frame_layout,mCommunityFragment);
            }else {
                transaction.show(mCommunityFragment);
            }
             break;
        case R.id.index_radio_mall_bottom_bar:
            if (mMallFragment == null){
                mMallFragment = MallFragment.getInstanceMallFragment();
                transaction.add(R.id.index_frame_layout,mMallFragment);
            }else {
                transaction.show(mMallFragment);
            }
             break;
        case R.id.index_radio_main_bottom_bar:
            if (mMainFragment == null){
                mMainFragment = MainFragment.getInstanceMainFragment();
                transaction.add(R.id.index_frame_layout,mMainFragment);
            }else {
                transaction.show(mMainFragment);
            }
             break;
        default:
            break;
    }
    transaction.commit();
}
//隐藏   
private void hide(FragmentTransaction transaction){
   if (mIndexFragment != null){
      transaction.hide(mIndexFragment);
   }
    if (mCommunityFragment != null){
        transaction.hide(mCommunityFragment);
    }
    if (mMallFragment != null){
        transaction.hide(mMallFragment);
    }
    if (mMainFragment != null){
        transaction.hide(mMainFragment);
    }

}