Android：Tab切換方法整理
阿新 • • 發佈：2019-01-04
一、TabHost實現Tab切換
TabHost是整個Tab的容器，包含TabWidget和FrameLayout兩個部分，TabWidget是每個Tab的表情，FrameLayout是Tab內容。
實現方式有兩種：
1、繼承TabActivity
2、繼承Activity類
方法一：繼承TabActivity
從TabActivity中用getTabHost()方法獲取TabHost，然後設定標籤內容
佈局：
1、TabHost 必須設定android:id為@android:id/tabhost
2、TabWidget 必須設定android:id為@android:id/tabs
3、FrameLayout 必須設定android:id為@android:id/tabcontent
否則將出現類似報錯:
繼承TabActivity
public class MainActivity extends TabActivity { private TabHost tabhost; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.demo); //從TabActivity上面獲取放置Tab的TabHosttabhost = getTabHost(); tabhost.addTab(tabhost //建立新標籤one .newTabSpec("one") //設定標籤標題 .setIndicator("紅色") //設定該標籤的佈局內容 .setContent(R.id.widget_layout_red)); tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黃色").setContent(R.id.widget_layout_yellow)); } }
其中建立標籤的方法：
tabhost.addTab(tabhost
.newTabSpec("one")
.setIndicator("紅色")
.setContent(R.id.widget_layout_red));
也可以拆分寫成：
TabHost.TabSpec tab1 = tabhost.newTabSpec("one");
tab1.setIndicator("紅色");
tab1.setContent(R.id.widget_layout_red);
tabhost.addTab(tab1);
預覽：
點選"黃色"標籤
點選"紅色"標籤
方法二：繼承Activity類
佈局：
1、TabHost 可自定義id
2、TabWidget 必須設定android:id為@android:id/tabs
3、FrameLayout 必須設定android:id為@android:id/tabcontent
public class MainActivity extends Activity{ private TabHost tabhost; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.demo); //得到TabHost物件例項 tabhost =(TabHost) findViewById(R.id.mytab); //呼叫 TabHost.setup() tabhost.setup(); //建立Tab標籤 tabhost.addTab(tabhost.newTabSpec("one").setIndicator("紅色").setContent(R.id.widget_layout_red)); tabhost.addTab(tabhost.newTabSpec("two").setIndicator("黃色").setContent(R.id.widget_layout_yellow)); } }
注意的是：
在使用TabHost切換activity時出現Did you forget to call 'public void setup..
改用第一種方法吧
微信Tab預覽效果：
思路：
1、用TabHost+RadioGroup搭建基本佈局，以RadioGroup代替TabWidget
2、設定按鈕和文字的的樣式和selector
3、建立相應的Activity
4、實現按鈕和內容切換
佈局：
<?xml version="1.0" encoding="utf-8"?> <TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@android:id/tabhost" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" ></FrameLayout> <!-- 隱藏TabWidget --> <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="match_parent" android:layout_height="wrap_content" > </TabWidget> <!-- 視覺上,用單選按鈕替代TabWidget --> <RadioGroup android:id="@+id/main_radiogroup" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/mmfooter_bg" android:paddingTop="8dp" android:orientation="horizontal" > <RadioButton android:id="@+id/tab_icon_weixin" android:checked="true" android:textColor="@color/tab_text" android:drawableTop="@drawable/tab_weixin" android:text="@string/radio1_text" style="@style/tab_button_bg" /> <RadioButton android:id="@+id/tab_icon_address" android:textColor="@color/tab_text" android:drawableTop="@drawable/tab_address" android:text="@string/radio2_text" style="@style/tab_button_bg" /> <RadioButton android:id="@+id/tab_icon_friend" android:textColor="@color/tab_text" android:drawableTop="@drawable/tab_frd" android:text="@string/radio3_text" style="@style/tab_button_bg" /> <RadioButton android:id="@+id/tab_icon_setting" android:textColor="@color/tab_text" android:drawableTop="@drawable/tab_set" android:text="@string/radio4_text" style="@style/tab_button_bg" /> </RadioGroup> </LinearLayout> </TabHost>
按鈕樣式：
<!-- 按鈕文字樣式 --> <style name="tab_text_color"> <item name="android:textColor">@color/tab_text</item> <item name="android:textSize">12dp</item> <!-- 從左向右跑馬燈效果 --> <item name="android:ellipsize">marquee</item> <!-- 單行顯示 --> <item name="android:singleLine">true</item> </style> <!-- 按鈕樣式 --> <style name="tab_button_bg"> <item name="android:textAppearance">@style/tab_text_color</item> <item name="android:gravity">center</item> <item name="android:background">@drawable/tab_bg</item> <item name="android:layout_width">0dp</item> <item name="android:layout_height">wrap_content</item> <item name="android:button">@null</item> <item name="android:layout_weight">1</item> </style>
按鈕圖片selector
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_address_pressed"></item> <item android:drawable="@drawable/tab_address_normal"></item> </selector>
按鈕文字selector
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/white"></item> <item android:color="@color/grey"></item> </selector>
程式：
public class MainActivity extends TabActivity{ private TabHost tabhost; private RadioGroup main_radiogroup; private RadioButton tab_icon_weixin, tab_icon_address, tab_icon_friend,tab_icon_setting; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.demo); //獲取按鈕 main_radiogroup = (RadioGroup) findViewById(R.id.main_radiogroup); tab_icon_weixin = (RadioButton) findViewById(R.id.tab_icon_weixin); tab_icon_address = (RadioButton) findViewById(R.id.tab_icon_address); tab_icon_friend = (RadioButton) findViewById(R.id.tab_icon_friend); tab_icon_setting = (RadioButton) findViewById(R.id.tab_icon_setting); //往TabWidget新增Tab tabhost = getTabHost(); tabhost.addTab(tabhost.newTabSpec("tag1").setIndicator("0").setContent(new Intent(this,Activity1.class))); tabhost.addTab(tabhost.newTabSpec("tag2").setIndicator("1").setContent(new Intent(this,Activity2.class))); tabhost.addTab(tabhost.newTabSpec("tag3").setIndicator("2").setContent(new Intent(this,Activity3.class))); tabhost.addTab(tabhost.newTabSpec("tag4").setIndicator("3").setContent(new Intent(this,Activity4.class))); //設定監聽事件 checkListener checkradio = new checkListener(); main_radiogroup.setOnCheckedChangeListener(checkradio); } //監聽類 public class checkListener implements OnCheckedChangeListener{ @Override public void onCheckedChanged(RadioGroup group, int checkedId) { // TODO Auto-generated method stub //setCurrentTab 通過標籤索引設定當前顯示的內容 //setCurrentTabByTag 通過標籤名設定當前顯示的內容 switch(checkedId){ case R.id.tab_icon_weixin: tabhost.setCurrentTab(0); //或 //tabhost.setCurrentTabByTag("tag1"); break; case R.id.tab_icon_address: tabhost.setCurrentTab(1); break; case R.id.tab_icon_friend: tabhost.setCurrentTab(2); break; case R.id.tab_icon_setting: tabhost.setCurrentTab(3); break; } } } }