摘要:通過設置子的來調度子。如下澀郎的介紹是在開始推出的一個風格的導航控件,非常推薦大家使用來作為客戶端的導航欄,以此來取代之前的。提供一個水平布局來顯示選項卡。
效果對比圖特別喜歡稀土掘金個人界面的樣子,那我們就來看看如何實現這個效果吧,要想實現這個效果,肯定需要的是Material Design風格,那就需要學會使用以下控件:CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout等,如果你做出這個效果來,那這些控件你就基本掌握了。
介紹之前,我們先來看看效果對比圖:
稀土掘金app原圖 模仿的效果圖 CoordinatorLayout的介紹CoordinatorLayout作為“super-powered FrameLayout”基本實現兩個功能:
作為頂層布局
調度協調子布局
CoordinatorLayout使用新的思路通過協調調度子布局的形式實現觸摸影響布局的形式產生動畫效果。CoordinatorLayout通過設置子View的 Behaviors來調度子View。系統(Support V7)提供了AppBarLayout.Behavior, AppBarLayout.ScrollingViewBehavior, FloatingActionButton.Behavior, SwipeDismissBehavior
使用CoordinatorLayout需要在Gradle加入Support Design Library:
compile "com.android.support:design:22.2.1"
具體的怎么協調子控件的,建議大家看下面的參考文章,寫的非常好,看完你就基本明白了:
https://segmentfault.com/a/1190000005024216?utm_source=Weibo&utm_medium=shareLink&utm_campaign=socialShare&from=singlemessage&isappinstalled=0
AppBarLayout 是一個豎直排列的線性布局,它實現了很多Material Design風格app bar的設計概念,換句話說就是滾動手勢。
在AppBarLayout里面的View,通過app:layout_scrollFlags屬性來控制,滾動時候的表現。其中有4種Flag的類型。
scroll: this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen
enterAlways: this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern
enterAlwaysCollapsed: When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top.
exitUntilCollapsed: this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting
我們的例子中用的是 scroll 和 exitUntilCollapsed。
翻譯的比較爛,英文好的,看上面的英文解釋。
Scroll: 表示向下滾動時,這個View會被滾出屏幕范圍直到隱藏.
enterAlways: 表示向上滾動時,這個View會隨著滾動手勢出現,直到恢復原來的位置.
enterAlwaysCollapsed: 顧名思義,這個flag定義的是何時進入(已經消失之后何時再次顯示)。假設你定義了一個最小高度(minHeight)同時enterAlways也定義了,那么view將在到達這個最小高度的時候開始顯示,并且從這個時候開始慢慢展開,當滾動到頂部的時候展開完。
exitUntilCollapsed: 同樣顧名思義,這個flag時定義何時退出,當你定義了一個minHeight,這個view將在滾動到達這個最小高度的時候消失。
所以我們就在AppBarLayout里面的CollapsingToolbarLayout進行了如下設置:
記住:我們剛才上面也說了AppBarLayout是一個豎直方向的線性布局,如果里面包含多個子View時,要想有折疊動畫效果,必須把帶有scroll flag的view放在前面,這樣收回的view才能讓正常退出,而固定的view繼續留在頂部。
CollapsingToolbarLayout的介紹CollapsingToolbarLayout作用是提供了一個可以折疊的Toolbar,它繼承至FrameLayout,給它設置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。它是設計用于直接AppBarLayout的子視圖。
CollapsingToolbarLayout的子View中可以設置這兩個屬性
ayout_collapseMode (折疊模式) - 有兩個值:
pin - 設置為這個模式時,當CollapsingToolbarLayout完全收縮后,Toolbar還可以保留在屏幕上。
parallax - 設置為這個模式時,在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果,通常和layout_collapseParallaxMultiplier(設置視差因子)搭配使用。
layout_collapseParallaxMultiplier(視差因子) - 設置視差滾動因子,值為:0~1。
關于CollapsingToolbarLayout幾個屬性的介紹app:collapsedTitleTextAppearance 這是在收縮時Title文字特點外形的設置
app:expandedTitleTextAppearance 同理這是在展開時Title文字特點外形的設置
app:contentScrim 這是toolbar 標題工具欄停留在頂部時候背景的設置
app:expandedTitleMarginStart 設置擴張時候(還沒有收縮時)title向左填充的距離
app:expandedTitleMarginEnd 這個同理是收縮結束時向左填空的距離
其他的就不一一介紹了,具體的去查看API文檔即可獲知。
我在做這里的時候遇到一個問題,那就是CollapsingToolbarLayout里的Title的問題,一般默認是顯示的,即使你不寫,它也有會一個默認值一直顯示在那里,等折疊收縮完的時候,停留在標題工具欄上。怎么消除這個默認值呢?怎么知道收縮完成了,再把這個值設置出來呢?這里我對AppBarLayout設置了一個監聽,它有一個監聽方法:addOnOffsetChangedListener監聽折疊收縮的位移。如下:
app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (verticalOffset <= -head_layout.getHeight() / 2) { mCollapsingToolbarLayout.setTitle("澀郎"); } else { mCollapsingToolbarLayout.setTitle(" "); } } });Toolbar的介紹
Toolbar 是在 Android 5.0 開始推出的一個 Material Design 風格的導航控件 ,Google 非常推薦大家使用 Toolbar 來作為Android客戶端的導航欄,以此來取代之前的 Actionbar 。與 Actionbar 相比,Toolbar 明顯要靈活的多。它不像 Actionbar 一樣,一定要固定在Activity的頂部,而是可以放到界面的任意位置。除此之外,在設計 Toolbar 的時候,Google也留給了開發者很多可定制修改的余地,這些可定制修改的屬性在API文檔中都有詳細介紹,如:
設置導航欄圖標;
設置App的logo;
支持設置標題和子標題;
支持添加一個或多個的自定義控件;
支持Action Menu;
Toolbar的具體使用方法,我在這里就不過多的贅述了,學習的點太多了,簡單介紹完了,我給大家推薦兩篇參考學習使用的文章就行了,寫的很詳細和完整,之前我們公眾號也推送過D_clock寫的文章。
學習參考文章:
http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1118/2006.html
http://www.jianshu.com/p/79604c3ddcae#rd
TabLayout的介紹毫無疑問,TabLayout也是Material Design設計風格,當然也是5.0以后出來的。TabLayout提供一個水平布局來顯示選項卡。TabLayout一般都是配合ViewPager一起來使用。TabLayout設置Tab標簽有兩種方法如下:
第一種TabLayout tabLayout = ...; tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));第二種
TabLayout的坑
使用TabLayout有個坑,這個坑如果一般用戶不知道,解決起來比較麻煩,當然看到這篇文章的人有福了,因為你找到解決方法。
如果設計的需求不要求選項卡在切換時附帶有圖標的切換效果,僅僅文字的顏色發生變化以響應用戶的點擊事件,那么TabLayout和ViewPager建立聯系可以用官方提供的方法,它可以做到交互雙向聯動,也就是點擊tab,viewpager就會去變動,滑動viewpager,tab也會自動變。相互建立聯系的方法如下:
setupWithViewPager(ViewPager viewPager)
如果選項卡里帶有圖標或者僅僅只有圖標時就麻煩了,那個選項卡會變得什么都沒有了。解決方法其實很簡單就是不使用上面的方法,而且這樣用:
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(tabLayout)); tabLayout.setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));
其實這個setupWithViewPager(ViewPager viewPager)方法,跟進到源碼里,你可以看到,就是調用了上面的兩種方式。
全部代碼 布局代碼到這里基本就講完了,全部的布局代碼如下:
Activity中的代碼
package com.loonggg.coordinatorlayoutdemo; import android.annotation.SuppressLint; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.drawable.BitmapDrawable; import android.support.design.widget.AppBarLayout; import android.support.design.widget.CollapsingToolbarLayout; import android.support.design.widget.TabLayout; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.LinearLayout; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private LinearLayout head_layout; private TabLayout toolbar_tab; private ViewPager main_vp_container; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); AppBarLayout app_bar_layout = (AppBarLayout) findViewById(R.id.app_bar_layout); Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(mToolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mToolbar.setNavigationOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onBackPressed(); } }); head_layout = (LinearLayout) findViewById(R.id.head_layout); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.bg); head_layout.setBackgroundDrawable(new BitmapDrawable(BlurUtil.fastblur(this, bitmap, 180))); //使用CollapsingToolbarLayout必須把title設置到CollapsingToolbarLayout上,設置到Toolbar上則不會顯示 final CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); mCollapsingToolbarLayout.setContentScrim(new BitmapDrawable(BlurUtil.fastblur(this, bitmap, 180))); app_bar_layout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { @Override public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { if (verticalOffset <= -head_layout.getHeight() / 2) { mCollapsingToolbarLayout.setTitle("澀郎"); } else { mCollapsingToolbarLayout.setTitle(" "); } } }); Toolbar.OnMenuItemClickListener onMenuItemClick = new Toolbar.OnMenuItemClickListener() { @Override public boolean onMenuItemClick(MenuItem menuItem) { String msg = ""; switch (menuItem.getItemId()) { case R.id.webview: msg += "博客跳轉"; break; case R.id.weibo: msg += "微博跳轉"; break; case R.id.action_settings: msg += "設置"; break; } if (!msg.equals("")) { Toast.makeText(MainActivity.this, msg, Toast.LENGTH_SHORT).show(); } return true; } }; mToolbar.setOnMenuItemClickListener(onMenuItemClick); toolbar_tab = (TabLayout) findViewById(R.id.toolbar_tab); main_vp_container = (ViewPager) findViewById(R.id.main_vp_container); ViewPagerAdapter vpAdapter = new ViewPagerAdapter(getSupportFragmentManager(), this); main_vp_container.setAdapter(vpAdapter); main_vp_container.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(toolbar_tab)); toolbar_tab.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(main_vp_container)); //tablayout和viewpager建立聯系為什么不用下面這個方法呢?自己去研究一下,可能收獲更多 //toolbar_tab.setupWithViewPager(main_vp_container); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } }
源碼下載地址:https://github.com/loonggg/CoordinatorLayoutDemo
記得star一下哦。
公眾號:非著名程序員(smart_android) 歡迎大家關注,每天一篇原創技術文章。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/65935.html
摘要:原圖加載毛玻璃的效果比較快,你的這個打開白屏好幾秒。這就是系列第六篇之系列之,等。這個系列的講解和實例都會整理在一個里,的地址去吧,我會慢慢完善的。 這篇文章其實我一直在想,是寫還是不寫,因為關于講 CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,Toolbar,TabLayout 等這些控件的使用,以前寫過一篇,那就是《通...
閱讀 1173·2021-09-27 13:34
閱讀 981·2021-09-13 10:25
閱讀 511·2019-08-30 15:52
閱讀 3450·2019-08-30 13:48
閱讀 648·2019-08-30 11:07
閱讀 2167·2019-08-29 16:23
閱讀 1993·2019-08-29 13:51
閱讀 2327·2019-08-26 17:42