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

Android底部導航欄,使用Fragment實現

老規矩,先看效果圖,因為不想拿4.1操作系統的手機,直接就用模擬器了

Android之底部導航欄--RadioGroup、TabHost、Fragment_第1张图片

然後目錄結構

Android之底部導航欄--RadioGroup、TabHost、Fragment_第2张图片

佈局文件內容

<?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" >

            <fragment
                android:id="@+id/fragment_home"
                android:name="com.android.francis.radionavigationbarbyfragment.TabHomeFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/fragment_letter"
                android:name="com.android.francis.radionavigationbarbyfragment.TabLetterFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/fragment_comment"
                android:name="com.android.francis.radionavigationbarbyfragment.TabCommentFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/fragment_search"
                android:name="com.android.francis.radionavigationbarbyfragment.TabSearchFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <fragment
                android:id="@+id/fragment_more"
                android:name="com.android.francis.radionavigationbarbyfragment.TabMoreFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>

        <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/navigation_home"
                android:text="@string/navigation_home" />

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

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

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

            <RadioButton
                android:id="@+id/radio_more"
                style="@style/radio_navigation_bar_bottom_tab"
                android:drawableTop="@drawable/navigation_more"
                android:text="@string/navigation_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>

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="navigation_home">首頁</string>
    <string name="navigation_comment">評論</string>
    <string name="navigation_letter">私信</string>
    <string name="navigation_search">搜索</string>
    <string name="navigation_more">更多</string>

MainActivity.java主要代碼

/**
 * 模仿新浪微博底部導航欄
 * 使用RadioGroup+RadioButton、TabHost、Fragment實現底部導航欄
 * 需要Android操作系統最低版本為11
 * 因為現在還有許許多多2.2、2.3版本的手機充斥的我們的周圍
 * 所以有點雞筋
 * @author Francis-ChinaFeng
 * @version 1.0 2013-09-08
 */
public class MainActivity extends Activity implements OnCheckedChangeListener {

	private RadioGroup group;
	private TabHost tabHost;
	
	private String navigation_bar_home = "home";
	private String navigation_bar_letter = "letter";
	private String navigation_bar_comment = "comment";
	private String navigation_bar_search = "search";
	private String navigation_bar_more = "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);
		tabHost = (TabHost) findViewById(android.R.id.tabhost);
		group.setOnCheckedChangeListener(this);
		tabHost.setup();
	}

	private void setNavigationBar() {
		TabSpec tab_home = tabHost.newTabSpec(navigation_bar_home);
		TabSpec tab_letter = tabHost.newTabSpec(navigation_bar_letter);
		TabSpec tab_comment = tabHost.newTabSpec(navigation_bar_comment);
		TabSpec tab_search = tabHost.newTabSpec(navigation_bar_search);
		TabSpec tab_more = tabHost.newTabSpec(navigation_bar_more);

		tab_home.setIndicator(navigation_bar_home).setContent(R.id.fragment_home);
		tab_letter.setIndicator(navigation_bar_home).setContent(R.id.fragment_letter);
		tab_comment.setIndicator(navigation_bar_home).setContent(R.id.fragment_comment);
		tab_search.setIndicator(navigation_bar_home).setContent(R.id.fragment_search);
		tab_more.setIndicator(navigation_bar_home).setContent(R.id.fragment_more);

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

	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch (checkedId) {
			case R.id.radio_home:
				tabHost.setCurrentTabByTag(navigation_bar_home);
				break;
			case R.id.radio_letter:
				tabHost.setCurrentTabByTag(navigation_bar_letter);
				break;
			case R.id.radio_comment:
				tabHost.setCurrentTabByTag(navigation_bar_comment);
				break;
			case R.id.radio_search:
				tabHost.setCurrentTabByTag(navigation_bar_search);
				break;
			case R.id.radio_more:
				tabHost.setCurrentTabByTag(navigation_bar_more);
				break;
		}
	}

}

TabHomeFragment代碼內容

/**
 * 
 * @author Francis-ChinaFeng
 * @version 1.0 2013-9-8
 */
public class TabHomeFragment extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
//		return super.onCreateView(inflater, container, savedInstanceState);
		return inflater.inflate(R.layout.activity_navigation_home, container);
	}
}

好了,完成了,然後給出源碼連接,這個需要分數下載,小爺也是窮人

http://download.csdn.net/detail/u011290399/6234829


你可能感兴趣的:(android,Fragment,tabhost,Navigation,新浪导航栏)