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>