原來項目中一直使用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

總結

以上是生活随笔為你收集整理的android 页卡切换实现,TabLayout+ViewPager实现选项卡切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。