原来项目中一直使用tabhost做切换效果,最近在整理代码,决定放弃tabhost,使用google自带的切换布局TabLayout .
其实TabLayout实现切换效果还是蛮简单的,跟tabpageindicator类似,不过原来没弄过,还是折腾了一会儿.
本次demo是TabLayout+ViewPager来实现切换滑动效果的.
首先要添加依赖包,TabLayout是google的design包最新定义的控件:
<pre><code>compile'com.android.support:design:23.2.0'</code></pre>
布局文件:
<pre><code><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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.design.widget.TabLayout
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.support.v4.view.ViewPager
android:id="@+id/tay_home_pager_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ededed"/>
</LinearLayout>
</code></pre>
主项目代码:
<pre><code>
public class TestActivity extends Activity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private List<String> mTitleList;
private List<View> 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);
}
}
}
</code></pre>
说说demo过程中碰到的问题:
1.TabLayout单独使用的时候用addtab添加选项卡;
2.TabLayout和Viewpager联合使用的时候不需要用addTab的方式,可使用viewpager的title;
我在写的时候在pagerAdapter中漏写了getPageTitle,导致TabLayout不显示问题;
3.测试的时候遇到一个很"奇葩"的问题,滑动的时候选项卡切换不对,漏写了一个方法.
