ViewPager简单介绍(三) ViewPager+Fragment+TabLayout

前两篇文章中介绍了TabLayout和ViewPgaer+Fragment的使用，这篇文章将三者结合起来，做成一个比较常见的布局，如图：

如果对着这两者有什么不清楚的，可以看看这两篇，都是一些简单的使用。

TabLayout的使用

ViewPager+Fragment的简单使用

废话不多说，直接上代码。

要使用TabLayout,必须先在app的build.gradle中添加：

compile 'com.android.support:design:23.1.1'

在主布局中添加TabLayout和ViewPager

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android"><android.support.design.widget.TabLayoutandroid:id="@+id/tab"android:layout_width="fill_parent"android:layout_height="wrap_content"app:tabIndicatorColor="@color/colorPrimaryDark"app:tabSelectedTextColor="@color/colorPrimary"app:tabTextColor="@color/colorAccent" /><android.support.v4.view.ViewPagerandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/vp"></android.support.v4.view.ViewPager>
</LinearLayout>

创建两个Fragement类

fragment1.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"android:background="@color/colorAccent"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="fragment1"/>
</LinearLayout>

fragment2.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"android:background="@color/colorPrimary"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:text="fragment2"/></LinearLayout>

Fragment1.class

public class Fragment1 extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubView view= inflater.inflate(R.layout.fragment1, container, false);return view;}
}

Fragment2.class

public class Fragment1 extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// TODO Auto-generated method stubView view= inflater.inflate(R.layout.fragment2, container, false);return view;}
}

创建ViewPager的适配器

FragAdapter.calss

public class FragAdapter extends FragmentPagerAdapter {private List<Fragment> fragmentList;private List<String> title;public FragAdapter(FragmentManager fm,List<Fragment> fragments,List<String> titles) {super(fm);fragmentList = fragments;title = titles;}@Overridepublic Fragment getItem(int position) {return fragmentList.get(position);}@Overridepublic int getCount() {return fragmentList.size();}@Overridepublic CharSequence getPageTitle(int position) {return title.get(position);}
}

其中getPageTitle方法是获取标题的。

MainActivity中

public class MainActivity extends AppCompatActivity {private TabLayout mTabLayout;//标题列表ArrayList<String> titleList= new ArrayList<String>();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//构造适配器List<Fragment> fragments=new ArrayList<Fragment>();fragments.add(new Fragment1());fragments.add(new Fragment2());titleList.add("武侠");titleList.add("科幻");FragAdapter adapter = new FragAdapter(getSupportFragmentManager(), fragments,titleList);//设定适配器ViewPager vp = (ViewPager)findViewById(R.id.vp);vp.setAdapter(adapter);mTabLayout= (TabLayout) findViewById(R.id.tab);mTabLayout.setupWithViewPager(vp);}
}

到此，最简单的使用方法就结束了。当然，TabLayout的样式属性有很多，大家可以试着修改一下，做出自己想要的标题。还有就是TabLayout的属性中没有修改下划线宽度的方法，需要我们自己去写代码修改。这个我在后面的文章中会补充的。

最后附上遇到的一个小问题：

ClassNotFoundException: Didn't find class "android.support.v7.internal.widget.TintManager

就是这句代码：indiactor.setupWithViewPager(vpnewInfo);
在给TabLayout关联ViewPager的时候报错，

在引入design包的时候，版本要和appcompat版本一致。

compile 'com.android.support:design:25.0.0'
compile 'com.android.support:appcompat-v7:25.0.0'

ViewPager简单介绍(三) ViewPager+Fragment+TabLayout相关推荐

ViewPager简单介绍（二）ViewPager+Fragment
实现ViewPager要适配器,一般的使用PagerAdapter,对于fragment,我们所使用的是FragmentPagerAdapter和FragmentPagerStateAdapter. ...
ViewPager简单介绍(一)
一.ViewPager是什么官方介绍是: Layout manager that allows the user to flip left and right through pages of da ...
简单介绍三个C语言图形库C语言其实最擅长的是写纯数据处理的程序 . 非得用C语言写个界面程序那将会变得很困难 . 我刚开始学C语言就是从hello world 开始的 , 后来慢慢开始学从三个数中找
C语言其实最擅长的是写纯数据处理的程序 . 非得用C语言写个界面程序那将会变得很困难 . 我刚开始学C语言就是从hello world 开始的 , 后来慢慢开始学从三个数中找出最大值 , 和对数组进行 ...
XAPIAN简单介绍(三)
今天主要介绍的是Xapian::Database这个类.先上图看上去就非常恐怖的吧,我们一点点的说. 首先一切的開始都来自那个include目录中的database.h,他的直接实现是在omdata ...
git 命令简单介绍
爱无路,恨无情.相思无缘,相爱无份.曾相识,恨离别.无风雨,无同舟,何结果.情远天边,心无挂碍,唯爱你独一. git简单介绍三个区工作区(working diretory) 用于修改文件缓存区( ...
拉项目--球球世道的总结-解决了viewpager+fragment+tablayout 两个bug
一:立项 1,创新新的项目 2,引入module (这些都是我自己项目整的) -----fragmentation -----fragmentation_swipeback -----uibase ...
Android Fragment（三）ListFragment简单介绍以及Fragment之间通信
一.Fragment通信简单介绍:Fragments之间是不能够直接通信的,他们之间的通信是通过Activity这个中间件来通信的, 为了让Fragment跟它的Activity通信,我们可以在Fra ...
android 弹出fragment,Android中ViewPager获取当前显示的Fragment
前言在项目中,有时会用到在ViewPager中显示同样类型的Fragment,同时这样的Fragment的个数是动态的,但是PagerAdapter没有给我们提供getCurrentFragment ...
Android ViewPager简单实现 - 倒计时、引导页左右滑动
说明: ViewPager简单实现,方便以后用.做的是一个全屏的引导页. 截图: 代码: GuideActivity.java package com.xinyan.personal.ui.activ ...

ViewPager简单介绍(三) ViewPager+Fragment+TabLayout

ViewPager简单介绍(三) ViewPager+Fragment+TabLayout相关推荐

最新文章

热门文章