TShopping
標題:
Android 快速使用 TabLayout
[打印本頁]
作者:
woff
時間:
2016-5-7 12:50
標題:
Android 快速使用 TabLayout
如果要使用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);
}
}
}
複製代碼
短短幾行就可以看到很棒的效果
01.png
(40.6 KB, 下載次數: 6)
下載附件
保存到相冊
2016-5-7 12:50 上傳
02.png
(41.88 KB, 下載次數: 5)
下載附件
保存到相冊
2016-5-7 12:50 上傳
參考 修正
http://givemepass-blog.logdown.c ... ow-to-use-tablayout
歡迎光臨 TShopping (http://www.tshopping.com.tw/)
Powered by Discuz! X3.2