TabHost应用

 系统默认的TabHost按钮在上面,其实大部分主流应用的都在下面,有的同学可能不知道怎么做,其实很简单。系统的TabWidget在FramLayout的上面,只要把它移到FramLayout的下面就可以了。系统的TabWidget外面是没有HorizontalScrollView的,当TabWidget比较多的时候可以套了一个HorizontalScrollView,这样可以滑动,HorizontalScrollView增加一个属性android:scrollbars=“none”这样就没有滚动条了。到这里可能有些同学又遇到布局的比例问题了,只要更改FramLayout为android:layoutHight=“match_parent”还有android:layout_weight=“1”应该就可以了

  
  
  
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="fill_parent" 
  4.     android:layout_height="fill_parent" 
  5.     android:orientation="vertical" > 
  6.  
  7.     <TabHost 
  8.         android:id="@android:id/tabhost" 
  9.         android:layout_width="match_parent" 
  10.         android:layout_height="match_parent" > 
  11.  
  12.         <LinearLayout 
  13.             android:id="@+id/linearLayout1" 
  14.             android:layout_width="match_parent" 
  15.             android:layout_height="match_parent" 
  16.             android:orientation="vertical" > 
  17.  
  18.             <FrameLayout 
  19.                 android:id="@android:id/tabcontent" 
  20.                 android:layout_width="match_parent" 
  21.                 android:layout_height="match_parent" 
  22.                 android:layout_weight="1" > 
  23.             </FrameLayout> 
  24.             <HorizontalScrollView 
  25.                 android:id="@+id/horizontalScrollView1" 
  26.                 android:layout_width="wrap_content" 
  27.                 android:layout_height="wrap_content" 
  28.                 android:scrollbars="none" > 
  29.  
  30.                 <TabWidget 
  31.                     android:id="@android:id/tabs" 
  32.                     android:layout_width="match_parent" 
  33.                     android:layout_height="wrap_content" > 
  34.                 </TabWidget> 
  35.             </HorizontalScrollView> 
  36.         </LinearLayout> 
  37.     </TabHost> 
  38. </LinearLayout> 


下面说一下代码怎么写,首先要继承TabActivity,然后getTabHost()的到TabHost。

 

   
   
   
   
  1. import android.app.TabActivity; 
  2. import android.content.Intent; 
  3. import android.os.Bundle; 
  4. import android.view.LayoutInflater; 
  5. import android.view.View; 
  6. import android.widget.ImageView; 
  7. import android.widget.TabHost; 
  8.  
  9. public class Ex140_tabHostActivity extends TabActivity { 
  10.     /** Called when the activity is first created. */ 
  11.     TabHost mTabHost; 
  12.     @Override 
  13.     public void onCreate(Bundle savedInstanceState) { 
  14.         super.onCreate(savedInstanceState); 
  15.         setContentView(R.layout.main); 
  16.         mTabHost = getTabHost(); 
  17.         Intent intent1=new Intent(this,FirstActivity.class); 
  18.         View view = LayoutInflater.from(this).inflate(R.layout.tabitem, null); 
  19.         ImageView img = (ImageView) view.findViewById(R.id.imageView1); 
  20.         img.setImageResource(R.drawable.friend_qzone); 
  21.         mTabHost.addTab(mTabHost.newTabSpec("tab1").setContent(intent1).setIndicator(view)); 
  22. //方法和上面代码效果一样
  23.         addTab("tab2",R.drawable.friend_kaixin,SecondActivity.class); 
  24.         addTab("tab3",R.drawable.friend_renren,ThirdActivity.class); 
  25.         addTab("tab4",R.drawable.friend_sina,FirstActivity.class); 
  26.         addTab("tab5",R.drawable.friend_tencent,SecondActivity.class); 
  27.     } 
  28.  
  29.     private void addTab(String string, int imgId,Class clazz) { 
  30.         View view = LayoutInflater.from(this).inflate(R.layout.tabitem, null); 
  31.         ImageView img = (ImageView) view.findViewById(R.id.imageView1); 
  32.         img.setImageResource(imgId); 
  33.         mTabHost.addTab(mTabHost.newTabSpec("tab2").setContent(new Intent(this,clazz)).setIndicator(view)); 
  34.     } 

上面view的布局是一个图片,我在外面又套了一个RelativeLayout这样大家可以实现更复杂的样式,其实一般也用不到,一张图片足以在复杂的只要把它们做成图片就OK了。这里用了android:padding是因为图片背景设置了selecter,这样更容易看到选中时的状态。

 

    
    
    
    
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="match_parent" > 
  5.  
  6.     <ImageView 
  7.         android:id="@+id/imageView1" 
  8.         android:layout_width="80dip" 
  9.         android:layout_height="80dip" 
  10.         android:padding="5dip" 
  11.         android:layout_alignParentLeft="true" 
  12.         android:background="@drawable/imgbg" 
  13.         android:layout_alignParentTop="true" 
  14.         android:src="@drawable/ic_launcher" /> 
  15.  
  16. </RelativeLayout> 

TabWidget的选中状态是android:state_selected,selecter代码如下:

 

     
     
     
     
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android"> 
  3.  
  4.     <item android:state_selected="true"><color android:color="#ff3333cc"/></item> 
  5.     <item ><color android:color="#ffffaacc"/></item> 
  6.  
  7. </selector> 

如有意见或建议请留言,欢迎批评指正。源码见附件。

 

你可能感兴趣的:(android,职场,layout,多,休闲)