5.1.2 Fragment 练气二阶 底部导航栏实现

标注：本文为个人学习使用，仅做自己学习参考使用，请勿转载和转发
2018-07-18: 初稿，参考博主coder-pig

0. 引言

• 上一节的底部的选相框主要使用的是LinearLayout + TextView实现的底部导航栏的效果，但是每次店家都需要重置所有TextView的状态，然后选中点击的TextView。
• 本节主要使用另一种方法，RadioGroup + RadioButton来实现

1. 主要思路

• 本节用到的实现单选效果是RadioButton，简单电说就是一个RadioGroup包裹着四个RadioButton，和前面一样采取1:1:1:1
• 另外我们只需重写RadioGroup的onCheckedChange，判断checkid即可知道点击的是哪个RadioButton。

2. 实现流程

• 素材还是采用的上一节中的素材，另外drawable类的资源是将selected状态修改为checked！

Step 1：写底部选项的一些资源文件
图片Drawable资源：tab_menu_channel.xml

文字资源：tab_menu_text.xml

背景资源：tab_menu_bg.xml

Step 2：编写我们的Activity布局

• 在前面用TextView实现底部导航栏我们就发现了一个问题，每个TextView的属性都几乎是差不多 的，而在建议那里我们也说让大家把相同的属性抽取出来写到Style中，可能部分朋友懒或者不知道 如何抽取出来，以及用，这里就给大家示范下：

首先我们取出其中一个RadioGroup的标签：

我们可以把每个RadioButton都相同的属性抽取出来，写到style.xml文件中：

然后我们的activity_main.xml中的RadioButton就用不着次次都写相同的代码了， 只需让RadioButton的style="@style/tab_menu_item"就可以了！
activity_main.xml:

Step 3：隐藏顶部导航栏
AndroidManifest.xml设置下theme属性

android:theme="@style/Theme.AppCompat.NoActionBar"

Step 4：创建一个Fragment的简单布局与类：
直接照搬上一节的布局跟Fragment：
fg_content.xml:

MyFragment.java:

public class MyFragment extends Fragment {

    private String content;
    public MyFragment(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.txt_content);
        txt_content.setText(content);
        return view;
    }
}

Step 5：编写MainActivity.java
这个比起TextView实现简单多了，就不详细讲解了，很简单，直接上代码：
MainActivity.java

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener{

    private RadioGroup rg_tab_bar;
    private RadioButton rb_channel;

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();
        rg_tab_bar = (RadioGroup) findViewById(R.id.rg_tab_bar);
        rg_tab_bar.setOnCheckedChangeListener(this);
        //获取第一个单选按钮，并设置其为选中状态
        rb_channel = (RadioButton) findViewById(R.id.rb_channel);
        rb_channel.setChecked(true);
    }


    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        hideAllFragment(fTransaction);
        switch (checkedId){
            case R.id.rb_channel:
                if(fg1 == null){
                    fg1 = new MyFragment("第一个Fragment");
                    fTransaction.add(R.id.ly_content,fg1);
                }else{
                    fTransaction.show(fg1);
                }
                break;
            case R.id.rb_message:
                if(fg2 == null){
                    fg2 = new MyFragment("第二个Fragment");
                    fTransaction.add(R.id.ly_content,fg2);
                }else{
                    fTransaction.show(fg2);
                }
                break;
            case R.id.rb_better:
                if(fg3 == null){
                    fg3 = new MyFragment("第三个Fragment");
                    fTransaction.add(R.id.ly_content,fg3);
                }else{
                    fTransaction.show(fg3);
                }
                break;
            case R.id.rb_setting:
                if(fg4 == null){
                    fg4 = new MyFragment("第四个Fragment");
                    fTransaction.add(R.id.ly_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);
    }

}

3. 小结

• FragmentTransaction只能使用一次，每次使用都要调用FragmentManager 的beginTransaction()方法获得FragmentTransaction事务对象哦！
• 实现底部导航栏的第二种方法:RadioGroup + RadioButton，有了单选，我们 就不用像TextView一样，每次点击后先重置所有TextView的Selected状态，再让点击的TextView 的Selected为true，