Lance老师UI系列教程第四课->微信TAB界面的实现

 

分类： android UI教程 2012-08-21 22:53  3103人阅读  评论(3)  收藏  举报

ui android radiobutton layout encoding

UI系列教程第四课：微信TAB界面的实现

                                                       

 今天蓝老师给童鞋们带来的是微信TAB界面的实现

如效果图所示，这种TAB页面的效果是大多数应用都会涉及到的

思路一般就两种activitygrounp + radionbutton 或tabwidget + radionbutton

Radionbutton定制性较强，所以推荐使用它们

而对于tab项效果其实就是 top图selector + background图selector + 文字selector

这样效果基本就全了，废话不多说，直接上xml布局

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <TabHost   
3.     android:id="@android:id/tabhost"   
4.     android:layout_width="fill_parent"   
5.     android:layout_height="fill_parent"  
6.     xmlns:android="http://schemas.android.com/apk/res/android">  
7.       
8.     <LinearLayout   
9.         android:orientation="vertical"   
10.         android:layout_width="fill_parent"   
11.         android:layout_height="fill_parent">  
12.           
13.         <FrameLayout   
14.             android:id="@android:id/tabcontent"   
15.             android:layout_width="fill_parent"   
16.             android:layout_height="0.0dip"   
17.             android:layout_weight="1.0" />  
18.           
19.         <TabWidget   
20.             android:id="@android:id/tabs"   
21.             android:visibility="gone"   
22.             android:layout_width="fill_parent"   
23.             android:layout_height="wrap_content"   
24.             android:layout_weight="0.0" />  
25.   
26.         <RadioGroup   
27.         android:id="@+id/main_radiogroup"  
28.         android:gravity="center_vertical"  
29.         android:layout_gravity="bottom"   
30.         android:orientation="horizontal"  
31.         android:paddingBottom="2dip"  
32.         android:paddingTop="8dp"  
33.         android:background="@drawable/mmfooter_bg"  
34.         android:layout_width="fill_parent"   
35.         android:layout_height="wrap_content">  
36.             <RadioButton   
37.                 android:id="@+id/main_tab_weixin"   
38.                 android:checked="true"   
39.                 android:text="@string/main_title"   
40.                 android:drawableTop="@drawable/tab_weixin"  
41.                 android:textColor="@color/tab_text"  
42.                 style="@style/MMTabButton" />      
43.   
44.   
45.             <RadioButton   
46.                 android:id="@+id/main_tab_address"   
47.                 android:text="@string/main_contact"   
48.                 android:drawableTop="@drawable/tab_address"   
49.                 android:textColor="@color/tab_text"  
50.                 style="@style/MMTabButton" />  
51.               
52.             <RadioButton   
53.                 android:id="@+id/main_tab_find_friend"   
54.                 android:text="@string/main_addcontact"   
55.                 android:drawableTop="@drawable/tab_find_frd"  
56.                 android:textColor="@color/tab_text"   
57.                 style="@style/MMTabButton" />  
58.               
59.               
60.             <RadioButton   
61.                 android:id="@+id/main_tab_settings"   
62.                 android:text="@string/main_setting"   
63.                 android:drawableTop="@drawable/tab_settings"   
64.                 android:textColor="@color/tab_text"  
65.                 style="@style/MMTabButton" />  
66.         </RadioGroup>  
67.           
68.               
69.     </LinearLayout>  
70.       
71. </TabHost>  

 

 

本例采用tabwidget+ radionbutton方式，布局里将TabWidget隐藏，用radiongrounp取而代之

看radionbutton的配置

[java]  view plain copy

1. <RadioButton   
2.                 android:id="@+id/main_tab_weixin"   
3.                 android:checked="true"   
4.                 android:text="@string/main_title"   
5.                 android:drawableTop="@drawable/tab_weixin"  
6.                 android:textColor="@color/tab_text"  
7.                 style="@style/MMTabButton" />      

android:drawableTop="@drawable/tab_weixin"

Top图selector

 

[java]  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_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_weixin_pressed" />  
5.     <item android:drawable="@drawable/tab_weixin_normal" />  
6. </selector>  

 

android:textColor="@color/tab_text"

文字selector

[java]  view plain copy

1. <?xml version="1.0" encoding="utf-8" ?>   
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <item android:state_checked="true" android:color="@color/white"/>  
4.     <item android:color="#ff666666"/>     
5. </selector>  

style="@style/MMTabButton"

Radionbutton风格，整体风格定制

[java]  view plain copy

1. <style name="tab_item_text_style">  
2.     <item name="android:textSize">12.0dip</item>  
3.     <item name="android:textColor">@color/tab_text</item>  
4.     <item name="android:ellipsize">marquee</item>         
5.     <item name="android:singleLine">true</item>  
6. </style>  
7.   
8.       
9. <style name="MMTabButton">  
10.     <item name="android:textAppearance">@style/tab_item_text_style</item>   
11.     <item name="android:gravity">center_horizontal</item>  
12.     <item name="android:background">@drawable/tab_bg</item>  
13.     <item name="android:layout_width">0.0dip</item>  
14.     <item name="android:layout_height">wrap_content</item>  
15.     <item name="android:button">@null</item>  
16.     <item name="android:layout_weight">1.0</item>  
17. </style>  
18.           

 

 

至此，效果全部实现...

再看activity的实现：

[java]  view plain copy

1. public class WeiXinTabActivity extends TabActivity {  
2.     /** Called when the activity is first created. */  
3.       
4.       
5.     private TabHost     m_tabHost;        
6.     private RadioGroup  m_radioGroup;  
7.           
8.           
9.     public void onCreate(Bundle savedInstanceState) {  
10.         super.onCreate(savedInstanceState);  
11.         setContentView(R.layout.main_tab);  
12.           
13.         init();  
14.     }  
15.   
16.       
17.       
18.     private void init()  
19.     {  
20.         m_tabHost = getTabHost();  
21.       
22.         int count = Constant.mTabClassArray.length;       
23.         for(int i = 0; i < count; i++)  
24.         {     
25.             TabSpec tabSpec = m_tabHost.newTabSpec(Constant.mTextviewArray[i]).  
26.                                                     setIndicator(Constant.mTextviewArray[i]).  
27.                                                     setContent(getTabItemIntent(i));  
28.             m_tabHost.addTab(tabSpec);  
29.         }  
30.           
31.         m_radioGroup = (RadioGroup) findViewById(R.id.main_radiogroup);  
32.         m_radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {  
33.               
34.             @Override  
35.             public void onCheckedChanged(RadioGroup group, int checkedId) {  
36.                 // TODO Auto-generated method stub  
37.                 switch(checkedId){  
38.                 case R.id.main_tab_weixin:  
39.   
40.                     m_tabHost.setCurrentTabByTag(Constant.mTextviewArray[0]);  
41.                     break;  
42.                 case R.id.main_tab_address:  
43.                     m_tabHost.setCurrentTabByTag(Constant.mTextviewArray[1]);  
44.                     break;  
45.                 case R.id.main_tab_find_friend:  
46.                     m_tabHost.setCurrentTabByTag(Constant.mTextviewArray[2]);  
47.                     break;  
48.                 case R.id.main_tab_settings:  
49.                     m_tabHost.setCurrentTabByTag(Constant.mTextviewArray[3]);  
50.                     break;  
51.                 }  
52.             }  
53.         });  
54.           
55.          ((RadioButton) m_radioGroup.getChildAt(0)).toggle();  
56.     }  
57.       
58.     private Intent getTabItemIntent(int index)  
59.     {  
60.         Intent intent = new Intent(this, Constant.mTabClassArray[index]);  
61.           
62.         return intent;  
63.     }  

[java]  view plain copy

1. public class Constant {  
2.   
3.     public static String mTextviewArray[] = {"微信", "通讯录", "朋友", "设置"};  
4.       
5.     public static Class mTabClassArray[]= {Activity1.class,  
6.         Activity2.class,  
7.         Activity3.class,  
8.         Activity4.class};  
9. }  

这样就将tabwidget和radionbutton无缝链接起来了，一目了然有木有~

附上链接工程：

http://download.youkuaiyun.com/detail/geniuseoe2012/4516524

欲知更多Android-UI技巧，请关注窝的下一堂课,更多精彩尽在http://blog.youkuaiyun.com/geniuseoe2012

welcome to join android develop group:298044305

上一课：Lance老师UI系列教程第三课->QQ登录注册界面的实现（android-2012最新版）

下一课：Lance老师UI系列教程第五课->自定义风格单选多选对话框的实现