如果没听说过AppBarLayout.OnOffsetChangedListener,那么就先看这里:
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0616/3052.html
我在项目中的使用:
attr.xml
ids.xml
使用,伪代码:
https://github.com/hugeterry/CoordinatorTabLayout
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>
https://github.com/hugeterry/CoordinatorTabLayout