在上一篇中，簡單的使用透明主題的Activity實現了仿微信右側頂部的對話方塊，上午又花了兩個小時研究了一下淘寶底部的導航欄實現，網上的做法也有很多，今天我就使用一種通過基本控制元件加上佈局的方式，沒有任何的自定義風格，控制元件等來實現，還是老樣子，先看一下效果圖：

下面就來具體看一看如何實現的，還是按照步驟來吧：

• 繪製主介面

activity_layout.xml程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_marginBottom="50dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="@color/noCheckedColor">

        <RelativeLayout
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="match_parent">
        <ImageView
            android:layout_marginTop="5dp"
            android:id="@+id/title_image"
            android:layout_marginLeft="18dp"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:background="@drawable/taobao" />

            <LinearLayout
                android:gravity="center"
                android:orientation="vertical"
                android:id="@+id/first_page_layout"
                android:layout_width="60dp"
                android:layout_height="wrap_content">
            <ImageView
                android:id="@+id/first_page_icon"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:background="@drawable/firstpage" />

            <TextView
                android:textColor="#000000"
                android:id="@+id/first_page_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="首頁" />
            </LinearLayout>

        </RelativeLayout>

            <LinearLayout
                android:layout_marginLeft="26dp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="4">

                <LinearLayout
                    android:id="@+id/micro_tao_layout"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/microtao_icon"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@drawable/microtao" />

                    <TextView
                        android:textColor="#000000"
                        android:id="@+id/microtao_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="微淘" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/message_layout"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/message_icon"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@drawable/message" />

                    <TextView
                        android:textColor="#000000"
                        android:id="@+id/message_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="訊息" />
                </LinearLayout>


                <LinearLayout
                    android:id="@+id/buycar_layout"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/buycar_icon"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@drawable/buycar" />

                    <TextView
                        android:textColor="#000000"
                        android:id="@+id/buycar_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="購物車" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/myfile_layout"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:id="@+id/myfile_icon"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:background="@drawable/myfile" />

                    <TextView
                        android:textColor="#000000"
                        android:id="@+id/myfile_text"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="我的淘寶" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
</RelativeLayout>

• 介面的邏輯控制Activity:

MainActivity.java程式碼：

package com.hfut.enmulatetaobaonavbar;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.hfut.enmulatetaobaonavbar.fragment.BuycarFragment;
import com.hfut.enmulatetaobaonavbar.fragment.FirstPageFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MessageFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MicroTaoFragment;
import com.hfut.enmulatetaobaonavbar.fragment.MyfileFragment;

/**
 * @author why
 * @date 2018-10-3 11:12:39
 */
public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    LinearLayout microTaoLay;
    LinearLayout messageLay;
    LinearLayout buycarLay;
    LinearLayout myfileLay;
    LinearLayout firstPageLay;

    ImageView microTaoIcon;
    ImageView messageIcon;
    ImageView buycarIcon;
    ImageView myfileIcon;
    ImageView firstPageIcon;
    ImageView titleImage;

    TextView microTaoText;
    TextView messageText;
    TextView buycarText;
    TextView myfileText;


    FragmentManager manager;
    FragmentTransaction transaction;
    Fragment firFragment, microFragment, messageFragment, buycarFragment, myfileFragment;

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

        manager = getSupportFragmentManager();
        transaction = manager.beginTransaction();
        firFragment = new FirstPageFragment();
        transaction.add(R.id.fragment_container, firFragment);
        transaction.commit();
        initUI();
    }

    private void initUI() {
        microTaoLay = findViewById(R.id.micro_tao_layout);
        messageLay = findViewById(R.id.message_layout);
        buycarLay = findViewById(R.id.buycar_layout);
        myfileLay = findViewById(R.id.myfile_layout);
        firstPageLay = findViewById(R.id.first_page_layout);
        firstPageLay.setVisibility(View.INVISIBLE);

        microTaoIcon = findViewById(R.id.microtao_icon);
        messageIcon = findViewById(R.id.message_icon);
        buycarIcon = findViewById(R.id.buycar_icon);
        myfileIcon = findViewById(R.id.myfile_icon);
        firstPageIcon = findViewById(R.id.first_page_icon);
        titleImage = findViewById(R.id.title_image);

        microTaoText = findViewById(R.id.microtao_text);
        messageText = findViewById(R.id.message_text);
        buycarText = findViewById(R.id.buycar_text);
        myfileText = findViewById(R.id.myfile_text);

        microTaoLay.setOnClickListener(this);
        messageLay.setOnClickListener(this);
        buycarLay.setOnClickListener(this);
        myfileLay.setOnClickListener(this);
        firstPageLay.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        transaction = manager.beginTransaction();
        hideFragment(transaction);//隱藏之前的Fragment
        switch (v.getId()) {
            case R.id.micro_tao_layout:
                microFragment = new MicroTaoFragment();
                transaction.add(R.id.fragment_container, microFragment);
                transaction.commit();
                microTaoIcon.setImageDrawable(getResources().getDrawable(R.drawable.microtao_choosen));
                microTaoText.setTextColor(Color.RED);

                //顯示首頁佈局，隱藏標題淘寶圖片
                if (firstPageLay.getVisibility() != View.VISIBLE) {
                    firstPageLay.setVisibility(View.VISIBLE);
                    titleImage.setVisibility(View.INVISIBLE);
                }

                break;
            case R.id.message_layout:
                messageFragment = new MessageFragment();
                transaction.add(R.id.fragment_container, messageFragment);
                transaction.commit();
                messageIcon.setImageDrawable(getResources().getDrawable(R.drawable.message_choosen));
                messageText.setTextColor(Color.RED);

                //顯示首頁佈局，隱藏標題淘寶圖片
                if (firstPageLay.getVisibility() != View.VISIBLE) {
                    firstPageLay.setVisibility(View.VISIBLE);
                    titleImage.setVisibility(View.INVISIBLE);
                }
                break;
            case R.id.buycar_layout:
                buycarFragment = new BuycarFragment();
                transaction.add(R.id.fragment_container, buycarFragment);
                transaction.commit();
                buycarIcon.setImageDrawable(getResources().getDrawable(R.drawable.buycar_choosen));
                buycarText.setTextColor(Color.RED);

                //顯示首頁佈局，隱藏標題淘寶圖片
                if (firstPageLay.getVisibility() != View.VISIBLE) {
                    firstPageLay.setVisibility(View.VISIBLE);
                    titleImage.setVisibility(View.INVISIBLE);
                }
                break;
            case R.id.myfile_layout:
                myfileFragment = new MyfileFragment();
                transaction.add(R.id.fragment_container, myfileFragment);
                transaction.commit();
                myfileIcon.setImageDrawable(getResources().getDrawable(R.drawable.myfile_choosen));
                myfileText.setTextColor(Color.RED);

                //顯示首頁佈局，隱藏標題淘寶圖片
                if (firstPageLay.getVisibility() != View.VISIBLE) {
                    firstPageLay.setVisibility(View.VISIBLE);
                    titleImage.setVisibility(View.INVISIBLE);
                }
                break;

            case R.id.first_page_layout:
                firFragment = new FirstPageFragment();
                transaction.add(R.id.fragment_container, firFragment);
                transaction.commit();
                firstPageLay.setVisibility(View.INVISIBLE);
                titleImage.setVisibility(View.VISIBLE);

            default:
                break;
        }
    }

    private void hideFragment(FragmentTransaction transaction) {
        if (firFragment != null) {
            transaction.remove(firFragment);

        }
        if (microFragment != null) {
            transaction.remove(microFragment);
            microTaoIcon.setImageDrawable(getResources().getDrawable(R.drawable.microtao));
            microTaoText.setTextColor(Color.BLACK);

        }
        if (messageFragment != null) {
            transaction.remove(messageFragment);
            messageIcon.setImageDrawable(getResources().getDrawable(R.drawable.message));
            messageText.setTextColor(Color.BLACK);
        }
        if (buycarFragment != null) {
            transaction.remove(buycarFragment);
            buycarIcon.setImageDrawable(getResources().getDrawable(R.drawable.buycar));
            buycarText.setTextColor(Color.BLACK);
        }
        if (myfileFragment != null) {
            transaction.remove(myfileFragment);
            myfileIcon.setImageDrawable(getResources().getDrawable(R.drawable.myfile));
            myfileText.setTextColor(Color.BLACK);
        }
    }
}

• Fragment對應的佈局程式碼（這裡為了簡化，所有Fragment使用的是同一個很簡單的佈局）：

fragment_layout.xml程式碼：

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

    <TextView
        android:gravity="center"
        android:id="@+id/tip_message"
        android:textSize="30sp"
        android:text="首頁"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

• 自定義Fragment程式碼（這裡我就給出一個，其他的完全一樣，只是修改了Fragment佈局中的文字內容）：

FirstPageFragment.java程式碼：

package com.hfut.enmulatetaobaonavbar.fragment;


import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.hfut.enmulatetaobaonavbar.R;

/**
 * author:why
 * created on: 2018/10/3 12:11
 * description:
 */
public class FirstPageFragment extends Fragment {

    TextView message;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_layout, container, false);
        message=view.findViewById(R.id.tip_message);
        message.setText("這是首頁");
        return view;
    }
}

上面就是幾個主要的組成部分了，其他的素材就不介紹了，還有就是很多程式碼可以優化的地方也沒有做在太多考慮，下面就來說一說幾個需要注意的點：

• Fragment，FragmentManager，FragmentTransaction的配合使用
• 淘寶圖示與首頁選單項的切換
• Fragment的包不要使用錯了，不是android.app.Fragment
• 填充FramLayout的時候，注意FragmentTransaction裡面的內容的新增與刪除
• 實現的本質其實就是點選事件與FramLayout配合Fragment實現的