AppBarLayout.OnOffsetChangedListener的使用
如果没听说过AppBarLayout.OnOffsetChangedListener，那么就先看这里：
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0616/3052.html
我在项目中的使用：
attr.xml
ids.xml
使用，伪代码：
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0616/3052.html
我在项目中的使用：
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 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 version="1.0" encoding="utf-8"?>
<resources>
<item name="cat_avatar" type="id"></item>
<item name="cat_title" type="id"></item>
</resources>
使用，伪代码：
<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>