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.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