Android之UI學習篇十：使用TabHost實現微部落格戶端介面
阿新 • • 發佈：2019-02-16
這裡模擬微部落格戶端進行案例開發，由於沒有圖片資源，所以就做了一個大體結構類似的案例，跟大家分享一下它的實現，這裡採用的是使用xml佈局結合TabActivity控制。
先看看實現的效果：
工程目錄結構：
以下是原始碼：
MainActivity.java
CommentActivity.java: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; } } }
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:
<?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:
<?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><?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>其他幾個佈局檔案相似。