AppBarLayout.OnOffsetChangedListener的使用

如果没听说过AppBarLayout.OnOffsetChangedListener，那么就先看这里：
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0616/3052.html

我在项目中的使用：

Java代码  


import android.content.Context;  
import android.content.res.Resources;  
import android.content.res.TypedArray;  
import android.support.annotation.NonNull;  
import android.support.design.widget.AppBarLayout;  
import android.support.v7.widget.Toolbar;  
import android.util.AttributeSet;  
import android.util.TypedValue;  
import android.view.View;  
import android.view.ViewGroup;  
import android.view.ViewParent;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
  
/** 
 * CollapsingAvatarToolbar必须在AppBarLayout里面，被CollapsingToolbarLayout包裹。 
    CollapsingAvatarToolbar必须有个Toolbar伴随，如果你不想使用Toolbar，我们可以讨论讨论。 
    扩展高度（Expanded height） 取决于AppBarLayout的高度。 
    折叠高度（Collapsed height ）取决于Toolbar的高度。 
    你必须在CollapsingAvatarToolbar里面设置头像（avatar）和标题视图（ title view），且id必须喝上面演示的完全一致。这些id事library里面的。（所以是@而不是@＋）。 
    你可以使用任意TextView作为title，以及任意view作为头像，我这里的例子用的是hdodenhof的CircleImageView ，但是这取决于你自己。 
    你也可以添加更多view到CollapsingAvatarToolbar里面。 
    所有的自定义属性都是可选的，如果没有提供就使用默认的 。 
 * @author Administrator 
 *  @see http://www.jcodecraeer.com/a/opensource/2015/0830/3385.html 
 */  
public class CollapsingAvatarToolbar extends LinearLayout implements AppBarLayout.OnOffsetChangedListener {  
  
    private View avatarView;  
    private TextView titleView;  
  
    private float collapsedPadding;  
    private float expandedPadding;  
  
    private float expandedImageSize;  
    private float collapsedImageSize;  
  
    private float collapsedTextSize;  
    private float expandedTextSize;  
  
    private boolean valuesCalculatedAlready = false;  
    private Toolbar toolbar;  
    private AppBarLayout appBarLayout;  
    private float collapsedHeight;  
    private float expandedHeight;  
    private float maxOffset;  
  
    public CollapsingAvatarToolbar(Context context) {  
        this(context, null);  
        init();  
    }  
  
    public CollapsingAvatarToolbar(Context context, AttributeSet attrs) {  
        super(context, attrs);  
        init();  
  
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CollapsingAvatarToolbar, 0, 0);  
  
        try {  
            collapsedPadding = a.getDimension(R.styleable.CollapsingAvatarToolbar_collapsedPadding, -1);  
            expandedPadding = a.getDimension(R.styleable.CollapsingAvatarToolbar_expandedPadding, -1);  
  
            collapsedImageSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_collapsedImageSize, -1);  
            expandedImageSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_expandedImageSize, -1);  
  
            collapsedTextSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_collapsedTextSize, -1);  
            expandedTextSize = a.getDimension(R.styleable.CollapsingAvatarToolbar_expandedTextSize, -1);  
        } finally {  
            a.recycle();  
        }  
  
        final Resources resources = getResources();  
        if (collapsedPadding < 0) {  
            collapsedPadding = resources.getDimension(R.dimen.default_collapsed_padding);  
        }  
        if (expandedPadding < 0) {  
            expandedPadding = resources.getDimension(R.dimen.default_expanded_padding);  
        }  
        if (collapsedImageSize < 0) {  
            collapsedImageSize = resources.getDimension(R.dimen.default_collapsed_image_size);  
        }  
        if (expandedImageSize < 0) {  
            expandedImageSize = resources.getDimension(R.dimen.default_expanded_image_size);  
        }  
        if (collapsedTextSize < 0) {  
            collapsedTextSize = resources.getDimension(R.dimen.default_collapsed_text_size);  
        }  
        if (expandedTextSize < 0) {  
            expandedTextSize = resources.getDimension(R.dimen.default_expanded_text_size);  
        }  
    }  
  
    private void init() {  
        setOrientation(HORIZONTAL);  
    }  
  
    @NonNull  
    private AppBarLayout findParentAppBarLayout() {  
        ViewParent parent = this.getParent();  
        if (parent instanceof AppBarLayout) {  
            return ((AppBarLayout) parent);  
        } else if (parent.getParent() instanceof AppBarLayout) {  
            return ((AppBarLayout) parent.getParent());  
        } else {  
            throw new IllegalStateException("Must be inside an AppBarLayout");   
            //TODO actually, a collapsingtoolbar  
        }  
    }  
  
    protected void onAttachedToWindow() {  
        super.onAttachedToWindow();  
        findViews();  
        if (!isInEditMode()) {  
            appBarLayout.addOnOffsetChangedListener(this);  
        } else {  
            setExpandedValuesForEditMode();  
        }  
    }  
  
    private void setExpandedValuesForEditMode() {  
        calculateValues();  
        updateViews(1f, 0);  
    }  
  
    private void findViews() {  
        appBarLayout = findParentAppBarLayout();  
        toolbar = findSiblingToolbar();  
        avatarView = findAvatar();  
        titleView = findTitle();  
    }  
  
    @NonNull  
    private View findAvatar() {  
        View avatar = this.findViewById(R.id.cat_avatar);  
        if (avatar == null) {  
            throw new IllegalStateException("View with id ta_avatar not found");  
        }  
        return avatar;  
    }  
  
    @NonNull  
    private TextView findTitle() {  
        TextView title = (TextView) this.findViewById(R.id.cat_title);  
        if (title == null) {  
            throw new IllegalStateException("TextView with id ta_title not found");  
        }  
        return title;  
    }  
  
    @NonNull  
    private Toolbar findSiblingToolbar() {  
        ViewGroup parent = ((ViewGroup) this.getParent());  
        for (int i = 0, c = parent.getChildCount(); i < c; i++) {  
            View child = parent.getChildAt(i);  
            if (child instanceof Toolbar) {  
                return (Toolbar) child;  
            }  
        }  
        throw new IllegalStateException("No toolbar found as sibling");  
    }  
  
    @Override  
    public void onOffsetChanged(AppBarLayout appBarLayout, int offset) {  
        if (!valuesCalculatedAlready) {  
            calculateValues();  
            valuesCalculatedAlready = true;  
        }  
        float expandedPercentage = 1 - (-offset / maxOffset);  
        updateViews(expandedPercentage, offset);  
    }  
  
    private void calculateValues() {  
        collapsedHeight = toolbar.getHeight();  
        expandedHeight = appBarLayout.getHeight() - toolbar.getHeight();  
        maxOffset = expandedHeight;  
    }  
  
    private void updateViews(float expandedPercentage, int currentOffset) {  
        float inversePercentage = 1 - expandedPercentage;  
        float translation = -currentOffset + ((float) toolbar.getHeight() * expandedPercentage);  
  
        float currHeight = collapsedHeight + (expandedHeight - collapsedHeight) * expandedPercentage;  
        float currentPadding = expandedPadding + (collapsedPadding - expandedPadding) * inversePercentage;  
        float currentImageSize = collapsedImageSize + (expandedImageSize - collapsedImageSize) * expandedPercentage;  
        float currentTextSize = collapsedTextSize + (expandedTextSize - collapsedTextSize) * expandedPercentage;  
  
        setContainerOffset(translation);  
        setContainerHeight((int) currHeight);  
        setPadding((int) currentPadding);  
        setAvatarSize((int) currentImageSize);  
        setTextSize(currentTextSize);  
    }  
  
    private void setContainerOffset(float translation) {  
        this.setTranslationY(translation);  
    }  
  
    private void setContainerHeight(int currHeight) {  
        this.getLayoutParams().height = currHeight;  
    }  
  
    private void setPadding(int currentPadding) {  
        this.setPadding(currentPadding, 0, 0, 0);  
    }  
  
    private void setTextSize(float currentTextSize) {  
        titleView.setTextSize(TypedValue.COMPLEX_UNIT_PX, currentTextSize);  
    }  
  
    private void setAvatarSize(int currentImageSize) {  
        avatarView.getLayoutParams().height = currentImageSize;  
        avatarView.getLayoutParams().width = currentImageSize;  
    }  
}  

attr.xml

Xml代码  


<?xml version="1.0" encoding="utf-8"?>  
<resources>  
      
    <declare-styleable name="CollapsingAvatarToolbar">  
        <attr name="collapsedPadding" format="dimension" />  
        <attr name="expandedPadding" format="dimension" />  
        <attr name="collapsedImageSize" format="dimension" />  
        <attr name="expandedImageSize" format="dimension" />  
        <attr name="collapsedTextSize" format="dimension" />  
        <attr name="expandedTextSize" format="dimension" />  
    </declare-styleable>  
  
</resources>  

ids.xml

Xml代码  


<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <item name="cat_avatar" type="id"></item>  
    <item name="cat_title" type="id"></item>  
</resources>  

使用，伪代码：

Xml代码  


<android.support.design.widget.AppBarLayout  
            android:id="@+id/appbar"  
            android:layout_width="match_parent"  
            android:layout_height="200dp"  
            android:fitsSystemWindows="true"  
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >  
  
            <!-- 如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中： -->  
            <!-- 通常，我们我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。 -->  
            <!-- 给需要有折叠效果的组件设置 layout_collapseMode属性 -->  
            <!-- Toolbar 的高度layout_height必须固定，不能 “wrap_content”，否则Toolbar不会滑动，也没有折叠效果 -->  
            <!-- app:contentScrim="?attr/colorPrimary"用于设置收缩的时候Toolbar自动变化到普通的颜色 -->  
            <!-- app:titleEnabled="false"用于设置是否显示title，默认为显示-->  
            <android.support.design.widget.CollapsingToolbarLayout  
                android:id="@+id/collapsingToolbarLayout"  
                android:layout_width="match_parent"  
                android:layout_height="match_parent"  
                app:layout_scrollFlags="scroll|exitUntilCollapsed"  
                android:fitsSystemWindows="true"  
                app:contentScrim="?attr/colorPrimary"  
                app:expandedTitleMarginEnd="64dp"  
                app:expandedTitleMarginStart="48dp"   
                app:titleEnabled="false"  
                >  
  
                <!-- 制造视差效果 -->  
                <!-- CollapsingToolbarLayout还能让我们做出更高级的动画，比如在里面放一个ImageView，然后在它折叠的时候渐渐淡出。同时在用户滚动的时候title的高度也会随着改变。 -->  
                <!-- 为了制造出这种效果，我们添加一个定义了app:layout_collapseMode="parallax" 属性的ImageView。 -->  
  
                <ImageView  
                    android:id="@+id/backdrop"  
                    android:layout_width="match_parent"  
                    android:layout_height="match_parent"  
                    app:layout_collapseMode="parallax"  
                    app:layout_collapseParallaxMultiplier="0.7"  
                    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"  
                    android:fitsSystemWindows="true"  
                    android:scaleType="centerCrop"  
                    android:src="@drawable/bg_login" />  
  
                <android.support.v7.widget.Toolbar  
                    android:id="@+id/toolbar"  
                    android:layout_width="match_parent"  
                    android:layout_height="?attr/actionBarSize"  
                    app:layout_collapseMode="pin"  
                    app:layout_scrollFlags="scroll|enterAlways"  
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"  
                    app:titleTextAppearance="@style/TextAppearance.AppCompat.Headline" />  
                  
                <com.widget.view.CollapsingAvatarToolbar  
                    android:layout_width="match_parent"  
                    android:layout_height="?attr/actionBarSize"  
                    android:gravity="center_vertical"  
                    >  
                    <!--   
                    app:collapsedPadding="@dimen/collapsedPadding"  
                      app:expandedPadding="@dimen/expandedPadding"  
                      app:collapsedImageSize="@dimen/collapsedImageSize"  
                      app:expandedImageSize="@dimen/expandedImageSize"  
                      app:collapsedTextSize="@dimen/collapsedTextSize"  
                      app:expandedTextSize="@dimen/expandedTextSize"  
                     -->  
  
                    <ImageView  
                        android:id="@id/cat_avatar"  
                        android:layout_width="wrap_content"  
                        android:layout_height="wrap_content"  
                        android:src="@drawable/face"   
                        android:background="@drawable/default_face_bg"  
                         android:padding="4dp"  
                        />  
  
                    <TextView  
                        android:id="@id/cat_title"  
                        android:layout_width="wrap_content"  
                        android:layout_height="wrap_content"  
                        android:textColor="@android:color/holo_blue_dark"  
                        android:text="Name" />  
                </com.widget.view.CollapsingAvatarToolbar>  
                  
            </android.support.design.widget.CollapsingToolbarLayout>  
        </android.support.design.widget.AppBarLayout>