CoordinatorLayout实现页面滚动动画效果

前言

• 准确点来说是CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout在一起实现的。类似的文章网上面比较多，不过我需要实现的效果和那些有点不同，下面看效果：
  大概说明一下：整个布局就是一个页面，只是比较长，分为标题一，二，三点击跳转对应高度位置且有滑动监听（没有使用TabLayout+ViewPager，如果需要那种效果，看这里CoordinatorLayout使用详解: 打造折叠悬浮效果）。

代码

• 功能实现的整体代码都比较简单，但还是把所有代码都贴上来吧。看着不要嫌烦🤣

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView mTvGeneralize;
    private TextView mTvStory;
    private TextView mTvGood;
    private LinearLayout mLlDesc1;
    private LinearLayout mLlDesc2;
    private LinearLayout mLlDesc3;
    private AppBarLayout mAppBarLayout;
    private CollapsingToolbarLayout mCollapsingToolbarLayout;
    private NestedScrollView mNestedScrollView;

    @RequiresApi(api = Build.VERSION_CODES.M)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAppBarLayout = findViewById(R.id.appBarLayout);
        mCollapsingToolbarLayout = findViewById(R.id.CollapsingToolbarLayout);
        mTvGeneralize = findViewById(R.id.tv_generalize);
        mTvStory = findViewById(R.id.tv_story);
        mTvGood = findViewById(R.id.tv_good);
        mNestedScrollView = findViewById(R.id.NestedScrollView);
        mLlDesc1 = findViewById(R.id.ll_desc_1);
        mLlDesc2 = findViewById(R.id.ll_desc_2);
        mLlDesc3 = findViewById(R.id.ll_desc_3);
        mTvGeneralize.setSelected(true);
        mTvGeneralize.setOnClickListener(this);
        mTvStory.setOnClickListener(this);
        mTvGood.setOnClickListener(this);
        mNestedScrollView.setOnScrollChangeListener(new View.OnScrollChangeListener() {
            @Override
            public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                int height1 = mLlDesc1.getHeight();
                int height2 = mLlDesc2.getHeight();
                int height3 = mLlDesc3.getHeight();
                if (height1 - scrollY >= 0) {
                    if (mTvGeneralize.isSelected()) {
                        return;
                    }
                    mTvGeneralize.setSelected(true);
                    mTvStory.setSelected(false);
                    mTvGood.setSelected(false);
                }
                if (height1 - scrollY < 0 && height2 + height1 - scrollY >= 0) {
                    if (mTvStory.isSelected()) {
                        return;
                    }
                    mTvGeneralize.setSelected(false);
                    mTvStory.setSelected(true);
                    mTvGood.setSelected(false);
                }

                if (height1 - scrollY < 0 && height2 + height1 - scrollY < 0 && height3 + height2 + height1 - scrollY >= 0) {
                    if (mTvGood.isSelected()) {
                        return;
                    }
                    mTvGeneralize.setSelected(false);
                    mTvStory.setSelected(false);
                    mTvGood.setSelected(true);
                }
                Log.e("tag", "height1:" + height1 + "，scrollY：" + scrollY);
            }
        });

    }


    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.tv_generalize:
                if (mTvGeneralize.isSelected()) {
                    return;
                }
                mNestedScrollView.setScrollY(0);
                mTvGeneralize.setSelected(true);
                mTvStory.setSelected(false);
                mTvGood.setSelected(false);

                break;
            case R.id.tv_story:
                if (mTvStory.isSelected()) {
                    return;
                }
                mNestedScrollView.setScrollY(mLlDesc1.getHeight());
                mTvGeneralize.setSelected(false);
                mTvStory.setSelected(true);
                mTvGood.setSelected(false);
                break;
            case R.id.tv_good:
                if (mTvGood.isSelected()) {
                    return;
                }
                mNestedScrollView.setScrollY(mLlDesc1.getHeight() + mLlDesc2.getHeight());
                mTvGeneralize.setSelected(false);
                mTvStory.setSelected(false);
                mTvGood.setSelected(true);
                break;
        }
    }
}

• 下面是布局（其实主要也就是布局都的摆放位置）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="标题"
        android:textColor="#fff"
        android:textSize="18sp" />

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#999">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/CollapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="200dp"
                        android:background="#D39072"
                        android:gravity="center"
                        android:text="顶部布局..."
                        android:textSize="18sp" />

                </LinearLayout>

            </android.support.design.widget.CollapsingToolbarLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="#fff"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tv_generalize"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="标题一"
                    android:textColor="@drawable/selector_text"
                    android:textSize="16sp" />

                <TextView
                    android:id="@+id/tv_story"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="标题二"
                    android:textColor="@drawable/selector_text"
                    android:textSize="16sp" />

                <TextView
                    android:id="@+id/tv_good"
                    android:layout_width="0dp"
                    android:layout_height="50dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="标题三"
                    android:textColor="@drawable/selector_text"
                    android:textSize="16sp" />
            </LinearLayout>

        </android.support.design.widget.AppBarLayout>

 		<!--注意这里的 app:layout_behavior属性  -->
        <android.support.v4.widget.NestedScrollView
            android:id="@+id/NestedScrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:id="@+id/ll_desc_1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#37B9EA"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="600dp"
                        android:gravity="center"
                        android:text="详情一"
                        android:textColor="#fff"
                        android:textSize="18sp" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/ll_desc_2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#f55c4c"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="1000dp"
                        android:gravity="center"
                        android:text="详情二"
                        android:textColor="#fff"
                        android:textSize="18sp" />
                </LinearLayout>

                <LinearLayout
                    android:id="@+id/ll_desc_3"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#0060DF"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="1100dp"
                        android:gravity="center"
                        android:text="详情三"
                        android:textColor="#fff"
                        android:textSize="18sp" />
                </LinearLayout>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.CoordinatorLayout>

</LinearLayout>

• selector_text.xml的代码也贴一下吧

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#f55c4c" android:state_selected="true" />
    <item android:color="#999" />
</selector>

注意点

1.CoordinatorLayout这些控件可能找不到，导包问题

• 在app下的build.gradle文件中的dependencies节点下添加依赖

implementation 'com.android.support:design:28.0.0'//版本是多少根据自己项目来

2.标题点击的自动滑动高度对应不上

• 这个主要是因为NestedScrollView下的字节点设置了android:layout_marginTop="“或android:layout_marginBottom=”"，需要在代码中指定设置了多少边距，不能够直接指定，要用dp转px算一下，

    public static int dip2px(Context context, float dpValue) {
        float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

最终应该是 mNestedScrollView.setScrollY(View.getHeight()…+dip2px(…));由于这里我没有指定margin，也就没有写，这里提一下。

最后

• 内容比较详细，代码都在这里了，也可以拷贝到本地运行一下看看。如果有什么问题，留言就能看到！！