衆所周知,ActivityGroup和TabHost已經過時,除了使用FragmentTabHost外,我們可以簡單的來實現一個界面豐富的底端菜單導航欄。
先不廢話,上圖:
其中,圖片是反編譯的淘寶客戶端。手上沒有合適的圖片,湊合看吧。文章最後我會貼出我的源代碼鏈接(因爲我沒有找到可以直接上傳文件),裏面有很多關鍵註釋,文章沒有寫的地方,大家可以在代碼中找到。
一.使用的知識:fragment +TabHost
二.佈局文件:(最主要的文件),上代碼:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.sdf.MainActivity$PlaceholderFragment" >
<TabHost
android:id="@+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="0dip"
android:layout_weight="1"
android:orientation="vertical" >
<fragment
android:id="@+id/content1"
android:name="com.lihuan.intelligencehumansocial.fragment.FirstFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<fragment
android:id="@+id/content2"
android:name="com.lihuan.intelligencehumansocial.fragment.SecondFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<fragment
android:id="@+id/content3"
android:name="com.lihuan.intelligencehumansocial.fragment.FirstFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<fragment
android:id="@+id/content4"
android:name="com.lihuan.intelligencehumansocial.fragment.SecondFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<fragment
android:id="@+id/content5"
android:name="com.lihuan.intelligencehumansocial.fragment.FirstFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</TabWidget>
</LinearLayout>
</TabHost>
</LinearLayout>注意事項:1.fragment作爲內容填充,要在fragment類中實現onCreateVIew方法。
2.TabWidget的id不能亂改,只能是那個
3.類文件:
public class TabHostActivity extends FragmentActivity {
// FragmentActivity和ActivityGroup繼承父類相同。TabActivity繼承ActivityGroup,兩個都已經過期不用
// 使用FragmentActivity來代替。
private TabHost tabHost;
private TabWidget tabWiget;
@Override
protected void onCreate(Bundle arg0) {
// TODO Auto-generated method stub
super.onCreate(arg0);
this.setContentView(R.layout.activity_main);
View guideHome = (View) LayoutInflater.from(this).inflate(
R.layout.guide_home, null);
View guideWeiTao = (View) LayoutInflater.from(this).inflate(
R.layout.guide_weitao, null);
View guideLife = (View) LayoutInflater.from(this).inflate(
R.layout.guide_nearby, null);
View guideShop = (View) LayoutInflater.from(this).inflate(
R.layout.guide_shop, null);
View guideAccount = (View) LayoutInflater.from(this).inflate(
R.layout.guide_account, null);
// 獲取tabHost,tabHost是個容器組件
tabHost = (TabHost) findViewById(R.id.tabhost);
// Call setup() before adding tabs if loading TabHost using
// findViewById() except TabActivity
tabHost.setup(); // 類似於初始化過程,不調用無法獲取到tabWiget,調用addTab需要tabwiget。TabActivity內部已經調用了
TabSpec mTabSpec1 = tabHost.newTabSpec("tab1").setIndicator(guideHome)
.setContent(R.id.content1);
TabSpec mTabSpec2 = tabHost.newTabSpec("tab2")
.setIndicator(guideWeiTao).setContent(R.id.content2);
TabSpec mTabSpec3 = tabHost.newTabSpec("tab3").setIndicator(guideLife)
.setContent(R.id.content3);
TabSpec mTabSpec4 = tabHost.newTabSpec("tab4").setIndicator(guideShop)
.setContent(R.id.content4);
TabSpec mTabSpec5 = tabHost.newTabSpec("tab5")
.setIndicator(guideAccount).setContent(R.id.content5);
tabHost.addTab(mTabSpec1);
tabHost.addTab(mTabSpec2);
tabHost.addTab(mTabSpec3);
tabHost.addTab(mTabSpec4);
tabHost.addTab(mTabSpec5);
// 獲取TabWiget ,佈局文件中一定要注意id=tabs,因爲TabHost類中,tabWeiget獲取是通過id=tabs
tabWiget = tabHost.getTabWidget(); // tabWiget的作用,設置tabWiget的總體的佈局。
/**
* 可以對tabWiget進行佈局設置
*/
}
注意事項:1.請繼承FragmentActivity;2. tabHost = (TabHost) findViewById(R.id.tabhost);後請立即調用setup()。setup()中,初始化了各種數據,如果不調用,後面的操作將出現異常,大家可以查看setup()源代碼。
希望大家再看完我的文章後,能夠避免很多錯誤,高效率的做出精美的底部菜單導航欄。
附源代碼:http://download.csdn.net/detail/meijian531161724/7527103
史上最詳細的TabHost菜單欄實現
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.