前陣子贞瞒，有個朋友讓我看手機淘寶app 我的淘寶,我的淘寶泪掀，那個可以滑動用戶名。他們公司要用垃环，他要做ios的可是我看到這個效果第一反應(yīng)是邀层，這不就是，android5.0的一個控件嗎晴裹？沒錯就是coordinatorlayout behavior 各種頭部動畫被济，都可以他寫，關(guān)于涧团，hehavior的帖子很多了只磷。我就不在這里介紹了，大家可以隨意百度看解釋泌绣。
我們先看钮追，最終效果圖。有圖有真相阿迈。
雖然有水印元媚，我已經(jīng)盡力了
是不是，有點像苗沧，我必須說明刊棕，我是在源文件基礎(chǔ)上修改來的，這貼出來待逞，原作者的git下載地址 ：githup（雖然這個大牛也一定不會理我甥角，但是做人要有道德）
其實如果你去他的githup看了。你就會發(fā)現(xiàn)我做的工作其實并不對识樱，沒事嗤无，真心不多，我就添加了一個toolbar怜庸，修來原有代碼不超過五行当犯。是不是感覺有了互聯(lián)網(wǎng)，我這種渣渣也能變成了割疾。過程不重要嚎卫，思路很重要。下來我們來看看具體我都修改了那些地方宏榕。
<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:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="@+id/main.imageview.placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/quila2"
android:tint="#11000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9"
/>
//其實這個framelayout 已經(jīng)沒有什么用了驰凛。他的作用就是，一個高度展位担扑，懶了一下恰响，沒有調(diào)整。哈哈哈涌献。
<FrameLayout
android:id="@+id/main.framelayout.title"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom|center_horizontal"
android:background="@color/primary"
android:orientation="vertical"
android:visibility="invisible"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3">
</FrameLayout>
//我添加的一個toolbar 其實就是再貼胚宦，修改了一下
<android.support.v7.widget.Toolbar
android:id="@+id/tools"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/cardview_light_background"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
<LinearLayout
android:id="@+id/main.textview.title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/cardview_light_background"
android:gravity="center"
android:orientation="vertical">
//這里修改的是一個高度，就是這是這里，枢劝，井联，設(shè)置最終的高度，
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="@dimen/image_final_width"
android:layout_height="@dimen/image_final_width"
android:layout_gravity="center_horizontal"
android:src="@drawable/quila"
app:border_color="@android:color/holo_green_dark"
app:border_width="2dp"
/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:behavior_overlapTop="30dp"
android:background="@color/cardview_light_background"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="8dp"
app:contentPadding="16dp">
<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:lineSpacingExtra="8dp"
android:text="@string/lorem"
android:textSize="18sp" />
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
//注意看您旁，我隱藏掉了 toolbar烙常，但是并沒有g(shù)one他，因為還是要讓他鹤盒，占位置蚕脏，讓我的小頭像跟隨
<android.support.v7.widget.Toolbar
android:id="@+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/cardview_light_background"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_anchor="@id/main.framelayout.title"
app:layout_collapseMode="pin"
android:visibility="invisible"
app:theme="@style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="@string/quila_name2"
android:textColor="@android:color/white"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="@dimen/image_width"
android:layout_height="@dimen/image_width"
android:layout_gravity="center_horizontal"
android:src="@drawable/quila"
app:border_color="@android:color/holo_red_dark"
app:border_width="2dp"
app:finalHeight="@dimen/image_final_width"
app:finalYPosition="2dp"
app:layout_behavior="saulmm.myapplication.AvatarImageBehavior"
app:startHeight="2dp"
app:startToolbarPosition="2dp"
app:startXPosition="2dp" />
</android.support.design.widget.CoordinatorLayout>
其實就是一個道理，真亦假時假亦真侦锯，看到的不一定是真實的驼鞭。都是虛幻，哈哈尺碰。也是之前看到挣棕，另一個大牛，寫爆炸android特效經(jīng)常用的亲桥，貫徹他的思路洛心，我才能想到這個偷懶的方法卿吐。講講我的思路:
我們利用原有的toolbar作為脂凶，小頭像的移動依靠原杂，當(dāng)小頭像移動到我們自己添加toolbar的位置的時候早抠，將我們我們的toolbar顯示出來。
有人會提問嘁酿，這尼瑪在逗我嗎？你這樣隱藏顯示的，有什么意義户辫？
原因是這樣的：因為布局的原因。android5.0的toolbar 一定必須是頂層的吧嗤锉。你的所有內(nèi)容都應(yīng)該是在他下面的吧渔欢。按照這個思路，我們就知道瘟忱，其實奥额，為什么沒有隱藏小頭像的原因，那就是访诱，我們把自己toolbar顯示出來就是垫挨，為了壓蓋這原有的小頭像。為了達(dá)到和淘寶的效果一樣触菜，一瞬間掩藏九榔。你會感覺，小頭像是流暢的跑到了toolbar上的其實不然，你松手就會被在AppBarLayout下的toolbar覆蓋掉哲泊。這就是為什么要要這個時候把原本準(zhǔn)備好的小頭像顯示出來的原因剩蟀，如果我解釋的不太清楚，可以看看切威，我的圖片育特，我用綠色邊勾勒的是小頭像是我提前準(zhǔn)備好的那張頭像。
好了其實這些都不是我想說的重點先朦，重點是缰冤，大神寫的這個流暢的，Behavior
好了我需要在粘貼兩個重點的代碼烙无。
private void maybeInitProperties(CircleImageView child, View dependency) {
if (mStartYPosition == 0)
mStartYPosition = (int) (dependency.getY());
if (mFinalYPosition == 0)
mFinalYPosition = (dependency.getHeight() /2);
if (mStartHeight == 0)
mStartHeight = child.getHeight();
if (mStartXPosition == 0)
mStartXPosition = (int) (child.getX() + (child.getWidth() / 2));
if (mFinalXPosition == 0)
mFinalXPosition = ((int) dependency.getWidth() / 2);
if (mStartToolbarPosition == 0)
mStartToolbarPosition = dependency.getY();
if (mChangeBehaviorPoint == 0) {
mChangeBehaviorPoint = (child.getHeight() - mCustomFinalHeight) / (2f * (mStartYPosition - mFinalYPosition));
}
}
看這個代碼的時候我準(zhǔn)備了一張圖片锋谐，雖然有點糙，但是湊合看吧
超級麻煩的手繪圖片
這就是大概一個截酷，邏輯圖片涮拗，說明了。大概要用的幾個屬性值是什么意思迂苛，這里最重點的是這句話
mChangeBehaviorPoint = (child.getHeight() - mCustomFinalHeight) / (2f * (mStartYPosition - mFinalYPosition));
一看就知道三热，他們要比例什么了，
圓圈圈和正方形
簡單解釋一下三幻，一個兩個圓的差值 比矩形的差值還??2 這是要做什么就漾，我看完整個代碼才懂，他是為了念搬。一個位置上做縮放動畫抑堡，讓縮放動畫更加緊湊的一個過程，??2的意思其實就是增加除數(shù)值朗徊，讓這個動畫相應(yīng)位置更加向上一點首妖。必須說，我原本以為是一個爷恳，數(shù)學(xué)表達(dá)式有缆，結(jié)果好像不是的，是一個動畫設(shè)計思路温亲。
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, CircleImageView child, View dependency) {
maybeInitProperties(child, dependency);
final int maxScrollDistance = (int) (mStartToolbarPosition);
float expandedPercentageFactor = dependency.getY() / maxScrollDistance;
if (expandedPercentageFactor < mChangeBehaviorPoint) {
float heightFactor = (mChangeBehaviorPoint - expandedPercentageFactor) / mChangeBehaviorPoint;
float distanceXToSubtract = ((mStartXPosition - mFinalXPosition)
* heightFactor) + (child.getHeight()/2);
float distanceYToSubtract = ((mStartYPosition - mFinalYPosition)
* (1f - expandedPercentageFactor)) + (child.getHeight()/2);
child.setX(mStartXPosition - distanceXToSubtract);
child.setY(mStartYPosition - distanceYToSubtract);
float heightToSubtract = ((mStartHeight - mCustomFinalHeight) * heightFactor);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
lp.width = (int) (mStartHeight - heightToSubtract);
lp.height = (int) (mStartHeight - heightToSubtract);
child.setLayoutParams(lp);
} else {
float distanceYToSubtract = ((mStartYPosition - mFinalYPosition)
* (1f - expandedPercentageFactor)) + (mStartHeight/2);
child.setX(mStartXPosition - child.getWidth()/2);
child.setY(mStartYPosition - distanceYToSubtract);
CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
lp.width = (int) (mStartHeight);
lp.height = (int) (mStartHeight);
child.setLayoutParams(lp);
}
return true;
}
重點代碼
if (expandedPercentageFactor < mChangeBehaviorPoint)
一個if搞定了全世界棚壁，if后面的是小頭像縮放功能的已經(jīng)X、Y軸的移動栈虚。else是處理袖外，還原大小和位置移動的僅僅是Y軸的。
就這樣魂务，所有的工作都做完了在刺。我不知道第一次的表達(dá)逆害，是不是夠清楚，其實源碼沒有修改什么蚣驼，如果需要我可以魄幕，上傳，重點是颖杏，是原作者的思路纯陨。
我修改后的源碼
馬上準(zhǔn)備 ios的類似源碼分析，努力做到留储，ios和android一起跑著玩的節(jié)奏翼抠。希望能帶節(jié)奏。
