time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android使用Fragment实现TabHost效果

Android使用Fragment实现TabHost效果

时间:2014-06-20 10:43 点击:13838次 字体:[ ]




现在Fragment的应用真的是越来越广泛了,之前Android在3.0版本加入Fragment的时候,主要是为了解决Android Pad屏幕比较大,空间不能充分利用的问题,但现在即使只是在手机上,也有很多的场景可以运用到Fragment了,今天我们就来学习其中一个特别棒的应用技巧。

很多手机应用都会有一个非常类似的功能,即屏幕的下方显示一行Tab标签选项,点击不同的标签就可以切换到不同的界面,如以下几个应用所示:

             Android使用Fragment实现TabHost效果_www.fengfly.com    Android使用Fragment实现TabHost效果_www.fengfly.com    Android使用Fragment实现TabHost效果_www.fengfly.com
 

上面三个应用从左到右分别是QQ、新浪微博和支付宝钱包,可见,这种底部标签式的布局策略真的非常常见。

那么话说回来,这种效果到底是如何的呢?熟悉Android的朋友一定都会知道,很简单嘛,使用TabHost就OK了!但是殊不知,TabHost并非是那么的简单,它的可扩展性非常的差,不能随意地定制Tab项显示的内容,而且运行还要依赖于ActivityGroup。ActivityGroup原本主要是用于为每一个TabHost的子项管理一个单独的Activity,但目前已经被废弃了。为什么呢?当然就是因为Fragment的出现了!查看Android官方文档中ActivityGroup的描述,如下所示:

        Android使用Fragment实现TabHost效果_www.fengfly.com
 

可以看到,在API 13的时候Android就已经将ActivityGroup废弃掉了,并且官方推荐的替代方式就是使用Fragment,因为它使用起来更加的灵活。那么剩下的问题就是如何借助Fragment来完成类似于TabHost一般的效果了,因此我们自然要动起手来了。

在开始之前,首先你必须已经了解Fragment的用法了,如果你对Fragment还比较陌生的话,建议先去阅读我前面的一篇文章http://www.fengfly.com/plus/view-215089-1.html

另外,我们还应该准备好程序所需要的资源,比如说每一个Tab项中所用到的图片。我已经事先从QQ里截好了几张图作为这个项目的资源,稍后会连同源码一起给出。

新建一个项目,起名就叫FragmentDemo,这里我使用的是4.0的API。
 

下面开始编程工作,这里我们首先需要去编写一个类似于QQ的主界面,当然只会去编写界面最下方的TabHost部分,而不会编写上面的内容界面部分,因为内容界面是应该写在Fragment的布局里的。打开或新建activity_main.xml作为程序的主布局文件,在里面加入如下代码:

  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="@drawable/tab_bg" > 
  17.  
  18.         <RelativeLayout 
  19.             android:id="@+id/message_layout" 
  20.             android:layout_width="0dp" 
  21.             android:layout_height="match_parent" 
  22.             android:layout_weight="1" > 
  23.  
  24.             <LinearLayout 
  25.                 android:layout_width="match_parent" 
  26.                 android:layout_height="wrap_content" 
  27.                 android:layout_centerVertical="true" 
  28.                 android:orientation="vertical" > 
  29.  
  30.                 <ImageView 
  31.                     android:id="@+id/message_image" 
  32.                     android:layout_width="wrap_content" 
  33.                     android:layout_height="wrap_content" 
  34.                     android:layout_gravity="center_horizontal" 
  35.                     android:src="@drawable/message_unselected" /> 
  36.  
  37.                 <TextView 
  38.                     android:id="@+id/message_text" 
  39.                     android:layout_width="wrap_content" 
  40.                     android:layout_height="wrap_content" 
  41.                     android:layout_gravity="center_horizontal" 
  42.                     android:text="消息" 
  43.                     android:textColor="#82858b" /> 
  44.             </LinearLayout> 
  45.         </RelativeLayout> 
  46.  
  47.         <RelativeLayout 
  48.             android:id="@+id/contacts_layout" 
  49.             android:layout_width="0dp" 
  50.             android:layout_height="match_parent" 
  51.             android:layout_weight="1" > 
  52.  
  53.             <LinearLayout 
  54.                 android:layout_width="match_parent" 
  55.                 android:layout_height="wrap_content" 
  56.                 android:layout_centerVertical="true" 
  57.                 android:orientation="vertical" > 
  58.  
  59.                 <ImageView 
  60.                     android:id="@+id/contacts_image" 
  61.                     android:layout_width="wrap_content" 
  62.                     android:layout_height="wrap_content" 
  63.                     android:layout_gravity="center_horizontal" 
  64.                     android:src="@drawable/contacts_unselected" /> 
  65.  
  66.                 <TextView 
  67.                     android:id="@+id/contacts_text" 
  68.                     android:layout_width="wrap_content" 
  69.                     android:layout_height="wrap_content" 
  70.                     android:layout_gravity="center_horizontal" 
  71.                     android:text="联系人" 
  72.                     android:textColor="#82858b" /> 
  73.             </LinearLayout> 
  74.         </RelativeLayout> 
  75.  
  76.         <RelativeLayout 
  77.             android:id="@+id/news_layout" 
  78.             android:layout_width="0dp" 
  79.             android:layout_height="match_parent" 
  80.             android:layout_weight="1" > 
  81.  
  82.             <LinearLayout 
  83.                 android:layout_width="match_parent" 
  84.                 android:layout_height="wrap_content" 
  85.                 android:layout_centerVertical="true" 
  86.                 android:orientation="vertical" > 
  87.  
  88.                 <ImageView 
  89.                     android:id="@+id/news_image" 
  90.                     android:layout_width="wrap_content" 
  91.                     android:layout_height="wrap_content" 
  92.                     android:layout_gravity="center_horizontal" 
  93.                     android:src="@drawable/news_unselected" /> 
  94.  
  95.                 <TextView 
  96.                     android:id="@+id/news_text" 
  97.                     android:layout_width="wrap_content" 
  98.                     android:layout_height="wrap_content" 
  99.                     android:layout_gravity="center_horizontal" 
  100.                     android:text="动态" 
  101.                     android:textColor="#82858b" /> 
  102.             </LinearLayout> 
  103.         </RelativeLayout> 
  104.  
  105.         <RelativeLayout 
  106.             android:id="@+id/setting_layout" 
  107.             android:layout_width="0dp" 
  108.             android:layout_height="match_parent" 
  109.             android:layout_weight="1" > 
  110.  
  111.             <LinearLayout 
  112.                 android:layout_width="match_parent" 
  113.                 android:layout_height="wrap_content" 
  114.                 android:layout_centerVertical="true" 
  115.                 android:orientation="vertical" > 
  116.  
  117.                 <ImageView 
  118.                     android:id="@+id/setting_image" 
  119.                     android:layout_width="wrap_content" 
  120.                     android:layout_height="wrap_content" 
  121.                     android:layout_gravity="center_horizontal" 
  122.                     android:src="@drawable/setting_unselected" /> 
  123.  
  124.                 <TextView 
  125.                     android:id="@+id/setting_text" 
  126.                     android:layout_width="wrap_content" 
  127.                     android:layout_height="wrap_content" 
  128.                     android:layout_gravity="center_horizontal" 
  129.                     android:text="设置" 
  130.                     android:textColor="#82858b" /> 
  131.             </LinearLayout> 
  132.         </RelativeLayout> 
  133.     </LinearLayout> 
  134.  
  135. </LinearLayout> 

这段布局代码虽然有点长,但其实主要就分为两部分。第一个部分就是FrameLayout,这里只是给FrameLayout的id设置成content,并没有在里面添加任何具体的内容,因为具体的内容是要在后面动态进行添加的。第二个部分就是FrameLayout下面的LinearLayout,这个LinearLayout中包含的就是整个类似于TabHost的布局。可以看到,我们将这个LinearLayout又等分成了四份,每一份中都会显示一个ImageView和一个TextView。ImageView用于显示当前Tab的图标,TextView用于显示当前Tab的标题,这个效果就会和QQ非常得类似。

 

既然是等分成了四分,那接下来我们自然要去分别实现四个Fragment和它们的布局了。新建一个message_layout.xml作为消息界面的布局,代码如下所示:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  3.     android:layout_width="match_parent" 
  4.     android:layout_height="match_parent" > 
  5.  
  6.     <LinearLayout 
  7.         android:layout_width="wrap_content" 
  8.         android:layout_height="wrap_content" 
  9.         android:layout_centerInParent="true" 
  10.         android:orientation="vertical" > 
  11.  
  12.         <ImageView 
  13.             android:layout_width="wrap_content" 
  14.             android:layout_height="wrap_content" 
  15.             android:layout_gravity="center_horizontal" 
  16.             android:src="@drawable/message_selected" /> 
  17.  
  18.         <TextView 
  19.             android:layout_width="wrap_content" 
  20.             android:layout_height="wrap_content" 
  21.             android:layout_gravity="center_horizontal" 
  22.             android:padding="10dp" 
  23.             android:text="这是消息界面" 
  24.             android:textSize="20sp" /> 
  25.     </LinearLayout> 
  26.  
  27. </RelativeLayout> 

这个布局就相对简单多了,只是在屏幕的正中央显示一个消息图标,以及一段文字。



本文地址 : http://www.fengfly.com/plus/view-215109-1.html
标签: Android Fragment TabHost
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: