博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
新浪微博布局学习——妙用TabHost
阅读量：3604 次
发布时间：2019-05-21

本文共 11980 字，大约阅读时间需要 39 分钟。

 
分类： 
2012-04-12 14:55 
731人阅读 
(0) 
 

前言

　　为了更好的开发Android应用程序，除了熟练掌握基本的UI组件和API外，还需要掌握一些技巧，而这些技巧可以通过阅读一些代码来提高，本系列将与大家分享一些新浪微博布局方面的收获，欢迎交流！

转载，

　　　　博客园：http://www.cnblogs.com

　　　　农民伯伯： 

版本

　　新浪微博 weibo_10235010.apk

 

正文

　　一、效果图

　　　　

　　　　红色部分是本文要实现的目标。

 

　　二、实现

　　　　maintabs.xml

[html] 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <TabHost android:id="@android:id/tabhost" android:layout_width="fill_parent" android:layout_height="fill_parent"  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">  
  5.         <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="0.0dip" android:layout_weight="1.0" />  
  6.         <TabWidget android:id="@android:id/tabs" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="0.0" />  
  7.         <RadioGroup android:gravity="center_vertical" android:layout_gravity="bottom" android:orientation="horizontal" android:id="@id/main_radio" android:background="@drawable/maintab_toolbar_bg" android:layout_width="fill_parent" android:layout_height="wrap_content">  
  8.             <RadioButton   android:text="@string/main_home" android:checked="true" android:id="@+id/radio_button0" android:layout_marginTop="2.0dip" android:drawableTop="@drawable/icon_1_n" style="@style/main_tab_bottom" />  
  9.             <RadioButton android:id="@+id/radio_button1" android:layout_marginTop="2.0dip" android:text="@string/main_news" android:drawableTop="@drawable/icon_2_n" style="@style/main_tab_bottom" />  
  10.             <RadioButton android:id="@+id/radio_button2" android:layout_marginTop="2.0dip" android:text="@string/main_my_info" android:drawableTop="@drawable/icon_3_n" style="@style/main_tab_bottom" />  
  11.             <RadioButton android:id="@+id/radio_button3" android:layout_marginTop="2.0dip" android:text="@string/menu_search" android:drawableTop="@drawable/icon_4_n" style="@style/main_tab_bottom" />  
  12.             <RadioButton android:id="@+id/radio_button4" android:layout_marginTop="2.0dip" android:text="@string/more" android:drawableTop="@drawable/icon_5_n" style="@style/main_tab_bottom" />  
  13.         </RadioGroup>  
  14.     </LinearLayout>  
  15. </TabHost>  

styles.xml

[html] 
  1. <style name="main_tab_bottom">  
  2.        <item name="android:textSize">@dimen/bottom_tab_font_size</item>  
  3.        <item name="android:textColor">#ffffffff</item>  
  4.        <item name="android:ellipsize">marquee</item>  
  5.        <item name="android:gravity">center_horizontal</item>  
  6.        <item name="android:background">@drawable/home_btn_bg</item>  
  7.        <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>  
  8.        <item name="android:layout_width">fill_parent</item>  
  9.        <item name="android:layout_height">wrap_content</item>  
  10.        <item name="android:button">@null</item>  
  11.        <item name="android:singleLine">true</item>  
  12.        <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>  
  13.        <item name="android:layout_weight">1.0</item>  
  14.    </style>  

home_btn_bg.xml

[html] 
  1. <selector  
  2.           xmlns:android="http://schemas.android.com/apk/res/android">  
  3.             <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s" />  
  4.             <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/home_btn_bg_s" />  
  5.             <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/home_btn_bg_d" />  
  6.             <item android:drawable="@drawable/transparent" />  
  7.         </selector>  

代码说明：

　　　　　　　　1.　　需要注意的是他这里把TabWidget的Visibility设置成了gone!也就是默认难看的风格不见了：，取而代之的是5个带风格的单选按钮.

　　　　　　　　2.　　注意为单选按钮设置的style，其中最重要的是为其background设置了home_btn_bg.xml，也就是自定义了选中效果。

　　　　Java文件

[java] 
  1. public class MainTabActivity extends TabActivity implements  
  2.         OnCheckedChangeListener {  
  3.   
  4.     private TabHost mHost;  
  5.     private Intent mMBlogIntent;  
  6.     private Intent mMoreIntent;  
  7.     private Intent mInfoIntent;  
  8.     private Intent mSearchIntent;  
  9.     private Intent mUserInfoIntent;  
  10.   
  11.     @Override  
  12.     protected void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  15.         setContentView(R.layout.maintabs);  
  16.   
  17.         // ~~~~~~~~~~~~ 初始化  
  18.         this.mMBlogIntent = new Intent(this, HomeListActivity.class);  
  19.         this.mSearchIntent = new Intent(this, SearchSquareActivity.class);  
  20.         this.mInfoIntent = new Intent(this, MessageGroup.class);  
  21.         this.mUserInfoIntent = new Intent(this, MyInfoActivity.class);  
  22.         this.mMoreIntent = new Intent(this, MoreItemsActivity.class);  
  23.   
  24.         initRadios();  
  25.           
  26.         setupIntent();  
  27.     }  
  28.   
  29.     /** 
  30.      * 初始化底部按钮 
  31.      */  
  32.     private void initRadios() {  
  33.          ((RadioButton) findViewById(R.id.radio_button0)).setOnCheckedChangeListener(this);  
  34.          ((RadioButton) findViewById(R.id.radio_button1)).setOnCheckedChangeListener(this);  
  35.          ((RadioButton) findViewById(R.id.radio_button2)).setOnCheckedChangeListener(this);  
  36.          ((RadioButton) findViewById(R.id.radio_button3)).setOnCheckedChangeListener(this);  
  37.          ((RadioButton) findViewById(R.id.radio_button4)).setOnCheckedChangeListener(this);  
  38.     }  
  39.   
  40.     /** 
  41.      * 切换模块 
  42.      */  
  43.     @Override  
  44.     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {  
  45.         if (isChecked) {  
  46.             switch (buttonView.getId()) {  
  47.             case R.id.radio_button0:  
  48.                 this.mHost.setCurrentTabByTag("mblog_tab");  
  49.                 break;  
  50.             case R.id.radio_button1:  
  51.                 this.mHost.setCurrentTabByTag("message_tab");  
  52.                 break;  
  53.             case R.id.radio_button2:  
  54.                 this.mHost.setCurrentTabByTag("userinfo_tab");  
  55.                 break;  
  56.             case R.id.radio_button3:  
  57.                 this.mHost.setCurrentTabByTag("search_tab");  
  58.                 break;  
  59.             case R.id.radio_button4:  
  60.                 this.mHost.setCurrentTabByTag("more_tab");  
  61.                 break;  
  62.             }  
  63.         }  
  64.     }  
  65.   
  66.     private void setupIntent() {  
  67.         this.mHost = getTabHost();  
  68.         TabHost localTabHost = this.mHost;  
  69.   
  70.         localTabHost.addTab(buildTabSpec("mblog_tab", R.string.main_home,  
  71.                 R.drawable.icon_1_n, this.mMBlogIntent));  
  72.   
  73.         localTabHost.addTab(buildTabSpec("message_tab", R.string.main_news,  
  74.                 R.drawable.icon_2_n, this.mInfoIntent));  
  75.   
  76.         localTabHost.addTab(buildTabSpec("userinfo_tab", R.string.main_my_info,  
  77.                 R.drawable.icon_3_n, this.mUserInfoIntent));  
  78.   
  79.         localTabHost.addTab(buildTabSpec("search_tab", R.string.menu_search,  
  80.                 R.drawable.icon_4_n, this.mSearchIntent));  
  81.   
  82.         localTabHost.addTab(buildTabSpec("more_tab", R.string.more,  
  83.                 R.drawable.icon_5_n, this.mMoreIntent));  
  84.   
  85.     }  
  86.   
  87.     private TabHost.TabSpec buildTabSpec(String tag, int resLabel, int resIcon,  
  88.             final Intent content) {  
  89.         return this.mHost  
  90.                 .newTabSpec(tag)  
  91.                 .setIndicator(getString(resLabel),  
  92.                         getResources().getDrawable(resIcon))  
  93.                 .setContent(content);  
  94.     }  

代码说明

　　　　　　1.　　由于TabWidget被隐藏，所以相关的事件也会无效，这里取巧用RadioGroup与RadioButton的特性来处理切换，然后监听事件调用setCurrentTabByTag来切换Activity。

　　　　　　2.　　注意即使TabWidget被隐藏，也要为其设置indicator，否则会保持。

 

　　三、总结

　　　　在这之前如果要做这种效果我恐怕第一时间就会想到用ActivityGroup来做，主要是因为TabHost的TabWidget非常难看，用起来也不方便。其实从源码可以看出，TabActivity也是继承自ActivityGroup，这里结合了单选按钮和TabHost，各取其长，有时间可以专门写一个这样的自定义控件:)

 

分类： 
2012-04-12 14:48 
9142人阅读 
(7) 
 
大家好，今天我为大家分享TabHost中怎样修改TabWidget样式。在很多界面美观的应用中很多都用到了TabHost，但他们要比系统默认的要漂亮得多。先看几张图：

                             京东商城底部菜单栏

                            新浪微博底部菜单栏

   好了，看到这些漂亮的菜单栏是不是很惊讶，你可能会说用Button就可以实现啊 ，可是用Button的话控制显示的内容很麻烦，不如用TabHost控制效率更高。很想知道用TabHost是怎么实现的吧，下面就来研究如何实现这种漂亮的TabHost。先看一下效果图：

 

界面比较简单，要想做得漂亮换几张图片就可以了。

  第一步：先在布局（这里用了main.xml创建时自动生成的）里面放上TabHost ，只要将TabHost控件托至屏幕中就可：

[html] 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.     <TabHost android:id="@+id/tabhost"   
  3.       android:layout_width="fill_parent"   
  4.       android:layout_height="fill_parent"   
  5.       xmlns:android="http://schemas.android.com/apk/res/android">  
  6.         <LinearLayout android:layout_width="fill_parent"   
  7.           android:id="@+id/linearLayout1"   
  8.           android:layout_height="fill_parent"   
  9.           android:orientation="vertical">  
  10.             <TabWidget android:layout_width="fill_parent"   
  11.               android:layout_height="wrap_content"   
  12.               android:id="@android:id/tabs"></TabWidget>  
  13.             <FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@android:id/tabcontent">  
  14.                 <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab1"></LinearLayout>  
  15.                 <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab2"></LinearLayout>  
  16.                 <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/tab3"></LinearLayout>  
  17.             </FrameLayout>  
  18.         </LinearLayout>  
  19.     </TabHost>  

这里我们已经把LinearLayout和TextView去掉了，并将“xmlns:android="……" ”添加大TabHost里了，这里要注意我们将TabHost的id定义为自己定义的id比不用android规定的id="@android:id/tabhost"。

第二步：创建显示此TabWidget的布局tabmini.xml：

[html] 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="40dp"  
  5.     android:paddingLeft="5dip"  
  6.     android:paddingRight="5dip"  
  7.     android:background="@drawable/head_bg">    
  8.       
  9.     <TextView android:id="@+id/tab_label"    
  10.         android:layout_width="fill_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_centerInParent="true"  
  13.         android:gravity="center"  
  14.         android:textColor="#000000"  
  15.         android:textStyle="bold"  
  16.         android:background="@drawable/tabmini"/>   
  17. </RelativeLayout>  

第三步：创建一个selector在drawable里面 命名tabmini.xml，用来点击TabHost的一个tab时TextView的变化：

[html] 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector  
  3.   xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:state_selected="true"  
  5.         android:drawable="@drawable/add_managebg_down"/>  
  6.     <item android:state_selected="false"  
  7.         android:drawable="@drawable/add_managebg"/>  
  8. </selector>  

第四步：在Activity里实现TabHost：

[java] 
  1. package cn.li.tabstyle;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.widget.TabHost;  
  8. import android.widget.TextView;  
  9.   
  10. public class TabHostStyleActivity extends Activity {  
  11.     /** Called when the activity is first created. */  
  12.     @Override  
  13.     public void onCreate(Bundle savedInstanceState) {  
  14.         super.onCreate(savedInstanceState);  
  15.         setContentView(R.layout.main);  
  16.           
  17.         View niTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);  
  18.         TextView text0 = (TextView) niTab.findViewById(R.id.tab_label);  
  19.         text0.setText("ni");  
  20.           
  21.         View woTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);  
  22.         TextView text1 = (TextView) woTab.findViewById(R.id.tab_label);  
  23.         text1.setText("wo");  
  24.           
  25.         View taTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);  
  26.         TextView text2 = (TextView) taTab.findViewById(R.id.tab_label);  
  27.         text2.setText("ta");  
  28.           
  29.         View weTab = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);  
  30.         TextView text3 = (TextView) weTab.findViewById(R.id.tab_label);  
  31.         text3.setText("we");  
  32.           
  33.         TabHost tabHost = (TabHost)findViewById(R.id.tabhost);  
  34.         tabHost.setup();   //Call setup() before adding tabs if loading TabHost using findViewById().   
  35.           
  36.         tabHost.addTab(tabHost.newTabSpec("nitab").setIndicator(niTab).setContent(R.id.tab1));  
  37.         tabHost.addTab(tabHost.newTabSpec("wotab").setIndicator(woTab).setContent(R.id.tab2));  
  38.         tabHost.addTab(tabHost.newTabSpec("tatab").setIndicator(taTab).setContent(R.id.tab3));  
  39.         tabHost.addTab(tabHost.newTabSpec("wetab").setIndicator(weTab).setContent(R.id.tab4));  
  40.     }  
  41. }  

这里我们用findViewById创建了TabHost，这样的话我们就需要在添加tab时调用TabHost的setup()方法；这里我们添加内容时添加的是布局，我们完全可以换成自己创建的Activity。

好了，让我们来看看运行效果吧：

好了，我们自定义的TabHost算是结束了。不过看到Activity里的代码很多都是重复的我们可以这样把他们简化：

[java] 
  1. package cn.li.tabstyle;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.widget.TabHost;  
  8. import android.widget.TextView;  
  9.   
  10. public class TabHostStyleActivity extends Activity {  
  11.     /** Called when the activity is first created. */  
  12.     String[] title = new String[]{
    "ni","wo","ta","we"};  
  13.     View userTab,articeTab,feedTab,weTab;  
  14.     View[] tabs = new View[]{userTab,articeTab,feedTab,weTab};  
  15.     int[] tabIds = new int[]{R.id.tab1,R.id.tab2,R.id.tab3,R.id.tab4};  
  16.     @Override  
  17.     public void onCreate(Bundle savedInstanceState) {  
  18.         super.onCreate(savedInstanceState);  
  19.         setContentView(R.layout.main);  
  20.           
  21.         TabHost tabHost = (TabHost)findViewById(R.id.tabhost);  
  22.         tabHost.setup();   //Call setup() before adding tabs if loading TabHost using findViewById().   
  23.           
  24.         for(int i=0;i<tabs.length;i++){  
  25.             tabs[i] = (View) LayoutInflater.from(this).inflate(R.layout.tabmini, null);  
  26.             TextView text = (TextView) tabs[i].findViewById(R.id.tab_label);  
  27.             text.setText(title[i]);              
  28.             tabHost.addTab(tabHost.newTabSpec(title[i]).setIndicator(tabs[i]).setContent(tabIds[i]));  
  29.         }  
  30.     }  
  31. }  

你可能感兴趣的文章
python识别数据结构
查看>>
python bisect序列二分法详解
查看>>
python学习笔记字典排序，
查看>>
python内置类 set
查看>>
python getatrra（）
查看>>
thinkpython2的扑克牌系列练习最终解读
查看>>
matlab复色光夫琅禾费衍射
查看>>
前端上传图片（文件）到后端
查看>>
SpringBoot pom.xml 配置依赖
查看>>
类比较器Comparator
查看>>
Maven--pom.xml文件标签含义（父模块， 子模块）
查看>>
maven 3.6.1 setting.xml配置文件
查看>>
node.js、npm、cnpm、webpack的定义与关系
查看>>
webpack自动打包
查看>>
接口api规范以及测试接口工具
查看>>
node.js结合Element.Ui开发前端页面
查看>>
idea Maven项目依赖出现unknown异常的处理方法
查看>>
68. Text Justification
查看>>
71 Simplify Path
查看>>
72. Edit Distance
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-09-14 00:38:35   当前IP: 18.218.166.112   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我