前言:很久以前就使用过TabLayout+ViewPager+Fragment实现分页滑动效果,不过太久没用忘记了,现在重新回顾并且记录下使用方法。
以下是效果图:
接下来介绍一下使用方法:
属性介绍:
1、app:tabSelectedTextColor=”?attr/colorPrimary” //改变选中字体的颜色 2、app:tabTextColor=”#000000” //改变未选中字体的颜色 3、app:tabIndicatorColor=”?attr/colorPrimary” //改变指示器下标的颜色 4、app:tabBackground=”color” //改变整个TabLayout的颜色 5、app:tabIndicatorHeight=”4dp” //设置指示器下标的高度 6、app:tabTextAppearance=”@Android:style/TextAppearance.Holo.Large” //设置文字的外貌 7、app:tabMode=”fixed” //设置TabLayout模式,默认是fixed:固定的,标签很多时候会被挤压,不能滑动。另外一种就是scrollable,可以滑动的 8、app:tabPadding=”xxdp” //设置Tab内部的子控件的Padding 9、app:paddingEnd=”xxdp” //设置整个TabLayout的Padding app:paddingStart=”xxdp” //设置整个TabLayout的Padding 10、app:tabGravity=”center”//内容的显示模式。center是居中,如果是fill,则是充满 11、app:tabMaxWidth=”xxdp” //设置最大的tab宽度 12、app:tabMinWidth=”xxdp” //设置最小的tab宽度 13、app:tabContentStart=”100dp” //TabLayout开始位置的偏移量
XML文件
<android.support.design.widget.TabLayout android:id="@+id/my_tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabIndicatorColor="?attr/colorPrimary" app:tabMode="fixed" app:tabSelectedTextColor="?attr/colorPrimary" app:tabTextColor="#000000" /> <android.support.v4.view.ViewPager android:id="@+id/my_viewpager" android:layout_width="match_parent" android:layout_height="match_parent" />
java代码
根据分页数的不同分别创建对应的Fragement和布局文件,然后创建一个适配器,继承FragmentPagerAdaoter。
MyFragmentPagerAdaoter:
package com.wyh.demo; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.ArrayList; /** * Created by wyh on 2017/3/10. */ public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private ArrayList<String> tab_title_list;//存放标签页标题 private ArrayList<Fragment> fragment_list;//存放ViewPager下的Fragment public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<String> tab_title_list, ArrayList<Fragment> fragment_list) { super(fm); this.tab_title_list = tab_title_list; this.fragment_list = fragment_list; } @Override public Fragment getItem(int position) { return fragment_list.get(position); } @Override public int getCount() { return fragment_list.size(); } @Override public CharSequence getPageTitle(int position) { return tab_title_list.get(position); } }MainActivity:
package com.wyh.demo; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private TabLayout tabLayout; private ViewPager viewPager; private ArrayList<String> tab_title_list = new ArrayList<>();//存放标签页标题 private ArrayList<Fragment> fragment_list = new ArrayList<>();//存放ViewPager下的Fragment private Fragment fragment1, fragment2, fragment3, fragment4; private MyFragmentPagerAdapter adapter;//适配器 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); tabLayout = (TabLayout) findViewById(R.id.my_tablayout); viewPager = (ViewPager) findViewById(R.id.my_viewpager); tab_title_list.add("页面1"); tab_title_list.add("页面2"); tab_title_list.add("页面3"); tab_title_list.add("页面4"); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(0))); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(1))); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(2))); tabLayout.addTab(tabLayout.newTab().setText(tab_title_list.get(3))); fragment1 = new Fragment1(); fragment2 = new Fragment2(); fragment3 = new Fragment3(); fragment4 = new Fragment4(); fragment_list.add(fragment1); fragment_list.add(fragment2); fragment_list.add(fragment3); fragment_list.add(fragment4); adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), tab_title_list, fragment_list); viewPager.setAdapter(adapter);//给ViewPager设置适配器 tabLayout.setupWithViewPager(viewPager);//将TabLayout与Viewpager联动起来 tabLayout.setTabsFromPagerAdapter(adapter);//给TabLayout设置适配器 } } 最后的tabLayout.setupWithViewPager(viewPager);代码最尾重要,他使得tabLayout和ViewPager绑定起来,一起滑动。这样分页滑动效果就实现了。最后再补充点内容:
TabLayout的监听事件
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //选中了tab的逻辑 } @Override public void onTabUnselected(TabLayout.Tab tab) { //未选中tab的逻辑 } @Override public void onTabReselected(TabLayout.Tab tab) { //再次选中tab的逻辑 } });给TabLayout添加图标
tabLayout.addTab(tabLayout.newTab().setText("页面1").setIcon(R.mipmap.ic_launcher));ps:以上只是TabLayout+ViewPager+Fragment实现分页滑动效果的简单使用,没有涉及到其他优化问题,可能还是存在一些问题,欢迎指出!
Demo下载
