TabLayout+Fragment和底部导航联动
2017-11-24 16:17
423 查看
4000
TabLayout+Fragment和底部导航联动
看一下效果图吧
今天跟大家分享一下TabLayout和Fragment底部导航联动的一个demo,它的顶部导航栏和中间的Fragment还有底部导航栏可以实现联动效果,
本人不太会传视频,所以只能让大家看图片了,望见谅,喜欢的可以尝试着操作一下哦
看一下代码,首先是MainActivity
Fragment
FragmentZhuanTi
drawable里的一些样式
设置底部导航字体的样式 st
设置底部导航图标显示的样式,图标可以自己选择
图标样式,可以根据自己需要设置,我设置了四个样式
布局
activity——main
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>
相关文章推荐
- 首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment
- TabLayout+ViewPager+Fragment实现底部导航
- TabLayout+ViewPager+Fragment实现底部导航
- Tablayout 底部导航的实现 (TabLayout 以及ViewPager联动)
- 底部导航与Fragment联动的实现
- TabLayout ViewPager Fragment 实现底部按钮菜单 Fragment 实现懒加载
- Tablayout和Fragment联动+ListView接口变换展示
- Android之TabLayout+ViewPager+Fragment实现标题栏与页面联动
- Tablayout+Viewpager+fragment实现联动效果
- 实现TabLayout+ViewPager+Fragment头目的联动模式
- Android 用 TabLayout + ViewPager + Fragment 实现顶部、底部导航栏
- TabLayout实现标题栏viewpager与Fragment联动,标题栏下面有指示器(小横线)
- 4.8.3 在 一个 Fragment 里面实现ViewPager 和TabLayout 进行联动
- 首页-底部Tab导航(菜单栏)的实现:FragmentTabHost+ViewPager+Fragment
- 首页、底部导航栏:TabLayout+ViewPager+Fragment使用
- Android底部和标签导航栏—TabLayout+Fragment
- Tablayout+viewpager+fragment实现tab导航以及滑动切换
- 利用TabLayout(5.0新技术)+ViewPager+Fragment方法实现书签导航
- Android,底部导航+viewpager+fragment+drawerlayout+toolbar+recyclerview