Fragment的使用（Android实现底部导航栏）





一、布局页面添加

1.添加四个切换页面的布局

（1）四个切换页面的布局(四个页面相同）：

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个页面"
        android:textSize="22sp" />

</LinearLayout>

（2）相应Fragment的实现类：

public class FirstFragment extends Fragment {

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

（3）如图：

2.添加主页面的布局（底部导航按钮布局和顶部标题布局直接写在该布局）

（1）主布局页面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/colorAccent"
    tools:context=".MainActivity">

    <include
        android:id="@+id/show_main_title"
        layout="@layout/title_layout"
        />

    <!-- 此处添加Fragment布局 -->

    <FrameLayout
        android:id="@+id/fragment_buju"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/viewfinder_mask"
        >
    </FrameLayout>


    <!-- 关于试题逻辑的相关功能布局暂时屏蔽

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical"
        android:gravity="center"
        android:background="@color/whitesmoke">

    <TextView
        android:id="@+id/question_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="24dp">
    </TextView>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/true_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/true_button"
            android:textAllCaps="false"/>

        <Button
            android:id="@+id/false_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/false_button"
            android:textAllCaps="false"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageButton
            android:id="@+id/up_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/arrow_left"
            />

        <ImageButton
            android:id="@+id/next_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/arrow_right"
            />


    </LinearLayout>
    </LinearLayout>

        -->

    <!-- 底部四个导航菜单栏 -->

    <!-- 暂时先将该段底部实例注释掉，后期再添加 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/white">

        <RelativeLayout
            android:id="@+id/first_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerVertical="true"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/first_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@android:drawable/ic_menu_compass"/>

                <TextView
                    android:id="@+id/first_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:textColor="#7597B3"
                    android:text="消息"/>

            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/second_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerVertical="true"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/second_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@android:drawable/ic_menu_agenda"/>
                <TextView
                    android:id="@+id/second_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:textColor="#7597B3"
                    android:text="发现"/>

            </LinearLayout>



        </RelativeLayout>


        <RelativeLayout
            android:id="@+id/third_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerVertical="true"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/third_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@android:drawable/ic_menu_edit"/>
                <TextView
                    android:id="@+id/third_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:textColor="#7597B3"
                    android:text="记录"/>

            </LinearLayout>

        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/fourth_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerVertical="true"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/fourth_image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:src="@android:drawable/ic_menu_myplaces"/>
                <TextView
                    android:id="@+id/fourth_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:textColor="#7597B3"
                    android:text="我的"/>

            </LinearLayout>

        </RelativeLayout>

    </LinearLayout>



    <!-- 替代按钮导航  -->
    <!--
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#FFFFFF"
        android:orientation="horizontal">

        <Button
            android:id="@+id/button_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="消息"/>

        <Button
            android:id="@+id/button_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="发现"/>

        <Button
            android:id="@+id/button_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="记录"/>

        <Button
            android:id="@+id/button_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="我的"/>


    </LinearLayout>
    -->

</LinearLayout>

页面上添加了四个底部菜单按钮和一个通用头部布局，头部引入代码如果没有写相关布局可以先忽略去掉（删除）

关键代码：

<FrameLayout
    android:id="@+id/fragment_buju"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/viewfinder_mask"
    >
</FrameLayout>

这一块是引入中间需要切换的界面的代码，导航和底部菜单的布局可以随意添加；初次使用底部的导航布局建议使用四个Button按钮，且先添加两个功能按钮，方便理解。

(2)相应实现类

public class MainActivity extends Activity {


    private TextView mFirstButton, mSecondFragment;
    private ImageView mFirstImage, mSecondImage;
    private RelativeLayout mFirstLayout, mSecondLayout;
    private Fragment mFragment1;

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

        initView();
        setview();
    }

    // 控件点击事件方法
    private void setview() {

        mFirstLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 获取Fragment对象
                android.app.FragmentManager fm = getFragmentManager();
                // 开启一个事物
                android.app.FragmentTransaction MfragmentTransactions  = fm.beginTransaction();
                // 将自己创建的fragment通过对象引入
                 FirstFragment fff = new FirstFragment();
                 // 向容器内加入Fragment，一般使用add或者replace方法实现，需要传入容器的id和Fragment的实例
                MfragmentTransactions .replace(R.id.fragment_buju,fff);
                MfragmentTransactions .commit();

            }
        });


        mSecondLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentManager fm = getFragmentManager();
                FragmentTransaction fragmentTransaction = fm.beginTransaction();
                SecondFragment f2 = new SecondFragment();
                fragmentTransaction.replace(R.id.fragment_buju,f2);
                fragmentTransaction.commit();
            }
        });
    }

    // 初始化控件方法
    private void initView(){
        mFirstButton = (TextView)findViewById(R.id.first_text);
        mSecondFragment = (TextView)findViewById(R.id.second_text);

        mFirstImage = (ImageView)findViewById(R.id.first_image);
        mSecondImage = (ImageView)findViewById(R.id.second_image);

        mFirstLayout = (RelativeLayout)findViewById(R.id.first_layout);
        mSecondLayout = (RelativeLayout)findViewById(R.id.second_layout);


    }

}

实现方法中主要分为四步：1.引入布局（主布局）；2.定义成员变量；3.初始化数据；4.定义按钮点击事件；

定义点击事件中四个点击事件的代码重复，可以优化处理，这里为了便于理解不做分开处理。

（3）如图：

二、自己学习过程遇到的问题

（1）看不懂FrameLayout布局如何引入四个页面；

XXX：这个多看几遍，自己照着写写就水到渠成的明白了；

（2）四个底部导航布局包括ImageView、TextView和RelativeLayout，不知道初始化数据需要初始化哪些，按钮点击事件写在哪个组件上；

XXX：还是对组件布局不熟悉；具体看点击事件要实现在那个地方；

（3）引入fragment时报错：

错误：不兼容的类型：FirstFragment无法转换为Fragment，

XXX：这个是Fragment使用导入包不一致导致的；导入包有两个，一个是系统内置的android.app.Fragment，一个是support-v4库中的android.support.v4.app.Fragment，但是建议使用后者；