使用TabHost实现微博客户端界面

这里模拟微博客户端进行案例开发,由于没有图片资源,所以就做了一个大体结构类似的案例,跟大家分享一下它的实现,这里采用的是使用xml布局结合TabActivity控制。

先看看实现的效果:

使用TabHost实现微博客户端界面_第1张图片


使用TabHost实现微博客户端界面_第2张图片


工程目录结构:

使用TabHost实现微博客户端界面_第3张图片

以下是源代码:

MainActivity.java

[html] view plain copy print ?
  1. package com.tablehost.activity;  
  2.   
  3. import android.app.Activity;  
  4. import android.app.TabActivity;  
  5. import android.content.Intent;  
  6. import android.os.Bundle;  
  7. import android.speech.SpeechRecognizer;  
  8. import android.widget.RadioButton;  
  9. import android.widget.RadioGroup;  
  10. import android.widget.RadioGroup.OnCheckedChangeListener;  
  11. import android.widget.TabHost;  
  12. import android.widget.TabHost.TabSpec;  
  13.   
  14. public class MainActivity extends TabActivity implements OnCheckedChangeListener{  
  15.     private TabHost tabHost;  
  16.     private RadioGroup radioGroup;  
  17.     private RadioButton radioButton1;  
  18.     private RadioButton radioButton2;  
  19.     private RadioButton radioButton3;  
  20.     private RadioButton radioButton4;  
  21.       
  22.     @Override  
  23.     public void onCreate(Bundle savedInstanceState) {  
  24.         super.onCreate(savedInstanceState);  
  25.         setContentView(R.layout.main);  
  26.         //获取TabHost组件  
  27.         tabHost = getTabHost();  
  28.         //新建一个标签页  
  29.         TabSpec tabSpec1 = (TabSpec)tabHost.newTabSpec("HOME").setIndicator("HOME");  
  30.         //给标签页设置内容  
  31.         tabSpec1.setContent(new Intent(MainActivity.this,HomeActivity.class));  
  32.         //把标签页添加到TabHost当中去  
  33.         tabHost.addTab(tabSpec1);  
  34.           
  35.         TabSpec tabSpec2 = (TabSpec)tabHost.newTabSpec("COMMENT").setIndicator("COMMENT");  
  36.         tabSpec2.setContent(new Intent(MainActivity.this,CommentActivity.class));  
  37.         tabHost.addTab(tabSpec2);  
  38.           
  39.         TabSpec tabSpec3 = (TabSpec)tabHost.newTabSpec("SAVE").setIndicator("SAVE");  
  40.         tabSpec3.setContent(new Intent(MainActivity.this,SaveActivity.class));  
  41.         tabHost.addTab(tabSpec3);  
  42.           
  43.         TabSpec tabSpec4 = (TabSpec)tabHost.newTabSpec("MORE").setIndicator("MORE");  
  44.         tabSpec4.setContent(new Intent(MainActivity.this,MoreActivity.class));  
  45.         tabHost.addTab(tabSpec4);  
  46.           
  47.         setUpView();  
  48.         //关联RadioButton 和 TabHost  
  49.         radioGroup.setOnCheckedChangeListener(this);  
  50.     }  
  51.     //我的一贯作风  
  52.     public void setUpView(){  
  53.         radioGroup = (RadioGroup)findViewById(R.id.group);  
  54.         radioButton1 = (RadioButton)findViewById(R.id.radioButton1);  
  55.         radioButton2 = (RadioButton)findViewById(R.id.radioButton2);  
  56.         radioButton3 = (RadioButton)findViewById(R.id.radioButton3);  
  57.         radioButton4 = (RadioButton)findViewById(R.id.radioButton4);  
  58.     }  
  59.     @Override  
  60.     public void onCheckedChanged(RadioGroup group, int checkedId) {  
  61.         switch (checkedId) {  
  62.         case R.id.radioButton1:  
  63.             tabHost.setCurrentTabByTag("HOME");  
  64.             break;  
  65.         case R.id.radioButton2:  
  66.             tabHost.setCurrentTabByTag("COMMENT");  
  67.             break;  
  68.         case R.id.radioButton3:  
  69.             tabHost.setCurrentTabByTag("SAVE");  
  70.             break;  
  71.         case R.id.radioButton4:  
  72.             tabHost.setCurrentTabByTag("MORE");  
  73.             break;  
  74.         default:  
  75.             break;  
  76.         }  
  77.     }  
  78. }  
package com.tablehost.activity;

import android.app.Activity;
import android.app.TabActivity;
import android.content.Intent;
import android.os.Bundle;
import android.speech.SpeechRecognizer;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;

public class MainActivity extends TabActivity implements OnCheckedChangeListener{
	private TabHost tabHost;
	private RadioGroup radioGroup;
	private RadioButton radioButton1;
	private RadioButton radioButton2;
	private RadioButton radioButton3;
	private RadioButton radioButton4;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //获取TabHost组件
        tabHost = getTabHost();
        //新建一个标签页
        TabSpec tabSpec1 = (TabSpec)tabHost.newTabSpec("HOME").setIndicator("HOME");
        //给标签页设置内容
        tabSpec1.setContent(new Intent(MainActivity.this,HomeActivity.class));
        //把标签页添加到TabHost当中去
        tabHost.addTab(tabSpec1);
        
        TabSpec tabSpec2 = (TabSpec)tabHost.newTabSpec("COMMENT").setIndicator("COMMENT");
        tabSpec2.setContent(new Intent(MainActivity.this,CommentActivity.class));
        tabHost.addTab(tabSpec2);
        
        TabSpec tabSpec3 = (TabSpec)tabHost.newTabSpec("SAVE").setIndicator("SAVE");
        tabSpec3.setContent(new Intent(MainActivity.this,SaveActivity.class));
        tabHost.addTab(tabSpec3);
        
        TabSpec tabSpec4 = (TabSpec)tabHost.newTabSpec("MORE").setIndicator("MORE");
        tabSpec4.setContent(new Intent(MainActivity.this,MoreActivity.class));
        tabHost.addTab(tabSpec4);
        
        setUpView();
        //关联RadioButton 和 TabHost
        radioGroup.setOnCheckedChangeListener(this);
    }
    //我的一贯作风
    public void setUpView(){
    	radioGroup = (RadioGroup)findViewById(R.id.group);
    	radioButton1 = (RadioButton)findViewById(R.id.radioButton1);
    	radioButton2 = (RadioButton)findViewById(R.id.radioButton2);
    	radioButton3 = (RadioButton)findViewById(R.id.radioButton3);
    	radioButton4 = (RadioButton)findViewById(R.id.radioButton4);
    }
	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch (checkedId) {
		case R.id.radioButton1:
			tabHost.setCurrentTabByTag("HOME");
			break;
		case R.id.radioButton2:
			tabHost.setCurrentTabByTag("COMMENT");
			break;
		case R.id.radioButton3:
			tabHost.setCurrentTabByTag("SAVE");
			break;
		case R.id.radioButton4:
			tabHost.setCurrentTabByTag("MORE");
			break;
		default:
			break;
		}
	}
}


CommentActivity.java:

[html] view plain copy print ?
  1. package com.tablehost.activity;  
  2.   
  3. import android.app.Activity;  
  4. import android.os.Bundle;  
  5.   
  6. public class CommentActivity extends Activity {  
  7.     @Override  
  8.     protected void onCreate(Bundle savedInstanceState) {  
  9.         super.onCreate(savedInstanceState);  
  10.         setContentView(R.layout.comment);  
  11.     }  
  12. }  
package com.tablehost.activity;

import android.app.Activity;
import android.os.Bundle;

public class CommentActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.comment);
	}
}

其他几个Activity类似


在工程的src 目录下新建了一个目录: drawable ,里面新建一个button.xml,用来定义radioButton的选中等不同状态时,显示不同的背景图片:

button.xml:

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <!-- 当单选框可用,且获得焦点还没有按下显示的背景 -->  
  4.     <item android:state_enabled="true" android:state_focused="true"   
  5.         android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s">  
  6.     </item>  
  7.       
  8.     <!-- 当单选框可用,且被按下时显示的背景 -->  
  9.     <item android:state_enabled="true" android:state_pressed="true"  
  10.         android:drawable="@drawable/home_btn_bg_s">  
  11.     </item>  
  12.       
  13.     <!-- 当单选框可用,且被选中了时的背景 -->  
  14.     <item android:state_enabled="true" android:state_checked="true"  
  15.         android:drawable="@drawable/home_btn_bg_d">  
  16.     </item>  
  17.       
  18. </selector>  
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 当单选框可用,且获得焦点还没有按下显示的背景 -->
    <item android:state_enabled="true" android:state_focused="true" 
        android:state_pressed="false" android:drawable="@drawable/home_btn_bg_s">
    </item>
    
    <!-- 当单选框可用,且被按下时显示的背景 -->
    <item android:state_enabled="true" android:state_pressed="true"
        android:drawable="@drawable/home_btn_bg_s">
    </item>
    
    <!-- 当单选框可用,且被选中了时的背景 -->
    <item android:state_enabled="true" android:state_checked="true"
        android:drawable="@drawable/home_btn_bg_d">
    </item>
    
</selector>



main.xml:

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.     <!-- TabHost的id写固定值,在Activity通过getTabHost()方法才能取得到 -->  
  7.     <TabHost   
  8.         android:id="@android:id/tabhost"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent">  
  11.         <!-- 放置frame视图和标签页 -->  
  12.         <LinearLayout   
  13.             android:layout_width="fill_parent"  
  14.             android:layout_height="fill_parent"  
  15.             android:orientation="vertical">  
  16.             <FrameLayout   
  17.                 android:id="@android:id/tabcontent"  
  18.                 android:layout_width="fill_parent"  
  19.                 android:layout_height="wrap_content"  
  20.                 android:layout_weight="1.0">  
  21.             </FrameLayout>  
  22.             <TabWidget   
  23.                 android:id="@android:id/tabs"  
  24.                 android:layout_width="fill_parent"  
  25.                 android:layout_height="wrap_content"  
  26.                 android:visibility="gone">  
  27.             </TabWidget>  
  28.             <RadioGroup   
  29.                 android:id="@+id/group"  
  30.                 android:layout_width="fill_parent"  
  31.                 android:layout_height="50dp"  
  32.                 android:background="@drawable/tab_bg"  
  33.                 android:gravity="center_vertical"  
  34.                 android:orientation="horizontal">  
  35.                 <RadioButton   
  36.                      android:id="@+id/radioButton1"  
  37.                      android:layout_width="fill_parent"  
  38.                      android:layout_height="wrap_content"  
  39.                      android:button="@null"  
  40.                      android:text="@string/home"  
  41.                      android:drawableTop="@drawable/icon_1_n"  
  42.                      android:gravity="center_horizontal"  
  43.                      android:background="@drawable/button"  
  44.                      android:layout_weight="1"  
  45.                      android:checked="true"/>  
  46.                   
  47.                 <RadioButton   
  48.                      android:id="@+id/radioButton2"  
  49.                      android:layout_width="fill_parent"  
  50.                      android:layout_height="wrap_content"  
  51.                      android:button="@null"  
  52.                      android:text="@string/comment"  
  53.                      android:drawableTop="@drawable/icon_2_n"  
  54.                      android:gravity="center_horizontal"  
  55.                      android:background="@drawable/button"  
  56.                      android:layout_weight="1"/>  
  57.                   
  58.                 <RadioButton   
  59.                      android:id="@+id/radioButton3"  
  60.                      android:layout_width="fill_parent"  
  61.                      android:layout_height="wrap_content"  
  62.                      android:button="@null"  
  63.                      android:text="@string/save"  
  64.                      android:drawableTop="@drawable/icon_3_n"  
  65.                      android:gravity="center_horizontal"  
  66.                      android:background="@drawable/button"  
  67.                      android:layout_weight="1"/>  
  68.                   
  69.                 <RadioButton   
  70.                      android:id="@+id/radioButton4"  
  71.                      android:layout_width="fill_parent"  
  72.                      android:layout_height="wrap_content"  
  73.                      android:button="@null"  
  74.                      android:text="@string/more"  
  75.                      android:drawableTop="@drawable/icon_4_n"  
  76.                      android:gravity="center_horizontal"  
  77.                      android:background="@drawable/button"  
  78.                      android:layout_weight="1"/>  
  79.             </RadioGroup>  
  80.         </LinearLayout>  
  81.     </TabHost>  
  82.   
  83. </LinearLayout>  
<?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" >
	<!-- TabHost的id写固定值,在Activity通过getTabHost()方法才能取得到 -->
    <TabHost 
        android:id="@android:id/tabhost"
        android:layout_width="fill_parent"
    	android:layout_height="fill_parent">
    	<!-- 放置frame视图和标签页 -->
        <LinearLayout 
            android:layout_width="fill_parent"
    		android:layout_height="fill_parent"
    		android:orientation="vertical">
            <FrameLayout 
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
    			android:layout_height="wrap_content"
    			android:layout_weight="1.0">
            </FrameLayout>
            <TabWidget 
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
    			android:layout_height="wrap_content"
    			android:visibility="gone">
            </TabWidget>
            <RadioGroup 
                android:id="@+id/group"
                android:layout_width="fill_parent"
    			android:layout_height="50dp"
    			android:background="@drawable/tab_bg"
    			android:gravity="center_vertical"
    			android:orientation="horizontal">
    			<RadioButton 
    			     android:id="@+id/radioButton1"
    			     android:layout_width="fill_parent"
    			     android:layout_height="wrap_content"
    			     android:button="@null"
    			     android:text="@string/home"
    			     android:drawableTop="@drawable/icon_1_n"
    			     android:gravity="center_horizontal"
    			     android:background="@drawable/button"
    			     android:layout_weight="1"
    			     android:checked="true"/>
    			
    			<RadioButton 
    			     android:id="@+id/radioButton2"
    			     android:layout_width="fill_parent"
    			     android:layout_height="wrap_content"
    			     android:button="@null"
    			     android:text="@string/comment"
    			     android:drawableTop="@drawable/icon_2_n"
    			     android:gravity="center_horizontal"
    			     android:background="@drawable/button"
    			     android:layout_weight="1"/>
    			
    			<RadioButton 
    			     android:id="@+id/radioButton3"
    			     android:layout_width="fill_parent"
    			     android:layout_height="wrap_content"
    			     android:button="@null"
    			     android:text="@string/save"
    			     android:drawableTop="@drawable/icon_3_n"
    			     android:gravity="center_horizontal"
    			     android:background="@drawable/button"
    			     android:layout_weight="1"/>
    			
    			<RadioButton 
    			     android:id="@+id/radioButton4"
    			     android:layout_width="fill_parent"
    			     android:layout_height="wrap_content"
    			     android:button="@null"
    			     android:text="@string/more"
    			     android:drawableTop="@drawable/icon_4_n"
    			     android:gravity="center_horizontal"
    			     android:background="@drawable/button"
    			     android:layout_weight="1"/>
            </RadioGroup>
        </LinearLayout>
    </TabHost>

</LinearLayout>


comment.xml:

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical"  
  6.     android:background="@drawable/b">  
  7.   
  8.     <TextView  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:text="Hello world! CommentActivty" />  
  12.   
  13. </LinearLayout>  
<?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"
    android:background="@drawable/b">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Hello world! CommentActivty" />

</LinearLayout>

其他几个布局文件相似。


你可能感兴趣的:(android,tabhost)