首頁-底部&頂部Tab導航(選單欄)的實現:TabLayout+ViewPager+Fragment
前言
Android開發中使用頂部 & 底部Tab導航欄的頻次非常高,主要的實現手段有以下:
- TabWidget
- 隱藏TabWidget,使用RadioGroup和RadioButton
- FragmentTabHost
- 5.0以後的TabLayout
- 最近推出的 Bottom navigation
在上一篇我介紹瞭如何使用(Fragment+FragmentTabHost++ViewPager)
實現底部選單欄,詳情請看
今天我手把手教大家如何使用TabLayout+ViewPager+Fragment的組合來實現頂部和底部Tab導航欄,
目錄
1. 概念介紹
1.1 TabLayout
- 定義:實現Material Design效果的控制元件庫(Android Design Support Library);
- 作用:用於實現點選選項進行切換選項卡的自定義效果(5.0可用)
1.2 ViewPager
- 定義:ViewPager是android擴充套件包v4包中的類
- 作用:左右切換當前的view,實現滑動切換的效果。
注:
1.ViewPager類直接繼承了ViewGroup類,和LinearLayout等佈局一樣,都是一個容器,需要在裡面新增我們想要顯示的內容。
2.ViewPager類需要PagerAdapter介面卡類提供資料,與ListView類似 3.Google官方建議ViewPager配合Fragment使用
具體使用請參考我寫的另外一篇文章:Android開發:ViewPage的介紹
1.3 Fragment
定義:Fragment是activity的介面中的一部分或一種行為
1.把Fragment認為模組化的一段activity
2.它具有自己的生命週期,接收它自己的事件,並可以在activity執行時被新增或刪除
3.Fragment不能獨立存在,它必須嵌入到activity中,而且Fragment的生命週期直接受所在的activity的影響。例如:當activity暫停時,它擁有的所有的Fragment們都暫停了,當activity銷燬時,它擁有的所有Fragment們都被銷燬。作用:支援更動態、更靈活的介面設計(從3.0開始引入)
2. 總體設計思路
- TabLayout:點選切換選項卡
- Fragment:存放不同選項的頁面內容
- ViewPager:實現頁面的左右滑動效果
3. 實現步驟
利用(TabLayout+ViewPager+Fragment)實現頂部&底部Tab導航欄的步驟一共有6個:
- 步驟1:新增依賴
- 步驟2:建立需要的Fragment佈局檔案(需要多少個Tab選項,就建多少個Fragment)
- 步驟3:建立Fragment對應的Activity類
- 步驟4:定義介面卡Adapter
- 步驟5:定義主佈局activity_main.xml檔案
- 步驟6:定義MainActivity類
4. Demo實戰
4.1 效果圖(醜是為了讓大家更好地理解各個屬性設定~~)
4.3 工程目錄
4.3 具體實現
接下來大家和我一步步去實現吧!!
強烈建議大家先去Carson_Ho的Github:Top&Bottom_tabbar去下載完整Demo,這樣看效果會更好哦!
步驟1:在Gradle中新增依賴
//TabLayout
compile 'com.android.support:support-v4:23.4.0'
compile 'com.android.support:design:23.4.0'
//ViewPage
android.support.v4.view.ViewPager
步驟2:建立需要的Fragment佈局檔案(需要多少個Tab選項,就建多少個Fragment,這裡以4個舉例)
fragment1.xml(一共4個,這裡只寫出一個)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Fragment1"/>
</RelativeLayout>
步驟3:建立Fragment對應的Activity類
Fragment1(一共4個,這裡只寫出一個)
package com.example.carson_ho.toptabbar;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by Carson_Ho on 16/7/22.
*/
public class Fragment1 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment1, container, false);
}
}
步驟4:定義介面卡Adapter類
這裡的適配的作用是將Fragment與ViewPager進行適配
MyFragmentPagerAdapter.java
package com.example.carson_ho.toptabbar;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
/**
* Created by Carson_Ho on 16/7/22.
*/
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private String[] mTitles = new String[]{"首頁", "發現", "進貨單","我的"};
public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
if (position == 1) {
return new Fragment2();
} else if (position == 2) {
return new Fragment3();
}else if (position==3){
return new Fragment4();
}
return new Fragment1();
}
@Override
public int getCount() {
return mTitles.length;
}
//ViewPager與TabLayout繫結後,這裡獲取到PageTitle就是Tab的Text
@Override
public CharSequence getPageTitle(int position) {
return mTitles[position];
}
}
步驟5:定義主佈局activity_main.xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="100p"
//導航欄背景顏色
android:background="#ffff00"
//指示器顏色
app:tabIndicatorColor="#66ff33"
//指示器高度
app:tabIndicatorHeight="20p"
//普通狀態下文字的顏色
app:tabTextColor="@color/colorPrimary"
//選中時文字的顏色
app:tabSelectedTextColor="#CC33FF"
//是否可滑動:fixed:固定;scrollable:可滑動
app:tabMode="fixed"
//設定選項卡的背景:此處要寫一個selector)
app:tabBackground="@drawable/selected"
//設定字型大小:此處要寫一個style) app:tabTextAppearance="@style/MyTabLayoutTextAppearance"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
selected.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@color/colorPrimary"/> <item android:drawable="@color/c1olorAccent"/></selector>
style.xml
<style name="MyTabLayoutTextAppearance" parent="TextAppearance.AppCompat.Widget.ActionBar.Title"> <item name="android:textSize">5sp</item> <item name="android:textColor">@color/c1olorAAA</item></style>
步驟6:定義MainActivity
MainActivity.Java
package com.example.carson_ho.toptabbar;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
private TabLayout mTabLayout;
private ViewPager mViewPager;
private MyFragmentPagerAdapter myFragmentPagerAdapter;
private TabLayout.Tab one;
private TabLayout.Tab two;
private TabLayout.Tab three;
private TabLayout.Tab four;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getSupportActionBar().hide();//隱藏掉整個ActionBar
setContentView(R.layout.activity_main);
//初始化檢視
initViews();
}
private void initViews() {
//使用介面卡將ViewPager與Fragment繫結在一起
mViewPager= (ViewPager) findViewById(R.id.viewPager);
myFragmentPagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());
mViewPager.setAdapter(myFragmentPagerAdapter);
//將TabLayout與ViewPager繫結在一起
mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.setupWithViewPager(mViewPager);
//指定Tab的位置
one = mTabLayout.getTabAt(0);
two = mTabLayout.getTabAt(1);
three = mTabLayout.getTabAt(2);
four = mTabLayout.getTabAt(3);
//設定Tab的圖示,假如不需要則把下面的程式碼刪去
one.setIcon(R.mipmap.ic_launcher);
two.setIcon(R.mipmap.ic_launcher);
three.setIcon(R.mipmap.ic_launcher);
four.setIcon(R.mipmap.ic_launcher);
}
}
4.4 效果圖(醜是為了讓大家更好地理解各個屬性設定~~)
4.5 底部Tab導航欄實現
實現了頂部Tab導航欄,該如何實現底部Tab導航欄實現呢?很簡單!只需要在上面步驟5:定義主佈局activity_main.xml中將TabLayout和ViewPager的位置交換就可以了!如下圖:
步驟5:定義主佈局activity_main.xml
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="100p"
//導航欄背景顏色
android:background="#ffff00"
//指示器顏色
app:tabIndicatorColor="#66ff33"
//指示器高度
app:tabIndicatorHeight="20p"
//普通狀態下文字的顏色
app:tabTextColor="@color/colorPrimary"
//選中時文字的顏色
app:tabSelectedTextColor="#CC33FF"
//是否可滑動:fixed:固定;scrollable:可滑動
app:tabMode="fixed"
//設定選項卡的背景:此處要寫一個selector)
app:tabBackground="@drawable/selected"/>
</LinearLayout>
效果圖
5. 完整Demo下載地址
6. 總結
本文對利用Google最新的控制元件庫TabLayout實現頂部&底部Tab導航欄進行了全面的講解,接下來我會繼續介紹Android開發中的相關知識,有興趣可以繼續關注Carson_Ho的安卓開發筆記
請點贊!因為你的鼓勵是我寫作的最大動力!
不定期分享關於安卓開發的乾貨,追求短、平、快,但卻不缺深度。
相關推薦
首頁-底部&頂部Tab導航(選單欄)的實現:TabLayout+ViewPager+Fragment
前言 Android開發中使用頂部 & 底部Tab導航欄的頻次非常高,主要的實現手段有以下: TabWidget 隱藏TabWidget,使用RadioGroup和RadioButton FragmentTabHost 5.0以後的TabLayou
首頁-底部Tab導航(選單欄)的實現:FragmentTabHost+ViewPager+Fragment
前言 Android開發中使用底部選單欄的頻次非常高,主要的實現手段有以下: - TabWidget - 隱藏TabWidget,使用RadioGroup和RadioButton - FragmentTabHost - 5.0以後的TabLay
還原淘寶首頁最頂部的導航欄(含下拉選單,圖示等)
還原了淘寶首頁最頂部的導航欄,包括了各個導航的下拉列表等(位置對齊稍微有些偏差,畢竟沒有原版設計圖),用到了jquery,js,CSS3等知識。沒有花時間去做錄屏GIF,就幾張效果圖看下:如下 原始導航欄進去後如上圖,當滑鼠劃過後下拉選單出現,本身的背景色改變等。如下: 上圖為區域選擇,每
關於easyui的許可權,不同的使用者登入顯示不同的顯示不同的樹(選單欄)
有關easyui中的許可權--就是不同的使用者登入之後你左邊的選單才會顯示出不同選單欄,這裡和大家簡單說一下思路: 下面是我的資料庫設計:我分為三張表: 使用者表 角色表 許可權表 還有就是關係表(我畫了一個簡單的圖)、 1.資料庫建立: 然後如圖(資料庫我用的是my
Virtual Box 工具欄(選單欄)消失的解決方法
現在Virtual Box非常牛逼(不排除Oracle又準備像Java SE那樣跳出來收費),可以相容Hyper-v,VWare。所以我就從Vware轉到Virtual Box了 右Ctrl+C 原理: 當然了主機鍵可以自己定義: 以後可以自由切換的 擴充: 工具欄,狀態列顯示
Android仿今日頭條首頁的頂部標籤欄和底部導航欄
//主頁 public class MainActivity extends AppCompatActivity implements View.OnClickListener { //初始化fragment private HomePageFragment mHomePageFragment; pr
android使用Viewpager和TabLayout結合fragment實現首頁底部導航的效果
前言 現如今幾乎每一款手機APP首頁都採用了底部導航的功能,現在我們使用Viewpager和TabLayout結合fragment來實現該功能。 效果圖如下: 這裡有一個問題,TabLayout的五個icon在模擬器中寬度無法充滿螢幕,暫時還不知道為什麼,手機能夠正
微信小程式tab導航+滾動頂部吸附效果(開發例項)
<!-- scroll導航欄 --> <view class='scrollBox2 fix-news' wx:if="{{fixTop<scrollTop}}"&g
【京東商城首頁實戰2】導航條製作(1)
接下來,開始製作京東的導航條。效果如下圖: 圖1 業務分析: 1.通欄盒子,並且有背景顏色 2.有版心。 3.版心裡面包含左右浮動的兩個盒子。 4.有下拉效果的盒子後面,有三角形標誌。 5.右邊的盒子裡麵包含幾個li標籤。 分析完之後,對整個
網站首頁(含菜單欄)實現
range sub sea light odin charset ctype settime hide <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="
mui框架如何在首頁使用側滑導航
menu dex tail 導航 javascrip dcloud style 針對 老版本 說明:這是針對老版本hello mui的一篇說明;mui 0.7.1之後,Hello mui已在首頁增加了側滑導航示例,可直接參考。 很多同學直接拷貝Hello mui中的
安卓頂部tab導航欄的實現
市面上許多APP都有頂部導航欄效果:下面我們自己來實現這個效果 首先我們先實現頂部導航條的佈局 頂部導航欄: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sc
淘淘商城系列(五)—— 首頁輪播圖展示(一)
首頁輪播圖展示 taotao-portal-web工程中,動態展示內容資訊。 前端團隊:負責JS,html等開發。 後端團隊:負責後臺的開發並提供資料給前端。 1、功能分析 只需要動態生成一個json資料,輪播圖就可以動態展示: taotao-portal
TabLayout+ViewPager+Fragment實現頂部或底部導航欄
以前看慕課網的教程,寫過一個微信Tab選項卡切換的例子,使用的是ViewPager+Fragment來實現的,說實話,當時為了實現一些效果,還是寫了蠻多的程式碼,但是,今天介紹的TabLayout+ViewPager+Fragment實現導航欄可以使用很少的程式
Windows 遠端桌面連線ubuntu的一些小問題(遠端桌面閃退、連線失敗、tab補全功能,無選單欄)
可以修改會話設定 :將最大會話限制該大 MaxSessions=50; 將KillDisconnected=1;則每次斷開連線時,linux都會關閉會話程序。 然後重啟/etc/init.d/xrdp restart 就可解決問題
Android之高仿今日頭條、網易新聞首頁動態改變tab
前言: 專案需要一個類似今日頭條或者網易新聞首頁動態改變tab(頻道欄目)的功能,進過一番折騰,目前已實現該功能。 先看看效果圖: 思路: 1,關於tab欄目橫著滑動功能控制元件的選擇,這裡我採用的Horizontal
bootstrap-導航(垂直分組)
bootstrap-導航(垂直分組)1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
bootstrap-導航(基礎樣式)
bootstrap-導航(基礎樣式)1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
網頁導航菜單的子菜單平鋪(帶背景欄)實現
body hover 動態設置 ive 要求 解決方案 滿了 gpo 位置 - 之前給公司做的一個小型知識庫管理網站時遇到一個問題,在這裏記錄下解決的過程。 公司的美工要求首頁導航菜單 要跟他們公司的網站風格保持一致,如圖所示 (子菜單是平鋪的)
瀏覽器主頁劫持,開啟就訪問889hao,2345導航(已解決)
RT,前幾天碰到了臺電腦,開啟瀏覽器就劫持訪問889hao。 系統是win10 x64,瀏覽器是360安全瀏覽器、IE瀏覽器,其他沒裝不清楚。 按以往經驗,逐一排查: 檢查瀏覽器主頁設定,設百度為首頁。主頁已經是百度,但是開啟瀏覽器還是訪問889hao,點主頁