以前寫過底欄的TabHost,但不知道放在哪裡了,上次需要寫一個功能時,又重新找,重新寫,現在記錄在這兒,方便以後開發~~
TabHost的定義好像比較嚴格,具體什麼原因不知道,只知道書上這麼說的。
xml如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TabHost android:id="@+id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent" > <RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_marginBottom="50dip" /> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@drawable/main_tab_background" android:fadingEdge="none" android:fadingEdgeLength="0.0px" /> </RelativeLayout> </TabHost></RelativeLayout>
java代碼如下:
public class MainActivity extends Activity { private TabHost tabHost; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tabHost = (TabHost) findViewById(R.id.tabhost);LocalActivityManager mlam = new LocalActivityManager(this, false);mlam.dispatchCreate(savedInstanceState);tabHost.setup(mlam);View view1 = View.inflate(MainActivity.this,R.layout.tab_imageview_icon, null);((ImageView) view1.findViewById(R.id.mTabView)).setImageResource(R.drawable.tab_home_page_normal);TabHost.TabSpec spec1 = tabHost.newTabSpec("1").setIndicator(view1).setContent(new Intent(this, PageOne.class));tabHost.addTab(spec1);View view2 = View.inflate(MainActivity.this,R.layout.tab_imageview_icon, null);((ImageView) view2.findViewById(R.id.mTabView)).setImageResource(R.drawable.tab_live_normal);TabHost.TabSpec spec2 = tabHost.newTabSpec("2").setIndicator(view2).setContent(new Intent(this, PageTwo.class));tabHost.addTab(spec2);View view3 = View.inflate(MainActivity.this,R.layout.tab_imageview_icon, null);((ImageView) view3.findViewById(R.id.mTabView)).setImageResource(R.drawable.tab_column_normal);TabHost.TabSpec spec3 = tabHost.newTabSpec("3").setIndicator(view3).setContent(new Intent(this, PageOne.class));tabHost.addTab(spec3);View view4 = View.inflate(MainActivity.this,R.layout.tab_imageview_icon, null);((ImageView) view4.findViewById(R.id.mTabView)).setImageResource(R.drawable.tab_subject_normal);TabHost.TabSpec spec4 = tabHost.newTabSpec("4").setIndicator(view4).setContent(new Intent(this, PageTwo.class));tabHost.addTab(spec4);View view5 = View.inflate(MainActivity.this,R.layout.tab_imageview_icon, null);((ImageView) view5.findViewById(R.id.mTabView)).setImageResource(R.drawable.tab_home_page_normal);TabHost.TabSpec spec5 = tabHost.newTabSpec("5").setIndicator(view5).setContent(new Intent(this, PageOne.class));tabHost.addTab(spec5);tabHost.setCurrentTab(1); }
圖片就不貼出來了,這樣可以實現以下效果:
但現在還有一個問題,就是當選擇某一個tab後(比如直播),在直播後應該有個大的背景,而且直播的表徵圖需要換掉,我記得以前的實現方式比較簡單,但那天實在想不起來了,今天也沒想起來,就使用了一種比較笨的辦法,在layout(tab_imageview_icon)中先設定一個RelativeLayout,然後設定背景為選中時的圖片,預設設定為不可見,當選擇當前的tab後設定其可見,直播圖片改變的辦法是選擇直播後同時更改直播對應的圖片。
tab_imageview_icon的內容如下,mTabLayout就是單個tab的背景,mTabView是顯示每個tab的內容的:
<?xml version="1.0" encoding="UTF-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/tab_background" android:layout_width="fill_parent" android:layout_height="wrap_content" > <RelativeLayout android:id="@+id/mTabLayout" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/main_tab_selected" android:visibility="invisible"> </RelativeLayout> <ImageView android:id="@+id/mTabView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="fitCenter" android:layout_centerInParent="true"/></RelativeLayout>
在Activity中實現OnTabChangeListener介面,控制碼如下,基本思想是設定背景可見,更改tabView的背景圖片,同時設定剛才可見的tab背景不可見,tabView背景圖片恢複預設的效果:
@Overridepublic void onTabChanged(String tabId) {// TODO Auto-generated method stubView tabLayout;ImageView tabView;for (int i = 0; i < mTabWidget.getChildCount(); i++) {tabLayout = mTabWidget.getChildAt(i).findViewById(R.id.mTabLayout);tabView = (ImageView) mTabWidget.getChildAt(i).findViewById(R.id.mTabView);if (tabHost.getCurrentTab() == i) {tabLayout.setVisibility(View.VISIBLE);tabView.setImageResource(mTabIconSelectedId[i]);} else {tabLayout.setVisibility(View.INVISIBLE);tabView.setImageResource(mTabIconNormalId[i]);}}}
效果如下: