作者 | chiyidun
地址 | http://www.lxweimin.com/p/3d990193dcfb
0.gif
實(shí)現(xiàn)這個(gè)效果， 只要關(guān)注幾個(gè)點(diǎn)
1.搜索欄伸展和收縮動(dòng)畫效果實(shí)現(xiàn)
2.搜索欄伸展和收縮的時(shí)機(jī)
3.頂部透明度的漸變
- 搜索欄伸展和收縮動(dòng)畫效果實(shí)現(xiàn)：
private void expand() {
//設(shè)置伸展?fàn)顟B(tài)時(shí)的布局
tvSearch.setText("搜索簡(jiǎn)書的內(nèi)容和朋友");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = LayoutParams.MATCH_PARENT;
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//設(shè)置動(dòng)畫
beginDelayedTransition(mSearchLayout);
}
private void reduce() {
//設(shè)置收縮狀態(tài)時(shí)的布局
tvSearch.setText("搜索");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = dip2px(80);
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//設(shè)置動(dòng)畫
beginDelayedTransition(mSearchLayout);
}
void beginDelayedTransition(ViewGroup view) {
mSet = new AutoTransition();
//設(shè)置動(dòng)畫持續(xù)時(shí)間
mSet.setDuration(300);
// 開始表演
TransitionManager.beginDelayedTransition(view, mSet);
}
其中 mSearchLayout 就是搜索框的布局，只需要?jiǎng)討B(tài)設(shè)置一下伸展和收縮的布局大小和其中顯示的文字，剩下的就交給 Transition 吧~ 這樣搜索框就可以來回?fù)u擺了。。
- 搜索欄伸展和收縮的時(shí)機(jī)：
觀察一下效果，伸展的時(shí)機(jī)是當(dāng)頂部完全蓋住 banner 的時(shí)候開始的，收縮的時(shí)機(jī)是滾動(dòng)到頂部的時(shí)候觸發(fā)。需要我們監(jiān)聽 scllerview 的滾動(dòng)狀態(tài)。這里的頂部我是用了自定義布局的 toolbar，然后用一個(gè) imageview 代替了 banner。
//scrollview滾動(dòng)狀態(tài)監(jiān)聽
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
//改變toolbar的透明度
changeToolbarAlpha();
//滾動(dòng)距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時(shí)候 且不是伸展?fàn)顟B(tài) 進(jìn)行伸展操作
if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
expand();
isExpand = true;
}
//滾動(dòng)距離<=0時(shí) 即滾動(dòng)到頂部時(shí) 且當(dāng)前伸展?fàn)顟B(tài) 進(jìn)行收縮操作
else if (mScrollView.getScrollY()<=0&& isExpand) {
reduce();
isExpand = false;
}
}
});
}
- 頂部透明度的漸變
private void changeToolbarAlpha() {
int scrollY = mScrollView.getScrollY();
//快速下拉會(huì)引起瞬間scrollY<0
if(scrollY<0){
toolbar.getBackground().mutate().setAlpha(0);
return;
}
//計(jì)算當(dāng)前透明度比率
float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
//設(shè)置透明度
toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
}
注意剛才監(jiān)聽滾動(dòng)事件的時(shí)候調(diào)用 changeToolbarAlpha() 方法，并且需要初始設(shè)置為全透明
toolbar.getBackground().mutate().setAlpha(0);
- 關(guān)鍵代碼
public class MainActivity extends AppCompatActivity {
@Bind(R.id.tv_search)
TextView tvSearch;
@Bind(R.id.ll_search)
LinearLayout mSearchLayout;
@Bind(R.id.scrollView)
ScrollView mScrollView;
boolean isExpand = false;
@Bind(R.id.iv_img)
ImageView ivImg;
@Bind(R.id.toolbar)
Toolbar toolbar;
private TransitionSet mSet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
//設(shè)置全屏透明狀態(tài)欄
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
ViewGroup rootView = (ViewGroup) ((ViewGroup)findViewById(android.R.id.content)).getChildAt(0);
ViewCompat.setFitsSystemWindows(rootView,false);
rootView.setClipToPadding(true);
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS|
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN| View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
getWindow().setStatusBarColor(Color.TRANSPARENT);
}
//設(shè)置toolbar初始透明度為0
toolbar.getBackground().mutate().setAlpha(0);
//scrollview滾動(dòng)狀態(tài)監(jiān)聽
mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
@Override
public void onScrollChanged() {
//改變toolbar的透明度
changeToolbarAlpha();
//滾動(dòng)距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時(shí)候 且不是伸展?fàn)顟B(tài) 進(jìn)行伸展操作
if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight() && !isExpand) {
expand();
isExpand = true;
}
//滾動(dòng)距離<=0時(shí) 即滾動(dòng)到頂部時(shí) 且當(dāng)前伸展?fàn)顟B(tài) 進(jìn)行收縮操作
else if (mScrollView.getScrollY()<=0&& isExpand) {
reduce();
isExpand = false;
}
}
});
}
private void changeToolbarAlpha() {
int scrollY = mScrollView.getScrollY();
//快速下拉會(huì)引起瞬間scrollY<0
if(scrollY<0){
toolbar.getBackground().mutate().setAlpha(0);
return;
}
//計(jì)算當(dāng)前透明度比率
float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
//設(shè)置透明度
toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
}
private void expand() {
//設(shè)置伸展?fàn)顟B(tài)時(shí)的布局
tvSearch.setText("搜索簡(jiǎn)書的內(nèi)容和朋友");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = LayoutParams.MATCH_PARENT;
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//開始動(dòng)畫
beginDelayedTransition(mSearchLayout);
}
private void reduce() {
//設(shè)置收縮狀態(tài)時(shí)的布局
tvSearch.setText("搜索");
RelativeLayout.LayoutParams LayoutParams = (RelativeLayout.LayoutParams) mSearchLayout.getLayoutParams();
LayoutParams.width = dip2px(80);
LayoutParams.setMargins(dip2px(10), dip2px(10), dip2px(10), dip2px(10));
mSearchLayout.setLayoutParams(LayoutParams);
//開始動(dòng)畫
beginDelayedTransition(mSearchLayout);
}
void beginDelayedTransition(ViewGroup view) {
mSet = new AutoTransition();
mSet.setDuration(300);
TransitionManager.beginDelayedTransition(view, mSet);
}
private int dip2px(float dpVale) {
final float scale = getResources().getDisplayMetrics().density;
return (int) (dpVale * scale + 0.5f);
}
}
