Android开发Android技术知识手机移动程序开发

Android材料设计之AppBarLayout+Coordin

2018-11-28  本文已影响19人  e4e52c116681

零、前言:

AppBarLayout+CoordinatorLayout:废话不多说,Material Design还是用图说话

1.scroll:首子控件吸顶:app:layout_scrollFlags="scroll"
2.exitUntilCollapsed:首子控件半吸顶:app:layout_scrollFlags="scroll|exitUntilCollapsed"+minHeight
3.enterAlways:首子控件吸顶+首子控件先下滑:app:layout_scrollFlags="scroll|enterAlways"
4.enterAlwaysCollapsed:这个说起来有点麻烦,看下面动图吧...注意下滑时顶部状态
5.snap:过半/未过半,自动贴合:app:layout_scrollFlags="scroll|snap"
6.监听移动分度,动态改变一些属性、如颜色过渡、字号过渡、位移过渡

六个效果一览:

注意enterAlways是和吸顶上滑时的区别

scroll---------- enterAlways
exitUntilCollapsed enterAlwaysCollapsed
scroll+snap 监听移动分度

一、前置准备:

1.为了不让布局看起来很乱,常用样式抽成Style
<!--测试用的TextView通用属性-->
<style name="TVTestCenter">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">100dp</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">18sp</item>
    <item name="android:text">Test-测试文字</item>
    <item name="android:background">#6096F3</item>
    <item name="android:textColor">#fff</item>
</style>
2.几个我比较喜欢的颜色
<!--妃色-->
<color name="feise">#F07054</color>
<!--月白-->
<color name="yuebai">#DDEFF3</color>
<!--牙色-->
<color name="yase">#F1E3BC</color>
<!--竹青-->
<color name="zhuqing">#8CA279</color>
<!--品橙-->
<color name="pincheng">#FF7F47</color>
<!--捷特蓝-->
<color name="jietelan">#92DDEA</color>

1.首子控件吸顶:scroll

目测:只有第一个控件能吸顶+app:layout_scrollFlags="scroll"
目测:需要2个及以上子控件才能吸顶
目测:RecyclerVieW加app:layout_behavior="@string/appbar_scrolling_view_behavior"可居AppBarLayout下

<?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:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/al_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            style="@style/TVTestCenter"
            android:text="Flag"
            android:background="@color/feise"
            android:minHeight="50dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
        <TextView
            style="@style/TVTestCenter"
            android:text="没有Flag"
            android:background="@color/zhuqing"/>

        <TextView
            style="@style/TVTestCenter"
            android:text="没有Flag"
            android:background="@color/yase"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

2.首子控件半吸顶:scroll+enterAlways

AppBarLayout首控件修改:app:layout_scrollFlags="scroll|exitUntilCollapsed"+minHeight
其他不变,其中minHeight决定保留高度

<TextView
    style="@style/TVTestCenter"
    android:background="@color/feise"
    android:minHeight="50dp"
    android:text="Flag"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
3.首子控件吸顶+首子控件先下滑:app:layout_scrollFlags="scroll|enterAlways"
<TextView
    style="@style/TVTestCenter"
    android:background="@color/feise"
    android:text="Flag"
    app:layout_scrollFlags="scroll|enterAlways"/>

4.scroll+enterAlways+enterAlwaysCollapsed
 <TextView
     style="@style/TVTestCenter"
     android:background="@color/feise"
     android:text="Flag"
     android:minHeight="50dp"
     app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"/>

5.自动贴合:
<TextView
    style="@style/TVTestCenter"
    android:background="@color/feise"
    android:text="Flag"
    android:minHeight="50dp"
    app:layout_scrollFlags="scroll|snap"/>

6.下滑监听:
监听移动分度.gif
mAlTitle.addOnOffsetChangedListener((appBarLayout, verticalOffset) -> {
    //下降分度
    float fraction = -verticalOffset * 1.f / (mIdTvMoving.getHeight() - mIdTvMoving.getMinHeight());
    int color = ColUtils.evaluateColor(fraction, 0xffF07054, 0xff3F51B5);
    mIdTvMoving.setBackgroundColor(color);//颜色过渡
    mIdTvMoving.setTextSize(40 * (1 - fraction));//字号缩小
    mIdTvMoving.setTranslationX(-fraction * mIdTvMoving.getWidth());//X平移
});

给一个颜色过渡变化的函数

/**
 * 颜色变换
 *
 * @param fraction 分度值
 * @param startValue 开始色
 * @param endValue 结束色
 * @return 分度值处颜色
 */
public static int evaluateColor(float fraction, int startValue,
                                   int endValue) {
    int startA = (startValue >> 24) & 0xff;
    int startR = (startValue >> 16) & 0xff;
    int startG = (startValue >> 8) & 0xff;
    int startB = startValue & 0xff;
    int endA = (endValue >> 24) & 0xff;
    int endR = (endValue >> 16) & 0xff;
    int endG = (endValue >> 8) & 0xff;
    int endB = endValue & 0xff;
    return (startA + (int) (fraction * (endA - startA)) << 24)
            | (startR + (int) (fraction * (endR - startR)) << 16)
            | (startG + (int) (fraction * (endG - startG)) << 8)
            | startB + (int) (fraction * (endB - startB));
}

后记:捷文规范

1.本文成长记录及勘误表
项目源码 日期 备注
V0.1--无 2018-11-28 Android材料设计之AppBarLayout+CoordinatorLayout
2.更多关于我
笔名 QQ 微信 爱好
张风捷特烈 1981462002 zdl1994328 语言
我的github 我的简书 我的掘金 个人网站
3.声明

1----本文由张风捷特烈原创,转载请注明
2----欢迎广大编程爱好者共同交流
3----个人能力有限,如有不正之处欢迎大家批评指证,必定虚心改正
4----看到这里,我在此感谢你的喜欢与支持


icon_wx_200.png
上一篇下一篇

猜你喜欢

热点阅读