Android底部導航欄,網絡上的示例多如牛毛
在這裡,我也記錄一個好了
這一篇文章用的是TabActivity,下一篇文章會用Fragment實現
廢話不多說了,看效果圖片
繼續咱們的節奏,看目錄文件
佈局文件內容
<?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 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 name="tab_home">首頁</string> <string name="tab_comment">評論</string> <string name="tab_letter">私信</string> <string name="tab_reference">刷新</string> <string name="tab_more">更多</string>
/** * 模仿新浪微博底部導航欄 * 使用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