編輯:關於Android編程
上一篇中我們介紹了幾個簡單的新UI控件,相信很多小伙伴對Materil Design的視覺效果有了一定的了解,今天我們就繼續介紹其他幾個控件的玩兒法,讓我們一探Materil Design的究竟,我們先來看一下我們今天要介紹的CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout及TabLayout, ok,我們接下來就逐一對這些控件進行解析,揭開他們神秘的面紗,來為我們服務,Let’s Go.
我們先來看官方的介紹:
TabLayout是一個提供展示 tabs 的橫向的layout;Tabs的實例是通過TabLayout.Tab
獲取的,你可以通過調用newTab()
來實現,你同時可以調用setText(CharSequence text)
和setIcon(int)
來改變tab的名稱及圖標;如果你想要展示這些tabs,就需要調用addTab(Tab)
了,示例代碼:
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
你需要設置一個setOnTabSelectedListener(OnTabSelectedListener)
來監聽每個tab被選中時狀態改變的回調;如果你在你的layout裡面使用了viewpager
的話,你就需要調用setupWithViewPager(ViewPager)
來將二者進行綁定,這個layout會將viewpager的標題和內容進行自動填充;
當然,你也可以直接在布局文件中添加TabItem
來進行展示,示例代碼:
我們經常會將viewpager與fragment結合使用來實現如圖所示的效果,一般我們可能會使用viewpagerindicator開源框架來實現,如下圖效果:
不過現在有了TabLayout
,我們就可以直接使用谷歌原生的控件來實現這個效果,我們一般還是會和viewpager結合使用,我們先看效果圖:<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjxpbWcgYWx0PQ=="" src="https://www.android5.online/Android/UploadFiles_5356/201702/2017022312150515.jpg" title="\" />
1 xml文件中配置(只貼出核心代碼)
2 在代碼中將二者綁定(只貼出核心代碼)
mViewpager.setAdapter(new MyCusAdapter(fm));
mTablayout.setTabMode(TabLayout.MODE_FIXED);
mTablayout.setupWithViewPager(mViewpager);
注意: mTabLayout
在設置Tab模式時,有兩個值,一個是TabLayout.MODE_FIXED
,一個是TabLayout.MODE_SCROLLABLE
,我們先來看一下官方對這兩個值得解釋
其實就是一句話來解釋,MODE_SCROLLABLE
適合很多tabs的情況,MODE_FIXED
是固定標簽適合不是很多tab說的情況,默認為MODE_FIXED;我們通過兩張圖就可以很明顯的看出來二者的區別,左側為MODE_SCROLLABLE
,右側為MODE_FIXED
GitHub地址點我,相關代碼在項目中包tablayout
下
我們先來看一下關於CoordinatorLayout的官方解釋:
CoordinatorLayout是一個強大的FrameLayout CoordinatorLayout有兩個主要的應用方向:CoordinatorLayout is a super-powered FrameLayout.
CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views
其實CoordinatorLayout只是一個從另一層面去控制子view之間觸摸事件的布局而已,可以實現不同的視覺滾動效果,我們接下來通過幾個簡單的示例來說明CoordinaLayout的作用;
我們知道,當有SnackbarSnackbar可以顯示在其他UI組件的上面,不過我們可以讓FloatingActionButton不被Snackbar覆蓋,,當Snackbar出現時,FloatingActionButton上移,Snackbar消失時,FloatingActionButton下移。我們可以看一下不使用CoordinatorLayout與使用之間的區別,左圖是不使用的時候Snackbar彈出時候的效果, 右圖為使用的時候Snackbar彈出時候的效果:
我們平時在代碼中使用起來也很簡單,只要使用CoordinatorLayout作為基本布局,將自動產生向上移動的動畫。浮動操作按鈕有一個 默認的 behavior來檢測Snackbar的添加並讓按鈕在Snackbar之上呈現上移與Snackbar等高的動畫。
小貼士:FloatingActionButton.Behavior
: It’s main function is to move FloatingActionButton views so that any displayed Snackbars do not cover them.
代碼示例:
裡面有兩個屬性我們可能不太熟悉,設置app:layout_anchor和app:layout_anchorGravity是為了構建出特定的位置與效果的FloatingActionButton。
app:layout_anchor - 設置FAB的錨點,即以哪個控件為參照點設置位等 app:layout_anchorGravity - 設置FAB相對錨點的位置,值有 bottom、center、right、left、top等最後, 在我們構造Snackbar時, 我們需要把CoordinatorLayout作為View參數傳遞過去, 如下所示:
Snackbar.make(mCoordinator, "Snackbar show", Snackbar.LENGTH_SHORT).show();
大家也可以看GitHub寫的demo地址點我,對應的類為CoordinatorLayoutFloatingActivity
現在手機屏越來越大,大家對於屏的要求也越來越高了。如果你沒有Android 手機或者是平板電腦,那麼你僅是Windows 用戶,也可以在Wind
java 代碼如下(簡單的知識點我會以注釋的形式講解):package com.gc.gridviewdemo; /** * @author Android將軍 */
SimpleAdapter,跟名字一樣,一個簡單的適配器,既為簡單,就只是被設計來做簡單的應用的,比如靜態數據的綁定,不過仍然有自定義的空間,比如說在每一個ListIte
安裝Java開發工具包(JDK)的必要組件http://www.oracle.com/technetwork/java/javase/downloads/jdk8-dow