仿微信朋友圈 Toolbar 效果
2018-08-31 本文已影响107人
stefanJi
Step1 简单介绍 CoordinatorLayout
- 作用：协调子 View
- 使用核心: Behavior
- 布局属性类似 FrameLayout
Behavior
两个概念：
Child：CoordinatorLayout 的子 View
Dependency：Child 依赖的 View
简单使用：
device-2018-08-30-233559.gif
定义 Behavior
class SimpleBehavior(context: Context, attrs: AttributeSet) : CoordinatorLayout.Behavior<Button>(context, attrs) {
private val screenWidth: Int = context.resources?.displayMetrics?.widthPixels!!
override fun layoutDependsOn(parent: CoordinatorLayout, child: Button, dependency: View): Boolean {
//判断是否依赖的View
return dependency is WithFingerTextView
}
// 当依赖的 View 位置 宽高发生变化时，执行这个方法
override fun onDependentViewChanged(parent: CoordinatorLayout, child: Button, dependency: View): Boolean {
val x = screenWidth - dependency.x - child.width
// 更新 Child
setPosition(child, x.toInt(), dependency.y.toInt())
return true
}
private fun setPosition(v: View, x: Int, y: Int) {
val layoutParams: CoordinatorLayout.LayoutParams = v.layoutParams as CoordinatorLayout.LayoutParams
layoutParams.leftMargin = x
layoutParams.topMargin = y
v.layoutParams = layoutParams
}
}
布局中使用
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="A Button"
app:layout_behavior="com.jy.friendcircleappbar.SimpleBehavior" />
<com.jy.friendcircleappbar.WithFingerTextView
android:id="@+id/tv"
android:layout_width="100dp"
android:layout_height="wrap"
android:layout_margin="200dp"/>
</android.support.design.widget.CoordinatorLayout>
Step2 结合 AppBarLayout CollaspsingLayout Toolbar
Toolbar 结合 AppBarLayout 才好玩
使用略过
AppBarLayout
- 继承自 LinearLayout，垂直方向布局
- 当某个可滚动的View滚动时，可定制它内部的子 View 实现何种动作
AppBarLayout 子 View 的动作
给子 View 设置 layout_scrollFlags 属性:
- scroll：子 View 跟随滚动事件一起移动，类似将 View 嵌入 ScrollView
- scroll | enterAlways：当 ScollView 向下滚动时，View 直接向下滚动。ScrollView 向上滚动时，View 也跟着上滚
- scroll | exitUnitCollaspsed：ScrollView 向上滚动时，View 先夺去滚动事件，滚到自己的最小高度，然后 ScrollView 接着滚动。ScrollView 向下滚动时，当 ScrollView 滚动到顶部时，View 开始滚动到默认高度。
- scroll | enterAlawys | enterAllwaysCollapsed：
通过 appbar_scrolling_view_behavior 将 NestedScrollView 和 AppBarLayout 关联。
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/long_text" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="?android:actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
Step3 CollaspsingToolbarLayout
针对 Toolbar
- 折叠 Title：当布局全部显示时 title 最大，随着上划逐步减小
- setTitle
- 内容纱布：根据滚动的位置到达某个阈(yu)值，决定是否为 View 覆盖纱布
- setContentScim
- 状态栏纱布：根据滚动的位置到达某个阈(yu)值，决定是否为状态栏覆盖纱布(5.0以上)
- 视差滚动子View：让子View的滚动速度比其他正常滚动的慢
- layout_collapseModel:parallax
- 子 View 固定：Pin 模式
- layout_collapseModel: pin
4 朋友圈 Toolbar 效果
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.RecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleTextAppearance="@style/CollapsedAppBar"
app:contentScrim="@android:color/white"
app:expandedTitleMarginTop="8dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:statusBarScrim="@android:color/white">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical"
android:paddingBottom="50dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitXY"
android:src="@mipmap/logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:background="@android:color/white"
android:padding="2dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@mipmap/logo" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@android:color/transparent"
app:contentInsetLeft="0dp"
app:contentInsetRight="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:layout_collapseMode="pin">
<ImageView
android:layout_width="48dp"
android:layout_height="24dp"
android:src="@mipmap/back" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
collapsingToolbarLayout.title = " "
collapsingToolbarLayout.expandedTitleMarginStart = 0
appBarLayout.addOnOffsetChangedListener { appBarLayout, verticalOffset ->
if (Math.abs(verticalOffset) >= appBarLayout.totalScrollRange) {
collapsingToolbarLayout.title = "朋友圈"
} else {
collapsingToolbarLayout.title = " "
}
}
