标签:
先上效果图
在使用TabLayout 之前需要导入design包。 我使用的是android studio 只要在build.gradle中加入
compile ‘com.android.support:design:24.2.0‘ 即可。
一、首先看一下布局文件
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:app="http://schemas.android.com/apk/res-auto" 5 xmlns:tools="http://schemas.android.com/tools" 6 android:layout_width="match_parent" 7 android:layout_height="match_parent" 8 android:orientation="vertical" 9 tools:context=".MainActivity"> 10 11 12 <android.support.design.widget.TabLayout 13 android:id="@+id/tablayout" 14 android:layout_width="match_parent" 15 android:layout_height="wrap_content" 16 android:background="@color/colorPrimary" 17 app:tabIndicatorColor="@color/white" 18 app:tabSelectedTextColor="@color/red" 19 app:tabTextColor="@color/white" 20 > 21 </android.support.design.widget.TabLayout > 22 23 <android.support.v4.view.ViewPager 24 android:id="@+id/viewpage" 25 android:layout_width="match_parent" 26 android:layout_height="0dp" 27 android:layout_weight="1"> 28 29 </android.support.v4.view.ViewPager> 30 31 </LinearLayout>
布局很简单,一个是TabLayout用来显示文字的,一个是ViewPage 用来真是页面内容的
其中
app:tabIndicatorColor="@color/white" // 选中项下面的标线颜色
app:tabSelectedTextColor="@color/red" // 选中时标题字体颜色
app:tabTextColor="@color/white" // 标题字体默认颜色
二、 我们看看 TabLayout 的适配器,很简单
package lyf.com.tablayoutdemo; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import java.util.List; /** * lyf on 2016/9/24. * Fragment 适配器 */ public class TabAdapter extends FragmentPagerAdapter { //Fragment集合 private List<Fragment> listFragment; //Tab名称集合 private List<String> listTitle; public TabAdapter(FragmentManager fm,List<Fragment> listF,List<String> listS) { super(fm); listFragment = listF; listTitle = listS; } @Override public Fragment getItem(int position) { return listFragment.get(position); } @Override public int getCount() { return listFragment.size(); } @Override public CharSequence getPageTitle(int position) { return listTitle.get(position); } }
三、看看我们的主布局界面
package lyf.com.tablayoutdemo; 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.view.ViewPager; import java.util.ArrayList; import java.util.List; /** * FragmentActivity 应该导入 android.support.v4.app.Fragment包 */ public class MainActivity extends FragmentActivity { private List<Fragment> fragmentList = new ArrayList<>(); private List<String> titleList = new ArrayList<>(); private TabLayout tabLayout; private ViewPager viewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabLayout = (TabLayout) this.findViewById(R.id.tablayout); viewPager = (ViewPager) this.findViewById(R.id.viewpage); initControls(); } private void initControls() { fragmentList.add(new OneFragment()); fragmentList.add(new TwoFragment()); fragmentList.add(new ThreeFragment()); fragmentList.add(new FourFragment()); titleList.add("推荐"); titleList.add("视频"); titleList.add("热点"); titleList.add("娱乐"); //添加标签选项布局样式 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); tabLayout.addTab(tabLayout.newTab().setText(titleList.get(0))); tabLayout.addTab(tabLayout.newTab().setText(titleList.get(1))); tabLayout.addTab(tabLayout.newTab().setText(titleList.get(2))); tabLayout.addTab(tabLayout.newTab().setText(titleList.get(3))); //设置页面选项 TabAdapter tabAdapter = new TabAdapter(this.getSupportFragmentManager(), fragmentList, titleList); viewPager.setAdapter(tabAdapter); tabLayout.setupWithViewPager(viewPager); } }
这里面的Fragment 就不贴出来了,大家可以用来展示自己的Fragment。这样我们的Demo 就结束了。
注意:包的引用 ViewPage和Fragment 都是引用 support.V4.app包里的。
标签:
原文地址:http://www.cnblogs.com/Jett/p/5903346.html