本文的最終效果如下：
頭像動畫.gif
頭像動畫的實現(xiàn)主要是利用了appbarLayout的AppBarLayout.OnOffsetChangedListener接口實現(xiàn)的措伐，頭像和姓名及sexView是兩個線性的布局特纤。通過監(jiān)聽appbar的移動，算出appbar距離的變化率侥加。用appbar距離的變化率作為兩個線性布局的padding的變化率和頭像大小縮放的變化率捧存。
1.先看布局文件吧
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="225dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin"/>
<com.campussay.modules.user.index.view.SlideView
android:id="@+id/stuff_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:collapsedPadding="52dp">
<ImageView
android:id="@+id/profile"
android:layout_width="@dimen/default_expanded_image_size"
android:layout_height="@dimen/default_expanded_image_size"
android:fitsSystemWindows="true"
android:layout_gravity="center"/>
</com.campussay.modules.user.index.view.SlideView>
<com.campussay.modules.user.index.view.SlideView
android:id="@+id/stuff_container1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedPadding="100dp">
<TextView
android:id="@+id/name"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center"
android:text="houlucky"
android:textColor="#FFFFFF"
android:textSize="16sp"
style="@style/text_shadow"/>
<ImageView
android:id="@+id/sex_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@mipmap/boy"/>
</com.campussay.modules.user.index.view.SlideView>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="@+id/linear_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="170dp"
android:layout_gravity="top">
<TextView
android:id="@+id/follows_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="@string/follows"
android:textColor="#FFFFFF"
android:textSize="12sp"
style="@style/text_shadow"/>
<TextView
android:id="@+id/follows_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="12sp"
style="@style/text_shadow"/>
<View
android:layout_width="0.5dp"
android:layout_height="10dp"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
android:layout_marginTop="3dp"
android:background="#FFFFFF"/>
<TextView
android:id="@+id/fans_key"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="@string/fans"
android:textColor="#FFFFFF"
android:textSize="12sp"
style="@style/text_shadow"/>
<TextView
android:id="@+id/fans_value"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FFFFFF"
android:textSize="12sp"
style="@style/text_shadow"/>
</LinearLayout>
<TextView
android:id="@+id/role"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/linear_layout"
android:layout_gravity="top"
android:layout_marginBottom="13dp"
android:layout_marginTop="190dp"
android:background="@drawable/text_view_bg"
android:paddingBottom="3dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="3dp"
android:textColor="#FFFFFF"
android:textSize="11sp"
style="@style/text_shadow"/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:theme="@style/AppTheme"
app:tabIndicatorColor="@color/userIndexTabIndicatorColor"
app:tabSelectedTextColor="@color/userIndexTabSelectedTextColor"
app:tabTextColor="@color/userIndexTabTextColor"/>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:background="#FFFFFF"
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="test">
<attr name="collapsedPadding" format="dimension" />
<attr name="expandedPadding" format="dimension" />
<attr name="collapsedImageSize" format="dimension" />
<attr name="expandedImageSize" format="dimension" />
</declare-styleable>
</resources>
上面布局文件中的SlideView就是我們的自定義的可以隨appbar的滑動而滑動的view
2.SlideView.java
package com.campussay.modules.user.index.view;
/**
* Created by Houxy on 2016/7/29.
*/
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.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.campussay.R;
public class SlideView extends LinearLayout implements AppBarLayout.OnOffsetChangedListener{
private View avatarView;
private TextView titleView;
private float collapsedPadding;
private float expandedPadding;
private float expandedImageSize;
private float collapsedImageSize;
private boolean valuesCalculatedAlready = false;
private Toolbar toolbar;
private AppBarLayout appBarLayout;
private float toolBarHeight;
private float expandedHeight;
private float maxOffset;
public SlideView(Context context) {
this(context, null);
init();
}
public SlideView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.test);
try {
collapsedPadding = a.getDimension(R.styleable.test_collapsedPadding, -1);
expandedPadding = a.getDimension(R.styleable.test_expandedPadding, -1);
collapsedImageSize = a.getDimension(R.styleable.test_collapsedImageSize, -1);
expandedImageSize = a.getDimension(R.styleable.test_expandedImageSize, -1);
} finally {
a.recycle();
}
final Resources resources = getResources();
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 (collapsedPadding < 0) {
collapsedPadding = resources.getDimension(R.dimen.default_collapsed_padding);
}
if (expandedPadding < 0) {
expandedPadding = resources.getDimension(R.dimen.default_expanded_padding);
}
}
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
}
}
//此方法在onDraw方法之前調(diào)用，也就是view還沒有畫出來的時候担败，可以在此方法中去執(zhí)行一些初始化的操作
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();
}
private View findAvatar() {
View avatar = null;
if(getChildAt(0) instanceof ImageView)
avatar = getChildAt(0);
return avatar;
}
private TextView findTitle() {
TextView title = null;
if(getChildAt(0) instanceof TextView){
title = (TextView) getChildAt(0);
}
return title;
}
@NonNull //使用@NonNull注解修飾的參數(shù)不能為null
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() {
toolBarHeight = toolbar.getHeight();
expandedHeight = appBarLayout.getHeight() - toolbar.getHeight();
maxOffset = expandedHeight;
//使控件處在居中的位置
//expandedPadding 布局最開始距離左側(cè)的padding
if( avatarView != null){
expandedPadding = (appBarLayout.getWidth() - expandedImageSize) / 2;
}else if(titleView != null){
expandedPadding = (appBarLayout.getWidth() - titleView.getWidth() ) / 2;
}
}
//expandHeight appbar的最大移動距離
//toolBarHeight 固定在頂上的toolbar的高度
//expandedPercentage 1-0 inversePercentage 0-1
//collapsed 折疊時的 //expanded 展開時的念祭，初始的
private void updateViews(float expandedPercentage, int currentOffset) {
float inversePercentage = 1 - expandedPercentage;
float translation = -currentOffset + ((float) toolbar.getHeight() * expandedPercentage);
float currHeight = 0;
if (avatarView != null) {
currHeight = toolBarHeight + (expandedHeight - toolBarHeight ) / 4 * expandedPercentage;
} else if (titleView != null) {
currHeight = toolBarHeight +( expandedHeight - toolBarHeight / 2) * expandedPercentage;
}
float currentPadding = expandedPadding + (collapsedPadding - expandedPadding) * inversePercentage;
float currentImageSize = collapsedImageSize + (expandedImageSize - collapsedImageSize) * expandedPercentage;
setContainerOffset(translation);
setContainerHeight((int) currHeight);
setPadding((int) currentPadding);
setAvatarSize((int) currentImageSize);
}
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 setAvatarSize(int currentImageSize) {
if (avatarView != null) {
avatarView.getLayoutParams().height = currentImageSize;
avatarView.getLayoutParams().width = currentImageSize;
}
}
}
首先鼠渺，我們用SlideVIew繼承自LinearLayout并實現(xiàn)AppBarLayout.OnOffsetChangedListener接口趁窃，在接口onOffsetChanged(AppBarLayout appBarLayout, int offset)回調(diào)函數(shù)中旋廷，通過updateViews();更新SlideView的Y方向的位移，更新SlideView的高度狈网，更新SlideVIew的padding宙搬，如果SlideView里有ImageView則更新ImageView的大小
初始.png
移動中.png
圖中的黑色方塊就是我們自定義的SlideView，隨著SlideView的滑動SlideView里的圖片也隨著移動拓哺，并且圖片慢慢變小通過設(shè)置圖片的layout_gravity使圖片始終處于SlideView的居中位置害淤，又設(shè)置SlideVIew的padding使圖片有了一個向左移動的效果，下面的名字和性別的圖片位于同一個SlideView拓售，移動的方式同上面的頭像窥摄。但通過設(shè)置他們高度的不同使下面的名字顯示位置和上面的頭像不同。
注意：ViewPager的根布局要設(shè)置為NestedScrollView础淤，否則不能實現(xiàn)聯(lián)動的效果崭放。
Demo地址：https://github.com/houlucky/SlideViewDemo
歡迎StarＩ诳痢！１疑啊建峭！
