Android个人学习笔记-底部导航切换Fragment的实现

前言：虽然经常来CSDN，但是打开自己的博客一看，竟然已经有一年没有更新了，今年刚刚考上计算机研究生，生活也算是一个新的开始，但是作为一个程序员，这可不是一个正常频率，所以接下来的时间还是要保持一定的更新，也算是督促自己继续学习。这篇文章是采用markdown编写的，刚使用没多久，排版不好，敬请谅解。本文主要针对初学者，大牛们请忽略，因为我也是初学者（好几年了还在原地踏步啊！！！）废话太多，下面全是干货（可能会有水货~~~）

1. 底部导航思路
   如果你大致了解该部分的思路，那请直接看代码实现部分。
   因为我是学习javaweb出身，所以在网页端千奇百怪的导航栏可以供我们直接使用，但在Android端里，导航的实现就需要我们一步步的实现。底部导航的实现可以借鉴微信、微博的布局（如下图）
   
   图中1部分为底部2部分切换显示的内容，在具体的实现过程中，我们可以通过一个主布局，该布局包含一个底部的栏和内容显示栏，也即是1部分和2部分。其中1部分应该用来容纳不同的Fragment，2部分可以采用按钮Button或者TextView来实现。通过监听2部分的点击事件来切换1部分的Fragment，怎么样是不是很简单，下面就开始进行实际的开发。
2. 项目的建立
   该部分的项目为一个小的demo，本文具体在于介绍底部导航的实现，所以命名等方面可能不是很规范，其他的方面大家自行屏蔽吧~~~
   先上图
   
   
   图中主要使用的为fragment包和MainActivity类，其中fragment包包含的是不同fragment的切换，MainActivity主要用来展示首页和进行fragment的切换。
   布局文件图主要有activity_main.xml和四个fragment布局。
3. 代码实现
   首先先看一下效果图，再来看具体的代码：
   
   图中底部有四个TextView，设置点击监听事件，点击后切换显示内容
   首先我们来看布局文件：
   主布局文件activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:clipToPadding="true" android:background="@drawable/background_title" tools:context="yu.zmqc.followme.MainActivity">
    <LinearLayout  android:id="@+id/bottom_menu" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true">
        <TextView  android:id="@+id/txt_main" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:background="@drawable/tab_menu_main_bg" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_main_img" android:gravity="center" android:textColor="@drawable/tab_menu_main_txt" android:paddingTop="5dp" android:text="首页"/>
        <TextView  android:id="@+id/txt_clock" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_clock_bg" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_clock_img" android:gravity="center" android:textColor="@drawable/tab_menu_clock_txt" android:paddingTop="5dp" android:text="收藏"/>
        <TextView  android:id="@+id/txt_search" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_main_bg" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_search_img" android:gravity="center" android:textColor="@drawable/tab_menu_main_txt" android:paddingTop="5dp" android:text="搜索"/>
        <TextView  android:id="@+id/txt_user" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1" android:background="@drawable/tab_menu_main_bg" android:drawablePadding="3dp" android:drawableTop="@drawable/tab_menu_user_img" android:gravity="center" android:textColor="@drawable/tab_menu_main_txt" android:paddingTop="5dp" android:text="我"/>
    LinearLayout>
    <FrameLayout  android:id="@+id/main_fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/bottom_menu" android:background="#F1F1F1">
    FrameLayout>
RelativeLayout>

该文件已经经过了删减，如截图有一些不同，通过布局可以看出主布局主要包含四个textView和一个FrameLayout（用来包含Fragment）
Fragment布局文件fragment_main_xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >
        <LinearLayout  android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="#BED4F1" android:orientation="horizontal" android:id="@+id/line" >
        LinearLayout>
        <LinearLayout  android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/line" android:id="@+id/line2" >
            
            <ListView  android:id="@+id/main_listview" android:layout_width="wrap_content" android:layout_height="wrap_content" />
        LinearLayout>
    RelativeLayout>

其实该部分的代码没有太多的意义，针对你的不同需求，可以将该部分改成你需要的页面布局，其余的四个布局也就不一一贴出了。
MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    //底部四个点击TextView
    private TextView txt_main;
    private TextView txt_clock;
    private TextView txt_search;
    private TextView txt_user;
    //fragmet嵌入在这里
    private FrameLayout main_frameLayout;
    //Fragment管理
    private FragmentManager fragmentManager;
    //Fragment类
    private MainFragment mainFragment;
    private ClockFragment clockFragment;
    private SearchFragment searchFragment;
    private UserFragment userFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
    }


    private void initUI(){
        txt_main = (TextView)findViewById(R.id.txt_main);
        txt_clock = (TextView)findViewById(R.id.txt_clock);
        txt_search = (TextView)findViewById(R.id.txt_search);
        txt_user = (TextView)findViewById(R.id.txt_user);
       //framlayout获取
        main_frameLayout = (FrameLayout)findViewById(R.id.main_fragment_container);
        //设置监听器
        txt_main.setOnClickListener(this);
        txt_user.setOnClickListener(this);
        txt_search.setOnClickListener(this);
        txt_clock.setOnClickListener(this);

        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        mainFragment = new MainFragment();
        transaction.add(R.id.main_fragment_container,mainFragment);
        transaction.commit();

        txt_main.setSelected(true);
    }

    @Override
    public void onClick(View view) {
        //v4包导入getSupportFragmentManager，app包使用getFragmentManager，app包3.0后才使用
        fragmentManager = getSupportFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideAllFragment(transaction);
        switch (view.getId()){

            case R.id.txt_main:
                reTxtSelect();
                txt_main.setSelected(true);
                if(mainFragment==null){
                    mainFragment = new MainFragment();
                    transaction.add(R.id.main_fragment_container,mainFragment);
                }else{
                    transaction.show(mainFragment);
                }
                break;
            case R.id.txt_clock:
                reTxtSelect();
                txt_clock.setSelected(true);
                if(clockFragment==null){
                    clockFragment = new ClockFragment();
                    transaction.add(R.id.main_fragment_container,clockFragment);
                }else{
                    transaction.show(clockFragment);
                }
                break;
            case R.id.txt_search:
                reTxtSelect();
                txt_search.setSelected(true);
                if(searchFragment==null){
                    searchFragment = new SearchFragment();
                    transaction.add(R.id.main_fragment_container,searchFragment);
                }else{
                    transaction.show(searchFragment);
                }
                break;
            case R.id.txt_user:
                reTxtSelect();
                txt_user.setSelected(true);
                if(userFragment==null){
                    userFragment = new UserFragment();
                    transaction.add(R.id.main_fragment_container,userFragment);
                }else{
                    transaction.show(userFragment);
                }
                break;

        }

            transaction.commit();

    }

    //初始化底部菜单选择状态
    private void reTxtSelect(){
        txt_main.setSelected(false);
        txt_clock.setSelected(false);
        txt_search.setSelected(false);
        txt_user.setSelected(false);
    }

    //隐藏所有Fragment
    public void hideAllFragment(FragmentTransaction transaction){
        if(mainFragment!=null){
            transaction.hide(mainFragment);
        }
        if(clockFragment!=null){
            transaction.hide(clockFragment);
        }
        if(searchFragment!=null){
            transaction.hide(searchFragment);
        }
        if(userFragment!=null){
            transaction.hide(userFragment);
        }
    }
}

主类的主要步骤就是获得布局中的四个TextView，然后根据监听点击事件动态切换不同的Fragment。
Fragment类主要代码如下，因为具体的实现需要你自己去添加，该部分只需要一个思路即可：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
                                                                  View view = inflater.inflate(R.layout.fragment_main,container,false);
        return view;
    }

4.一些注意事项
前面主要从思路代码进行了具体的分析，经过简单的修正，我还是自己动手写了一个demo出来，供初学者使用，项目基本包含，一个MainActivity，一个主布局activity_main.xml和四个fragment布局，项目地址在文末给出，实现的具体效果如下：


除此之外分享几个项目编写过程中的注意事项，首先给大家一个下载app图标地址（点击就可以跳转），我们可以在该网站找到自己需要的图标，还支持自定义编辑，简直是程序员的福音。
项目中底部图标使用TextView中的drawableTop属性添加图片，图片采用xml的形式，也即是有点击选中效果，drawablePadding属性主要是设置图片与文字的距离，建议高宽选择wrap_content，因为当你选择match_parent时，无论怎么调整距离都会使得图片跟文字拉的很远，这也是实际开发中遇到的，如果要想使得空白距变大，那再添加一个线性布局吧，可能有更好的方法欢迎大家指教，下面是图片的xml文件，该文件作为底部导航点击文本的drawableTop文件，其中项目中还涉及到了背景的选中变色和字体的选中变色，大体的思路一样：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/home_" android:state_selected="true" />
    
    <item android:drawable="@mipmap/home"/>
selector>

具体可以参照项目中的实现
5.项目文件
Android studio2.2开发工具
百度云
CSDN