Android-实现顶部+底部双导航界面功能

最近想弄一个双导航功能，查看了许多资料，总算是实现了功能，这边就算是给自己几个笔记吧！

先来看看效果

那么就开始实现了！

底部导航栏我选择用FragmentTabHost+Fragment来实现，这个方法我觉得挺好用的，代码量也不多

首先是开始的activity_main.xml

[java]  view plain   copy

  print ?

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     tools:context="${relativePackage}.${activityClass}" >  
6.   
7.     <FrameLayout  
8.         android:id="@+id/main_view"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent"  
11.         android:layout_above="@+id/main_tab"  
12.         android:layout_alignParentLeft="true"  
13.         android:layout_alignParentTop="true" >  
14.   
15.     </FrameLayout>  
16.   
17.         <view  
18.         android:id="@+id/main_tab"  
19.         android:layout_width="match_parent"  
20.         android:layout_height="50dp"  
21.         android:layout_alignParentBottom="true"  
22.         android:layout_alignParentLeft="true"   
23.         class="android.support.v4.app.FragmentTabHost" />  
24.   
25. </RelativeLayout>  

其中我是直接拉的view所以是形成的FragmentTabHost

也可以直接在xml文件里面写

<Android.support.v4.view.FragmentTabHost >

</android.support.v4.view.FragmentTabHost>

这xml文件就一个view加一个tab  view用来显示碎片，tab用来放置底部按钮的数量

再来是tab_foot.xml

[java]  view plain   copy

  print ?

1. <?xml version="1.0" encoding="utf-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="match_parent"  
4.     android:layout_height="match_parent"  
5.     android:background="#F6F6F6"  
6.     android:gravity="center"  
7.     android:orientation="vertical" >  
8.   
9.     <ImageView  
10.         android:id="@+id/foot_iv"  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:src="@drawable/home1" />  
14.   
15.     <TextView  
16.         android:id="@+id/foot_tv"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_marginTop="3dp"  
20.         android:text="首页"  
21.         android:textColor="@color/tab_color" />  
22.   
23. </LinearLayout>  

这是每个底部按钮的布局设置的xml文件

显示效果。

再来是MainActivity的代码

[java]  view plain   copy

  print ?

1. package com.gjn.mynavigation;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.FragmentActivity;  
5. import android.support.v4.app.FragmentTabHost;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.Window;  
9. import android.widget.ImageView;  
10. import android.widget.TabWidget;  
11. import android.widget.TextView;  
12. import android.widget.TabHost.OnTabChangeListener;  
13. import android.widget.TabHost.TabSpec;  
14.   
15. public class MainActivity extends FragmentActivity implements OnTabChangeListener {  
16.   
17.     private FragmentTabHost mTabHost;  
18.     @Override  
19.     protected void onCreate(Bundle savedInstanceState) {  
20.         super.onCreate(savedInstanceState);  
21.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
22.         setContentView(R.layout.activity_main);  
23.           
24.         //初始化FragmentTabHost  
25.         initHost();  
26.         //初始化底部导航栏  
27.         initTab();  
28.         //默认选中  
29.         mTabHost.onTabChanged(TabDb.getTabsTxt()[0]);  
30.     }  
31.   
32.     private void initTab() {  
33.         String[] tabs = TabDb.getTabsTxt();  
34.         for (int i = 0; i < tabs.length; i++) {  
35.             //新建TabSpec