← Fragment + TextView 实现底部导航栏 Fragment 底部导航栏红点 →

Fragment RadioButton 实现底部导航栏

上一节中我们使用 LinearLayout + TextView 实现了底部导航栏的效果，每次点击都要重置所有 TextView 的状态，然后选中点击的 TextView，感觉有点复杂

本章节我们就使用另一种方法 RadioGroup + RadioButton 来实现

我们先来看看最后的效果图

创建一个空的 Android 项目 cn.twle.android.FragmentRadioButton
下载解压 /static/i/android/fragment_tab_demo.zip，并把所有的图片拖到 res/drawable 目录下

从效果图上可以看到，底部的每一项点击的时候都有不同的效果，这些效果是通过判定是否 selected 来实现的，所以我们要对每一个 tab 创建 TextView 状态的资源文件

这些资源，如果你照搬上一章节的，那么要把 android:selected="true" 改成 android:checked="true"

在 res/drawable 目录下新建四个文件

tab_menu_home.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_home_pressed" android:state_checked="true" />
    <item android:drawable="@drawable/tab_home" />
</selector>

tab_menu_category.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_category_pressed" android:state_checked="true" />
    <item android:drawable="@drawable/tab_category" />
</selector>

tab_menu_cart.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_cart_pressed" android:state_checked="true" />
    <item android:drawable="@drawable/tab_cart" />
</selector>

tab_menu_discover.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_discover_pressed" android:state_checked="true" />
    <item android:drawable="@drawable/tab_discover" />
</selector>

在 res/drawable 目录下新建文件 tab_menu_text.xml 创建文字资源

因为文字也会根据是否选中而改变颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#1296db" android:state_checked="true" />
    <item android:color="#515151" />
</selector>

在 res/drawable 目录下新建文件 tab_menu_bg.xml 创建背景资源

选中的 tab 背景会有点灰色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="#ffdddddd" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#00FFFFFF" />
        </shape>
    </item>
</selector>

在 res/layout 目录下创建一个 Fragment 的简单布局 fg_content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <TextView
        android:id="@+id/ms_txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="简单教程，简单编程"
        android:textColor="#333333"
        android:textSize="20sp"/>

</LinearLayout>

资源方面我们已经准备的差不多了，现在开始添加布局

仔细看效果图，我们可以把整个页面分成三大块
1. 顶部的 title 栏
2. 中间的具体页面
3. 底部的 tabbar

添加底部导航栏布局

在前面用 TextView 实现底部导航栏我们就发现了一个问题，每个 TextView 的属性都几乎是差不多，所以我们抽取出来独立成一个 style

把每个 RadioButton 都相同的属性抽取出来，写到 styles.xml 文件中

<style name="tab_menu_item">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">match_parent</item>
    <item name="android:background">@drawable/tab_menu_bg</item>
    <item name="android:button">@null</item>
    <item name="android:gravity">center</item>
    <item name="android:paddingTop">3dp</item>
    <item name="android:textColor">@drawable/tab_menu_text</item>
    <item name="android:textSize">18sp</item>
</style>

然后 activity_main.xml 中的 RadioButton 就用不着次次都写相同的代码了

只需让 RadioButton 的 style="@style/tab_menu_item" 就可以了

styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="tab_menu_item">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">@drawable/tab_menu_bg</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">3dp</item>
        <item name="android:textColor">@drawable/tab_menu_text</item>
        <item name="android:textSize">18sp</item>
    </style>

</resources>

修改 activity_main.xml 创建布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/ms_topbar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="#FCFCFC">

        <TextView
            android:id="@+id/ms_topbar_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textSize="18sp"
            android:textColor="#694E42"
            android:text="信息"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:background="#E5E5E5"
            android:layout_alignParentBottom="true"/>

    </RelativeLayout>

    <RadioGroup
        android:id="@+id/ms_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="#ffffff"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/ms_tab_home"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_home"
            android:text="首页" />

        <RadioButton
            android:id="@+id/ms_tab_category"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_category"
            android:text="分类" />

        <RadioButton
            android:id="@+id/ms_tab_discover"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_discover"
            android:text="发现" />

        <RadioButton
            android:id="@+id/ms_tab_cart"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_menu_cart"
            android:text="购物车" />

    </RadioGroup>

    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:background="#E5E5E5"
        android:layout_above="@id/ms_tab_bar"/>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/ms_topbar"
        android:layout_above="@id/div_tab_bar"
        android:id="@+id/ms_content">

    </FrameLayout>

</RelativeLayout>

是不是清爽了很多

隐藏顶部导航栏

修改 MainActivity.java 继承自 Activity 而非 AppCompatActivity

然后在 onCreate() 方法中的 super.onCreate(savedInstanceState); 之前加上下列代码
```
requestWindowFeature(Window.FEATURE_NO_TITLE);
```
最后在 AndroidManifest.xml 设置下 theme 属性
```
android:theme="@style/Theme.AppCompat.NoActionBar"
```
注意

把 requestWindowFeature(Window.FEATURE_NO_TITLE); 放在 super.onCreate(savedInstanceState); 前面就可以隐藏 ActionBar 而不报错

在 MainActivity.java 同一目录下新建文件 MsFragment.java

package cn.twle.android.fragmentradiobutton;

import android.annotation.SuppressLint;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

@SuppressLint("ValidFragment")
public class MsFragment extends Fragment {

    private String content;

    public MsFragment(String content) {
        this.content = content;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fg_content,container,false);
        TextView txt_content = (TextView) view.findViewById(R.id.ms_txt_content);
        txt_content.setText(content);
        return view;
    }
}

修改 MainActivity.java

package cn.twle.android.fragmentradiobutton;

import android.app.Activity;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends Activity implements RadioGroup.OnCheckedChangeListener{

    private RadioGroup ms_tab_bar;
    private RadioButton ms_tab_home;

    //Fragment Object
    private MsFragment fg1,fg2,fg3,fg4;
    private FragmentManager fManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();

        ms_tab_bar = (RadioGroup) findViewById(R.id.ms_tab_bar);
        ms_tab_bar.setOnCheckedChangeListener(this);
        //获取第一个单选按钮，并设置其为选中状态
        ms_tab_home = (RadioButton) findViewById(R.id.ms_tab_home);
        ms_tab_home.setChecked(true);
    }

    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        hideAllFragment(fTransaction);
        switch (checkedId){
            case R.id.ms_tab_home:
                if(fg1 == null){
                    fg1 = new MsFragment("第一个 Fragment");
                    fTransaction.add(R.id.ms_content,fg1);
                }else{
                    fTransaction.show(fg1);
                }
                break;
            case R.id.ms_tab_category:
                if(fg2 == null){
                    fg2 = new MsFragment("第二个 Fragment");
                    fTransaction.add(R.id.ms_content,fg2);
                }else{
                    fTransaction.show(fg2);
                }
                break;
            case R.id.ms_tab_discover:
                if(fg3 == null){
                    fg3 = new MsFragment("第三个 Fragment");
                    fTransaction.add(R.id.ms_content,fg3);
                }else{
                    fTransaction.show(fg3);
                }
                break;
            case R.id.ms_tab_cart:
                if(fg4 == null){
                    fg4 = new MsFragment("第四个 Fragment");
                    fTransaction.add(R.id.ms_content,fg4);
                }else{
                    fTransaction.show(fg4);
                }
                break;
        }
        fTransaction.commit();
    }

    //隐藏所有Fragment
    private void hideAllFragment(FragmentTransaction fragmentTransaction){
        if(fg1 != null)fragmentTransaction.hide(fg1);
        if(fg2 != null)fragmentTransaction.hide(fg2);
        if(fg3 != null)fragmentTransaction.hide(fg3);
        if(fg4 != null)fragmentTransaction.hide(fg4);
    }

}

← Fragment + TextView 实现底部导航栏 Fragment 底部导航栏红点 →

Fragment RadioButton 实现底部导航栏

Android 基础教程