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>