5.2.1 Fragment实例精讲——底部导航栏的实现(方法1)

本节引言：

在上一节中我们对Fragment进行了一个初步的了解，学习了概念，生命周期，Fragment管理与 Fragment事务，以及动态与静态加载Fragment。从本节开始我们会讲解一些Fragment在实际开发 中的一些实例！而本节给大家讲解的是底部导航栏的实现！而基本的底部导航栏方法有很多种， 比如全用TextView做，或者用RadioButton，又或者使用TabLayout + RadioButton，当然复杂 的情况还是得走外层套布局的方法！本节我们用TextView来做一个底部导航栏的效果，也熟悉 下Fragment的使用！好的，开始本节内容！

1.要实现的效果图以及工程目录结构：

先看看效果图吧：

接着看看我们的工程的目录结构：

2.实现流程：

Step 1：写下底部选项的一些资源文件

我们从图上可以看到，我们底部的每一项点击的时候都有不同的效果是吧！ 我们是通过是否selected来判定的！我们要写的资源文件有：首先是图片，然后是文字，接着是背景！

图片Drawable资源：tab_menu_channel.xml

其他三个照葫芦画瓢！

文字资源：tab_menu_text.xml

背景资源：tab_menu_bg.xml

Step 2：编写我们的Activity布局

activity_main.xml:

代码解析：

先把顶部标题栏的样式定下来：使用一个48dp高的LinearLayout，在中间放置一个TextView作为页面标题。
然后再定义一个56dp大小的LinerLayout，并将它对齐到底部；在这个布局内部加入四个TextView，按1:1:1:1的比例分配，同时把相关属性一并设置好，接着在这个LinearLayout上方加一条线段。
最后，以顶部标题栏和底部导航栏作为边界，创建一个宽高都为match_parent的FrameLayout，用来充当Fragment的容器。

PS：这里四个TextView属性是重复的，你也可以自行抽取出来，编写一个style，设置下~

Step 3：隐藏顶部导航栏

意外发现以前的在Activity中调用requestWindowFeature(Window.FEATURE_NO_TITLE);可以隐藏手机 自带顶部导航栏，但是写demo时候发现会报错，即使这句话写在了setContentView()之前！可能是因为 继承的是AppCompatActivity而非Activity类！
当然以前的getSupportActionbar().hide()隐藏掉Actionbar，但是他还是会在界面上！ 最后还有一种方法就是自己编写一个style，然后在AndroidManifest.xml中为Application设置这个Theme：

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

接着AndroidManifest.xml设置下theme属性：

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

PS：上述"良心代码"由好程序员曹神赞助~

Step 4：创建一个Fragment的简单布局与类：

fg_content.xml:

MyFragment.ja va:

/**
 * Created by Coder-pig on 2015/8/28 0028.
 */
public class MyFragment extends Fragment {
private String content;
    public MyFragment(String content) {
        this.content = content;
    }
@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa vedInstanceState) {
        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;
    }
}

代码解析：

就是简单的重写了一个onCreateView()方法，其他方法可以按需重写!

Step 5：编写MainActivity.ja va

先说说我们要考虑的一些关键问题：

• Fragment什么时候初始化和add到容器中？什么时候hide和show？
• 如何让TextView被选中？选中一个TextView后，要做一些什么操作？
• 刚进入MainActivity怎么样让一个TextView处于Selected的状态？

嗯，接下来一一解答上面这些问题：

• 我们选中TextView后对对应的Fragment进行判空，如果为空，初始化，并添加到容器中； 而hide的话，我们定义一个方法hide所有的Fragment，每次触发点击事件就先调用这个hideAll方法， 讲所有Fragment隐藏起来，然后如果TextView对应的Fragment不为空，我们就将这个Fragment显示出来；
• 这个我们通过点击事件来实现，点击TextView后先重置所有TextView的选中状态为false，然后设置点击的 TextView的选中状态为true；
• 这个更简单，我们是通过点击事件来设置选中的，那么在onCreate()方法里加个触发点击事件的 方法不就可以了嘛~ txt_channel.performClick();

逻辑都弄懂了，直接上代码咯：

MainActivity.ja va:

/**
 * Created by Coder-pig on 2015/8/28 0028.
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
//UI Object
    private TextView txt_topbar;
    private TextView txt_channel;
    private TextView txt_message;
    private TextView txt_better;
    private TextView txt_setting;
    private FrameLayout ly_content;
//Fragment Object
    private MyFragment fg1,fg2,fg3,fg4;
    private FragmentManager fManager;
@Override
    protected void onCreate(Bundle sa vedInstanceState) {
        super.onCreate(sa vedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        fManager = getFragmentManager();
        bindViews();
        txt_channel.performClick();   //模拟一次点击，既进去后选择第一项
    }
//UI组件初始化与事件绑定
    private void bindViews() {
        txt_topbar = (TextView) findViewById(R.id.txt_topbar);
        txt_channel = (TextView) findViewById(R.id.txt_channel);
        txt_message = (TextView) findViewById(R.id.txt_message);
        txt_better = (TextView) findViewById(R.id.txt_better);
        txt_setting = (TextView) findViewById(R.id.txt_setting);
        ly_content = (FrameLayout) findViewById(R.id.ly_content);
txt_channel.setOnClickListener(this);
        txt_message.setOnClickListener(this);
        txt_better.setOnClickListener(this);
        txt_setting.setOnClickListener(this);
    }
//重置所有文本的选中状态
    private void setSelected(){
        txt_channel.setSelected(false);
        txt_message.setSelected(false);
        txt_better.setSelected(false);
        txt_setting.setSelected(false);
    }
//隐藏所有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);
    }
@Override
    public void onClick(View v) {
        FragmentTransaction fTransaction = fManager.beginTransaction();
        hideAllFragment(fTransaction);
        switch (v.getId()){
            case R.id.txt_channel:
                setSelected();
                txt_channel.setSelected(true);
                if(fg1 == null){
                    fg1 = new MyFragment("第一个Fragment");
                    fTransaction.add(R.id.ly_content,fg1);
                }else{
                    fTransaction.show(fg1);
                }
                break;
            case R.id.txt_message:
                setSelected();
                txt_message.setSelected(true);
                if(fg2 == null){
                    fg2 = new MyFragment("第二个Fragment");
                    fTransaction.add(R.id.ly_content,fg2);
                }else{
                    fTransaction.show(fg2);
                }
                break;
            case R.id.txt_better:
                setSelected();
                txt_better.setSelected(true);
                if(fg3 == null){
                    fg3 = new MyFragment("第三个Fragment");
                    fTransaction.add(R.id.ly_content,fg3);
                }else{
                    fTransaction.show(fg3);
                }
                break;
            case R.id.txt_setting:
                setSelected();
                txt_setting.setSelected(true);
                if(fg4 == null){
                    fg4 = new MyFragment("第四个Fragment");
                    fTransaction.add(R.id.ly_content,fg4);
                }else{
                    fTransaction.show(fg4);
                }
                break;
        }
        fTransaction.commit();
    }
}

3.代码下载：

FragmentDemo.zip：FragmentDemo.zip 下载 声明：图片素材来自App：better，本代码只做演示，并无用于商业用途！

4.本节小结

这一节主要梳理了，怎样用一个LinarLayout配合四个TextView，做出一个底部导航栏，并把Fragment的add、hide、show这套切换逻辑跑通。整体思路其实并不复杂，跟着步骤走下来会比较顺手。最后，也要特别感谢小猪秘密基地的基神、B神，以及好程序员曹神提供的一些点拨，确实帮了不少忙。就把这篇内容当作一次小小的记录，也算是给“小猪重返装逼界”、嗯，重返应用层留个纪念。好了，这一节就先写到这里，谢谢。