在本教程中,我們將演示如何使用TabLayout渲染4個選項卡-「 Android」,「 Windows」,「 Apple」和「 BlackBerry」,每個選項卡都包含一個文本視圖以顯示一條簡單消息。
PS此項目在Eclipse 3.7中開發,並通過Android 2.3.3進行了測試。
1.標籤圖片將4個標籤圖像放在「 res / drawable 」文件夾中。 本教程中使用的標籤圖像未遵循Android圖標指南 ,抱歉,我只是不擅長設計:)。
2.用XML標籤圖像創建4個XM文件以告訴每個選項卡要使用哪個圖像,並將其放入相同的「 res / drawable 」文件夾中。
文件:icon_android_config.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected, you should use bg with grey --> <item android:drawable="@drawable/ic_tab_android" android:state_selected="true" /> <!-- When not selected, you should use bg with white --> <item android:drawable="@drawable/ic_tab_android" /></selector>文件:icon_apple_config.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected --> <item android:drawable="@drawable/ic_tab_apple" android:state_selected="true" /> <!-- When not selected --> <item android:drawable="@drawable/ic_tab_apple" /></selector>文件:icon_blackberry_config.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected --> <item android:drawable="@drawable/ic_tab_blackberry" android:state_selected="true" /> <!-- When not selected --> <item android:drawable="@drawable/ic_tab_blackberry" /></selector>文件:icon_windows_config.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- When selected --> <item android:drawable="@drawable/ic_tab_windows" android:state_selected="true" /> <!-- When not selected --> <item android:drawable="@drawable/ic_tab_windows" /></selector> 3.標籤活動創建4個活動類,並告訴您單擊選項卡時要使用的活動。 所有4個類都在做相同的事情,顯示一個textview組件。
檔案:AndroidActivity.java
package com.mkyong.android;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class AndroidActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is Android tab"); setContentView(textview); }}文件:AppleActivity.java
package com.mkyong.android;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class AppleActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is Apple tab"); setContentView(textview); }}文件:BlackBerryActivity.java
package com.mkyong.android;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class BlackBerryActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is BlackBerry tab"); setContentView(textview); }}文件:WindowsActivity.java
package com.mkyong.android;import android.app.Activity;import android.os.Bundle;import android.widget.TextView;public class WindowsActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); TextView textview = new TextView(this); textview.setText("This is Windows mobile tab"); setContentView(textview); }} 4.主要活動創建入口點,上述4片活性的類與連結TabHost , TabSpec等
package com.mkyong.android;import android.app.TabActivity;import android.content.Intent;import android.content.res.Resources;import android.os.Bundle;import android.widget.TabHost;import android.widget.TabHost.TabSpec;public class MainActivity extends TabActivity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Resources ressources = getResources(); TabHost tabHost = getTabHost(); // Android tab Intent intentAndroid = new Intent().setClass(this, AndroidActivity.class); TabSpec tabSpecAndroid = tabHost .newTabSpec("Android") .setIndicator("", ressources.getDrawable(R.drawable.icon_android_config)) .setContent(intentAndroid); // Apple tab Intent intentApple = new Intent().setClass(this, AppleActivity.class); TabSpec tabSpecApple = tabHost .newTabSpec("Apple") .setIndicator("", ressources.getDrawable(R.drawable.icon_apple_config)) .setContent(intentApple); // Windows tab Intent intentWindows = new Intent().setClass(this, WindowsActivity.class); TabSpec tabSpecWindows = tabHost .newTabSpec("Windows") .setIndicator("", ressources.getDrawable(R.drawable.icon_windows_config)) .setContent(intentWindows); // Blackberry tab Intent intentBerry = new Intent().setClass(this, BlackBerryActivity.class); TabSpec tabSpecBerry = tabHost .newTabSpec("Berry") .setIndicator("", ressources.getDrawable(R.drawable.icon_blackberry_config)) .setContent(intentBerry); // add all tabs tabHost.addTab(tabSpecAndroid); tabHost.addTab(tabSpecApple); tabHost.addTab(tabSpecWindows); tabHost.addTab(tabSpecBerry); //set Windows tab as default (zero based) tabHost.setCurrentTab(2); }} 5. Android布局文件文件:res / layout / 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> 6. Android清單最後,將所有內容放入「 AndroidManifest.xml 」中,定義了4個選項卡活動類,並將「 MainActivity 」設置為入口點。
檔案:AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.mkyong.android" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="10" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" > <activity android:name=".AndroidActivity" /> <activity android:name=".WindowsActivity" /> <activity android:name=".AppleActivity" /> <activity android:name=".BlackBerryActivity" /> <activity android:label="@string/app_name" android:name=".MainActivity" 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> </application></manifest> 7.演示默認情況下,Windows選項卡處於選中狀態。
點擊Android標籤。
下載原始碼下載它– Android-TabLayout-Example.zip (23 KB)
參考文獻 Android TabLayout示例 標籤頁布局教程不完整 Android圖標設計指南 另一個Android標籤布局示例 Android TabHost Javadoc Android TabWidget Javadoc Android FrameLayout Javadoc翻譯自: https://mkyong.com/android/android-tablayout-example/