現在Fragment的應用真的是越來越廣泛了，之前Android在3.0版本加入Fragment的時候，主要是為了解決Android Pad螢幕比較大，空間不能充分利用的問題，但現在即使只是在手機上，也有很多的場景可以運用到Fragment了，今天我們就來學習其中一個特別棒的應用技巧。

很多手機應用都會有一個非常類似的功能，即螢幕的下方顯示一行Tab標籤選項，點選不同的標籤就可以切換到不同的介面，如以下幾個應用所示：

                     

上面三個應用從左到右分別是QQ、新浪微博和支付寶錢包，可見，這種底部標籤式的佈局策略真的非常常見。

那麼剩下的問題就是如何藉助Fragment來實現Tab標籤欄，因此我們自然要動起手來了。

新建一個專案，起名就叫FragmentDemo，這裡我使用的是4.0的API。

下面開始程式設計工作，這裡我們首先需要去編寫一個類似於QQ的主介面，當然只會去編寫介面最下方的Tab欄部分，而不會編寫上面的內容介面部分，因為內容介面是應該寫在Fragment的佈局裡的。開啟或新建activity_main.xml作為程式的主佈局檔案，在裡面加入如下程式碼：

1. <LinearLayoutxmlns: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.     <FrameLayout
6.         android:id="@+id/content"
7.         android:layout_width="match_parent"
8.         android:layout_height="0dp"
9.         android:layout_weight="1">
10.     </FrameLayout>
11.     <LinearLayout
12.         android:layout_width="match_parent"
13.         android:layout_height="60dp"
14.         android:background="@drawable/tab_bg">
15.         <RelativeLayout
16.             android:id="@+id/message_layout"
17.             android:layout_width="0dp"
18.             android:layout_height="match_parent"
19.             android:layout_weight="1">
20.             <LinearLayout
21.                 android:layout_width="match_parent"
22.                 android:layout_height="wrap_content"
23.                 android:layout_centerVertical="true"
24.                 android:orientation="vertical">
25.                 <ImageView
26.                     android:id="@+id/message_image"
27.                     android:layout_width="wrap_content"
28.                     android:layout_height="wrap_content"
29.                     android:layout_gravity="center_horizontal"
30.                     android:src="@drawable/message_unselected"/>
31.                 <TextView
32.                     android:id="@+id/message_text"
33.                     android:layout_width="wrap_content"
34.                     android:layout_height="wrap_content"
35.                     android:layout_gravity="center_horizontal"
36.                     android:text="訊息"
37.                     android:textColor="#82858b"/>
38.             </LinearLayout>
39.         </RelativeLayout>
40.         <RelativeLayout
41.             android:id="@+id/contacts_layout"
42.             android:layout_width="0dp"
43.             android:layout_height="match_parent"
44.             android:layout_weight="1">
45.             <LinearLayout
46.                 android:layout_width="match_parent"
47.                 android:layout_height="wrap_content"
48.                 android:layout_centerVertical="true"
49.                 android:orientation="vertical">
50.                 <ImageView
51.                     android:id="@+id/contacts_image"
52.                     android:layout_width="wrap_content"
53.                     android:layout_height="wrap_content"
54.                     android:layout_gravity="center_horizontal"
55.                     android:src="@drawable/contacts_unselected"/>
56.                 <TextView
57.                     android:id="@+id/contacts_text"
58.                     android:layout_width="wrap_content"
59.                     android:layout_height="wrap_content"
60.                     android:layout_gravity="center_horizontal"
61.                     android:text="聯絡人"
62.                     android:textColor="#82858b"/>
63.             </LinearLayout>
64.         </RelativeLayout>
65.         <RelativeLayout
66.             android:id="@+id/news_layout"
67.             android:layout_width="0dp"
68.             android:layout_height="match_parent"
69.             android:layout_weight="1">
70.             <LinearLayout
71.                 android:layout_width="match_parent"
72.                 android:layout_height="wrap_content"
73.                 android:layout_centerVertical="true"
74.                 android:orientation="vertical">
75.                 <ImageView
76.                     android:id="@+id/news_image"
77.                     android:layout_width="wrap_content"
78.                     android:layout_height="wrap_content"
79.                     android:layout_gravity="center_horizontal"
80.                     android:src="@drawable/news_unselected"/>
81.                 <

    相關推薦

    標籤欄主介面實現（一）

    現在Fragment的應用真的是越來越廣泛了，之前Android在3.0版本加入Fragment的時候，主要是為了解決Android Pad螢幕比較大，空間不能充分利用的問題，但現在即使只是在手機上，也有很多的場景可以運用到Fragment了，今天我們就來學習其中一個

    unity3d5.1物體橢圓旋轉選擇介面實現（一）

      偶然在群裡看到有人拿了一張橢圓物體旋轉選擇介面來問怎麼實現（也不知道這樣描述對不對，反正是橢圓的，而且還是旋轉的，類似於關卡和角色選擇），於是 想了下自己寫了一個類似的功能，方法可能不是很完美，但是也算是一個思路吧，就當練練手熟悉unity。原圖如下： 附自己

    android介面設計（一）側邊欄的兩種實現方式

    dome：https://github.com/linliangliang/sidebar 一、使用slideingMenu結合fragment實現。 二、使用Navigation和DrawerLayout實現。 第二種實現方式：https://mp.csdn.net/postedit/

    RxDataSources與TableView實現介面展示（一）

    // ViewController.swift // RxSwiftTest // // Created by travey on 2018/11/5. // Copyright © 2018年 ZhouShijie. All rights reserved. import UIKit

    [Xcode10 實際操作]一、博主領進門-(9)Xcode左側介面介紹（一）

    本文將演示Xcode的左側操作介面。 專案的目錄結構： 應用代理檔案【AppDelegate.swift】 應用代理檔案時系統執行本應用的委託，裡面定義瞭如程式的進入與退出、裝置方向旋轉等眾多全域性方法。 檢視控制器【ViewController.swift】 檢視控制器可以建立和管理檢視，也可以監

    檔案讀寫工具簡單實現（一）之java的UI介面視覺化畫圖/製作

    現在和大家介紹下，我們簡單的介面工具開發，使用者選擇檔案，讀出部分想要檔案內容，滑鼠在大輸入框點選某一行就會顯示在其他輸入框中，然後在其他輸入框修改後內容，點寫入按鈕即可修改並顯示到大輸入框中，且原檔案對應剛剛選的改行內容；大概的介面如下，網路現在原因不能上傳圖片：選擇檔案按

    如何實現同一瀏覽器多個標籤頁之間的通訊（一）——localStorage

    一、localStorage （1）localStorage是什麼？ localStorage物件在修訂過的HTML5規範中作為持久儲存在客戶端資料的方案取代了globalStorage，是Stor

    Android 端天氣預報APP的實現（一）天氣顯示介面之上下滑動

    最近參加了一個小比賽，選了天氣預報APP這個題目，最初選擇它，是想練練網路資料獲取和資料解析方面的知識，後來發現倒是學到了不少介面的東西。下面我來一步步講解一下我是怎麼完成的吧~ 首先，天氣預報最直觀的部分應該就是天氣顯示介面了，這裡，我想做成可以有上下滑動的

    java實現自動化測試介面訪問（一）

    一、前置準備： 二、程式碼實現 1. 使用PostMan輸入訪問的介面，取得需要的欄位，items，和items中repository的欄位id，和full_name（可以自己獲取想要的欄位）

    異步線程池的實現（一）-------具體實現方法

    fun format 測試 路徑 線程池。 用戶體驗 deb tar clas 本篇是這個內容的第一篇，主要是寫:遇到的問題，和自己摸索實現的方法。後面還會有一篇是總結性地寫線程池的相關內容（偏理論的）。 一、背景介紹 朋友的項目開發到一定程度之後，又遇到

    多種排序算法的思路和簡單代碼的實現（一）

    insert i++ 前後端 分享 size quicksort 執行 判斷 clas 就自己簡單的理解了一些排序算法（JAVA）思路和代碼分享給大家：歡迎大家進行交流。 直接插入排序，折半插入排序，冒泡排序，快速排序 1 public class Sort { 2

    Dji Mobile SDK 基礎實現（一）

    n-1 app lba ger print ttl touch事件 釋放 bsp Dji Mobile SDK 基礎實現（一） 本文簡要介紹如何通過調用DJI Mobile SDK，實現獲取和釋放無人機的控制權限、模擬遙控器按鈕控制無人機的飛行、獲取無人機的回傳視頻、獲取無

    實現自定義查詢的數據庫設計及實現（一）

    bre 名稱 審批流程 work 數據庫名 需要 自定義查詢 perm 枚舉 需求 先說一下需求：實現用戶自定義的查詢，用戶可以自定義要查詢的列、自定義條件條件、自定義排序。除了查詢使用外，還可以使用於各個需要根據條件進行約束的業務，如權限； 本設計和實現，很大部分是通過數

    視頻流GPU解碼的實現（一）-基本概念

    bsp 視頻流 class 概念 logs log 視頻 .com 認識 這段時間在實現Gpu的視頻流解碼，遇到了很多的問題。 要想實現ffempg的GPU化，必須要要對ffempg的解碼cou流程有基本的認識才能改造 我在http://www.cnblogs.com/

    MVVM模式解析和在WPF中的實現（一）

    開發 特點 還需 如果 情況下 依次 顯示 尋找 這也 MVVM模式簡介 MVVM是Model、View、ViewModel的簡寫，這種模式的引入就是使用ViewModel來降低View和Model的耦合，說是降低View和Model的耦合。也可以說是是降低界面和邏輯的耦合

    hadoop雲盤client的設計與實現（一）

    white 下一跳 -c 文件 。。 edi track ++ ava 近期在hadoop雲盤client項目。在做這個項目曾經對hadoop是一點都不了解呀，在網

    基於樹莓派（Raspberry Pi）平臺的MQ-2煙霧報警系統以及結合Zabbix監控的實現（一）

    Raspberry Pi Zabbix和嵌入式系統的結合 Python3 樹莓派和MQ-2氣體檢測 一、前期準備 達成目標：   利用Rapberry Pi 驅動MQ-2煙霧報警模塊，對信息進行采集和提取，而後Zabbix監控系統來收集和處理信息采集到的信息。

    基於樹莓派（Raspberry Pi）平臺的智能家居實現（一）----繼電器模塊，DHT11模塊

    Raspberry 繼電器模塊 DHT11溫濕度模塊 智能家居 前言：    ??其實做這個智能家居系統我還是因為學校的畢業設計，距離上篇文章發布已經過去了20多天了，之前想著只是做一個煙霧報警，然後通過Zabbix進行報警，但是通過這20多天的設計，我發現實現報警的功能其

    Android項目實戰（十六）：QQ空間實現（一）—— 展示說說中的評論內容並有相應點擊事件

    con toast short demo append 集合 obj parent 自帶 原文:Android項目實戰（十六）：QQ空間實現（一）—— 展示說說中的評論內容並有相應點擊事件大家都玩QQ空間客戶端，對於每一個說說，我們都可以評論，那麽，對於某一條評論：

    KVM虛擬化的四種簡單網絡模型介紹及實現（一）

    _for only 應該 code eth tun x86_64 信息 dock KVM中的四種簡單網絡模型，分別如下：1、隔離模型：虛擬機之間組建網絡，該模式無法與宿主機通信，無法與其他網絡通信，相當於虛擬機只是連接到一臺交換機上。2、路由模型：相當於虛擬機連接到一臺路由