天天看點

Android之底部導航欄--RadioGroup、TabHost、TabActivity

Android底部導航欄,網絡上的示例多如牛毛

在這裡,我也記錄一個好了

這一篇文章用的是TabActivity,下一篇文章會用Fragment實現

廢話不多說了,看效果圖片

Android之底部導航欄--RadioGroup、TabHost、TabActivity

繼續咱們的節奏,看目錄檔案

Android之底部導航欄--RadioGroup、TabHost、TabActivity

佈局檔案內容

<?xml version="1.0" encoding="UTF-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:visibility="gone" />

        <RadioGroup
            android:id="@+id/bottom_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/group_background"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/radio_home"
                style="@style/radio_navigation_bar_bottom_tab"
                android:checked="true"
                android:drawableTop="@drawable/tab_home"
                android:text="@string/tab_home" />

            <RadioButton
                android:id="@+id/radio_letter"
                style="@style/radio_navigation_bar_bottom_tab"
                android:drawableTop="@drawable/tab_letter"
                android:text="@string/tab_letter" />

            <RadioButton
                android:id="@+id/radio_comment"
                style="@style/radio_navigation_bar_bottom_tab"
                android:drawableTop="@drawable/tab_comment"
                android:text="@string/tab_comment" />

            <RadioButton
                android:id="@+id/radio_reference"
                style="@style/radio_navigation_bar_bottom_tab"
                android:drawableTop="@drawable/tab_reference"
                android:text="@string/tab_reference" />

            <RadioButton
                android:id="@+id/radio_more"
                style="@style/radio_navigation_bar_bottom_tab"
                android:drawableTop="@drawable/tab_more"
                android:text="@string/tab_more" />
        </RadioGroup>
    </LinearLayout>

</TabHost>
           

style.xml樣式檔案內容

<style name="radio_navigation_bar_bottom_tab">
        <item name="android:button">@null</item>
        <item name="android:layout_marginTop">2.0dp</item>
        <item name="android:textSize">10sp</item>
        <item name="android:textColor">#ffffffff</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/radio_navigation_bar_bg</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">2dp</item>
        <item name="android:layout_weight">1</item>
    </style>
           
<item name="android:button">@null</item>
           

消除單選按鈕

radio_navigation_bar_bg.xml檔案內容

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_focused="true" android:state_pressed="false" android:state_enabled="true" android:drawable="@drawable/navigation_bar_tab_pressed" />
    <item android:state_pressed="true" android:state_enabled="true" android:drawable="@drawable/navigation_bar_tab_pressed"></item>
    <item android:state_checked="true" android:state_enabled="true" android:drawable="@drawable/navigation_bar_tab_selected" />
</selector>
           

string.xml檔案內容

<string name="tab_home">首頁</string>
    <string name="tab_comment">評論</string>
    <string name="tab_letter">私信</string>
    <string name="tab_reference">重新整理</string>
    <string name="tab_more">更多</string>
           

MainActivity.java檔案代碼

/**
 * 模仿新浪微網誌底部導航欄
 * 使用RadioGroup+RadioButton、TabHost、TabActivity實現底部導航欄
 * 但是因為TabActivity屬於過時的系統類,是以不推薦該方法
 * @author Francis-ChinaFeng
 * @version 1.0 2013-09-08
 */
public class MainActivity extends TabActivity implements OnCheckedChangeListener {

//	實例化頁面控件
	private RadioGroup group;
	private TabHost tabHost;
//	聲明TabSpac的Tag字元資訊
	private String tab_home_bar = "tab_home";
	private String tab_letter_bar = "tab_letter";
	private String tab_comment_bar = "tab_comment";
	private String tab_reference_bar = "tab_reference";
	private String tab_more_bar = "tab_more";

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
		setNavigationBar();
	}

	private void init() {
		group = (RadioGroup) findViewById(R.id.bottom_group);
		group.setOnCheckedChangeListener(this);
		tabHost = getTabHost();
	}

	private void setNavigationBar() {
//		實例化底部導航TabSpec對象
		TabSpec tab_home = tabHost.newTabSpec(tab_home_bar);
		TabSpec tab_letter = tabHost.newTabSpec(tab_letter_bar);
		TabSpec tab_comment = tabHost.newTabSpec(tab_comment_bar);
		TabSpec tab_reference = tabHost.newTabSpec(tab_reference_bar);
		TabSpec tab_more = tabHost.newTabSpec(tab_more_bar);

		tab_home.setIndicator(tab_home_bar).setContent(new Intent(this, TabHomeActivity.class));
		tab_letter.setIndicator(tab_letter_bar).setContent(new Intent(this, TabLetterActivity.class));
		tab_comment.setIndicator(tab_comment_bar).setContent(new Intent(this, TabCommentActivity.class));
		tab_reference.setIndicator(tab_reference_bar).setContent(new Intent(this, TabReferenceActivity.class));
		tab_more.setIndicator(tab_more_bar).setContent(new Intent(this, TabMoreActivity.class));

		tabHost.addTab(tab_home);
		tabHost.addTab(tab_letter);
		tabHost.addTab(tab_comment);
		tabHost.addTab(tab_reference);
		tabHost.addTab(tab_more);
	}

	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch (checkedId) {
			case R.id.radio_home:
				tabHost.setCurrentTabByTag(tab_home_bar);
				break;
			case R.id.radio_letter:
				tabHost.setCurrentTabByTag(tab_letter_bar);
				break;
			case R.id.radio_comment:
				tabHost.setCurrentTabByTag(tab_comment_bar);
				break;
			case R.id.radio_reference:
				tabHost.setCurrentTabByTag(tab_reference_bar);
				break;
			case R.id.radio_more:
				tabHost.setCurrentTabByTag(tab_more_bar);
				break;
		}
	}

}
           

好了,整個實現過程就完成了,稍後提供源碼,并寫一下Fragment實現過程

下載鏈接:http://download.csdn.net/detail/u011290399/6234813