Fragment创建添加切换和对应底部导航（一）

示例一：

效果如图所示

每一个Fragment显示一个字符串，比如。

在所有的例子里面，都有四个简单Fragment，分别为FragmentA，FragmentB，FragmentC，FragmentD。。

类的内容

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_a, container, false);
    }

布局文件就是FrameLayout中有一个TextView。

MainActivity继承自FragmentActivity，其布局文件内容可以看出下面四个导航按钮是RadioButton

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </FrameLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/devider_line" >
    </View>

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp" >

        <RadioButton
            android:id="@+id/btn_stimulation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/stimulation"
            android:gravity="center_horizontal"
            android:text="@string/tab_stimulation"
            android:textColor="@color/yellow" />
        <RadioButton
            android:id="@+id/btn_prescription"            ............. />

        <RadioButton
            android:id="@+id/btn_network"            .............. />

        <RadioButton
            android:id="@+id/btn_setting"             ........ />

    </RadioGroup>

</LinearLayout>

使用ButterKnife获取控件对象

    @BindView(R.id.content)
    FrameLayout content;
    @BindView(R.id.btn_stimulation)
    RadioButton btnStimulation;
    ............
    @BindView(R.id.radioGroup)
    RadioGroup radioGroup;

在初始化时添加radioGroup的点击响应事件

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
                switch (checkedId) {
                    case R.id.btn_stimulation:
                        selectNavigation(0);
                        break;
                    case R.id.btn_prescription:
                        selectNavigation(1);
                     ........
                }
            }
        });

 按钮选择函数selectNavigation就是先将四个变灰色，再把选择的变成彩色，设置选中，同时调用Fragment选择函数，在onCreate中调用selectNavigation(0)。

    private void selectNavigation(int page) {
        //四个导航按钮绘制成灰色
        for (int i = 0; i < radioGroup.getChildCount(); i++) {
            Drawable grey_image = getResources().getDrawable(greyed[i]);
            grey_image.setBounds(0, 0, grey_image.getMinimumWidth(),
                    grey_image.getMinimumHeight());
            RadioButton child = (RadioButton) radioGroup.getChildAt(i);
            child.setCompoundDrawables(null, grey_image, null, null);
            child.setTextColor(getResources().getColor(
                    R.color.dark_gray));

        }
        //将指定按钮绘制成彩色，并设置选中
        Drawable yellow = getResources().getDrawable(colored[page]);
        yellow.setBounds(0, 0, yellow.getMinimumWidth(),
                yellow.getMinimumHeight());
        RadioButton select = (RadioButton) radioGroup.getChildAt(page);
        select.setCompoundDrawables(null, yellow, null, null);
        select.setTextColor(getResources().getColor(
                R.color.yellow));
        select.setChecked(true);

        // 选择导航的时候，同时选择Fragment
        showFragment(page);
    }

其中greyed和colored就是底部四个灰色和彩色资源文件id数组。

 

Fragment的声明，创建和显示

 

    FragmentA fragmentA;
    FragmentB fragmentB;
    FragmentC fragmentC;
    FragmentD fragmentD;
    List<Fragment> fragments = new ArrayList<Fragment>();

在onCreate的时候创建Fragment，调用InitFragments

    private void InitFragments() {
        fragments.clear();

        if (fragmentA == null) {
            fragmentA = new FragmentA();
        }
        if (fragmentB == null) {
            fragmentB = new FragmentB();
        }
        if (fragmentC == null) {
            fragmentC = new FragmentC();
        }
        if (fragmentD == null) {
            fragmentD = new FragmentD();
        }
        fragments.add(fragmentA);
        fragments.add(fragmentB);
        fragments.add(fragmentC);
        fragments.add(fragmentD);
        for (Fragment frag : fragments) {
            if (!frag.isAdded()) {
                getSupportFragmentManager().beginTransaction().add(R.id.content, frag).commit();
            }
        }
    }

在切换导航的时候同时调用切换Fragment函数

    private void showFragment(int frag) {
        //首先隐藏所有Fragments
        for (Fragment f : fragments) {
            getSupportFragmentManager().beginTransaction().hide(f).commit();
        }
        //获取当前 序号的fragment
        Fragment current_frag = fragments.get(frag);
        if (current_frag != null) {
            getSupportFragmentManager().beginTransaction().show(current_frag).commit();

        }

    }

 示例二：修改底部导航。

使用LinearLayout，效果如下

 

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

    <FrameLayout
        android:id="@+id/content"
        android:layout_weight="1"
        android:layout_width="match_parent"
        android:layout_height="0dp">

    </FrameLayout>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="55dp">

        <View
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:background="?android:listDivider"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="horizontal"
            android:background="@android:color/white"
            android:layout_height="54dp">

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

                <ImageView
                    android:id="@+id/iv_home"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/bid02"
                    tools:ignore="ContentDescription" />

                <TextView
                    android:id="@+id/tv_home"
                    android:textColor="@color/home_back_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="首页"
                    android:layout_marginTop="2dp"
                    android:textSize="14sp"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/ll_invest"
                android:layout_width="0dp"
                android:padding="4dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_invest"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/bid04" />

                <TextView
                    android:id="@+id/tv_invest"
                    android:textColor="@color/home_back_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="二页"
                    android:layout_marginTop="2dp"
                    android:textSize="14sp"/>
            </LinearLayout>
            <LinearLayout
                android:id="@+id/ll_me"
                android:layout_width="0dp"
                android:padding="4dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_me"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/bid06" />

                <TextView
                    android:id="@+id/tv_me"
                    android:textColor="@color/home_back_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="三页"
                    android:layout_marginTop="2dp"
                    android:textSize="14sp"/>
            </LinearLayout>-
            <LinearLayout
                android:id="@+id/ll_more"
                android:layout_width="0dp"
                android:padding="4dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/iv_more"
                    android:layout_width="28dp"
                    android:layout_height="28dp"
                    android:src="@drawable/bid08" />

                <TextView
                    android:id="@+id/tv_more"
                    android:textColor="@color/home_back_unselected"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="四页"
                    android:layout_marginTop="2dp"
                    android:textSize="14sp"/>
            </LinearLayout>

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

 使用ButterKnife来响应四个LinearLayout按钮的点击操作

    @OnClick({R.id.ll_home,R.id.ll_invest,R.id.ll_me,R.id.ll_more})
    public void changeTab(View view){
        switch (view.getId()){
            case R.id.ll_home:
                selectNavigation(0);
                break;
            case R.id.ll_invest:
                selectNavigation(1);
                break;
            case R.id.ll_me:
                selectNavigation(2);
                break;
            case R.id.ll_more:
                selectNavigation(3);
                break;
        }
    }

    private void selectNavigation(int page) {
        //相关图片，字体变成灰色
        ivHome.setImageResource(R.drawable.bid02);
        ivInvest.setImageResource(R.drawable.bid04);
        ivMe.setImageResource(R.drawable.bid06);
        ivMore.setImageResource(R.drawable.bid08);
        tvHome.setTextColor(getResources().getColor(R.color.home_back_unselected));
        tvInvest.setTextColor(getResources().getColor(R.color.home_back_unselected));
        tvMe.setTextColor(getResources().getColor(R.color.home_back_unselected));
        tvMore.setTextColor(getResources().getColor(R.color.home_back_unselected));


        switch (page) {
            case 0:
                ivHome.setImageResource(R.drawable.bid01);
                tvHome.setTextColor(getResources().getColor(R.color.home_back_selected_green));
                break;
            case 1:
                ivInvest.setImageResource(R.drawable.bid03);
                tvInvest.setTextColor(getResources().getColor(R.color.home_back_selected_green));
                break;
            case 2:
                ivMe.setImageResource(R.drawable.bid05);
                tvMe.setTextColor(getResources().getColor(R.color.home_back_selected_green));
                break;
            case 3:
                ivMore.setImageResource(R.drawable.bid07);
                tvMore.setTextColor(getResources().getColor(R.color.home_back_selected_green));
                break;
        }

        // 选择导航的时候，同时选择Fragment
        showFragment(page);
    }