作者 | chiyidun

地址 | http://www.lxweimin.com/p/3d990193dcfb

0.gif

實現(xiàn)這個效果， 只要關(guān)注幾個點

1.搜索欄伸展和收縮動畫效果實現(xiàn)
2.搜索欄伸展和收縮的時機
3.頂部透明度的漸變

• 搜索欄伸展和收縮動畫效果實現(xiàn)：

private void expand() {
        //設(shè)置伸展狀態(tài)時的布局
        tvSearch.setText("搜索簡書的內(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è)置動畫
        beginDelayedTransition(mSearchLayout);
    }

    private void reduce() {
        //設(shè)置收縮狀態(tài)時的布局
        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è)置動畫
        beginDelayedTransition(mSearchLayout);
    }

    void beginDelayedTransition(ViewGroup view) {
        mSet = new AutoTransition();
        //設(shè)置動畫持續(xù)時間
        mSet.setDuration(300);
       // 開始表演
        TransitionManager.beginDelayedTransition(view, mSet);
    }

其中 mSearchLayout 就是搜索框的布局，只需要動態(tài)設(shè)置一下伸展和收縮的布局大小和其中顯示的文字，剩下的就交給 Transition 吧~ 這樣搜索框就可以來回搖擺了。。

• 搜索欄伸展和收縮的時機：
  觀察一下效果，伸展的時機是當頂部完全蓋住 banner 的時候開始的，收縮的時機是滾動到頂部的時候觸發(fā)。需要我們監(jiān)聽 scllerview 的滾動狀態(tài)。這里的頂部我是用了自定義布局的 toolbar，然后用一個 imageview 代替了 banner。

//scrollview滾動狀態(tài)監(jiān)聽
    mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
        @Override
        public void onScrollChanged() {
            //改變toolbar的透明度
            changeToolbarAlpha();
            //滾動距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時候 且不是伸展狀態(tài) 進行伸展操作
            if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight()  && !isExpand) {
                expand();
                isExpand = true;
            }
            //滾動距離<=0時 即滾動到頂部時  且當前伸展狀態(tài) 進行收縮操作
            else if (mScrollView.getScrollY()<=0&& isExpand) {
                reduce();
                isExpand = false;
            }
        }
    });
}

• 頂部透明度的漸變

private void changeToolbarAlpha() {
    int scrollY = mScrollView.getScrollY();
    //快速下拉會引起瞬間scrollY<0
    if(scrollY<0){
        toolbar.getBackground().mutate().setAlpha(0);
        return;
    }
    //計算當前透明度比率
    float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
    //設(shè)置透明度
    toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
}

注意剛才監(jiān)聽滾動事件的時候調(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滾動狀態(tài)監(jiān)聽
        mScrollView.getViewTreeObserver().addOnScrollChangedListener(new ViewTreeObserver.OnScrollChangedListener() {
            @Override
            public void onScrollChanged() {
                //改變toolbar的透明度
                changeToolbarAlpha();
                //滾動距離>=大圖高度-toolbar高度 即toolbar完全蓋住大圖的時候 且不是伸展狀態(tài) 進行伸展操作
                if (mScrollView.getScrollY() >=ivImg.getHeight() - toolbar.getHeight()  && !isExpand) {
                    expand();
                    isExpand = true;
                }
                //滾動距離<=0時 即滾動到頂部時  且當前伸展狀態(tài) 進行收縮操作
                else if (mScrollView.getScrollY()<=0&& isExpand) {
                    reduce();
                    isExpand = false;
                }
            }
        });
    }

    private void changeToolbarAlpha() {
        int scrollY = mScrollView.getScrollY();
        //快速下拉會引起瞬間scrollY<0
        if(scrollY<0){
            toolbar.getBackground().mutate().setAlpha(0);
            return;
        }
        //計算當前透明度比率
        float radio= Math.min(1,scrollY/(ivImg.getHeight()-toolbar.getHeight()*1f));
        //設(shè)置透明度
        toolbar.getBackground().mutate().setAlpha( (int)(radio * 0xFF));
    }

    private void expand() {
        //設(shè)置伸展狀態(tài)時的布局
        tvSearch.setText("搜索簡書的內(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);
        //開始動畫
        beginDelayedTransition(mSearchLayout);
    }

    private void reduce() {
        //設(shè)置收縮狀態(tài)時的布局
        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);
        //開始動畫
        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);
    }
}