Android中TabLayout結(jié)合ViewPager實現(xiàn)頁面切換效果
本文實例為大家分享了TabLayout結(jié)合ViewPager實現(xiàn)頁面切換效果的具體代碼,供大家參考,具體內(nèi)容如下
先看看效果,如圖:

1.因為TabLayout是Android Design Support Library官方庫的一個控件,所以使用TabLayout時候需要先添加對該庫的依賴
compile 'com.android.support:design:22.2.0'
2.下面是TabLayout和ViewPager配合使用的布局
<?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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.cxk.myapplication.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="48dp" android:background="#1FBCD2" app:tabTextAppearance="@style/MyTabLayoutTextAppearance" app:tabIndicatorColor="@color/white" app:tabSelectedTextColor="@color/white" app:tabTextColor="@color/ripple_material_dark" app:tabIndicatorHeight="2dp" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="match_parent" android:layout_below="@+id/tablayout" android:layout_weight="1" /> </RelativeLayout>
注:
a.必須在根布局下寫上 xmlns:app="http://schemas.android.com/apk/res-auto"這句代碼,不然無法設置在布局中設置Tablayout的一些屬性。
b.以下是Tablayout一些常用屬性
app:tabIndicatorColor="@color/white"指示器顏色
app:tabIndicatorHeight="2dp"指示器的寬帶
app:tabSelectedTextColor="@color/white"被選中時字體的顏色
app:tabTextColor="@color/ripple_material_dark"未被選中時字體的顏色
app:tabTextAppearance="@style/MyTabLayoutTextAppearance"改變字體的大?。ㄔ趕tyle.xml下面添加如下代碼)
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textSize">16sp</item> </style>
3.下面是TabLayout和ViewPager配合使用的JAVA代碼
public class MainActivity extends FragmentActivity {
private TabLayout tablayout;
private ViewPager viewpager;
private List<Fragment> list;
private FragmentManager manager;
private FragmentTransaction transtion;
private MyFragmentPageAdapter adapter;
private List<String> titles;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//先findID
tablayout = (TabLayout) this.findViewById(R.id.tablayout);
viewpager = (ViewPager) this.findViewById(R.id.viewpager);
//將各個標題裝在titles里面
titles = new ArrayList<String>();
titles.add("第一個");
titles.add("第二個");
//將兩個Fragment裝進集合中
list = new ArrayList<Fragment>();
Fragment1 f1 = new Fragment1();
Fragment2 f2 = new Fragment2();
list.add(f1);
list.add(f2);
//使用manager和transtion提交事務后為viewpager設置一個適配器
manager = getSupportFragmentManager();
adapter = new MyFragmentPageAdapter(manager);
transtion = manager.beginTransaction();
transtion.commit();
viewpager.setAdapter(adapter);
// tablayout.addTab可以將標題添加進Tab里面,true表示默認選中
tablayout.addTab(tablayout.newTab().setText(titles.get(0)), true);
tablayout.addTab(tablayout.newTab().setText(titles.get(1)), false);
//這兩個方法是將Tablayout和Viewpager聯(lián)合起來
tablayout.setupWithViewPager(viewpager);
tablayout.setTabsFromPagerAdapter(adapter);
}
// 定義一個適配器給ViewPager
class MyFragmentPageAdapter extends FragmentPagerAdapter {
public MyFragmentPageAdapter(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}
@Override
public android.support.v4.app.Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return list.get(arg0);
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
super.destroyItem(container, position, object);
}
}
}
注:
1.getSupportManager使用該方法需要你繼承FragmentActivity。
2.定義的新適配器需要重寫getpagerTitle這個方法,不然標題顯示不出來。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- TabLayout+ViewPager實現(xiàn)切頁的示例代碼
- TabLayout實現(xiàn)ViewPager指示器的方法
- Android 中基于TabLayout+ViewPager實現(xiàn)標簽卡效果
- TabLayout關(guān)聯(lián)ViewPager后不顯示文字的解決方法
- Android中TabLayout+ViewPager實現(xiàn)tab和頁面聯(lián)動效果
- Android中TabLayout+ViewPager 簡單實現(xiàn)app底部Tab導航欄
- Android中TabLayout結(jié)合ViewPager實現(xiàn)頁面切換
- AndroidUI組件SlidingTabLayout實現(xiàn)ViewPager頁滑動效果
- TabLayout+ViewPager2的簡單使用詳解
相關(guān)文章
Android官方下拉刷新控件SwipeRefreshLayout使用詳解
這篇文章主要為大家詳細介紹了Android官方下拉刷新控件SwipeRefreshLayout使用方法,實例展示如何使用下拉刷新控件,感興趣的小伙伴們可以參考一下2016-07-07
android dialog根據(jù)彈窗等級排序顯示的示例代碼
這篇文章主要介紹了android dialog根據(jù)彈窗等級排序顯示,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-10

