CoordinatorLayout实现页面滚动动画效果
CoordinatorLayout+AppBarLayout实现页面滚动动画效果
- 前言
- 代码
- 注意点
- 1.CoordinatorLayout这些控件可能找不到，导包问题
- 2.标题点击的自动滑动高度对应不上
- 最后
前言
- 准确点来说是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，也就没有写，这里提一下。
最后
- 内容比较详细，代码都在这里了，也可以拷贝到本地运行一下看看。如果有什么问题，留言就能看到！！