Android TAb分页菜单实现总结


首先说明的是，我们做APP开发，Tab分页不管是顶部还是底部，都是必不可少的，网上也有太多太多的实现方式了，我在这里总结一下：

第一种方式： TabHost原始方式：（链接另一篇文章  ）

这里实现的是底部菜单:

布局文件：（我们通过RelativeLayout 可以把TabWidget定位在底部）

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:Android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@android:id/tabhost"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent" >  
  6.   
  7.     <RelativeLayout  
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:orientation="vertical"  
  11.         android:padding="3dp" >  
  12.   
  13.         <FrameLayout  
  14.             android:id="@android:id/tabcontent"  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="fill_parent"  
  17.             android:layout_weight="1" >  
  18.         </FrameLayout>  
  19.   
  20.         <TabWidget  
  21.             android:id="@android:id/tabs"  
  22.             android:layout_width="fill_parent"  
  23.             android:layout_height="wrap_content"  
  24.             android:layout_alignBottom="@android:id/tabcontent"  
  25.             android:background="@drawable/tabbar_bg" />  
  26.     </RelativeLayout>  
  27.   
  28. </TabHost>  

在这里我们将说明一下:之前我是获取到TabWidget的view试图及内部icon和title，然后控制实现其效果，但是我们也可以用另外一种方式，也就是我们调用TabHost.TabSpec 的setIndicator（View view）;这个方法，我们可以定制显示的view，

代码片段：

  1. /*** 
  2.      * 创建footerview 
  3.      */  
  4.     public void createFooterView() {  
  5.         tabHost = getTabHost(); // The activity TabHost   
  6.   
  7.         view = new TabView(this, R.drawable.tabbar_icon_home,  
  8.                 R.drawable.tabbar_icon_home_selecotr);  
  9.         view.setBackgroundDrawable(this.getResources().getDrawable(  
  10.                 R.drawable.footer_view_selector));  
  11.         intent = new Intent(MainActivity.this, HomeActivity.class);  
  12.         spec = tabHost.newTabSpec("num1").setIndicator(view).setContent(intent);  
  13.         tabHost.addTab(spec);  
  14.   
  15.         view = new TabView(this, R.drawable.tabbar_icon_search,  
  16.                 R.drawable.tabbar_icon_search_selecotr);  
  17.         view.setBackgroundDrawable(this.getResources().getDrawable(  
  18.                 R.drawable.footer_view_selector));  
  19.         intent = new Intent(MainActivity.this, HomeActivity.class);  
  20.         spec = tabHost.newTabSpec("num2").setIndicator(view).setContent(intent);  
  21.         tabHost.addTab(spec);  
  22.   
  23.         view = new TabView(this, R.drawable.tabbar_icon_cart,  
  24.                 R.drawable.tabbar_icon_cart_selector);  
  25.         view.setBackgroundDrawable(this.getResources().getDrawable(  
  26.                 R.drawable.footer_view_selector));  
  27.         intent = new Intent(MainActivity.this, HomeActivity.class);  
  28.         spec = tabHost.newTabSpec("num3").setIndicator(view).setContent(intent);  
  29.         tabHost.addTab(spec);  
  30.   
  31.         view = new TabView(this, R.drawable.tabbar_icon_more,  
  32.                 R.drawable.tabbar_icon_more_selecotr);  
  33.         view.setBackgroundDrawable(this.getResources().getDrawable(  
  34.                 R.drawable.footer_view_selector));  
  35.         intent = new Intent(MainActivity.this, HomeActivity.class);  
  36.         spec = tabHost.newTabSpec("num4").setIndicator(view).setContent(intent);  
  37.         tabHost.addTab(spec);  
  38.     }  
  1. /*** 
  2.      * 自定义view 
  3.      *  
  4.      */  
  5.     class TabView extends LinearLayout {  
  6.         ImageView imageView;  
  7.   
  8.         public TabView(Context c, int drawable, int drawableselec) {  
  9.             super(c);  
  10.             imageView = new ImageView(c);  
  11.             // 可以定制点击后状态   
  12.             StateListDrawable listDrawable = new StateListDrawable();  
  13.             // 未选   
  14.             listDrawable.addState(SELECTED_STATE_SET, this.getResources()  
  15.                     .getDrawable(drawableselec));  
  16.             // 选择   
  17.             listDrawable.addState(ENABLED_STATE_SET, this.getResources()  
  18.                     .getDrawable(drawable));  
  19.             imageView.setImageDrawable(listDrawable);// 引用 StateListDrawable   
  20.             setGravity(Gravity.CENTER);  
  21.             addView(imageView);  
  22.         }  
  23.     }  

这样我们就实现想要的效果了.（建议使用这种方法，我的项目就是用的这个实现的.）
如果我是图标和文字分开的，我们也可以用（RadioButton代替，也许大家都不陌生，一会我简单介绍下）

          

这个源码是因为项目里面用的。

  • 1
  • 2
  • 3
  • 下一页

相关内容