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
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/coordinator_youdao"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.fangmingdong.androiddemo.coordinatorlayout.WangYiYun.YouDaoMineActivity">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_youdao"
android:layout_width="match_parent"
android:layout_height="140dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_youdao"
android:layout_width="match_parent"
android:layout_height="140dp"
app:contentScrim="@android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/cheese_1"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_youdao"
android:layout_width="match_parent"
android:layout_height="110dp"
android:paddingTop="@dimen/status_bar_height"
app:layout_collapseMode="pin">
<!--height: max=110, min=80-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="30dp"
android:text="左眼跳不停"
android:textColor="@android:color/black"
android:textSize="@dimen/text_title"
android:textStyle="bold"/>
<TextView
android:id="@+id/toolbar_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/toolbar_title"
android:paddingTop="8dp"
android:text="查看或编辑个人主页"
android:textSize="12sp"/>
<ImageView
android:id="@+id/iv_toolbar"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:src="@drawable/cheese_1"/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_youdao"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="LinearLayoutManager"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_youdao"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/fab_margin"
android:src="@mipmap/ic_discuss"
app:layout_anchor="@id/appbar_youdao"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
value:
value/dimens:
<resources>
<dimen name="status_bar_height">0dp</dimen>
<dimen name="text_title">26sp</dimen>
</resources>
values-21:
<dimen name="status_bar_height">25dp</dimen>
values-23:
<dimen name="status_bar_height">24dp</dimen>
values/styles:
<!-- Base application theme. -->
<style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
</style>
values-21/styles:
<style name="AppTheme" parent="Base.AppTheme">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">@android:color/transparent</item>
</style>
关键点
- 两个 TextView 和 ImageView 都在 Toolbar 内
- 利用 AppBarLayout.OnOffsetChangedListener 里面的 verticalOffset 值来动态设置 Toolbar和其内部控件 的布局参数
- 需要动态改变的参数：Toolbar 的高度，标题 TextView 的字体大小，标题下 TextView 的透明度和是否显示，ImageView 的大小和透明度。
