寫在前面的話

首先需要說(shuō)明的是肴楷，此篇文章是實(shí)現(xiàn)底部導(dǎo)航欄的第二部龄糊，而不是實(shí)現(xiàn)頂部導(dǎo)航欄的，注意注意啊褒脯。
之前已經(jīng)寫過(guò)一篇實(shí)現(xiàn)底部導(dǎo)航欄的文章，不知道請(qǐng)移步fragment+viewPager實(shí)現(xiàn)底部導(dǎo)航欄（一）

鑒于之前已經(jīng)實(shí)現(xiàn)了底部導(dǎo)航欄的功能缆毁，為什么還要寫這篇文章呢番川？此文目的有：

• 對(duì)不需要顯示小圓點(diǎn)的底部導(dǎo)航欄一個(gè)相對(duì)快捷的實(shí)現(xiàn)，不需要復(fù)雜的TextView實(shí)現(xiàn)底部布局
• 在之前文章的基礎(chǔ)上重新整理思路脊框，讓編碼更順暢颁督，也算是對(duì)上篇文章的一個(gè)整理吧。

那么此篇文章除了沒(méi)有加顯示小圓點(diǎn)的布局外浇雹，在代碼和布局上比之前相對(duì)簡(jiǎn)單的地方在哪里呢沉御？一個(gè)是此篇文章用RadioButton實(shí)現(xiàn)底部布局，所以在布局上明顯比之前簡(jiǎn)單是肯定的昭灵，再之之前是通過(guò)控制TextView的點(diǎn)擊事件來(lái)實(shí)現(xiàn)fragment的實(shí)現(xiàn)的吠裆，所以代碼上復(fù)雜繁瑣些伐谈，而此篇文章由于有RadioGroup的原因，在點(diǎn)擊事件上的處理會(huì)相對(duì)簡(jiǎn)潔些试疙。

下面就來(lái)一次講解實(shí)現(xiàn)吧诵棵。

提前準(zhǔn)備

項(xiàng)目中用到基本的控件初始化，ButterKnife祝旷，所以添加依賴

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

然后是基本的兩個(gè)base類履澳，BaseActivity和BaseFragment

public abstract class BaseActivity extends AppCompatActivity {

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = this;
        AppActivityManager.getInstance().addActivity(this);

        if (getContentViewId() != 0) {
            mLayoutView = LayoutInflater.from(mContext).inflate(getContentViewId(), null);
            setContentView(mLayoutView);
            mUnbinder = ButterKnife.bind(this);
        }

        initData();
        setListener();
    }

    @Override
    protected void onResume() {
        //設(shè)置為橫屏
        if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
        }
        super.onResume();
    }

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


    /**
     * 界面數(shù)據(jù)初始化
     **/
    protected abstract void initData();

    /**
     * 界面UI事件監(jiān)聽(tīng)
     **/
    protected abstract void setListener();

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

    /**
     * 獲取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);
        }
    }
}

下面是baseFragment，注意fragment相關(guān)的導(dǎo)入的都是 import android.support.v4.app.Fragment;

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);
        }
    }
}

第一步怀跛，準(zhǔn)備一個(gè)基本的TextView的style供xml文件中使用距贷，在res/values/styles.xml中新建style

  <style name="tv_text">
        <item name="android:lineSpacingExtra">@dimen/dp_1</item>
        <item name="android:lineSpacingMultiplier">1.0</item>
    </style>

第二步，寫一個(gè)RadioButton樣式的通用style---tab_menu_item

<style name="tab_menu_item">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:background">@drawable/tab_menu_bg</item>
        <item name="android:button">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:paddingTop">3dp</item>
        <item name="android:textColor">@drawable/tab_menu_text</item>
        <item name="android:textSize">18sp</item>
    </style>

background中tab_menu_bg.xml文件如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_menu_pressed"  android:state_checked="true" />
    <item android:drawable="@drawable/tab_menu_normal"  android:state_checked="false"/>
</selector>

tab_menu_pressed.xml代碼如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#d4dbe2"></solid>
</shape>

tab_menu_normal.xml代碼如下

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/white"></solid>
</shape>

textColo中tab_menu_text.xml對(duì)應(yīng)如下

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_f79e03" android:state_checked="true" />
    <item android:color="@color/color_596b76" android:state_checked="false"/>
</selector>

第二步吻谋，寫一個(gè)Frgment的樣例吧忠蝗，ManagerFragment代碼如下：

public class ManagerFragment extends BaseFragment{


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

    @Override
    protected void initData() {

    }

    @Override
    protected void setListener() {

    }
}

對(duì)應(yīng)布局fragment_manager.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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="guanli"/>

</LinearLayout>

其它的ReportFragment和InfoFragment仿照上面的ManagerFragment寫即可。

第三步漓拾，涉及到ViewPager的話什湘，肯定少不了對(duì)應(yīng)的適配器MainPagerAdapter了

/***
 * 標(biāo)簽主頁(yè)適配
 *
 * @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);
    }
}

第四步，ViewPager對(duì)應(yīng)的滑動(dòng)監(jiān)聽(tīng)晦攒，我自己寫了一個(gè)TabOnPageChangeListener來(lái)實(shí)現(xiàn)ViewPager.OnPageChangeListener，為的是去掉viewpager滑動(dòng)到邊界出現(xiàn)的陰影得哆，另外為了減少mainActivity中的代碼干擾脯颜，只暴露一個(gè)ViewPager滑動(dòng)完畢的方法。

package com.orderform.Listener;

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

import java.lang.reflect.Field;

/***
 * TabMenuFragmentActivity  viewpager滑動(dòng)監(jiān)聽(tīng)(禁用滑到邊界顯示黑邊)
 *
 * @author pei
 * @version 1.0
 * @create 2016-6-21
 */
public class TabOnPageChangeListener implements ViewPager.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)有三個(gè)贩据，0表示什么都沒(méi)做栋操，1正在滑動(dòng)，2滑動(dòng)完畢
    }

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

    public interface OnSelectedFragmentListener {

        void selectedFragment(int index);
    }
}

第五步饱亮，終于要開(kāi)始mainActivity的相關(guān)了矾芙，先上mainActivity的布局activity_main.xml代碼吧

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:context=".ui.main.MainActivity">


    <include
        layout="@layout/layout_title_back_tv"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_50"
        android:background="@color/white"></include>

    <RadioGroup
        android:id="@+id/rg_tab_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_56"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_manager"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_manager_bg"
            android:text="@string/tab_manager"/>

        <RadioButton
            android:id="@+id/rb_report"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_report_bg"
            android:text="@string/tab_report" />

        <RadioButton
            android:id="@+id/rb_info"
            style="@style/tab_menu_item"
            android:drawableTop="@drawable/tab_info_bg"
            android:text="@string/tab_info" />

    </RadioGroup>

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

</RelativeLayout>

這里涉及到一個(gè)標(biāo)題欄的問(wèn)題，給出inculd的布局layout_title_back_tv.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"
    android:id="@+id/title_rl"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/color_00000000"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:paddingLeft="@dimen/dp_15"
        android:paddingRight="@dimen/dp_15"
        android:src="@mipmap/ic_back_black"
        android:visibility="visible" />

    <TextView
        android:id="@+id/title_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/tv_text"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center_horizontal"
        android:singleLine="true"
        android:textColor="@color/color_ffffff"
        android:textSize="@dimen/sp_14" />

    <TextView
        android:id="@+id/title_right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        style="@style/tv_text"
        android:layout_alignParentRight="true"
        android:layout_gravity="right"
        android:paddingLeft="@dimen/dp_15"
        android:paddingRight="@dimen/dp_15"
        android:textSize="@dimen/sp_12"
        android:gravity="center"
        android:textColor="@color/color_ffffff"
        android:visibility="gone" />

第六步近上，MainActivity代碼

public class MainActivity extends BaseActivity implements View.OnClickListener, RadioGroup.OnCheckedChangeListener, TabOnPageChangeListener.OnSelectedFragmentListener {

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

    @BindView(R.id.title_rl)
    RelativeLayout mTitleLayout;
    @BindView(R.id.title_back)
    ImageView mTilteBack;
    @BindView(R.id.title_name)
    TextView mTilteName;
    @BindView(R.id.title_right)
    TextView mTilteRight;

    @BindView(R.id.rg_tab_bar)
    RadioGroup mRgTabBar;
    @BindView(R.id.rb_manager)
    RadioButton mRbManager;
    @BindView(R.id.rb_report)
    RadioButton mRbReport;
    @BindView(R.id.rb_info)
    RadioButton mRbInfo;
    @BindView(R.id.vpager)
    ViewPager mViewPager;

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

    @Override
    public int getContentViewId() {
        return R.layout.activity_main;
    }

    @Override
    protected void initData() {
        mFragmentList = new ArrayList<>();
        mFragmentList.add(0, new ManagerFragment());
        mFragmentList.add(1, new ReportFragment());
        mFragmentList.add(2, new InfoFragment());

        mTabOnPageChangeListener = new TabOnPageChangeListener(mViewPager);
        mainPagerAdapter = new MainPagerAdapter(getSupportFragmentManager(), mFragmentList);
        mViewPager.setOffscreenPageLimit(3);// 設(shè)置預(yù)加載Fragment個(gè)數(shù)
        mViewPager.setAdapter(mainPagerAdapter);
        mViewPager.setCurrentItem(0);// 設(shè)置當(dāng)前顯示標(biāo)簽頁(yè)為第一頁(yè)
        //獲取第一個(gè)單選按鈕剔宪，并設(shè)置其為選中狀態(tài)
        mRbManager.setChecked(true);
    }

    @Override
    protected void setListener() {
        mRgTabBar.setOnCheckedChangeListener(this);
        mViewPager.addOnPageChangeListener(mTabOnPageChangeListener);
        mTabOnPageChangeListener.setOnSelectedFragmentListener(this);
        mTilteBack.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.title_back:
                AppActivityManager.getInstance().appExit(mContext);
                break;
            case 1:
                break;
            default:
                break;
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
        setSelected();
        switch (checkedId) {
            case R.id.rb_manager:
                mRbManager.setChecked(true);
                mViewPager.setCurrentItem(0);
                break;
            case R.id.rb_report:
                mRbReport.setChecked(true);
                mViewPager.setCurrentItem(1);
                break;
            case R.id.rb_info:
                mRbInfo.setChecked(true);
                mViewPager.setCurrentItem(2);
                break;
            default:
                break;
        }
    }

    @Override
    public void selectedFragment(int index) {
        setSelected();
        switch (index) {
            case 0:
                mRbManager.setChecked(true);
                mViewPager.setCurrentItem(0);
                break;
            case 1:
                mRbReport.setChecked(true);
                mViewPager.setCurrentItem(1);
                break;
            case 2:
                mRbInfo.setChecked(true);
                mViewPager.setCurrentItem(2);
                break;
        }
    }

    //重置所有文本的選中狀態(tài)
    private void setSelected() {
        mRbManager.setChecked(false);
        mRbReport.setChecked(false);
        mRbInfo.setChecked(false);
    }
}

好了，到此你就可以歡樂(lè)的擼碼了壹无，這次的邏輯應(yīng)該比上次清楚多了葱绒，下面給出我的效果圖吧

2.gif

ok，今天就講到這里吧斗锭，謝謝誒地淀。