一、主页面布局：
添加Tablayout和ViewPager两个控件
PS：使用前要先添加支持库：
- ViewPager：
compile 'com.android.support:support-v4:23.4.0’ - TabLayout：
compile 'com.android.support:design:24.0.0'
主布局代码：activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".ui.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/main_tablayout"
style="@style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<com.start.pedometer.view.CustomViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>
PS：如果要将表情页置于底部，只需要将Tablayout放在ViewPager之后就好了。
二、主页面代码：
1、 初始化控件：
TabLayout mTabLayout = (TabLayout) findViewById(R.id.*main_tablayout*);
CustomViewPager mPager = (CustomViewPager) findViewById(R.id.*viewpager*);
2、继承FragmentPagerAdapter创建适配器：
适配器的构造方法中需要传入一个FragmentManager参数，当我们在Fragment中使用ViewPager+fragment时，需要传入的是该父容器Fragment的getChildFragmentManager()方法返回值。
代码：
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
ArrayList<Fragment> list;//需要显示的fragment在构造器中传入
public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
super(fm);
this.list = list;
}
//返回显示的Fragment总数
@Override
public int getCount() {
return list.size();
}
//返回要显示的Fragment的某个实例
@Override
public Fragment getItem(int arg0) {
return list.get(arg0);
}
//返回一个自定义tab视图（用于自定义Tablayout标签，不自定义可忽略）
public View getTabView(int position) {
int layout_ids = R.layout.*tab_view_monthly*;
if (position == 1) {
layout_ids = R.layout.*tab_view_daily*;
}
View v = LayoutInflater.*from*(MainActivity.this).inflate(layout_ids, null);
return v;
}
//返回每个Tab的标题，当要自定义Tab的时候不应该重写该方法
//@Override
//
//public CharSequence getPageTitle(int position) {
//
// return super.getPageTitle(position);
//}
}
3、设置ViewPager的适配器：
代码：
MyFragmentPagerAdapter fragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);
mPager.setAdapter(fragmentPagerAdapter);
4、设置Tablayout绑定ViewPager：
代码：
mTabLayout.setupWithViewPager(mPager);
//设置标签的显示类型(TabLayout.*MODE_FIXED参数为平均地填充。*
mTabLayout.setTabMode(TabLayout.*MODE_FIXED*);
PS：到此基本完成基本的ViewPager+Tablayout+Fragment的多页面滑动效果的主界面。
三、自定义TabLayout的标签
（1）创建自定义Tablayout的tab的Style并设置：
代码：
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabMaxWidth">@dimen/tab_max_width</item>
<item name="tabIndicatorColor">?attr/colorAccent</item>
<item name="tabIndicatorHeight">0dp</item>
<item name="tabPaddingStart">0dp</item>
<item name="tabPaddingEnd">0dp</item>
<item name="tabBackground">@color/tab_bgcolor</item>
<item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>
或者直接在控件布局文件中设施属性：
主要设置一下几个：
app:tabIndicatorColor="@color/colorAccent”//设置选中标签下滑线的颜色
app:tabIndicatorHeight=“0dp”//设置选中标签下滑线的高度
app:tabPadding=“0dp”//设置标签内容对标签边框的距离
app:tabBackground="@android:color/transparent”//标签背景颜色
我们需要在设置好Tablayout和ViewPager绑定后设置Tablayout每个标签的视图，
代码：
for (int i = 0; i < mTabLayout.getTabCount(); i++) {
TabLayout.Tab tab = mTabLayout.getTabAt(i);//取出标签对象Tab
if (tab != null) {
tab.setCustomView(fragmentPagerAdapter.getTabView(i));//设置新的视图
}
}
PS：其中创建自定义视图的代码在适配器中。亦可写在别的地方，不影响。
mPager.setCurrentItem(0);//设置默认显示第0个Fragment。
四、重写ViewPager，灵活设置是否禁止滑动
public class CustomViewPager extends ViewPager {
private boolean isPagingEnabled = true;//是否禁止滑动
public CustomViewPager(Context context) {
super(context);
}
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
//重写两个触摸事件，并放回是否确定滑动
@Override
public boolean onTouchEvent(MotionEvent event) {
return this.isPagingEnabled && super.onTouchEvent(event);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return this.isPagingEnabled && super.onInterceptTouchEvent(event);
}
//设置是否滑动
public void setPagingEnabled(boolean b) {
this.isPagingEnabled = b;
}
}
网友评论