滚动导航栏以前写过一个，使用RadioGroup+ViewPager来实现的。
而后在看来，觉得以前的写的好乱。想要重新整合一下，这边使用的新的方式来试下，就是TabLayout+ViewPager，由谷歌的官方控件来实现了。
上一篇底部导航栏的新整合也重新写了下，可以点击查看
我这边就写一个调用类来使用就好了！
效果和使用
效果
使用
List<TabLayoutScrollBar.BarTab> list = new ArrayList<>();
for (int i = 0; i < 3; i++) {
TabLayoutScrollBar.BarTab fm = new TabLayoutScrollBar.BarTab();
fm.setTitle("标题"+i);
Bundle bundle = new Bundle();
bundle.putString("title","标题"+i);
fm.setBundle(bundle);
fm.setFragment(new TestFragment());
list.add(fm);
}
tabLayout.setSelectedTabIndicatorColor(ContextCompat.getColor(mActivity,R.color.appMainColor));
new TabLayoutScrollBar(mActivity,viewPager,tabLayout,list)
.IsAdaptationTextWidth(true)
.create();实现
首先看下基本的TabLayout+ViewPager实现
- 布局
<?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"
tools:context="com.gjn.msdemo.test.TestActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tl_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp">
</android.support.design.widget.TabLayout>
<view
android:id="@+id/vp_test"
class="android.support.v4.view.ViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>- 调用
{
tabLayout = (TabLayout) findViewById(R.id.tl_test);
viewPager = (ViewPager) findViewById(R.id.vp_test);
mFragmentManager = ((FragmentActivity) mActivity).getSupportFragmentManager();
viewPager.setAdapter(new ScrollBarAdapter(mFragmentManager,fs,ds));
tabLayout.setupWithViewPager(viewPager);
}
private class ScrollBarAdapter extends FragmentPagerAdapter{
private List<?> fdata;
private List<?> sdata;
ScrollBarAdapter(FragmentManager fm,List<Fragment> data1,List<String> data2) {
super(fm);
fdata = data1;
sdata = data2;
}
@Override
public Fragment getItem(int position) {
return fdata.get(position);
}
@Override
public int getCount() {
return fdata.size();
}
@Override
public CharSequence getPageTitle(int position) {
return sdata.get(position);
}
}就是直接将TabLayout中关联viewpager就可以使用了
开始创建管理类
布局还是不变
首先我们需要确定每个选项的包含的title和fragment的tab选项类
public static class BarTab{
private String title;
private Fragment fragment;
private Bundle bundle;
public BarTab(){
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public Fragment getFragment() {
return fragment;
}
public void setFragment(Fragment fragment) {
this.fragment = fragment;
}
public Bundle getBundle() {
return bundle;
}
public void setBundle(Bundle bundle) {
this.bundle = bundle;
}
}然后创建viewpager的适配器
private class ScrollBarAdapter extends FragmentPagerAdapter{
ScrollBarAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mData.get(position).getFragment();
}
@Override
public int getCount() {
return mData.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mData.get(position).getTitle();
}
}最后实现管理类全部代码
import android.app.Activity;
import android.os.Bundle;
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.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import java.lang.reflect.Field;
import java.util.List;
/**
* TabLayoutScrollBar
* Author: gjn.
* Time: 2018/1/8.
*/
public class TabLayoutScrollBar {
private Activity mActivity;
private ViewPager mViewPager;
private TabLayout mTabLayout;
private List<BarTab> mData;
private FragmentManager mFragmentManager;
private boolean IsAdaptationText = false;
public TabLayoutScrollBar(Activity activity, ViewPager viewPager,
TabLayout tabLayout, List<BarTab> list){
mActivity = activity;
mFragmentManager = ((FragmentActivity) mActivity).getSupportFragmentManager();
mViewPager = viewPager;
mTabLayout = tabLayout;
mData = list;
}
public void create(){
//设置Bundle
for (BarTab barTab : mData) {
barTab.getFragment().setArguments(barTab.getBundle());
}
mViewPager.setAdapter(new ScrollBarAdapter(mFragmentManager));
mTabLayout.setupWithViewPager(mViewPager);
if (IsAdaptationText) {
setTabTextViewWidth(mTabLayout);
}
}
public BarTab getItme(int position){
return mData.get(position);
}
public TabLayoutScrollBar IsAdaptationTextWidth(boolean b){
IsAdaptationText = b;
return this;
}
private void setTabTextViewWidth(final TabLayout tabLayout) {
tabLayout.post(new Runnable() {
@Override
public void run() {
try {
LinearLayout mTabStrip = (LinearLayout) tabLayout.getChildAt(0);
if (tabLayout.getTabMode() == TabLayout.MODE_SCROLLABLE) {
//dip2px
float scale = mActivity.getResources().getDisplayMetrics().density;
int dp = (int) (10 * scale + 0.5f);
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
//不是设置padding 会缩成一团
tabView.setPadding(0, 0, 0, 0);
//拿到tabView的mTextView属性 tab的字数不固定一定用反射取mTextView
Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
mTextViewField.setAccessible(true);
TextView mTextView = (TextView) mTextViewField.get(tabView);
//获取textview的宽度
int width = mTextView.getWidth();
if (width == 0) {
mTextView.measure(0, 0);
width = mTextView.getMeasuredWidth();
}
//设置tabView的宽度和左右Margin(不设置Margin会整个连在一起)
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = width;
params.leftMargin = dp;
params.rightMargin = dp;
tabView.setLayoutParams(params);
//重新绘制tabView
tabView.invalidate();
}
} else {
for (int i = 0; i < mTabStrip.getChildCount(); i++) {
View tabView = mTabStrip.getChildAt(i);
//不是设置padding 会缩成一团
tabView.setPadding(0, 0, 0, 0);
//拿到tabView的mTextView属性 tab的字数不固定一定用反射取mTextView
Field mTextViewField = tabView.getClass().getDeclaredField("mTextView");
mTextViewField.setAccessible(true);
TextView mTextView = (TextView) mTextViewField.get(tabView);
//获取tabView的宽度
int tabwidth = tabView.getWidth();
if (tabwidth == 0) {
tabView.measure(0, 0);
tabwidth = tabView.getMeasuredWidth();
}
//获取textview的宽度
int textwidth = mTextView.getWidth();
if (textwidth == 0) {
mTextView.measure(0, 0);
textwidth = mTextView.getMeasuredWidth();
}
//设置margin的宽度
int margin = (tabwidth - textwidth) / 2;
//设置tabView的宽度和左右Margin(不设置Margin会整个连在一起)
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) tabView.getLayoutParams();
params.width = tabwidth;
params.leftMargin = margin;
params.rightMargin = margin;
tabView.setLayoutParams(params);
//重新绘制tabView
tabView.invalidate();
}
}
} catch (NoSuchFieldException | IllegalAccessException e) {
e.printStackTrace();
}
}
});
}
public static class BarTab{
private String title;
private Fragment fragment;
private Bundle bundle;
public BarTab(){
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public Fragment getFragment() {
return fragment;
}
public void setFragment(Fragment fragment) {
this.fragment = fragment;
}
public Bundle getBundle() {
return bundle;
}
public void setBundle(Bundle bundle) {
this.bundle = bundle;
}
}
private class ScrollBarAdapter extends FragmentPagerAdapter{
ScrollBarAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return mData.get(position).getFragment();
}
@Override
public int getCount() {
return mData.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mData.get(position).getTitle();
}
}
}