Android实习札记(5)---Fragment之底部导航栏的实现

Android实习札记(5)---Fragment之底部导航栏的实现

——转载请注明出处:coder-pig

在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就来学习Fragment应用的简单例子吧!

就是使用Fragment来实现简单的底部导航栏,先贴下效果图:

看上去很简单,实现起来也是很简单的哈!那么接着下来就看下实现的流程图吧:

实现流程图:

看完流程图是不是有大概的思路了,那么接着就开始代码的编写吧:

代码实现:

①先写布局,布局的话很简单,一个FrameLayout用来放Fragment,底部一个大的LinearLayout

放着三个小Item,每个Item的布局如下:

[html]   view plain copy print ?

1. <RelativeLayout    
2.             android:id="@+id/setting_layout"    
3.             android:layout_width="0dp"    
4.             android:layout_height="match_parent"    
5.             android:layout_weight="1" >    
6.     
7.             <LinearLayout    
8.                 android:layout_width="match_parent"    
9.                 android:layout_height="wrap_content"    
10.                 android:layout_centerVertical="true"    
11.                 android:orientation="vertical" >    
12.     
13.                 <ImageView    
14.                     android:id="@+id/setting_image"    
15.                     android:layout_width="wrap_content"    
16.                     android:layout_height="wrap_content"    
17.                     android:layout_gravity="center_horizontal"    
18.                     android:src="@drawable/ic_tabbar_settings_normal" />    
19.     
20.                 <TextView    
21.                     android:id="@+id/setting_text"    
22.                     android:layout_width="wrap_content"    
23.                     android:layout_height="wrap_content"    
24.                     android:layout_gravity="center_horizontal"    
25.                     android:text="设置"    
26.                     android:textColor="#7597B3" />    
27.             </LinearLayout>    
28.         </RelativeLayout>    

copy多两个,改下图片,文本资源就可以了,完整布局代码如下:

activity_main.xml

[html]   view plain copy print ?

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
2.     android:layout_width="match_parent"    
3.     android:layout_height="match_parent"    
4.     android:orientation="vertical" >    
5.       
6.     <FrameLayout    
7.         android:id="@+id/content"    
8.         android:layout_width="match_parent"    
9.         android:layout_height="0dp"    
10.         android:layout_weight="1" >    
11.     </FrameLayout>    
12.       
13.     <LinearLayout    
14.         android:layout_width="match_parent"    
15.         android:layout_height="60dp"    
16.         android:background="#FFFFFF" >    
17.     
18.         <RelativeLayout    
19.             android:id="@+id/course_layout"    
20.             android:layout_width="0dp"    
21.             android:layout_height="match_parent"