Android中TabLayout结合ViewPager实现页面切换效果
作者:CKTim
本文实例为大家分享了TabLayout结合ViewPager实现页面切换效果的具体代码,供大家参考,具体内容如下
先看看效果,如图:
1.因为TabLayout是Android Design Support Library官方库的一个控件,所以使用TabLayout时候需要先添加对该库的依赖
compile 'com.android.support:design:22.2.0'
2.下面是TabLayout和ViewPager配合使用的布局
<?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" tools:context="com.example.cxk.myapplication.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="48dp" android:background="#1FBCD2" app:tabTextAppearance="@style/MyTabLayoutTextAppearance" app:tabIndicatorColor="@color/white" app:tabSelectedTextColor="@color/white" app:tabTextColor="@color/ripple_material_dark" app:tabIndicatorHeight="2dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="match_parent" android:layout_below="@+id/tablayout" android:layout_weight="1" /> </RelativeLayout>
注:
a.必须在根布局下写上 xmlns:app="http://schemas.android.com/apk/res-auto"这句代码,不然无法设置在布局中设置Tablayout的一些属性。
b.以下是Tablayout一些常用属性
app:tabIndicatorColor="@color/white"指示器颜色
app:tabIndicatorHeight="2dp"指示器的宽带
app:tabSelectedTextColor="@color/white"被选中时字体的颜色
app:tabTextColor="@color/ripple_material_dark"未被选中时字体的颜色
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"改变字体的大小(在style.xml下面添加如下代码)
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textSize">16sp</item> </style>
3.下面是TabLayout和ViewPager配合使用的JAVA代码
public class MainActivity extends FragmentActivity { private TabLayout tablayout; private ViewPager viewpager; private List<Fragment> list; private FragmentManager manager; private FragmentTransaction transtion; private MyFragmentPageAdapter adapter; private List<String> titles; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //先findID tablayout = (TabLayout) this.findViewById(R.id.tablayout); viewpager = (ViewPager) this.findViewById(R.id.viewpager); //将各个标题装在titles里面 titles = new ArrayList<String>(); titles.add("第一个"); titles.add("第二个"); //将两个Fragment装进集合中 list = new ArrayList<Fragment>(); Fragment1 f1 = new Fragment1(); Fragment2 f2 = new Fragment2(); list.add(f1); list.add(f2); //使用manager和transtion提交事务后为viewpager设置一个适配器 manager = getSupportFragmentManager(); adapter = new MyFragmentPageAdapter(manager); transtion = manager.beginTransaction(); transtion.commit(); viewpager.setAdapter(adapter); // tablayout.addTab可以将标题添加进Tab里面,true表示默认选中 tablayout.addTab(tablayout.newTab().setText(titles.get(0)), true); tablayout.addTab(tablayout.newTab().setText(titles.get(1)), false); //这两个方法是将Tablayout和Viewpager联合起来 tablayout.setupWithViewPager(viewpager); tablayout.setTabsFromPagerAdapter(adapter); } // 定义一个适配器给ViewPager class MyFragmentPageAdapter extends FragmentPagerAdapter { public MyFragmentPageAdapter(FragmentManager fm) { super(fm); // TODO Auto-generated constructor stub } @Override public android.support.v4.app.Fragment getItem(int arg0) { // TODO Auto-generated method stub return list.get(arg0); } @Override public CharSequence getPageTitle(int position) { return titles.get(position); } @Override public int getCount() { // TODO Auto-generated method stub return list.size(); } @Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub super.destroyItem(container, position, object); } } }
注:
1.getSupportManager使用该方法需要你继承FragmentActivity。
2.定义的新适配器需要重写getpagerTitle这个方法,不然标题显示不出来。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- TabLayout+ViewPager实现切页的示例代码
- TabLayout实现ViewPager指示器的方法
- Android 中基于TabLayout+ViewPager实现标签卡效果
- TabLayout关联ViewPager后不显示文字的解决方法
- Android中TabLayout+ViewPager实现tab和页面联动效果
- Android中TabLayout+ViewPager 简单实现app底部Tab导航栏
- Android中TabLayout结合ViewPager实现页面切换
- AndroidUI组件SlidingTabLayout实现ViewPager页滑动效果
- TabLayout+ViewPager2的简单使用详解