最近決定聪舒，從頭整理Android基礎知識，和常用基本架構 和框架 虐急，方便以后使用箱残，更主要是知道自己到底會些什么，突破技術瓶頸Ｖ褂酢１患！

這一篇先從基本上每個應用都會搭建的軟件UI 總結做起敬惦，這里的軟件架構是指對現(xiàn)在流行軟件中都會搭建的UI界面底部導航盼理，并切換不同的片段或者跳轉頁面，如下圖：

底部均帶有導航欄

主要實現(xiàn)一共是以下兩種選擇:

1俄删、RadioButton 加幀布局并替換幀布局中的片段 實現(xiàn)點擊按鈕可切換片段的效果（這里面采用尚硅谷楊老師的封裝方法）

2宏怔、結合RadioButton 加ViewPager 填充片段實現(xiàn)可點擊并支持滑動切換片段的底部導航

一、RadioButton 加幀布局并替換幀布局中的片段

相信這種實現(xiàn)方式畴椰，很多人都會臊诊，這里面涉及到的主要是片段的生命周期，片段事務的使用迅矛，替換，添加潜叛，覆蓋秽褒，還有就是Radiobutton的使用已經很普遍了壶硅，寫在這里就算是總結，之后如果需要直接過來粘貼了销斟。
效果圖如下庐椒，很簡單的效果，但是這里面加入了一下代碼結構設計的思想蚂踊，方便提升约谈，還有就是防止片段重復，反復的初始化：

片段效果圖

1犁钟、首先我們需要一個主Activity棱诱，然后就是四個片段

片段的生命周期這里就不做贅述了，直接來看這幾個片段的創(chuàng)建過程涝动，我是很喜歡這種方式迈勋，也為之后寫代碼提供了一種思路：

首先一個BaseFragment作為基類：這樣就定義了一個規(guī)范，有時感覺定義接口并沒有這樣優(yōu)雅醋粟。

package com.wgd.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;

/**
 * Created by wangg on 2018/7/26.
 * * 作用：基類靡菇，公共類
 * CommonFragment，ThirdPartyFragment,CustomFragment,OtherFragment等都要繼承該類
 */
public abstract class BaseFragment extends Fragment {
    //上下文
    protected Context context;

    protected String TAG="FragmentTAG";
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        context=getActivity();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return initView();
    }
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        initData();
    }
    protected abstract View initView();
    /**
     * 當孩子需要初始化數(shù)據(jù)米愿，或者聯(lián)網請求綁定數(shù)據(jù)厦凤，展示數(shù)據(jù)的 等等可以重寫該方法
     */
    protected void initData(){}
}

然后四個片段主要是依照這個抽象類的標準去完成：
舉例：

package com.wgd.fragment;

import android.graphics.Color;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.TextView;

/**
 * Created by 王國棟 on 2018/7/26.
 * qq 1350802989
 * 微信 WGDLOVELC
 * 你的煎熬，都是因為你的上進心和你的能力不成正比
 */
public class CommonFragment extends BaseFragment{
    TextView textView;
    @Override
    protected View initView() {
        Log.i(TAG, "initView: CommonFragment初始化了");
        textView=new TextView(context);
        textView.setTextSize(20);
        textView.setTextColor(Color.RED);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }
    @Override
    protected void initData() {
        super.initData();
        textView.setText("common");
    }
}

以此類推創(chuàng)建另外三個育苟，最后添加到主Activity中较鼓，在Activity中完成片段的添加替換和覆蓋操作，什么是覆蓋宙搬？就是為了防止片段反復初始化笨腥！
主Activity代碼：

package com.wgd.example1;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;
import android.widget.RadioGroup;

import com.wgd.fragment.BaseFragment;
import com.wgd.fragment.CommonFragment;
import com.wgd.fragment.CustomFragment;
import com.wgd.fragment.OtherFragment;
import com.wgd.fragment.ThirdPartyFragment;

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

public class MainActivity extends AppCompatActivity {
    private RadioGroup mRg_main;
    private List<BaseFragment> mBaseFragment;
    /**
     * 選中的Fragment的對應的位置
     */
    private int position;
    /**
     * 上次切換的Fragment
     */
    private Fragment mContent;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化View
        initView();
        //初始化Fragment
        initFragment();
        //設置RadioGroup的監(jiān)聽
        setListener();
    }
    private void setListener() {
        mRg_main.setOnCheckedChangeListener(new MyOnCheckedChangeListener());
        //設置默認選中常用框架
        mRg_main.check(R.id.rb_common_frame);
    }

    class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb_common_frame://常用框架
                    position = 0;
                    break;
                case R.id.rb_thirdparty://第三方
                    position = 1;
                    break;
                case R.id.rb_custom://自定義
                    position = 2;
                    break;
                case R.id.rb_other://其他
                    position = 3;
                    break;
                default:
                    position = 0;
                    break;
            }
            //根據(jù)位置得到對應的Fragment
            BaseFragment to = getFragment();
            //替換
            switchFrament(mContent,to);
        }
    }
    /**
     *
     * @param from 剛顯示的Fragment,馬上就要被隱藏了
     * @param to 馬上要切換到的Fragment，一會要顯示
     */
    private void switchFrament(Fragment from,Fragment to) {
        if(from != to){
            mContent = to;
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
            //才切換
            //判斷有沒有被添加
            if(!to.isAdded()){
                //to沒有被添加
                //from隱藏
                if(from != null){
                    ft.hide(from);
                }
                //添加to
                if(to != null){
                    ft.add(R.id.fl_content,to).commit();
                }
            }else{
                //to已經被添加
                // from隱藏
                if(from != null){
                    ft.hide(from);
                }
                //顯示to
                if(to != null){
                    ft.show(to).commit();
                }
            }
        }

    }
//    private void switchFrament(BaseFragment fragment) {
//        //1.得到FragmentManger
//        FragmentManager fm = getSupportFragmentManager();
//        //2.開啟事務
//        FragmentTransaction transaction = fm.beginTransaction();
//        //3.替換
//        transaction.replace(R.id.fl_content, fragment);
//        //4.提交事務
//        transaction.commit();
//    }

    /**
     * 根據(jù)位置得到對應的Fragment
     * @return
     */
    private BaseFragment getFragment() {
        BaseFragment fragment = mBaseFragment.get(position);
        return fragment;
    }

    private void initFragment() {
        mBaseFragment = new ArrayList<>();
        mBaseFragment.add(new CommonFragment());//常用框架Fragment
        mBaseFragment.add(new ThirdPartyFragment());//第三方Fragment
        mBaseFragment.add(new CustomFragment());//自定義控件Fragment
        mBaseFragment.add(new OtherFragment());//其他Fragment
    }

    private void initView() {
        setContentView(R.layout.activity_main);
        mRg_main = (RadioGroup) findViewById(R.id.rg_main);
    }
}

activty_main.xml文件

<?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"
    tools:context="com.wgd.example1.MainActivity">
    <!--標題欄-->
    <include layout="@layout/layout_title" />
    <!--FrameLayout-->
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!--底部的RadioGroup-->
    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#11000000"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp">


        <RadioButton
            android:id="@+id/rb_common_frame"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_common_frame_drawable_selector"
            android:text="常用框架"
            />

        <RadioButton
            android:id="@+id/rb_thirdparty"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_thirdparty_drawable_selector"
            android:text="第三方"

            />
        <RadioButton
            android:id="@+id/rb_custom"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_custom_drawable_selector"
            android:text="自定義控件" />
        <RadioButton
            android:id="@+id/rb_other"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_other_drawable_selector"
            android:text="其他" />

    </RadioGroup>
</LinearLayout>

bottom_tag_style文件

   <style name="bottom_tag_style" >
        <!-- Customize your theme here. -->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@android:color/transparent</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/bottom_textcolor_drawable_selector</item>
        <item name="android:textSize">10sp</item>
    </style>

bottom_textcolor_drawable_selector

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

rb_common_frame_drawable_selector文件勇垛，另外三個片段一樣

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

這個例子RadioButton的字體的顏色是通過Selector變化的脖母，也可以像下面一樣，第二種方式實現(xiàn)闲孤。

二谆级、RadioButton 加ViewPager 填充片段實現(xiàn)（可點擊可滑動）

1、首先同樣需要一個主Activity讼积，四個片段（一般應用底部都會分為四個部分肥照，可根據(jù)實際需求添加）

底部導航欄的圖片，每個主題對應深色和淺色兩張圖片勤众，分別用來給RedioButton填充背景舆绎，作為待選擇和被選擇的效果。

主Activity布局文件

<?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"
    tools:context=".activity.MainActivity">
    <!-- 這里可根據(jù)需求添加頂部title布局這個例子就省略了 -->

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/viewpager"
        android:background="@color/background"
        >
    </android.support.v4.view.ViewPager>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_weight="0"
        android:orientation="horizontal"
        android:gravity="center"
        android:background="#E3E2E1"
        android:id="@+id/radiogroup"
        >
        <RadioButton
            style="@style/MyRadioButtonStyle"
            android:id="@+id/r1"
            android:drawableTop="@drawable/radiobtn_selector1"
            android:text="@string/workbank"
            android:checked="true"
            android:textColor="@color/blue"
            />
        <RadioButton
            style="@style/MyRadioButtonStyle"
            android:id="@+id/r2"
            android:drawableTop="@drawable/radiobtn_selector2"
            android:text="@string/jobfair"
            android:textColor="@color/gray"
            />
        <RadioButton
            style="@style/MyRadioButtonStyle"
            android:id="@+id/r3"
            android:drawableTop="@drawable/radiobtn_selector3"
            android:text="@string/news"
            android:textColor="@color/gray"
            />
        <RadioButton
            style="@style/MyRadioButtonStyle"
            android:id="@+id/r4"
            android:drawableTop="@drawable/radiobtn_selector4"
            android:text="@string/mine"
            android:textColor="@color/gray"
            />
    </RadioGroup>
</LinearLayout>

style如下：

 <style name="MyRadioButtonStyle">
        <item name="android:button">@null</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
    </style>

Selecter文件如下(需要幾個導航欄就創(chuàng)建幾個)

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

RedioButton 和 Selecter的用法應該不用多說了们颜，主要是再Style樣式里面的配置吕朵。
RedioButton 圖片下發(fā)的字體顏色還可以用這種方式實現(xiàn)猎醇，就是先再在xml中設置一個默認顏色，然后在Activty中根據(jù)選中狀態(tài)努溃，修改字體顏色硫嘶。
Selecter 給選中和未被選中時兩個不同顏色的圖片即可，注意是state_checked

主Activity中的代碼

/**
 * author wanggd
 *
 * 主入口Activity
 */
public class MainActivity extends FragmentActivity
        implements RadioGroup.OnCheckedChangeListener,ViewPager.OnPageChangeListener{
    private RadioButton r1, r2, r3, r4;
    private RadioGroup radioGroup;
    private ViewPager pager;
    private List<Fragment> fraglist;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }
    private void initView() {
        fraglist = new ArrayList<>();
        fraglist.add(new WorkBankFragment());
        fraglist.add(new JobFairFragment());
        fraglist.add(new NewsFragment());
        fraglist.add(new MineFragment());
        r1 = (RadioButton) findViewById(R.id.r1);
        r2 = (RadioButton) findViewById(R.id.r2);
        r3 = (RadioButton) findViewById(R.id.r3);
        r4 = (RadioButton) findViewById(R.id.r4);
        radioGroup = (RadioGroup) findViewById(R.id.radiogroup);
        radioGroup.setOnCheckedChangeListener(this);
        pager = (ViewPager) findViewById(R.id.viewpager);
        pager.setPageTransformer(true, new DepthPageTransformer());
        pager.addOnPageChangeListener(this);
        pager.setAdapter(new MyAdapter(getSupportFragmentManager()));
    }
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        if (checkedId == R.id.r1) {
            checkLogin();
            r1.setTextColor(ContextCompat.getColor(this, R.color.blue));
            r2.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r3.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r4.setTextColor(ContextCompat.getColor(this, R.color.gray));
            pager.setCurrentItem(0);
        } else if (checkedId == R.id.r2) {
            checkLogin();
            r2.setTextColor(ContextCompat.getColor(this, R.color.blue));
            r1.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r3.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r4.setTextColor(ContextCompat.getColor(this, R.color.gray));
            pager.setCurrentItem(1);
        } else if (checkedId == R.id.r3) {
            checkLogin();
            r3.setTextColor(ContextCompat.getColor(this, R.color.blue));
            r1.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r2.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r4.setTextColor(ContextCompat.getColor(this, R.color.gray));
            pager.setCurrentItem(2);
        } else if (checkedId == R.id.r4) {
            checkLogin();
            r4.setTextColor(ContextCompat.getColor(this, R.color.blue));
            r1.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r3.setTextColor(ContextCompat.getColor(this, R.color.gray));
            r2.setTextColor(ContextCompat.getColor(this, R.color.gray));
            pager.setCurrentItem(3);
        }
    }
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    }
    @Override
    public void onPageSelected(int position) {
        switch (position) {
            case 0:
                r1.setChecked(true);
                break;
            case 1:
                r2.setChecked(true);
                break;
            case 2:
                r3.setChecked(true);
                break;
            case 3:
                r4.setChecked(true);
                break;
            default:
                break;
        }
    }
    @Override
    public void onPageScrollStateChanged(int state) {
    }
    private class MyAdapter extends FragmentStatePagerAdapter {

        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fraglist.get(position);
        }

        @Override
        public int getCount() {
            return fraglist.size();
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            //這個地方注釋掉可以防止ViewPager加載卡頓的問題
            //super.destroyItem(container, position, object);
        }
    }
}

Fragment 的實現(xiàn) 可以結合第一種方式實現(xiàn)梧税÷偌玻或者如果java基礎薄弱根據(jù)實際需要直接創(chuàng)建不同的Fragment穴墅，然后每個Fragment一個布局文件也可以弊琴，只是會顯得雜亂而已
到此邑闲，就可以實現(xiàn)結合viewpager的滑動導航俊嗽，其實也可以結合上面的例子可柿，將代碼精簡很多雄嚣，這是很久之前寫的代碼了碎紊，作為例子放到這澎媒。