仿新浪微博布局学习——妙用TabHost

前言

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

转载,

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

    农民伯伯: http://www.cnblogs.com/over140

版本

  新浪微博 weibo_10235010.apk

 

正文

  一、效果图

    仿新浪微博布局学习——妙用TabHost_第1张图片

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

 

  二、实现

    maintabs.xml

[html]  view plain copy
  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]  view plain copy
  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]  view plain copy
  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]  view plain copy
  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,各取其长,有时间可以专门写一个这样的自定义控件:)



  

自定义TabHost,TabWidget样式 .

分类: Android   9142人阅读  评论(7)  收藏  举报
android layout tabs encoding null button
大家好,今天我为大家分享TabHost中怎样修改TabWidget样式。在很多界面美观的应用中很多都用到了TabHost,但他们要比系统默认的要漂亮得多。先看几张图:


                             京东商城底部菜单栏


                            新浪微博底部菜单栏

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

 

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

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

[html]  view plain copy
  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]  view plain copy
  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]  view plain copy
  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]  view plain copy
  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_第2张图片

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

[java]  view plain copy
  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. }  





另外相关资料:

在上一篇文章中,我们花了大量的篇幅来讲解Fragment这个新引进类的使用,目的就是为了让大家能够牢牢的掌握它的使用方法,以便读者在今后的开发中能够熟练的使用它。

一、实现效果图



二、项目工程结构

三、详细代码编写

1、主tab布局界面,main_tab_layout:

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<? xml version = "1.0" encoding = "utf-8" ?> 
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
     android:layout_width = "fill_parent"
     android:layout_height = "fill_parent"
     android:orientation = "vertical"
       
     < FrameLayout
         android:id = "@+id/realtabcontent"
         android:layout_width = "fill_parent"
         android:layout_height = "0dip"
         android:layout_weight = "1" /> 
       
     < android.support.v4.app.FragmentTabHost
         android:id = "@android:id/tabhost"
         android:layout_width = "fill_parent"
         android:layout_height = "wrap_content"
         android:background = "@drawable/maintab_toolbar_bg"
       
         < FrameLayout
             android:id = "@android:id/tabcontent"
             android:layout_width = "0dp"
             android:layout_height = "0dp"
             android:layout_weight = "0" />             
     </ android.support.v4.app.FragmentTabHost
       
</ LinearLayout >

2、Tab按钮选项布局,tab_item_view.xml:

双击代码全选
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<? xml version = "1.0" encoding = "utf-8"

你可能感兴趣的:(android,android,新浪微博,tabhost,底部栏)