实现该效果主要分一下几步:
1、build.gradle 中导入 compile 'com.android.support:design:26.0.0-alpha1' 依赖,具体版本视情况而定
2、上主布局文件 activity_main.xml,代码如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ffdemo="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" ffdemo:tabIndicatorColor="@color/white" ffdemo:tabSelectedTextColor="@color/gray" ffdemo:tabTextColor="@color/white"/> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"/> </LinearLayout>
根布局为LinearLayout,在其中填充TabLayout 和 ViewPager;
ffdemo:tabIndicatorColor="@color/white" ffdemo:tabSelectedTextColor="@color/gray" ffdemo:tabTextColor="@color/white"
这三行代码用于显示tab标签各个状态的颜色,ffdemo对应到包名"com.example.xxx"中的xxx,在values文件夹下新建atttrs.xml文件,定义以上属性,代码如下:
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="Myview"> <attr name="tabIndicatorColor" format="color"/> <attr name="tabSelectedTextColor" format="color"/> <attr name="tabTextColor" format="color"/> </declare-styleable> </resources>
viewpager中fragment对应的文件布局文件 content.xml 如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="内容" android:id="@+id/content" android:gravity="center"/> </LinearLayout>
Fragment --> TabFragment.class 代码如下:
public class TabFragment extends Fragment { private TextView textView;
//返回一个Fragment实例
public static TabFragment newInstance(int index){ Bundle bundle = new Bundle(); bundle.putString("index","第" + (1 + index) + "页"); TabFragment fragment = new TabFragment(); fragment.setArguments(bundle); return fragment; }
//实例化控件和UI处理 @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view = inflater.inflate(R.layout.content,null); textView = view.findViewById(R.id.content); textView.setText(getArguments().getString("index")); return view; } }
MainActivity.class 代码如下:
private String[] titles = new String[]{"推荐", "娱乐", "科技"}; //tab标签的内容 源 private TabLayout tabLayout; //TabLayout实例 private ViewPager mViewPager; //ViewPager实例 private FragmentPagerAdapter adapter; //FragmentViewPager 适配器 //ViewPage选项卡页面列表 private List<Fragment> fragmentList; //List 存储 Fragment 实例 private List<String> titleList; //List 存储上面的 tab标签 的内容
protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.viewpager); tabLayout = (TabLayout) findViewById(R.id.tab_layout); titleList = new ArrayList<>(); //实例化 tab 的 List fragmentList = new ArrayList<>(); //实例化 Fragment 的 List for (int i = 0; i < titles.length; i++){ titleList.add(titles[i]); //将tab 的 String数组填充到List中 fragmentList.add(TabFragment.newInstance(i)); //填充对应的 Fragment } adapter = new Tab_fragment_pageradpter(getSupportFragmentManager(),fragmentList,titleList); //Tab_fragment_pageradapter的类将在下面给出 mViewPager.setAdapter(adapter); //ViewPager绑定adpter tabLayout.setupWithViewPager(mViewPager); //tabLayout关联viewPager }
public class Tab_fragment_pageradpter extends FragmentPagerAdapter { private List<Fragment> list_fragment; //fragment列表 private List<String> list_title; //tab名的列表 public Tab_fragment_pageradpter(FragmentManager fm,List<Fragment> list_fragment,List<String> list_title) { super(fm); this.list_fragment = list_fragment; //tab标签内容 数据源 this.list_title = list_title; //fragment 数据源 } @Override public Fragment getItem(int position) { return list_fragment.get(position); //返回fagment的实例 } @Override public int getCount() { return list_fragment.size(); //返回frament的数量 } //此方法用来显示tab上的名字 @Override public CharSequence getPageTitle(int position) { return list_title.get(position); //返回tab标签的内容 } }
最后:注册Activity,启动应用,就可以看到效果啦!!!
PS:适配器中的 CharSequence getPageTitle() 方法一定要复写,不然会出现tab标签内容不显示的问题!!
还有就是,如果tab过多,没过tab的数据会竖直显示,目前还没解决,希望各位大佬们指点迷津!!!
纪念我的第一个Blog,诸多不足,感谢各位大牛支持!!!