android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果

原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout .

其实TabLayout实现切换效果还是蛮简单的,跟tabpageindicator类似,不过原来没弄过,还是折腾了一会儿.

本次demo是TabLayout+ViewPager来实现切换滑动效果的.

首先要添加依赖包,TabLayout是google的design包最新定义的控件:

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

布局文件:

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"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:orientation="vertical">

android:id="@+id/tay_home_tab_view"

android:layout_width="match_parent"

android:background="@color/colorPrimaryLight"

android:layout_height="30dp"

app:tabIndicatorColor="#26c6da"

app:tabSelectedTextColor="#f44336"

app:tabTextColor="#bdbdbd"/>

android:id="@+id/tay_home_pager_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#ededed"/>

主项目代码:

public class TestActivity extends Activity {

private TabLayout mTabLayout;

private ViewPager mViewPager;

private List mTitleList;

private List mViewList;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_test);

mTabLayout = (TabLayout) findViewById(R.id.tay_home_tab_view);

mViewPager = (ViewPager) findViewById(R.id.tay_home_pager_view);

initViewPager();

}

private void initViewPager() {

mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

setViewPagerData();

MyPagerAdapter mAdapter = new MyPagerAdapter();

mViewPager.setAdapter(mAdapter);

mTabLayout.setupWithViewPager(mViewPager); //将TabLayout和ViewPager关联起来

}

private void setViewPagerData() {

if (mTitleList == null) {

mTitleList = new ArrayList<>();

}

if (mViewList == null) {

mViewList = new ArrayList<>();

}

for (int i = 0; i < 5; i++) {

mTitleList.add("列表"+i);

mViewList.add(View.inflate(this,R.layout.tab_layout_item,null));

}

}

class MyPagerAdapter extends PagerAdapter {

@Override

public int getCount() {

return mTitleList == null ? 0 : mTitleList.size();

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view == object;

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

View view = mViewList.get(position);

TextView tv = (TextView) view.findViewById(R.id.text);

tv.setText("测试：" +position);

container.addView(view);

return view;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView(mViewList.get(position));

}

@Override

public CharSequence getPageTitle(int position) {

return mTitleList.get(position);

}

}

}

说说demo过程中碰到的问题:

1.TabLayout单独使用的时候用addtab添加选项卡;

2.TabLayout和Viewpager联合使用的时候不需要用addTab的方式,可使用viewpager的title;

我在写的时候在pagerAdapter中漏写了getPageTitle,导致TabLayout不显示问题;

3.测试的时候遇到一个很"奇葩"的问题,滑动的时候选项卡切换不对,漏写了一个方法.

Paste_Image.png