首页 > 其他分享> > Android 页面上滑置顶实现举例(CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+NestedScrollView)
Android 页面上滑置顶实现举例(CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+NestedScrollView)
作者：互联网
我开始炒冷饭了啊,有人说这套组合已经被用烂了,有人说这玩意谁都会,其实没有人说哈,我就是怕被人说,提前预警哈.
最近,工作比较忙,好久都没有写一下博客来说点什么.
刚刚我去翻了一下项目,发现去年的上滑置顶页面可以给大家拿出来讲一下:
上滑触发置顶后的样子:
好,如果你也想要实现类似的效果,那么请你调整一下坐姿,开始进入正题.
内个谁! 后排的童鞋帮忙把同桌喊一下,别睡了... (^_^)∠※
首先介绍用到的控件:
最外层:CoordinatorLayout
上半部分_外层:AppBarLayout
上半部分_上滑后隐藏的部分:CollapsingToolbarLayout
下半部分_上滑充满的部分:NestedScrollView
豁出去了,我要画图了:
怎么样,是不是画的简洁易懂!
最后我把我这个页面的代码分享出来:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 第一部分:CoordinatorLayout -->
<android.support.design.widget.CoordinatorLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#ffffff"
>
<!-- 第二部分:缩放控件-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:background="@color/white"
android:layout_height="wrap_content">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="90px"
android:background="@color/white1"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30px"
android:paddingLeft="40px"
android:paddingRight="60px"
android:src="@mipmap/back_white" />
<TextView
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="30px"
android:paddingLeft="60px"
android:paddingRight="40px"
android:src="@mipmap/share_white" />
</LinearLayout>
</FrameLayout>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="40px"
android:layout_marginRight="40px"
android:layout_marginTop="-40px"
android:padding="30px"
app:cardCornerRadius="20px"
app:cardPreventCornerOverlap="false"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="30px">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@mipmap/release_topic_left"
android:drawablePadding="20px"
android:maxLines="2"
android:ellipsize="end"
android:textColor="@color/heise"
android:textSize="16sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="30px"
android:layout_marginTop="30px"
android:maxLines="3"
android:textColor="@color/heise"
android:textSize="13sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="1px"
android:background="@color/fenge" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20px"
android:maxLines="3"
android:textColor="@color/huise"
android:textSize="12sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="50px"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="30px"
android:paddingBottom="30px"
android:visibility="gone"
android:paddingLeft="30px"
android:paddingRight="60px"
android:src="@mipmap/h5_back1" />
<android.support.design.widget.TabLayout
android:layout_width="0px"
android:layout_weight="1"
android:layout_height="wrap_content"
android:textAlignment="center"
app:layout_scrollFlags="scroll"
app:tabGravity="center"
app:tabIndicatorColor="@color/heise"
app:tabIndicatorHeight="5px"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/heise"
app:tabTextAppearance="@style/TabLayoutStyle"
app:tabTextColor="@color/huise">
</android.support.design.widget.TabLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="30px"
android:visibility="gone"
android:paddingBottom="30px"
android:paddingLeft="60px"
android:paddingRight="30px"
android:src="@mipmap/h5_share1" />
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="15px"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<!-- 第三部分:Your Scroll View-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="always"
android:fillViewport="true"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout >
监听置顶事件代码:
AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
if (state == State.EXPANDED) { //做你想做的,比如显示新的标题布局及样式
//展开状态
} else if (state == State.COLLAPSED) {
//折叠状态
} else {
//中间状态
}
}
});
最后,有什么深海没有讲清楚的,或者大家想问的,欢迎到评论区留言哦!
标签：AppBarLayout,state,NestedScrollView,appBarLayout,State,置顶,页面 来源： https://blog.csdn.net/qq_39731011/article/details/100118978