Android布局之TabLayout
為了使用Tab，必須使用TabHost和TabWidget，TabHost必須是布局文件中的根節點，它包含了tabWidget顯示tabs，以及FrameLayout來顯示tab的內容。
你可以用以下兩種方式實現你的tab內容：
A．在同一個Acitivity里交換不同的View。
B．每一個Tab使用一個不同的Activity。
在這里先介紹第2種的實現方式，具體步驟如下：
1.創建一個項目HelloTabWidget
2.創建三個不同的Activity用來代表不同的Tab，在此創建了ArtistsActivity, AlbumsActivity, 和SongsActivity.具體代碼如下：
ArtistsActivity.javaimport android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class ArtistsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView tv = new TextView(this);
tv.setText("This is the Artists tab");
setContentView(tv);
}
}
AlbumsActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class AlbumsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView tv = new TextView(this);
tv.setText("This is the Albums tab");
setContentView(tv);
}
}
SongsActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.widget.TextView;
public class SongsActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
TextView tv = new TextView(this);
tv.setText("This is the Songs tab");
setContentView(tv);
}
}
在這里只是為了演示，三個Acitivity都沒有設置布局文件，只是設置了一個Textview，在實際運用時可以換成需要的布局文件
3. 在AndriodManifest.xml文件中注冊三個Activity。
4.每個tab都需要一組圖片，即包含兩個狀態的圖片，一個是這個tab被選中時的圖片，另一個是沒有被選中時的圖片。建議選中時使用灰色圖片，沒有選中時使用白色圖片。（具體效果如下圖）
在此因為我們要創建三個tab，因此還需要為其他兩個tab準備兩組圖片，為了方便，下面我為每個tab設置的都是這組圖片，自己操作時可以準備好三組圖片。
4.1將圖片保存在res/drawable/ 下面
4.2在res/drawable/ 下面創建一個名為ic_tab_artists.xml用于定義不同的tab狀態時顯示不同的圖片。
ic_tab_artists.xml<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="@drawable/ic_tab_artists_grey"
android:state_selected="true" />
<!-- When not selected, use white-->
<item android:drawable="@drawable/ic_tab_artists_white"
android:state_selected="false" />
</selector>
ic_tab_artists_grey和 ic_tab_artsits_white為圖片名稱
5.修改main.xml如下
main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
這個文件的設置是按照開篇的第一句話：為了使用Tab，必須使用TabHost和TabWidget，TabHost必須是布局文件中的根節點，它包含了tabWidget顯示tabs，以及FrameLayout來顯示tab的內容。（個人感覺這個就是一個格式，反正按這樣做就行了）
6.修改HelloTabWidget.java的代碼，讓他繼承TabActivity
HelloTabWidget.java
package lin.sdk.tablayout;
import android.app.TabActivity;
import android.content.Intent;
import android.content.res.Resources;
import android.os.Bundle;
import android.widget.TabHost;
public class HelloTabWidget extends TabActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources(); // Resource object to get Drawables
TabHost tabHost = getTabHost(); // The activity TabHost
TabHost.TabSpec spec; // Resusable TabSpec for each tab
Intent intent; // Reusable Intent for each tab
// Create an Intent to launch an Activity for the tab (to be reused)
intent = new Intent().setClass(this, ArtistsActivity.class);
// Initialize a TabSpec for each tab and add it to the TabHost
spec = tabHost
.newTabSpec("artists")
.setIndicator("Artists",
res.getDrawable(R.drawable.ic_tab_artists))
.setContent(intent);
tabHost.addTab(spec);
// Do the same for the other tabs
intent = new Intent().setClass(this, AlbumsActivity.class);
spec = tabHost
.newTabSpec("albums")
.setIndicator("Albums",
res.getDrawable(R.drawable.ic_tab_artists))
.setContent(intent);
tabHost.addTab(spec);
intent = new Intent().setClass(this, SongsActivity.class);
spec = tabHost
.newTabSpec("songs")
.setIndicator("Songs",
res.getDrawable(R.drawable.ic_tab_artists))
.setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(1);
}
}
上面可以把后面兩個R.drawable.ic_tab_artsts換成為后面兩個tab設置圖片而創建的類似ic_tab_artists.xml文件
7.修改AndriodManifest.xml文件，去掉Titlebar
<activity android:name=".HelloTabWidget" android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
整個AndroidManifest.xml如下：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="lin.sdk.tablayout"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".HelloTabWidget"
android:label="@string/app_name"
android:theme="@android:style/Theme.NoTitleBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name=".AlbumsActivity"/>
<activity android:name=".SongsActivity"/>
<activity android:name=".ArtistsActivity"/>
</application>
</manifest>
如果直接復制上面的代碼，需要修改package="lin.sdk.tablayout"為自己項目的包名
程序運行效果如下：
