Android 开发：（十三）TabBar篇-自定义底部导航栏

一、实现思路：

使用RadioGroup和RadioButton实现tabbar导航切换功能，而每个页面使用replace方法处理fragment，使其切换的同时重新刷新(add方式是将fragment隐藏了，replace方式每次都是销毁再重新创建)；

效果图如下：

二、具体实现：

项目框架文件：

1. activity_main.xml 部分代码

    <FrameLayout
        android:id="@+id/fl_container"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_weight="1"/>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp">

        <RadioButton
            android:id="@+id/rb_weChat"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="微信"
            android:button="@null"
            android:gravity="center"
            android:textColor="@drawable/tab_selector"
            android:drawableTop="@drawable/tab_dsicover_selector"/>
            
        <RadioButton
            android:id="@+id/rb_mine"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="我"
            android:button="@null"
            android:gravity="center"
            android:textColor="@drawable/tab_selector"
            android:drawableTop="@drawable/tab_contact_selector"/>
    </RadioGroup>

2. tab_selector.xml代码： 选中与未选中状态下对字体颜色处理

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

    <item android:drawable="@mipmap/tabbar_contacts_selected" android:state_checked="true" />

    <item android:drawable="@mipmap/tabbar_contacts" />
</selector>

3. tab_mine_selector.xml代码： 对"我"图片处理 选中与未选中，其他fragment同理。

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

    <item android:drawable="@mipmap/tabbar_me_selected" android:state_checked="true" />

    <item android:drawable="@mipmap/tabbar_me" />
</selector>

4. MainActivity代码：

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    
    private ContactFragment contactFragment;
    private MessageFragment messageFragment;
    private DiscoverFragment discoverFragment;
    private MineFragment mineFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);
        bindViews();
        initData();
    }

    private void initData() {
    //初始化4个fragment
        contactFragment      = new ContactFragment();
        messageFragment    = new MessageFragment();
        discoverFragment    = new DiscoverFragment();
        mineFragment         = new MineFragment();

//创建第一个fragment使其显示        getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, messageFragment).commit();
    }

    //UI组件初始化与事件绑定
    private void bindViews() {

        RadioButton rbTab1 = findViewById(R.id.rb_weChat);
        RadioButton rbTab2 = findViewById(R.id.rb_contact);
        RadioButton rbTab3 = findViewById(R.id.rb_discover);
        RadioButton rbTab4 = findViewById(R.id.rb_mine);

	//默认第一个选中
        rbTab1.setChecked(true);
	
	//添加点击事件
        rbTab1.setOnClickListener(this);
        rbTab2.setOnClickListener(this);
        rbTab3.setOnClickListener(this);
        rbTab4.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
    //通过点击事件，切换fragment：
        if (v.getId() == R.id.rb_weChat) {
            
          getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, messageFragment).commit();

        } else if (v.getId() == R.id.rb_contact) {

            getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, contactFragment).commit();
           

        }else  if (v.getId() == R.id.rb_discover){

            getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, discoverFragment).commit();
           
        }else  if (v.getId() == R.id.rb_mine){

            getSupportFragmentManager().beginTransaction().replace(R.id.fl_container, mineFragment).commit();
        }
    }

}

最终效果：