美文网首页Android开发经验谈程序员Android知识
CoordinatoryLayout使用 - 有道词典我的页面模

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

作者: Passon_Fang | 来源:发表于2017-12-10 17:47 被阅读124次
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>

关键点

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

相关文章

网友评论

    本文标题:CoordinatoryLayout使用 - 有道词典我的页面模

    本文链接:https://www.haomeiwen.com/subject/ibyvixtx.html