MaterialDesign系列文章（七）AppbarLayout的使用

時間  2019-11-16
標籤 materialdesign 系列 文章 appbarlayout 使用 简体版
原文   原文鏈接

你們好我是筆墨Android，曾經的我老是迷茫的，不知道怎麼學習纔是最好的！可是最近我聽到我對一句話，對我特別又感觸 作好如今能作的，你會慢慢的發現你在改變！ 誰都有改變本身的權力，就看你是否想要去改變！其實咱們天天只要作一點點的改變，會從量到質改變！今天說的有些寒酸了，可是自從我開始認真的寫博客，我發現個人生活正慢慢改變着！android

此圖片來源於網絡

今天聊點什麼呢？上篇文章講到了MaterialDesign系列文章（六）CoordinatorLayout的一些聯動，其中提到了不少關於MaterialDesign的控件，可是隻是一筆帶過了，沒有具體的分析，爲了讓小夥伴們能更好的理解！因此我以爲有必要單獨講講每一控件！今天就先從AppBarLayout開始吧！程序員

本文知識點：

  • AppBarLayout是什麼？能用來幹什麼？
  • AppBarLayout的一些使用案例。

1.AppBarLayout是什麼？能用來幹什麼？

AppBarLayout is a vertical LinearLayout which implements many of the features of material designs app bar concept, namely scrolling gestures.Children should provide their desired scrolling behavior through setScrollFlags(int) and the associated layout xml attribute: app:layout_scrollFlags.This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.bash

我用人話翻譯一下啊！AppBarLayout繼承LinearLayout，能夠響應用戶的手勢操做，可是必須在CoordinatorLayout下使用，不然會有許多功能使用不了。網絡

其實說到AppBarLayout你能想到什麼？其實最開始我想到也只有聯動，沒有別的，可是關於AppBarLayout的聯動你真的知道嗎？相信看了上一篇文章的人都會以爲，AppBarLayout老是和TabLayout，CollapsingToolbarLayout聯動。其實AppBarLayout的用處遠遠不止這些？還有的就是套路。。。app

2. AppBarLayout的使用！

相信看了上一篇文章的小夥伴都知道了AppBarLayout怎麼和CoordinatorLayout、CollapsingToolbarLayout、TabLayout聯動，每每AppBarLayout的出現頻率和CoordinatorLayout、CollapsingToolbarLayout、TabLayout時同樣的，也就是說基本上講的都是它們怎麼聯動！可是其實Toolbar不是非要和他們連用的。它能夠本身和本身玩。。。並且玩的還很開心！當你無聊的時候你能夠拿他當豎直的LinearLayout使用，心情好了你能夠和CoordinatorLayout、TabLayout一塊兒用。像我這種既無聊又心情好的時候我就本身玩。哈哈，扯遠了。讓咱們看看它是怎麼自(｡･∀･)ﾉﾞ嗨的吧！先來一張效果圖...ide

錄得很差多見諒

其實你仔細看看這個效果是否是很常見的吸頂效果！這種效果在電商的首頁比較多見。其實也是很好實現的，這裏簡單拿佈局說一下吧！佈局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jinlong.newmaterialdesign.material.AppBarLayoutActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#e79349"
            android:gravity="center"
            android:scaleType="center"
            android:text="這裏能夠放ViewPager"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            app:layout_scrollFlags="scroll" />

        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv_tab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="20dp"
            android:overScrollMode="never"
            android:scrollbars="none"
            app:layout_scrollFlags="scroll" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="#009988"
            android:gravity="center"
            android:text="這裏時須要吸頂的效果內容，能夠是任何內容的"
            android:textColor="@android:color/white" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">


        <LinearLayout
            android:id="@+id/ll_bottom"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="500dp"
                android:gravity="center"
                android:text="底部還有內容啊！！！" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#009988"
                android:gravity="center"
                android:text="標籤1" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#002288"
                android:gravity="center"
                android:text="標籤2" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#009922"
                android:gravity="center"
                android:text="標籤3" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#00aa88"
                android:gravity="center"
                android:text="標籤4" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="#999988"
                android:gravity="center"
                android:text="標籤5" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
複製代碼

這個內容主要是依託於app:layout_scrollFlags="scroll"來實現一些你想要的效果，你能夠設置不一樣的佈局，來獲得你想要的內容！post

重點來了！！！ AppBarLayout的監聽，以前在文章中講到AppBarLayout和CoordinatorLayout、CollapsingToolbarLayout、TabLayout聯動的問題，今天測試來了提出一個問題，說聯動的時候標題的文字，說聯動時候的那個動畫太難看，作簡單一點，直接漸變的顯示多好！學習

而後我就默默的掏出了手機，打開付款嗎，來你先掃一下咱倆在繼續說！！！結果人家真的掃了，不過給我我一分錢。。。當時我是崩潰的，可是話都說出去了。別鼓掌，要臉。。。接下來就有下面的內容了！其實AppBarLayouot是有關於這個監聽的，沒有的話我也不會這麼就答應了，小哥哥是不打沒有準備的仗的！哈哈。。。測試

AppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                //偏移量的計算
            }
        });
複製代碼

這個監聽，給咱們返回了響應的滑動變化量，咱們能夠根據總高度，而後根據變化量算出一個比例，就能夠很好的計算出應該設置的透明度了！其實有了這個偏移量加個什麼動畫也是能夠的嘛！請你們冥想一分鐘，看看有沒有思路。立刻給出答案。。。。先來張圖走一波！

這個效果進攻娛樂，只是設置了TextView的旋轉屬性從而進行計算，只是給你們帶來個思路，因此別局限於我講的內容，要融匯貫通！

AppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

                //這個是計算App bar Layout的總高度的API
                int totalScrollRange = appBarLayout.getTotalScrollRange();

                float ratio = Math.abs((float) verticalOffset / totalScrollRange);

                mTvTitle.setRotation(ratio * 360);
            }
        });
複製代碼

圖片效果僅供娛樂

這裏有一點要說明一下，就是有關於滑動方向的，向上滑動爲負值。向下滑動爲正值。因此這裏使用的是絕對值進行計算的。還有一點就是剛開始進來的時候會走一次回調，計算出來的結果是0，因此設置透明度的時候，應該注意這裏。由於整體的比值不會大於1，因此剛開始的時候你要是想看見它的，設置透明度的取反就能夠了也就是 (1-比值) 就能夠了！代碼是這樣的！

mAbl.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {

                //這個是計算App bar Layout的總高度的API
                int totalScrollRange = appBarLayout.getTotalScrollRange();

                float ratio = Math.abs((float) verticalOffset / totalScrollRange);

                mTvTitle.setAlpha(1 - ratio);

                Log.e(TAG, "onOffsetChanged: " + ratio + "---" + verticalOffset);
            }
        });
複製代碼

就不上圖了，具體看大家的需求了。咱們當時的需求就是，Toolbar在上面，所有摺疊的時候才顯示出來。要是處於打開狀態的話就不現實！和這個大同小異，只要你算比如值就能夠了！在給大家點福利！

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener {
 
    public enum State {
        EXPANDED,
        COLLAPSED,
        IDLE
    }
 
    private State mCurrentState = State.IDLE;
 
    @Override
    public final void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (i == 0) {
            if (mCurrentState != State.EXPANDED) {
                onStateChanged(appBarLayout, State.EXPANDED);
            }
            mCurrentState = State.EXPANDED;
        } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
            if (mCurrentState != State.COLLAPSED) {
                onStateChanged(appBarLayout, State.COLLAPSED);
            }
            mCurrentState = State.COLLAPSED;
        } else {
            if (mCurrentState != State.IDLE) {
                onStateChanged(appBarLayout, State.IDLE);
            }
            mCurrentState = State.IDLE;
        }
    }
 
    public abstract void onStateChanged(AppBarLayout appBarLayout, State state);
}
複製代碼
mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
            @Override
            public void onStateChanged(AppBarLayout appBarLayout, State state) {
                Log.d("STATE", state.name());
                if( state == State.EXPANDED ) {
                    
                    //展開狀態
                    
                }else if(state == State.COLLAPSED){
                    
                    //摺疊狀態
                     
                }else {
                
                    //中間狀態
                
                }
            }
        });
複製代碼

這個是判斷AppBarLayout展開於摺疊狀態的。怎麼用我就不說了！今天的分享就到這裏吧！內容很少，但願你們過一個愉快的週末！！！做爲程序員的咱們週末多出去溜達一下，找找妹子，單身狗的世界是沒有色彩的。。。

說兩句題外話，我以爲學習這個東西，應該有本身的體系。其實我也總在想，怎麼寫文章大家才能記住，包括我本身也是，有的時候用的話也要回來看看博客才能想起一些內容的用法。最近有小夥伴說文章太多了，看不完。其實我也在想，怎麼才能最簡單的把這些內容介紹給你們！簡短的怕你不理解，太長的怕你看不完...但願小夥盤們提出大家的想法，我會及時改進的！！！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程