|
如果要使用TAB在Android早期是很痛苦的, 漸漸的有很多優秀的第三方出來支援,
包含Indicater、ViewPager等等...。
由於太常使用這些元件, 因此Google這次在android.support.design這包lib內,
直接就提供TabLayout讓你快速建立好一個Tab元件。
當然一開始要把這個lib下載下來,
所以先在gradle內輸入下面語法。- dependencies {
- compile 'com.android.support:design:22.2.0'
- }
複製代碼
不過直接用 Android Studio 直接就內建 com.android.support:design
接著在xml內掛上你的TabLayout,
可以看到連ViewPager都可以很簡單的掛上去。
main.xml
- <RelativeLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
- android:paddingRight="@dimen/activity_horizontal_margin"
- android:paddingTop="@dimen/activity_vertical_margin"
- android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
- <android.support.design.widget.TabLayout
- android:id="@+id/tabs"
- android:layout_width="match_parent"
- android:layout_height="wrap_content" />
- <android.support.v4.view.ViewPager
- android:id="@+id/viewpager"
- android:layout_below="@id/tabs"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- />
- </RelativeLayout>
複製代碼
創建layout
viewpager.xml
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- android:gravity="center">
- <TextView
- android:id="@+id/item_subtitle"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:textAppearance="?android:attr/textAppearanceLarge"
- android:text="Page:"/>
- <TextView
- android:id="@+id/item_title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:textSize="80sp" />
- </LinearLayout>
複製代碼
直接把程式碼貼上, 非常的簡單。
- public class MainActivity extends Activity {
- private android.support.design.widget.TabLayout mTabs;
- private ViewPager mViewPager;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- mTabs = (android.support.design.widget.TabLayout) findViewById(R.id.tabs);
- mTabs.addTab(mTabs.newTab().setText("Tab 1"));
- mTabs.addTab(mTabs.newTab().setText("Tab 2"));
- mTabs.addTab(mTabs.newTab().setText("Tab 3"));
- mViewPager = (ViewPager) findViewById(R.id.viewpager);
- mViewPager.setAdapter(new SamplePagerAdapter());
- mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabs));
- }
- class SamplePagerAdapter extends PagerAdapter {
- @Override
- public int getCount() {
- return 3;
- }
- @Override
- public boolean isViewFromObject(View view, Object o) {
- return o == view;
- }
- @Override
- public CharSequence getPageTitle(int position) {
- return "Item " + (position + 1);
- }
- @Override
- public Object instantiateItem(ViewGroup container, int position) {
- View view = getLayoutInflater().inflate(R.layout.viewpager,
- container, false);
- container.addView(view);
- TextView title = (TextView) view.findViewById(R.id.item_title);
- title.setText(String.valueOf(position + 1));
- return view;
- }
- @Override
- public void destroyItem(ViewGroup container, int position, Object object) {
- container.removeView((View) object);
- }
- }
- }
複製代碼
短短幾行就可以看到很棒的效果
參考 修正 http://givemepass-blog.logdown.c ... ow-to-use-tablayout
|
|