TabLayout+Fragment和底部导航联动

             

          TabLayout+Fragment和底部导航联动

  

     看一下效果图吧

     

       

 

     今天跟大家分享一下TabLayout和Fragment底部导航联动的一个demo，它的顶部导航栏和中间的Fragment还有底部导航栏可以实现联动效果，

   本人不太会传视频，所以只能让大家看图片了，望见谅，喜欢的可以尝试着操作一下哦

   看一下代码，首先是MainActivity

 import android.os.Bundle;import android.support.annotation.IdRes;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.widget.RadioButton;import android.widget.RadioGroup;import java.util.ArrayList;import java.util.List;import butterknife.ButterKnife;import butterknife.InjectView;public class MainActivity extends FragmentActivity{      private RadioButton mRb1;    private RadioButton mRb2;    private RadioButton mRb3;    private RadioButton mRb4;    private RadioGroup mRg;    private List<Fragment> list;      //ButterKnife找控件，要导入依赖，可以不用此方法     @InjectView(R.id.vp)     ViewPager mVp;    private TabLayout mTab;    //设置自定义标题    String[] title={"精选","专题","发现","我的"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //调用方法        initView();          //ButterKnife初始化 控件        ButterKnife.inject(this);        addFragment();          //创建ViewPager适配器        MyViewPager  adapter=new  MyViewPager (getSupportFragmentManager());        mVp.setAdapter(adapter);        //设置可以滑动        mTab.setTabMode(TabLayout.MODE_SCROLLABLE);        // 关联TabLayout和ViewPager         mTab.setupWithViewPager(mVp);         //默认选中状态        mRg.check(R.id.rb1);         //设置RadioButton和ViewPager联动        mRg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {            @Override            public void onCheckedChanged(RadioGroup radioGroup, @IdRes int i) {                switch (i){                    case R.id.rb1:                        mVp.setCurrentItem(0);                        break;                    case R.id.rb2:                        mVp.setCurrentItem(1);                        break;                    case R.id.rb3:                        mVp.setCurrentItem(2);                        break;                    case R.id.rb4:                        mVp.setCurrentItem(3);                        break;                    default:                        break;                }            }        });    }   //初始化控件    private void initView() {        mTab= (TabLayout) findViewById(R.id.tab);        mRb1 = (RadioButton) findViewById(R.id.rb1);        mRb2 = (RadioButton) findViewById(R.id.rb2);        mRb3 = (RadioButton) findViewById(R.id.rb3);        mRb4 = (RadioButton) findViewById(R.id.rb4);        mRg = (RadioGroup) findViewById(R.id.rg);    }     //添加Fragment    private void addFragment() {        list = new ArrayList<>();        list.add(new FragmentJingxuan());        list.add(new FragmentZhuanTi());        list.add(new FragmentFaXian());        list.add(new FragmentWode());    }   // ViewPager适配器    class  MyViewPager extends FragmentPagerAdapter {       public MyViewPager(FragmentManager fm) {           super(fm);       }       @Override       public Fragment getItem(int position) {           return list.get(position);       }       @Override       public int getCount() {           return list.size();       }        //重写getPageTitle        @Override       public CharSequence getPageTitle(int position) {           return title[position];       }   }}

Fragment

public class FragmentFaXian extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=View.inflate(getActivity(), R.layout.frag,null);        return view;    }}

FragmentZhuanTi

public class FragmentZhuanTi extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=View.inflate(getActivity(), R.layout.frag,null);        return view;    }}

FragmentWode

public class FragmentWode extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view=View.inflate(getActivity(), R.layout.frag,null);        return view;    }}

drawable里的一些样式

设置底部导航字体的样式  st

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">  <item android:color="@color/colorAccent"  android:state_checked="true"></item>//选中时的颜色    <item android:color="@android:color/black"></item>//默认时显示的颜色</selector>

设置底部导航图标显示的样式，图标可以自己选择

图标样式，可以根据自己需要设置，我设置了四个样式

 

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:drawable="@drawable/shouye2" android:state_checked="true"></item>//选中时的图标    <item android:drawable="@drawable/shouye1"></item>//默认时的图标</selector>

布局

activity——main

<?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.support.design.widget.TabLayout    android:id="@+id/tab"    android:layout_width="match_parent"    android:layout_height="40dp"></android.support.design.widget.TabLayout>    <android.support.v4.view.ViewPager        android:id="@+id/vp"        android:layout_below="@+id/tab"        android:layout_width="match_parent"        android:layout_height="match_parent"        ></android.support.v4.view.ViewPager>    <RadioGroup        android:id="@+id/rg"        android:layout_width="match_parent"        android:layout_height="80dp"        android:orientation="horizontal"        android:layout_alignParentBottom="true"        >        <RadioButton            android:id="@+id/rb1"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="精选"            android:button="@null"            android:gravity="center"            android:drawableTop="@drawable/selecor1"//把图标样式引入           android:textColor="@drawable/st"//把字体样式引入            android:textSize="20sp"            />        <RadioButton            android:id="@+id/rb2"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="专题"            android:button="@null"            android:gravity="center"            android:drawableTop="@drawable/selecor2"//把图标样式引入           android:textColor="@drawable/st"//把字体样式引入            android:textSize="20sp"            />        <RadioButton            android:id="@+id/rb3"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="发现"            android:button="@null"            android:gravity="center"           android:drawableTop="@drawable/selecor3"//引入图标样式            android:textColor="@drawable/st"//引入字体样式            android:textSize="20sp"            />        <RadioButton            android:id="@+id/rb4"            android:layout_width="0dp"            android:layout_height="match_parent"            android:layout_weight="1"            android:text="我的"            android:button="@null"            android:gravity="center"           android:drawableTop="@drawable/selecor4"            android:textColor="@drawable/st"            android:textSize="20sp"            />    </RadioGroup></RelativeLayout>

Fragment布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    ><ImageView    android:layout_width="match_parent"    android:layout_height="match_parent"    android:src="@drawable/y"//图片可以自己选择更改    /></RelativeLayout>