最近发现朴朴app的样式比较漂亮，决定闲暇时间试着仿写一下UI亮点部分，顺便复习一下安卓原生知识和kotlin。由于以学习为目的，会尽量避免引用官方库以外的第三方UI库，对于常见的UI效果尽量自己结合官方库去实现。另外因为是闲暇时间才写，所以本文更新周期不定，望谅解。
首先来分析它的UI布局，下面是首页截图
首页截图
首先它有底部tab，它控制上方fragment的切换，这里先不考虑activity部分，先仿写第一个fragment，也就是底部tab首页选项卡对应的这个fragment。
分析
乍一看，这个fragment应该是这种布局：
<CoordinatorLayout ...>
<AppbarLayout>
<Toolbar .../>
<搜索框/>
<TabLayout/>
</AppbarLayout>
<NestedScrollView>
<ViewPager/>
</NestedScrollView>
</CoordinatorLayout>
由于支持嵌套滑动必须给NestedScrollView添加appbar_scrolling_view_behavior，这样会导致NestedScrollView默认在AppBarLayout的下方位置，如果这样，它内部承载的fragment里面的图片viewpager就没法穿透上方的AppbarLayout部分了，所以我们需要让NestedScrollView的顶部与页面顶部对齐，这里可以用负数marginTop搞定，这个值是1部分和2部分高度之和的相反数（如果你不想控制状态栏颜色渐变，就需要把View延伸到状态栏，这样的话还要加上状态栏高度），同时别忘了在子Fragment里留出这部分空间。
然后，我们垂直滚动这个页面可以发现，最上面红框圈出的1部分可以被下面部分上划逐渐遮挡，在这个遮挡过程中它的背景色从透明渐变到白色，同时里面的内容从白色直接变成黑色（只要滑动一点立刻变），2部分的TabLayout里面的文字颜色和indicator颜色也是这种变化规律，同时，状态栏里的文字颜色初始是白色的，只要有滑动文字就会变成黑色。
经过初步分析，剩下以下难点：
1.图中1部分的上滚动遮挡。
2.图中1和2部分的背景色渐变。
解决方案
对于上面第一个难点：
如果在内容上划动过程中图中1部分不是被遮挡，而是跟着一起上移直到移出屏幕，之后2部分吸顶，那就好办了，让1部分作为AppBarlayout的直接子元素，然后加个scrollFlag就搞定了，但不是，这里我们就换个思路，让1部分在下层，然后AppBarlayout的最上面子元素透明，不响应点击事件，这不就解决了么。
对于第二个难点：
其实这不是难点，只是我们使用CoordinatorLayout的时候难免直接想到Behavior，写个自定义Behavior来实现这些效果。但这样恰恰走了弯路，在NestedScrollView没有位移的前提下是不会执行onDependentViewChanged方法的，而且需要注意，横向滑动的时候12部分会立即变色，这个行为很可能跟上下滑动的变色有所冲突，所以这里我们直接在fragment里给NestedScrollView和ViewPager加监听，就能很好地解决这个问题。
Talk is cheap，show me the code
先上个效果图吧：
demo效果图
布局文件：
<?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"
android:id="@+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_marginTop="@dimen/index_fragment_margin_top"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:clipChildren="false">
<com.sylva.mockpupu.widget.WCHeightViewPager
android:id="@+id/viewPager"
android:clipChildren="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<FrameLayout
android:id="@+id/indexFakeToolbar"
android:layout_width="match_parent"
android:layout_height="72dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="35dp"
android:paddingBottom="5dp"
>
<TextView
android:id="@+id/indexLocation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="某个小区-哪个哪个楼"
android:maxWidth="80dp"
android:ellipsize="end"
android:lines="1"
android:textColor="@color/white"
android:layout_gravity="left|center_vertical"
android:drawableLeft="@mipmap/ic_place_light"
android:drawableRight="@mipmap/ic_arrow_right_light"
android:drawablePadding="5dp"/>
<ImageView
android:id="@+id/indexMessage"
android:src="@mipmap/ic_msg_light"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"/>
</FrameLayout>
<android.support.design.widget.AppBarLayout
android:id="@+id/indexAppBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:background="@color/white">
<View
android:id="@+id/indexToolbarSpace"
android:layout_width="match_parent"
android:layout_height="@dimen/toolbar_height"
app:layout_scrollFlags="scroll|snap"/>
<LinearLayout
android:id="@+id/indexSearchBarContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:tabTextColor="@color/white"
android:layout_marginTop="@dimen/status_bar_height">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="@dimen/index_search_container"
android:background="@drawable/round_rect_shape"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:paddingBottom="5dp"
android:paddingTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/index_search_text"
android:layout_gravity="center"
style="@style/IndexSearchBar"/>
</FrameLayout>
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
style="@style/TabLayout"
android:layout_width="match_parent"
android:layout_height="@dimen/index_tab_container"
app:tabIndicatorColor="@color/white"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
首页Fragment：
package com.sylva.mockpupu.fragment
import android.app.Activity
import android.content.res.ColorStateList
import android.graphics.Color
import android.graphics.drawable.ColorDrawable
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.support.design.widget.AppBarLayout
import android.support.v4.app.Fragment
import android.support.v4.app.FragmentPagerAdapter
import android.support.v4.view.ViewPager
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.sylva.mockpupu.R
import kotlinx.android.synthetic.main.fragment_index.*
class IndexFragment: BaseFragment(){
lateinit var titleList: List<String?>
val fragmentList: MutableList<Fragment> = arrayListOf()
lateinit var indexAdapter: FragmentPagerAdapter
private var specialColorList: ColorStateList? = null
private var normalColorList: ColorStateList? = null
private var colorPrimary: Int = 0
private var vScrollAnimationDisabled = false
private lateinit var locationWhite: Drawable
private lateinit var arrowWhite: Drawable
private lateinit var locationBlack: Drawable
private lateinit var arrowBlack: Drawable
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.fragment_index, container, false)
}
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val unknownCategory = resources.getString(R.string.unknown_category)
ramStorage?.apply {
titleList = indexCategoryList
.mapIndexed{index, e ->
fragmentList += if(index == 0)IndexListFragment() else MockListFragment()
tabLayout.addTab(tabLayout.newTab())
e.name ?: unknownCategory
}
}
indexAdapter = object : FragmentPagerAdapter(activity!!.supportFragmentManager){
override fun getItem(position: Int): Fragment {
return fragmentList[position]
}
override fun getCount(): Int {
return fragmentList.size
}
}
viewPager.adapter = indexAdapter
tabLayout.setupWithViewPager(viewPager)
with(tabLayout){
(0 until tabCount).forEach {
getTabAt(it)?.text = titleList[it]
}
}
val toolbarHeight = context!!.resources.getDimension(R.dimen.toolbar_height)
context?.resources?.apply {
specialColorList = getColorStateList(R.color.tab_color_special)
normalColorList = getColorStateList(R.color.tab_color_normal)
colorPrimary = getColor(R.color.colorPrimary)
locationWhite = getDrawable(R.mipmap.ic_place_light)
arrowWhite = getDrawable(R.mipmap.ic_arrow_right_light)
locationBlack = getDrawable(R.mipmap.ic_place_dark)
arrowBlack = getDrawable(R.mipmap.ic_arrow_right_dark)
locationWhite.setBounds(0, 0, 56, 56)
arrowWhite.setBounds(0, 0, 23, 53)
locationBlack.setBounds(0, 0, 56, 56)
arrowBlack.setBounds(0, 0, 23, 53)
}
indexAppBarLayout.addOnOffsetChangedListener(object : AppBarLayout.OnOffsetChangedListener{
override fun onOffsetChanged(appBarLayout: AppBarLayout?, yOffset: Int) {
if(vScrollAnimationDisabled)
return
appBarLayout?.apply {
val absY = Math.abs(yOffset).toFloat()
val deltaY = if(absY > toolbarHeight) toolbarHeight else absY
val percent = deltaY / toolbarHeight
val bgColor = (background as ColorDrawable).color
val r = Color.red(bgColor)
val g = Color.green(bgColor)
val b = Color.blue(bgColor)
val a = (percent * 255).toInt()
val color = Color.argb(a, r, g, b)
setBackgroundColor(color)
tabLayout?.apply {
if(percent == 0f){
tabTextColors = specialColorList
setSelectedTabIndicatorColor(Color.WHITE)
(context as Activity).window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LAYOUT_STABLE
}else{
tabTextColors = normalColorList
setSelectedTabIndicatorColor(colorPrimary)
(context as Activity).window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
}
}
}
}
})
viewPager.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
override fun onPageScrollStateChanged(p0: Int) {
}
override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
if(position == 0 && positionOffsetPixels == 0){
indexLocation.setCompoundDrawables(locationWhite, null, arrowWhite, null)
indexMessage.setImageResource(R.mipmap.ic_msg_light)
vScrollAnimationDisabled = false
tabLayout?.apply {
setSelectedTabIndicatorColor(Color.WHITE)
tabTextColors = specialColorList
}
indexAppBarLayout.setBackgroundResource(R.color.transparent)
indexSearchBarContainer.setBackgroundResource(R.color.transparent)
indexFakeToolbar.setBackgroundResource(R.color.transparent)
indexLocation.setTextColor(resources.getColorStateList(R.color.index_text_white))
}else{
indexLocation.setCompoundDrawables(locationBlack, null, arrowBlack, null)
indexMessage.setImageResource(R.mipmap.ic_msg_dark)
vScrollAnimationDisabled = true
tabLayout?.apply {
setSelectedTabIndicatorColor(colorPrimary)
tabTextColors = normalColorList
}
indexAppBarLayout.setBackgroundResource(R.color.transparent)
indexSearchBarContainer.setBackgroundResource(R.color.white)
indexFakeToolbar.setBackgroundResource(R.color.white)
indexLocation.setTextColor(resources.getColorStateList(R.color.index_text_grey))
}
}
override fun onPageSelected(p0: Int) {
}
})
}
}
由于时间有限，以上实现可能还有很大优化空间，另外状态栏变色这里没有考虑兼容4.4-5.0之间版本以及米柚、flyme等国产机魔改OS，这个网上已经有不少实现方案，套用即可。
补上github链接：仿写朴朴app
网友评论