底部導(dǎo)航欄的實現(xiàn)有很多種方法，我這里采用的是最簡單的LinearLayout+TextView布局在塔，沒有使用RadioGroup做布局拿霉，主要是為了兼容底部出現(xiàn)新消息小圓點的這種情況什往，本篇文章參考以下鏈接：
Fragment實例精講——底部導(dǎo)航欄的實現(xiàn)

提前聲明，本篇文章的講解可能有些長饰潜，大家不妨先泡杯維維豆奶再來看戲。

先上一張效果圖吧：

3.gif

提前準(zhǔn)備

由于我項目中用到ButterKnife初始化控件和簸，所以app gradle中需要引入ButterKnife的依賴:

    //butterKnife
    compile 'com.jakewharton:butterknife:8.5.1'
    //這條千萬不能忘記!!
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.5.1'

ButterKnife的使用大家可以參考我的另一篇文章
butterknife的使用

首先說是設(shè)置底部導(dǎo)航欄中一個上面加有圖片的textView和每個小方格中右上角顯示小圓點的textView

1.先給出底部顯示圖片的TextView和顯示小圓點的TextView的樣式xml

在value文件夾下的stytel.xml中添加兩個stytel

    <style name="tab_menu_text">
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_centerInParent">true</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/tab_menu_text</item>
    </style>

    <style name="tab_menu_bgnum">
        <item name="android:layout_width">30dp</item>
        <item name="android:layout_height">20dp</item>
        <item name="android:background">@drawable/shape_round_textview</item>
        <item name="android:layout_marginLeft">-10dp</item>
        <item name="android:textSize">12sp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@color/white</item>
    </style>

2.在drawable下寫一個shape_round_textview.xml文件彭雾，用于實現(xiàn)小圓點TextView的圓形背景

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="@color/color_f5cc1d" />
    <size android:width="15dp" android:height="15dp" />
</shape>

在drawable下寫上點擊底部文字顏色切換的tab_menu_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/red" android:state_selected="true" />
    <item android:color="@color/blue" />
</selector>

在drawable下寫上點擊底部圖片切換的tab_menu_chat.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_launcher" android:state_selected="true" />
    <item android:drawable="@mipmap/ic_chat" />
</selector>

其它三個tab_menu_find.xml，tab_menu_user.xml锁保，tab_menu_me.xml圖片的切換與此類似薯酝，copy一下改改就行

3.寫一個BaseFragment用于所有Fragment去繼承它,記住半沽，此處用的所有與fragment相關(guān)的都是用的v4包下的，別導(dǎo)錯包了

package com.test.ui.fragment;

import android.content.Context;
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.EditText;

import com.test.util.StringUtil;
import com.test.util.ToastUtil;

import butterknife.ButterKnife;
import butterknife.Unbinder;

/**
 * Created by Admin on 2017/6/7.
 */

public abstract class BaseFragment extends Fragment {

    protected View mLayoutView;
    protected Context mContext;
    private Unbinder mUnbinder;

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        mContext = context;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        mLayoutView = inflater.inflate(getLayoutId(), container, false);
        mUnbinder=ButterKnife.bind(this,mLayoutView);//綁定framgent
        onCreateFragmentView(inflater, container, savedInstanceState);


        return mLayoutView;
    }

    protected void onCreateFragmentView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        initData();
        setListener();
    }

    @Override
    public void onDestroy() {
        if(mUnbinder!=null){
            mUnbinder.unbind();
        }
        super.onDestroy();
    }

    protected abstract int getLayoutId();
    protected abstract void initData();
    protected abstract void setListener();

    /**
     * 獲取editText的值
     *
     * @param et
     * @return
     */
    protected String getTextOfEditText(EditText et){
        if (et == null) {
            return null;
        }
        if (et.getText() == null) {
            return null;
        }
        if (StringUtil.isEmpty(et.getText().toString())) {
            return "";
        }
        return et.getText().toString().trim();
    }

    protected void showToast(String msg) {
        if (StringUtil.isNotEmpty(msg)) {
            ToastUtil.show(msg);
        }
    }

    protected void showShortToast(String msg){
        if (StringUtil.isNotEmpty(msg)) {
            ToastUtil.shortShow(msg);
        }
    }
}

4.給出第一個fragment的代碼：

package com.test.ui.fragment;

import android.view.View;
import android.widget.TextView;

import com.test.R;

import butterknife.BindView;

/**
 * Created by Admin on 2017/6/7.
 */

public class Fragment1 extends BaseFragment implements View.OnClickListener{


    @BindView(R.id.txt_content)
    TextView mTvContext;

    @Override
    protected int getLayoutId() {
        return R.layout.one_fragment;
    }

    @Override
    protected void initData() {

    }

    @Override
    protected void setListener() {
        mTvContext.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.txt_content:
                TextView tab_menu_channel_num = (TextView)((MenuActivity)mContext).findViewById(R.id.tab_menu_channel_num);
                tab_menu_channel_num.setText("11");
                tab_menu_channel_num.setVisibility(View.VISIBLE);
                break;
        }
    }
}

下面是Fragment1的layout文件one_fragment.xml

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

    <TextView
        android:id="@+id/txt_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="one"
        android:textColor="@color/black"
        android:textSize="20sp"/>

</LinearLayout>

Fragment2,Fragment3,Fragment4的代碼和Fragment1類似吴菠，copy一下改改即可

5.然后是給出activity代碼

package com.test.ui.fragment;

import android.content.Context;
import android.content.Intent;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.test.R;
import com.test.app.AppActivity;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;

/**
 * Created by Admin on 2017/6/7.
 */

public class MenuActivity extends AppActivity implements View.OnClickListener,TabOnPageChangeListener.OnSelectedFragmentListener {

    public static Intent newIndexIntent(Context context) {
        Intent newIntent = new Intent(context, MenuActivity.class);
        return newIntent;
    }

    @BindView(R.id.ly_tab_menu_channel)
    LinearLayout ly_tab_menu_channel;
    @BindView(R.id.tab_menu_channel)
    TextView tab_menu_channel;
    @BindView(R.id.tab_menu_channel_num)
    TextView tab_menu_channel_num;

    @BindView(R.id.ly_tab_menu_message)
    LinearLayout ly_tab_menu_message;
    @BindView(R.id.tab_menu_message)
    TextView tab_menu_message;
    @BindView(R.id.tab_menu_message_num)
    TextView tab_menu_message_num;

    @BindView(R.id.ly_tab_menu_better)
    LinearLayout ly_tab_menu_better;
    @BindView(R.id.tab_menu_better)
    TextView tab_menu_better;
    @BindView(R.id.tab_menu_better_num)
    TextView tab_menu_better_num;

    @BindView(R.id.ly_tab_menu_setting)
    LinearLayout ly_tab_menu_setting;
    @BindView(R.id.tab_menu_setting)
    TextView tab_menu_setting;
    @BindView(R.id.tab_menu_setting_partner)
    ImageView tab_menu_setting_partner;

    @BindView(R.id.vpager)
    ViewPager mViewPager;

    private List<Fragment>mFragmentList;
    private MainPagerAdapter mainPagerAdapter;
    private TabOnPageChangeListener mTabOnPageChangeListener;


    @Override
    protected int getContentViewId() {
        return R.layout.activity_menu;
    }

    @Override
    protected void initData() {
        mFragmentList=new ArrayList<>();
        mFragmentList.add(0, new Fragment1());
        mFragmentList.add(1, new Fragment2());
        mFragmentList.add(2, new Fragment3());
        mFragmentList.add(3, new Fragment4());

        mTabOnPageChangeListener=new TabOnPageChangeListener(mViewPager);
        mainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager(), mFragmentList);
        mViewPager.setOffscreenPageLimit(4);// 設(shè)置預(yù)加載Fragment個數(shù)
        mViewPager.setAdapter(mainPagerAdapter);
        mViewPager.setCurrentItem(0);// 設(shè)置當(dāng)前顯示標(biāo)簽頁為第一頁
    }

    @Override
    protected void setListener() {
        ly_tab_menu_channel.setOnClickListener(this);
        ly_tab_menu_message.setOnClickListener(this);
        ly_tab_menu_better.setOnClickListener(this);
        ly_tab_menu_setting.setOnClickListener(this);
        mViewPager.addOnPageChangeListener(mTabOnPageChangeListener);
        mTabOnPageChangeListener.setOnSelectedFragmentListener(this);
        //默認(rèn)顯示第一個fragment者填， 必須在ly_tab_menu_channel.setOnClickListener(this);之后執(zhí)行
        ly_tab_menu_channel.performClick();
    }

    @Override
    public void onClick(View v){
        switch (v.getId()) {
            case R.id.ly_tab_menu_channel:
                clickFragment1();
                break;
            case R.id.ly_tab_menu_message:
                clickFragment2();
                break;
            case R.id.ly_tab_menu_better:
                clickFragment3();
                break;
            case R.id.ly_tab_menu_setting:
                clickFragment4();
                break;
        }
    }

    //重置所有文本的選中狀態(tài)
    private void setSelected() {
        tab_menu_channel.setSelected(false);
        tab_menu_message.setSelected(false);
        tab_menu_better.setSelected(false);
        tab_menu_setting.setSelected(false);
    }

    private void clickFragment1(){
        setSelected();
        tab_menu_channel.setSelected(true);
        tab_menu_channel_num.setVisibility(View.INVISIBLE);
        mViewPager.setCurrentItem(0);
    }

    private void clickFragment2(){
        setSelected();
        tab_menu_message.setSelected(true);
        tab_menu_message_num.setVisibility(View.INVISIBLE);
        mViewPager.setCurrentItem(1);
    }

    private void clickFragment3(){
        setSelected();
        tab_menu_better.setSelected(true);
        tab_menu_better_num.setVisibility(View.INVISIBLE);
        mViewPager.setCurrentItem(2);
    }

    private void clickFragment4(){
        setSelected();
        tab_menu_setting.setSelected(true);
        tab_menu_setting_partner.setVisibility(View.INVISIBLE);
        mViewPager.setCurrentItem(3);
    }

    @Override
    public void selectedFragment(int index) {
        switch (index) {
            case 0:
                clickFragment1();
                break;
            case 1:
                clickFragment2();
                break;
            case 2:
                clickFragment3();
                break;
            case 3:
                clickFragment4();
                break;
        }
    }

    @Override
    protected void onDestroy(){
        super.onDestroy();
    }
}

需要注意的是：

• 我的MenuActivity 繼承的是AppActivity，而AppActivity 是我自己寫的一個類似BaseActivity的類做葵，大家也可直接 MenuActivity 繼承 AppCompatActivity 即可占哟。
• setListener()方法中l(wèi)y_tab_menu_channel.performClick();是為了默認(rèn)顯示第一個fragment，必須在ly_tab_menu_channel.setOnClickListener(this);之后執(zhí)行

然后貼出 activity_menu.xml的代碼

<RelativeLayout 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">

    <RelativeLayout
        android:id="@+id/ly_top_bar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/blue">

        <TextView
            android:id="@+id/txt_topbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:text="微信"
            android:textColor="@color/white"
            android:textSize="18sp" />
        <View
            android:layout_width="match_parent"
            android:layout_height="2px"
            android:layout_alignParentBottom="true"
            android:background="@color/white" />
    </RelativeLayout>





    <LinearLayout
        android:id="@+id/ly_tab_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="horizontal">

        <LinearLayout
            android:id="@+id/ly_tab_menu_channel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_channel"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_chat"
                    android:text="weixin" />

                <TextView
                    android:id="@+id/tab_menu_channel_num"
                    style="@style/tab_menu_bgnum"
                    android:layout_toRightOf="@+id/tab_menu_channel"
                    android:text="99+"
                    android:visibility="gone" />
            </RelativeLayout>
        </LinearLayout>

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

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_message"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_user"
                    android:text="tongxun" />

                <TextView
                    android:id="@+id/tab_menu_message_num"
                    style="@style/tab_menu_bgnum"
                    android:layout_toRightOf="@+id/tab_menu_message"
                    android:text="99+"
                    android:visibility="gone" />
            </RelativeLayout>
        </LinearLayout>


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

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_better"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_find"
                    android:text="find" />

                <TextView
                    android:id="@+id/tab_menu_better_num"
                    style="@style/tab_menu_bgnum"
                    android:layout_toRightOf="@+id/tab_menu_better"
                    android:text="99+"
                    android:visibility="gone" />
            </RelativeLayout>
        </LinearLayout>


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

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:padding="5dp">

                <TextView
                    android:id="@+id/tab_menu_setting"
                    style="@style/tab_menu_text"
                    android:drawableTop="@drawable/tab_menu_me"
                    android:text="me" />

                <ImageView
                    android:id="@+id/tab_menu_setting_partner"
                    android:layout_width="12dp"
                    android:layout_height="12dp"
                    android:layout_marginLeft="-5dp"
                    android:layout_toRightOf="@id/tab_menu_setting"
                    android:visibility="gone"
                    android:src="@mipmap/ic_launcher" />

            </RelativeLayout>
        </LinearLayout>
    </LinearLayout>



    <View
        android:id="@+id/div_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:layout_above="@id/ly_tab_menu"
        android:background="@color/white" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/div_tab_bar"
        android:layout_below="@id/ly_top_bar" />


</RelativeLayout>

6.MenuActivity中用到viewPager酿矢，肯定少不了適配器 MainPagerAdapter 了

package com.test.ui.fragment;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.View;

import java.util.List;

/***
 * 標(biāo)簽主頁適配器
 *
 * @author pei
 * @version 1.0
 * @create 2016-6-21
 */
public class MainPagerAdapter extends FragmentPagerAdapter {

    private List<Fragment> mFragmentList;

    public MainPagerAdapter(FragmentManager fm, List<Fragment> mFragmentList) {
        super(fm);
        this.mFragmentList = mFragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        // TODO Auto-generated method stub
        return mFragmentList == null ? null : mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mFragmentList == null ? 0 : mFragmentList.size();
    }

    @Override
    public void destroyItem(View container, int position, Object object) {
        //      super.destroyItem(container, position, object);
    }
}

7.MenuActivity中的viewPager本來是可以直接

    mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

來監(jiān)聽滑動的榨乎，但是我為了去掉滑動到兩端的時候出現(xiàn)陰影，所以用
TabOnPageChangeListener重新實現(xiàn)了下ViewPager.OnPageChangeListener()接口棠涮，下面貼出 TabOnPageChangeListener代碼：

package com.test.ui.fragment;

import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.widget.EdgeEffectCompat;

import java.lang.reflect.Field;

/***
 * TabMenuFragmentActivity  viewpager滑動監(jiān)聽(禁用滑到邊界顯示黑邊)
 *
 * @author pei
 * @version 1.0
 * @create 2016-6-21
 */
public class TabOnPageChangeListener implements OnPageChangeListener {

    private ViewPager mViewPager;
    private OnSelectedFragmentListener mOnSelectedFragmentListener;

    private EdgeEffectCompat leftEdge;//去除viewpager滑到邊界的黑邊
    private EdgeEffectCompat rightEdge;//去除viewpager滑到邊界的黑邊

    public TabOnPageChangeListener(ViewPager viewPager) {
        this.mViewPager = viewPager;
        init();
    }

    public void setOnSelectedFragmentListener(OnSelectedFragmentListener onSelectedFragmentListener) {
        this.mOnSelectedFragmentListener = onSelectedFragmentListener;
    }

    private void init() {
        try {
            Field leftEdgeField = mViewPager.getClass().getDeclaredField("mLeftEdge");
            Field rightEdgeField = mViewPager.getClass().getDeclaredField("mRightEdge");
            if (leftEdgeField != null && rightEdgeField != null) {
                leftEdgeField.setAccessible(true);
                rightEdgeField.setAccessible(true);
                leftEdge = (EdgeEffectCompat) leftEdgeField.get(mViewPager);
                rightEdge = (EdgeEffectCompat) rightEdgeField.get(mViewPager);
            }
        } catch (NoSuchFieldException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (IllegalArgumentException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        // 禁用滑到邊界顯示黑邊
        if (leftEdge != null && rightEdge != null) {
            leftEdge.finish();
            rightEdge.finish();
            leftEdge.setSize(0, 0);
            rightEdge.setSize(0, 0);
        }
    }


    @Override
    public void onPageScrollStateChanged(int state) {
        //state的狀態(tài)有三個谬哀，0表示什么都沒做，1正在滑動严肪，2滑動完畢
    }

    @Override
    public void onPageSelected(int position) {
        if (mOnSelectedFragmentListener != null) {
            mOnSelectedFragmentListener.selectedFragment(position);
        }
    }

    public interface OnSelectedFragmentListener {

        void selectedFragment(int index);
    }
}

8.可能有的同學(xué)對我MenuActivity所繼承的AppActivity有疑問史煎，那我就貼出來大家隨便看看就好

package com.test.app;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.EditText;

import com.test.util.StringUtil;
import com.test.util.ToastUtil;

import butterknife.ButterKnife;
import butterknife.Unbinder;

/**

• Created by Admin on 2017/5/16.
  */

public abstract class AppActivity extends AppCompatActivity{

protected View mLayoutView;//總布局
protected Activity mContext;
private Unbinder mUnbinder;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    //賦值context
    mContext=this;
    //activity管理
    AppActivityManager.getInstance().addActivity(this);
    if (getContentViewId() != 0) {
        mLayoutView = LayoutInflater.from(mContext).inflate(getContentViewId(), null);
        setContentView(mLayoutView);
        //控件綁定
        mUnbinder= ButterKnife.bind(this);
    }
    initData();
    setListener();
}

/**設(shè)置布局**/
protected abstract int getContentViewId();

protected abstract void initData();

protected abstract void setListener();

@Override
protected void onDestroy() {
    if(mUnbinder!=null){
        mUnbinder.unbind();
    }
    super.onDestroy();
}

/**獲取editText的值**/
protected String getTextOfEditText(EditText et) {
    if(et!=null&&et.getText()!=null){
        if(StringUtil.isEmpty(et.getText().toString())){
            return "";
        }else{
            return et.getText().toString().trim();
        }
    }
    return null;
}

protected void showShortToast(String msg) {
    if (StringUtil.isNotEmpty(msg)) {
        ToastUtil.shortShow(msg);
    }
}

protected void showLongToast(String msg) {
    if (StringUtil.isNotEmpty(msg)) {
        ToastUtil.show(msg);
    }
}

/** 用于初始化控件的 **/
protected <T> T getView(int rId) {
    View view = this.findViewById(rId);
    return (T) view;
}

}

9.我在Fragment1 中模擬了一個點擊TextView顯示消息小圓點，大家在用的時候驳糯，自己根據(jù)實際情況改改就成

ok篇梭，今天fragment+viewPager 實現(xiàn)底部導(dǎo)航欄的功能就基本實現(xiàn)了。謝謝誒酝枢。