自定义android的tab样式 《》

系统 2186 0

android项目中碰到需要替换tabHost默认样式的情况,需要达到下图的效果:
自定义android的tab样式 《》

为了做成这样的效果,花了些时间,这里做个笔记,给有需要的朋友。

步骤一:新建一 个xml布局文件,命名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" android:background ="@color/white" >
   < LinearLayout android:orientation ="vertical"
     android:layout_width ="fill_parent" android:layout_height ="fill_parent" >
     < TabWidget android:id ="@android:id/tabs"
       android:layout_width ="fill_parent" android:layout_height ="wrap_content"
       android:gravity ="center_horizontal|center_vertical" />
     < FrameLayout android:id ="@android:id/tabcontent"
       android:layout_width ="fill_parent" android:layout_height ="fill_parent" >
     </ FrameLayout >
   </ LinearLayout >
</ TabHost >


步 骤二:在Activity中添加我们的tab

代码如下

@Override
public void onCreate(Bundle savedInstanceState) {
   super .onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mTabHost = getTabHost();
       
  Intent intent1 = new Intent(this,OfficialActivity.class);
  createTab("公共聊天室",intent1);
       
  Intent intent2 = new Intent(this, NearByActivity.class);
  createTab("周边",intent2);
       
  Intent intent3= new Intent(this, HistoryActivity.class);
  createTab("历史",intent3);
       
  mTabHost.setCurrentTab(1);
}

 private void createTab(String text ,Intent intent){          mTabHost.addTab(mTabHost.newTabSpec(text).setIndicator(createTabView(text)).setContent(intent));
    }

    private View createTabView(String text) {
            View view = LayoutInflater.from(this).inflate(R.layout.tab_indicator, null);
            TextView tv = (TextView) view.findViewById(R.id.tv_tab);
            tv.setText(text);
            return view;
    }


步骤三:在createTabView方法中,我 们载入了布局文件tab_indicator.xml,改布局很简单,就是放置一个带背景的布局,在布局中放一个textView用于显示tab标题,以 下为该布局文件内容

<? xml version ="1.0" encoding ="utf-8" ?>
< LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android"
   android:layout_height ="fill_parent" android:layout_width ="fill_parent"
   android:orientation ="vertical" android:gravity ="center"
   android:theme ="@android:style/Theme.NoTitleBar" android:background ="@drawable/chat_tab_selector" >
   < TextView android:id ="@+id/tv_tab" android:layout_width ="wrap_content" android:layout_height ="wrap_content"
   android:text ="tab1" android:textColor ="@color/white" />
</ LinearLayout >


步骤四:在上面的布局文件中我们把该布局的背景定义为 chat_tab_selector,这里同样需要在drawable文件夹下新建chat_tab_selector.xml,内容很简单,就是做一个 按下时的背景切换,内容如下:

<? xml version ="1.0" encoding ="utf-8" ?>
         < selector xmlns:android = "http://schemas.android.com/apk/res/android" >     
         < item     
        android:state_focused = "true"    
        android:drawable = "@drawable/topbar_bg_down"    
         />
         < item     
        android:state_selected = "true"    
        android:drawable = "@drawable/topbar_bg_down"    
         />
         < item     
        android:state_pressed = "true"    
        android:drawable = "@drawable/topbar_bg_down"    
         />     
         < item android:drawable = "@drawable/topbar_background" />     
         </ selector >     


里面做了两张图进行状态切换,这两张图同样放 drawable下就可以了

至此,自定义tab的步骤就完成了。如果要做成更复杂的样式,大家可以在此基础上进行扩展。

自定义android的tab样式 《》


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论