【Android】安卓开发实战之使用Fragment（碎片）实现底部导航栏效果

现在的APP一般底部有一个导航栏，点击可以切换不同的内容，但又没有出现一个活动跳转到另一个活动的现象，这个效果如何实现？方法自然是有的，比如说使用Fragment碎片。

一、准备八张图片，放入drawable文件夹下。

二、创建主布局文件using_main.xml

<?xml version="1.0" encoding="utf-8"?>
<!--这里我用了一个重写的线性布局，以便更换状态栏的颜色-->
<!--不清楚怎么设置状态栏颜色的，参考我之前写的博客-->
<!--当然你不想这么麻烦的话，直接使用线性布局也可以-->
<com.example.test.ActionBarLayOut xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/layout_usingId"
    >
    <!--这个帧布局充满了整个父容器，用于Fragment的替换-->
    <!--layout_weight设置为1，为了不要把下面的组件挤出屏幕-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frameLayoutId"
        android:layout_weight="1"
        >
    </FrameLayout>
    <!--这个线性布局将包含4个子线性布局-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <!--这个子线性布局将包含一个ImageView和一个TextView-->
        <!--剩下的三个子线性布局也类似-->
        <LinearLayout
            android:id="@+id/linkManTouchId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_gravity="center"
            >
            <ImageView
                android:id="@+id/use_linkImageId"
                android:layout_width="@dimen/buttomImage"
                android:layout_height="@dimen/buttomImage"
                android:src="@drawable/unlinkman"
                android:layout_gravity="center"
                />
            <TextView
                android:id="@+id/use_linkTextId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/linkman"
                android:gravity="center"
                android:textColor="@color/theGray"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/lifeTouchId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_gravity="center"
            >
            <ImageView
                android:id="@+id/use_lifeImageId"
                android:layout_width="@dimen/buttomImage"
                android:layout_height="@dimen/buttomImage"
                android:src="@drawable/unlife"
                android:layout_gravity="center"
                />
            <TextView
                android:id="@+id/use_lifeTextId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/life"
                android:gravity="center"
                android:textColor="@color/theGray"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/knowledgeTouchId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_gravity="center"
            >
            <ImageView
                android:id="@+id/use_knowImageId"
                android:layout_width="@dimen/buttomImage"
                android:layout_height="@dimen/buttomImage"
                android:src="@drawable/unknowledge"
                android:layout_gravity="center"
                />
            <TextView
                android:id="@+id/use_knowTextId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/knowledge"
                android:gravity="center"
                android:textColor="@color/theGray"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/myTouchId"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="1"
            android:layout_gravity="center"
            >
            <ImageView
                android:id="@+id/use_myImageId"
                android:layout_width="@dimen/buttomImage"
                android:layout_height="@dimen/buttomImage"
                android:src="@drawable/unmy"
                android:layout_gravity="center"
                />
            <TextView
                android:id="@+id/use_myTextId"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/my"
                android:gravity="center"
                android:textColor="@color/theGray"
                />
        </LinearLayout>
    </LinearLayout>
</com.example.test.ActionBarLayOut>

布局效果：

三、新建要替换FrameLayout的布局文件fragment_knowledge.xml，这里以“知识”布局为例，其他三个布局也是类似的

<?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:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/rectangle_width"
        android:background="@color/theRed">

        <ImageView
            android:id="@+id/k_uploadImageId"
            android:layout_width="@dimen/titleImage"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/titleRetract"
            android:src="@drawable/upload" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center">
            <Button
                android:id="@+id/k_button_rule"
                android:layout_width="@dimen/title_button_W2"
                android:layout_height="@dimen/title_button_H"
                android:background="@drawable/round_white_food"
                android:text="@string/apartment_rule"
                android:textColor="@color/theRed"
                />
            <Button
                android:id="@+id/k_button_tips"
                android:layout_width="@dimen/title_button_W2"
                android:layout_height="@dimen/title_button_H"
                android:background="@drawable/round_red_hotel"
                android:text="@string/convenient_tips"
                android:textColor="@color/white"
                />
        </LinearLayout>

        <ImageView
            android:id="@+id/k_search_life_ImageId"
            android:layout_width="@dimen/titleImage"
            android:layout_height="wrap_content"
            android:layout_marginRight="@dimen/titleRetract"
            android:src="@drawable/search" />
    </LinearLayout>

    <ListView
        android:id="@+id/k_listViewOfKnowId"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

布局效果：

四、新建一个FragmentOfKnowLedge类，继承Fragment类，实现点击接口，其他的三个Fragment类和这个类类似

public class FragmentOfKnowLedge extends Fragment implements View.OnClickListener {
    private Button ruleButton;
    private Button tipsButton;
    /**
     *这个方法可以进行适配器和布局的绑定，初始化Item点击监听
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup contain, Bundle savedInstanceState) {
        //这里获取要替换掉FrameLayout的布局fragment_knowledge.xml
        View view = inflater.inflate(R.layout.fragment_knowledge,contain,false);

        ruleButton = (Button)view.findViewById(R.id.k_button_rule);
        tipsButton = (Button)view.findViewById(R.id.k_button_tips);

        ruleButton.setOnClickListener(this);
        tipsButton.setOnClickListener(this);

        return view;
    }

    @Override
    public void onClick(View view){
        switch(view.getId()){
            case R.id.k_button_rule:
                //--------------------更新“知识”界面顶部标题栏的按键的背景和字体颜色--------------
                ruleButton.setBackground(getResources().getDrawable(R.drawable.round_white_food));
                tipsButton.setBackground(getResources().getDrawable(R.drawable.round_red_hotel));
                ruleButton.setTextColor(getResources().getColor(R.color.theRed));
                tipsButton.setTextColor(getResources().getColor(R.color.white));
                //----------------------------------------------------------------------------------
                break;
            case R.id.k_button_tips:
                //--------------------更新“知识”界面顶部标题栏的按键的背景和字体颜色--------------
                ruleButton.setBackground(getResources().getDrawable(R.drawable.round_red_food));
                tipsButton.setBackground(getResources().getDrawable(R.drawable.round_white_hotel));
                ruleButton.setTextColor(getResources().getColor(R.color.white));
                tipsButton.setTextColor(getResources().getColor(R.color.theRed));
                //----------------------------------------------------------------------------------
                break;
            default:
                break;
        }
    }
}

五、在相应的活动中加载Fragment，我这里的活动是UsingMain

/**
 * 这是本APP的主要活动页
 */
public class UsingMain extends BaseActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.using_main);
        //---------------------------给状态栏设置颜色-----------------------------------------------
        TextView textViewActionBar = (TextView)findViewById(R.id.actionBarId);
        setActionBarColor(textViewActionBar,getResources().getColor(R.color.theRed));
        //------------------------------------------------------------------------------------------

        //---------------------------添加联系人Fragment---------------------------------------------
        FragmentOfLinkMan fragmentOfLinkMan = new FragmentOfLinkMan();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.frameLayoutId,fragmentOfLinkMan);
        transaction.commit();
        ImageView linkImage = (ImageView)findViewById(R.id.use_linkImageId);
        TextView linkText = (TextView)findViewById(R.id.use_linkTextId);
        linkImage.setImageResource(R.drawable.linkman);
        linkText.setTextColor(getResources().getColor(R.color.theBlue));
        //------------------------------------------------------------------------------------------

        //---------------------------------添加监听事件---------------------------------------------
        LinearLayout linkll = (LinearLayout)findViewById(R.id.linkManTouchId);
        LinearLayout lifell = (LinearLayout)findViewById(R.id.lifeTouchId);
        LinearLayout knowll = (LinearLayout)findViewById(R.id.knowledgeTouchId);
        LinearLayout myll = (LinearLayout)findViewById(R.id.myTouchId);
        linkll.setOnClickListener(this);
        lifell.setOnClickListener(this);
        knowll.setOnClickListener(this);
        myll.setOnClickListener(this);
        //------------------------------------------------------------------------------------------


    }

    @Override
    public void onClick(View view){
        ImageView linkImage = (ImageView)findViewById(R.id.use_linkImageId);
        ImageView lifeImage = (ImageView)findViewById(R.id.use_lifeImageId);
        ImageView knowImage = (ImageView)findViewById(R.id.use_knowImageId);
        ImageView myImage = (ImageView)findViewById(R.id.use_myImageId);

        TextView linkText = (TextView)findViewById(R.id.use_linkTextId);
        TextView lifeText = (TextView)findViewById(R.id.use_lifeTextId);
        TextView knowText = (TextView)findViewById(R.id.use_knowTextId);
        TextView myText = (TextView)findViewById(R.id.use_myTextId);
        switch (view.getId()){
            case R.id.linkManTouchId://点击“联系人”触发的监听事件
                //---------------------------联系人处高亮，其他灰色---------------------------------
                linkImage.setImageResource(R.drawable.linkman);
                lifeImage.setImageResource(R.drawable.unlife);
                knowImage.setImageResource(R.drawable.unknowledge);
                myImage.setImageResource(R.drawable.unmy);

                linkText.setTextColor(getResources().getColor(R.color.theBlue));
                lifeText.setTextColor(getResources().getColor(R.color.theGray));
                knowText.setTextColor(getResources().getColor(R.color.theGray));
                myText.setTextColor(getResources().getColor(R.color.theGray));
                //----------------------------------------------------------------------------------
                //---------------------------添加联系人Fragment-------------------------------------
                FragmentOfLinkMan fragmentOfLinkMan = new FragmentOfLinkMan();
                FragmentManager fragmentManagerLinkMan = getFragmentManager();
                FragmentTransaction transactionLinkMan = fragmentManagerLinkMan.beginTransaction();
                transactionLinkMan.replace(R.id.frameLayoutId,fragmentOfLinkMan);
                transactionLinkMan.commit();
                //----------------------------------------------------------------------------------
                break;
            case R.id.lifeTouchId://点击“生活”触发的监听事件
                //---------------------------生活处高亮，其他灰色-----------------------------------
                linkImage.setImageResource(R.drawable.unlinkman);
                lifeImage.setImageResource(R.drawable.life);
                knowImage.setImageResource(R.drawable.unknowledge);
                myImage.setImageResource(R.drawable.unmy);

                linkText.setTextColor(getResources().getColor(R.color.theGray));
                lifeText.setTextColor(getResources().getColor(R.color.theBlue));
                knowText.setTextColor(getResources().getColor(R.color.theGray));
                myText.setTextColor(getResources().getColor(R.color.theGray));
                //----------------------------------------------------------------------------------
                //---------------------------添加美食Fragment---------------------------------------
                FragmentOfFood fragmentOfFood = new FragmentOfFood();
                FragmentManager fragmentManagerFood = getFragmentManager();
                FragmentTransaction transactionFood = fragmentManagerFood.beginTransaction();
                transactionFood.replace(R.id.frameLayoutId,fragmentOfFood);
                transactionFood.commit();
                //----------------------------------------------------------------------------------
                break;
            case R.id.knowledgeTouchId://点击“知识”触发的监听事件
                //---------------------------知识处高亮，其他灰色-----------------------------------
                linkImage.setImageResource(R.drawable.unlinkman);
                lifeImage.setImageResource(R.drawable.unlife);
                knowImage.setImageResource(R.drawable.knowledge);
                myImage.setImageResource(R.drawable.unmy);

                linkText.setTextColor(getResources().getColor(R.color.theGray));
                lifeText.setTextColor(getResources().getColor(R.color.theGray));
                knowText.setTextColor(getResources().getColor(R.color.theBlue));
                myText.setTextColor(getResources().getColor(R.color.theGray));
                //----------------------------------------------------------------------------------
                //---------------------------添加知识Fragment---------------------------------------
                FragmentOfKnowLedge fragmentOfKnow = new FragmentOfKnowLedge();
                FragmentManager fragmentManagerKnow = getFragmentManager();
                FragmentTransaction transactionKnow = fragmentManagerKnow.beginTransaction();
                transactionKnow.replace(R.id.frameLayoutId,fragmentOfKnow);
                transactionKnow.commit();
                //----------------------------------------------------------------------------------
                break;
            case R.id.myTouchId://点击“我的”触发的监听事件
                //---------------------------我的处高亮，其他灰色-----------------------------------
                linkImage.setImageResource(R.drawable.unlinkman);
                lifeImage.setImageResource(R.drawable.unlife);
                knowImage.setImageResource(R.drawable.unknowledge);
                myImage.setImageResource(R.drawable.my);

                linkText.setTextColor(getResources().getColor(R.color.theGray));
                lifeText.setTextColor(getResources().getColor(R.color.theGray));
                knowText.setTextColor(getResources().getColor(R.color.theGray));
                myText.setTextColor(getResources().getColor(R.color.theBlue));
                //----------------------------------------------------------------------------------
                break;
            default:break;
        }
    }
}

最后看一下效果：