TShopping

 找回密碼
 註冊
搜索
查看: 465|回復: 0

[教學] Android 快速使用 TabLayout

[複製鏈接]
發表於 2016-5-7 12:50:58 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
如果要使用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.     <android.support.design.widget.TabLayout
  8.         android:id="@+id/tabs"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content" />
  11.     <android.support.v4.view.ViewPager
  12.         android:id="@+id/viewpager"
  13.         android:layout_below="@id/tabs"
  14.         android:layout_width="match_parent"
  15.         android:layout_height="match_parent"
  16.         />
  17. </RelativeLayout>
複製代碼


創建layout
viewpager.xml

  1. <?xml version="1.0" encoding="utf-8"?>

  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.       android:layout_width="match_parent"
  4.       android:layout_height="match_parent"
  5.       android:orientation="vertical"
  6.       android:gravity="center">

  7.     <TextView
  8.           android:id="@+id/item_subtitle"
  9.           android:layout_width="wrap_content"
  10.           android:layout_height="wrap_content"
  11.           android:textAppearance="?android:attr/textAppearanceLarge"
  12.           android:text="Page:"/>

  13.     <TextView
  14.           android:id="@+id/item_title"
  15.           android:layout_width="wrap_content"
  16.           android:layout_height="wrap_content"
  17.           android:textSize="80sp" />

  18. </LinearLayout>
複製代碼

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

  1. public class MainActivity extends Activity {

  2.     private android.support.design.widget.TabLayout mTabs;

  3.     private ViewPager mViewPager;

  4.     @Override
  5.     protected void onCreate(Bundle savedInstanceState) {
  6.         super.onCreate(savedInstanceState);
  7.         setContentView(R.layout.activity_main);
  8.         mTabs = (android.support.design.widget.TabLayout) findViewById(R.id.tabs);
  9.         mTabs.addTab(mTabs.newTab().setText("Tab 1"));
  10.         mTabs.addTab(mTabs.newTab().setText("Tab 2"));
  11.         mTabs.addTab(mTabs.newTab().setText("Tab 3"));

  12.         mViewPager = (ViewPager) findViewById(R.id.viewpager);
  13.         mViewPager.setAdapter(new SamplePagerAdapter());
  14.         mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabs));
  15.     }

  16.     class SamplePagerAdapter extends PagerAdapter {

  17.         @Override
  18.         public int getCount() {
  19.             return 3;
  20.         }

  21.         @Override
  22.         public boolean isViewFromObject(View view, Object o) {
  23.             return o == view;
  24.         }

  25.         @Override
  26.         public CharSequence getPageTitle(int position) {
  27.             return "Item " + (position + 1);
  28.         }


  29.         @Override
  30.         public Object instantiateItem(ViewGroup container, int position) {
  31.             View view = getLayoutInflater().inflate(R.layout.viewpager,
  32.                     container, false);
  33.             container.addView(view);
  34.             TextView title = (TextView) view.findViewById(R.id.item_title);
  35.             title.setText(String.valueOf(position + 1));
  36.             return view;
  37.         }
  38.         @Override
  39.         public void destroyItem(ViewGroup container, int position, Object object) {
  40.             container.removeView((View) object);
  41.         }

  42.     }

  43. }
複製代碼

短短幾行就可以看到很棒的效果
01.png
02.png

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



 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 21:49 , Processed in 0.059619 second(s), 26 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表