Android 快速使用 TabLayout

woff

如果要使用TAB在Android早期是很痛苦的, 漸漸的有很多優秀的第三方出來支援,
包含Indicater、ViewPager等等...。

由於太常使用這些元件, 因此Google這次在android.support.design這包lib內,
直接就提供TabLayout讓你快速建立好一個Tab元件。

當然一開始要把這個lib下載下來,
所以先在gradle內輸入下面語法。

1. dependencies {
   
2.     compile 'com.android.support:design:22.2.0'
   
3. }

複製代碼

不過直接用 Android Studio 直接就內建 com.android.support:design


接著在xml內掛上你的TabLayout,
可以看到連ViewPager都可以很簡單的掛上去。
main.xml

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
2.     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
   
3.     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
   
4.     android:paddingRight="@dimen/activity_horizontal_margin"
   
5.     android:paddingTop="@dimen/activity_vertical_margin"
   
6.     android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
7. 
   
8.     <android.support.design.widget.TabLayout
   
9.         android:id="@+id/tabs"
   
10.         android:layout_width="match_parent"
    
11.         android:layout_height="wrap_content" />
    
12.     <android.support.v4.view.ViewPager
    
13.         android:id="@+id/viewpager"
    
14.         android:layout_below="@id/tabs"
    
15.         android:layout_width="match_parent"
    
16.         android:layout_height="match_parent"
    
17.         />
    
18. </RelativeLayout>

複製代碼

創建layout
viewpager.xml

1. <?xml version="1.0" encoding="utf-8"?>
   
2. 
   
3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
4.       android:layout_width="match_parent"
   
5.       android:layout_height="match_parent"
   
6.       android:orientation="vertical"
   
7.       android:gravity="center">
   
8. 
   
9.     <TextView
   
10.           android:id="@+id/item_subtitle"
    
11.           android:layout_width="wrap_content"
    
12.           android:layout_height="wrap_content"
    
13.           android:textAppearance="?android:attr/textAppearanceLarge"
    
14.           android:text="Page:"/>
    
15. 
    
16.     <TextView
    
17.           android:id="@+id/item_title"
    
18.           android:layout_width="wrap_content"
    
19.           android:layout_height="wrap_content"
    
20.           android:textSize="80sp" />
    
21. 
    
22. </LinearLayout>

複製代碼

直接把程式碼貼上, 非常的簡單。

1. public class MainActivity extends Activity {
   
2. 
   
3.     private android.support.design.widget.TabLayout mTabs;
   
4. 
   
5.     private ViewPager mViewPager;
   
6. 
   
7.     @Override
   
8.     protected void onCreate(Bundle savedInstanceState) {
   
9.         super.onCreate(savedInstanceState);
   
10.         setContentView(R.layout.activity_main);
    
11.         mTabs = (android.support.design.widget.TabLayout) findViewById(R.id.tabs);
    
12.         mTabs.addTab(mTabs.newTab().setText("Tab 1"));
    
13.         mTabs.addTab(mTabs.newTab().setText("Tab 2"));
    
14.         mTabs.addTab(mTabs.newTab().setText("Tab 3"));
    
15. 
    
16.         mViewPager = (ViewPager) findViewById(R.id.viewpager);
    
17.         mViewPager.setAdapter(new SamplePagerAdapter());
    
18.         mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabs));
    
19.     }
    
20. 
    
21.     class SamplePagerAdapter extends PagerAdapter {
    
22. 
    
23.         @Override
    
24.         public int getCount() {
    
25.             return 3;
    
26.         }
    
27. 
    
28.         @Override
    
29.         public boolean isViewFromObject(View view, Object o) {
    
30.             return o == view;
    
31.         }
    
32. 
    
33.         @Override
    
34.         public CharSequence getPageTitle(int position) {
    
35.             return "Item " + (position + 1);
    
36.         }
    
37. 
    
38. 
    
39.         @Override
    
40.         public Object instantiateItem(ViewGroup container, int position) {
    
41.             View view = getLayoutInflater().inflate(R.layout.viewpager,
    
42.                     container, false);
    
43.             container.addView(view);
    
44.             TextView title = (TextView) view.findViewById(R.id.item_title);
    
45.             title.setText(String.valueOf(position + 1));
    
46.             return view;
    
47.         }
    
48.         @Override
    
49.         public void destroyItem(ViewGroup container, int position, Object object) {
    
50.             container.removeView((View) object);
    
51.         }
    
52. 
    
53.     }
    
54. 
    
55. }

複製代碼

短短幾行就可以看到很棒的效果



參考 修正 http://givemepass-blog.logdown.c ... ow-to-use-tablayout