CoordinatoryLayout使用 - 有道词典我的页面模仿

youdao_mine.gif

关键代码

        mAppbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {

            private float mLastOffsetPercent;

            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                float density = getResources().getDisplayMetrics().density;
                Log.d(TAG, "onOffsetChanged: " + verticalOffset + " density:" + density);
                int height = mCollapsing.getHeight();
//                Log.d(TAG, "onOffsetChanged: " + height);


                float offsetPercent = 1 - ((float) (Math.abs(verticalOffset) / density) / 60);

                if (offsetPercent == mLastOffsetPercent) {
                    return;
                }

                // title
                float dimension = 26; // getResources().getDimension(R.dimen.text_title);
                float minDimension = 18;
                mToolbarTitle.setTextSize(minDimension + (dimension - minDimension) * offsetPercent);

                RelativeLayout.LayoutParams lp = ((RelativeLayout.LayoutParams) mToolbarTitle.getLayoutParams());
                int marginTop = ((int) ((30 - 20) * density * offsetPercent));
                lp.setMargins(0, marginTop, 0, 0);
                mToolbarTitle.setLayoutParams(lp);
                //

                // edit
                if (offsetPercent <= 0.1) {
                    mToolbarEdit.setVisibility(View.GONE);
                } else {
                    mToolbarEdit.setVisibility(View.VISIBLE);
                }
                mToolbarEdit.setAlpha(offsetPercent);

                // toolbar
                ViewGroup.LayoutParams toolbarLP = mToolbar.getLayoutParams();
                int toolbarHeight = ((int) ((80 + (110 - 80) * offsetPercent) * density));
                toolbarLP.height = toolbarHeight;
                mToolbar.setLayoutParams(toolbarLP);

                //ImageView
                mIvToolbar.setScaleX(offsetPercent);
                mIvToolbar.setScaleY(offsetPercent);
                mIvToolbar.setAlpha(offsetPercent);


                Log.d(TAG, "onOffsetChanged: offsetPercent" + offsetPercent +
                        "title size:" + dimension + " percent:" + dimension * offsetPercent);
                mLastOffsetPercent = offsetPercent;
            }
        });

xml

value:

value/dimens:

    0dp
    26sp

values-21:

25dp

values-23:

24dp

values/styles:

values-21/styles:

关键点

1. 两个 TextView 和 ImageView 都在 Toolbar 内
2. 利用 AppBarLayout.OnOffsetChangedListener 里面的 verticalOffset 值来动态设置 Toolbar和其内部控件 的布局参数
3. 需要动态改变的参数：Toolbar 的高度，标题 TextView 的字体大小，标题下 TextView 的透明度和是否显示，ImageView 的大小和透明度。