Android进阶之利用Tablayout+ViewPager+Fragment实现神奇的滑动效果

一,概述

之前我们使用ViewPager时,往往喜欢与TabPageIndicator配合使用,达到滑动就可以切换页面的效果.但是,TabPageIndicator毕竟是第三方库,多少还是没有谷歌推出的Tablayout好用.Tablayout出来后,估计之前在GitHub上类似的第三方控件都会沉寂下去了.Tablayout还有一个优点就是,它可以最低可以兼容到Android api2.2,这就很有吸引力了.本文主要是记录Tablayout+ViewPager+Fragment结合使用,搭建一个漂亮的app界面,小型项目可以直接使用!

二,代码实现

布局实现

1)Tablayout是在Android Support Design库,所有先去app/build.gradle添加该库

//使用TabLayout，需要引入design库
compile 'com.android.support:design:25.1.0'

2)布局

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--titlebar-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/myColor_green"
android:padding="8dp"
>
<TextView
android:id="@+id/home_tv_qrcode"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="@drawable/qr_code"
/>

<TextView
android:id="@+id/home_tv_category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="@drawable/category"
/>
<TextView
android:id="@+id/home_tv_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_toLeftOf="@id/home_tv_category"
android:layout_toRightOf="@id/home_tv_qrcode"
android:background="@drawable/bg_home_edittext"
android:gravity="center"
android:padding="6dp"
android:text="@string/text_tv_search"
android:textColor="@color/black_cdcdcd"
android:textSize="16sp"
/>
</RelativeLayout>

<!--tablayout的背景颜色: android:background="#38B059"-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.TabLayout
android:background="@color/colorPrimary"
android:id="@+id/home_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="@color/myColor_green"
app:tabMode="scrollable"
app:tabSelectedTextColor="@color/myColor_green"
app:tabTextColor="@color/pale_black"
/>
<android.support.v4.view.ViewPager
android:id="@+id/home_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>

<!--设置fab的背景颜色app:backgroundTint="@color/myColor_green"-->
<android.support.design.widget.FloatingActionButton
android:id="@+id/home_fabtn_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="@dimen/size_dp14"
android:layout_marginRight="@dimen/size_dp14"
android:src="@drawable/icon_setting"
app:backgroundTint="@color/myColor_green"
app:rippleColor="@color/colorAccent"/>
</RelativeLayout>

3)关于Tablayout的几个属性

background: 设置背景图，示例为#38B059

tabTextColor: tab 的字体颜色，示例为#7D&D&D

tabSelectedTextColor: tab 选中时候的字体颜色

tabMode: tab 的模式，有两种。fixed 为固定模式，scrollable 为可滚动模式

程序代码实现

1)HomeUI.java的所有代码

public class HomeUI extends BaseActivity implements View.OnClickListener {

private TabLayout mTabLayout;
private ViewPager mViewPager;
private FloatingActionButton mFabtnSettings;//悬浮按钮
/**
* title list
*/
private List<String> mTitleLists;
/**
* fragment list
*/
private List<Fragment> mFragLists;

private TextView mQrCode;//二维码

@Override
protected void setContentView() {
setContentView(R.layout.ui_home);
//changeStatusBarColor(R.color.myColor_green);
//隐藏actionbar
getSupportActionBar().hide();

}

@Override
protected void initView() {
mTabLayout = (TabLayout) findViewById(R.id.home_tablayout);
mViewPager = (ViewPager) findViewById(R.id.home_viewpager);
mFabtnSettings = (FloatingActionButton) findViewById(R.id.home_fabtn_settings);
mQrCode = (TextView) findViewById(R.id.home_tv_qrcode);
}

@Override
protected void initData() {
//默认隐藏
mFabtnSettings.setVisibility(ViewPager.GONE);
//去掉阴影
getSupportActionBar().setElevation(0);

mTitleLists = new ArrayList<>();
mTitleLists.add("语音助手");
mTitleLists.add("微信精选");
mTitleLists.add("视频推荐");
mTitleLists.add("创意商品");
mTitleLists.add("个人中心");

mFragLists = new ArrayList<>();
mFragLists.add(new HelperFrag());
mFragLists.add(new WechatFrag());
mFragLists.add(new VideoFrag());
mFragLists.add(new GoodsFrag());
mFragLists.add(new UserFrag());

//viewpager预加载
mViewPager.setOffscreenPageLimit(mFragLists.size());
//监听ViewPager
mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
//在第一个ViewPager中隐藏，其他页面显示
mFabtnSettings.setVisibility((position == 0) ? ViewPager.GONE : ViewPager.VISIBLE);
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

//设置适配器
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
//返回当前位置的页面
return mFragLists.get(position);
}

@Override
public int getCount() {

4000
//总的页面数
return mFragLists.size();
}

@Override
public CharSequence getPageTitle(int position) {
//每个item的title
return mTitleLists.get(position);
}
});

/**
* 绑定
*/
mTabLayout.setupWithViewPager(mViewPager);
//跳转到悬浮按钮设置界面
mFabtnSettings.setOnClickListener(this);
//跳转到扫码页面
mQrCode.setOnClickListener(this);

}

@Override
protected void showBackKey() {
//主页不显示返回的按钮
//super.showBackKey();
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.home_fabtn_settings:
IntentUtils.startActivity(this, UserSettingUI.class);
showNext();
break;
default:
break;
}
}

}

2)HomeUI继承自BaseActivity,BaseActivity是自定义的Activity基类,继承自该基类的Activity默认就要实现setContentView() initView() initData()三个方法,作用分别为加载布局文件 获取id 初始化一些数据.

3)标题与需要绑定的Fragment最好是用一个JavaBean来封装数据,如FragmentInfo.java,如下:

public class FragmentInfo {

private  String title;

private Class fragment;

public FragmentInfo(String title, Class fragment) {
this.title = title;
this.fragment = fragment;
}

//setter与getter方法省略
}

本文为了方便,分别用集合来存标题和Fragment实例,如下:

mTitleLists = new ArrayList<>();
mTitleLists.add("语音助手");
mTitleLists.add("微信精选");
mTitleLists.add("视频推荐");
mTitleLists.add("创意商品");
mTitleLists.add("个人中心");

mFragLists = new ArrayList<>();
mFragLists.add(new HelperFrag());
mFragLists.add(new WechatFrag());
mFragLists.add(new VideoFrag());
mFragLists.add(new GoodsFrag());
mFragLists.add(new UserFrag());

4)为了提高效率,进行了ViewPager的预加载.

mViewPager.setOffscreenPageLimit(mFragLists.size());

5)实际开发中最好另外写一个适配器类,将代码分析,而不是通过匿名内部类的方式

//设置适配器
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
//返回当前位置的页面
return mFragLists.get(position);
}

@Override
public int getCount() {
//总的页面数
return mFragLists.size();
}

@Override
public CharSequence getPageTitle(int position) {
//每个item的title
return mTitleLists.get(position);
}
});

6)接下来就是Tablayout绑定ViewPager了

/**
* 绑定
*/
mTabLayout.setupWithViewPager(mViewPager);

三,效果图

效果图如下,可以自然的滑动滑动切换页面哦,个人感觉还不错!嘻嘻!