Android Study Material Design 十二 之 FloatingActionButton初识

LZ-Says： 似乎最近渐行渐远了。。。

---

前言

Material Design，一个神奇的家伙，而今天，我们一起来看看关于FloatingactionButton相关内容。

---

FloatingActionButton 初识

FloatingActionButton，基于谷歌design包，老样子，依旧鉴名其意，浮动按钮。

简单附上简图如下：

简单说明关键属性：

---

撸码见识

第一步：导入依赖

implementation 'com.android.support:design:25.0.1'

第二步：开撸

<?xml version="1.0" encoding="utf-8"?><RelativeLayout 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="com.materialdesignstudy.floatingactionbutton.FloatingActionButtonActivity">    <android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentRight="true"        android:layout_margin="15dp"        android:clickable="true"        android:src="@drawable/ic_float_action_btn"        app:backgroundTint="?attr/colorPrimary"        app:elevation="1dp"        app:fabSize="auto"        app:pressedTranslationZ="1dp"        app:rippleColor="#ff00" /></RelativeLayout>

第三步：设置点击动画

    private boolean isReverse = false;    public void getRotate(View view) {        float toDegree = isReverse ? -180 : 180f;        ObjectAnimator animator = ObjectAnimator.ofFloat(view, "rotation", 101f, toDegree).setDuration(100);        animator.start();        isReverse = !isReverse;    }

嗯哼，如此而已，效果实现完毕。

---

源码简要分析

看源码，是个好玩的事儿，虽然目前仅仅停留很浅的阶段，但是只要坚持，总会有所收获~

首先来看它是什么来头。

实际FloatingActionButton就是一个ImageButton~！！！

那就先来看初始化的时候，究竟干了什么事儿。

    public FloatingActionButton(Context context) {        this(context, null);    }    public FloatingActionButton(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public FloatingActionButton(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        ThemeUtils.checkAppCompatTheme(context);        TypedArray a = context.obtainStyledAttributes(attrs,                R.styleable.FloatingActionButton, defStyleAttr,                R.style.Widget_Design_FloatingActionButton);        mBackgroundTint = a.getColorStateList(R.styleable.FloatingActionButton_backgroundTint);        mBackgroundTintMode = ViewUtils.parseTintMode(a.getInt(                R.styleable.FloatingActionButton_backgroundTintMode, -1), null);        mRippleColor = a.getColor(R.styleable.FloatingActionButton_rippleColor, 0);        mSize = a.getInt(R.styleable.FloatingActionButton_fabSize, SIZE_AUTO);        mBorderWidth = a.getDimensionPixelSize(R.styleable.FloatingActionButton_borderWidth, 0);        final float elevation = a.getDimension(R.styleable.FloatingActionButton_elevation, 0f);        final float pressedTranslationZ = a.getDimension(                R.styleable.FloatingActionButton_pressedTranslationZ, 0f);        mCompatPadding = a.getBoolean(R.styleable.FloatingActionButton_useCompatPadding, false);        a.recycle();        mImageHelper = new AppCompatImageHelper(this);        mImageHelper.loadFromAttributes(attrs, defStyleAttr);        mMaxImageSize = (int) getResources().getDimension(R.dimen.design_fab_image_size);        getImpl().setBackgroundDrawable(mBackgroundTint, mBackgroundTintMode,                mRippleColor, mBorderWidth);        getImpl().setElevation(elevation);        getImpl().setPressedTranslationZ(pressedTranslationZ);    }

上面无非就是通过自定义属性以及设置其他相关颜色。

最关键几行代码如下：

getImpl().setBackgroundDrawable(mBackgroundTint, mBackgroundTintMode, mRippleColor, mBorderWidth);getImpl().setElevation(elevation);getImpl().setPressedTranslationZ(pressedTranslationZ);

分别为设置背景颜色，设置阴影以及设置Z轴。

而接下来我们看一下关于设置大小，代码进行如下校验：

    private int getSizeDimension(@Size final int size) {        final Resources res = getResources();        switch (size) {            case SIZE_AUTO:                // If we're set to auto, grab the size from resources and refresh                final int width = ConfigurationHelper.getScreenWidthDp(res);                final int height = ConfigurationHelper.getScreenHeightDp(res);                return Math.max(width, height) < AUTO_MINI_LARGEST_SCREEN_WIDTH                        ? getSizeDimension(SIZE_MINI)                        : getSizeDimension(SIZE_NORMAL);            case SIZE_MINI:                return res.getDimensionPixelSize(R.dimen.design_fab_size_mini);            case SIZE_NORMAL:            default:                return res.getDimensionPixelSize(R.dimen.design_fab_size_normal);        }    }

并定义了一个静态常量：

    /**     * The switch point for the largest screen edge where SIZE_AUTO switches from mini to normal.     */    private static final int AUTO_MINI_LARGEST_SCREEN_WIDTH = 470;

而我们在上面看到的关于设置大小时，关键的地方便是读取系统定义的dimens根据不同取值进行不同设置。

    private FloatingActionButtonImpl createImpl() {        final int sdk = Build.VERSION.SDK_INT;        if (sdk >= 21) {            return new FloatingActionButtonLollipop(this, new ShadowDelegateImpl(),                    ViewUtils.DEFAULT_ANIMATOR_CREATOR);        } else if (sdk >= 14) {            return new FloatingActionButtonIcs(this, new ShadowDelegateImpl(),                    ViewUtils.DEFAULT_ANIMATOR_CREATOR);        } else {            return new FloatingActionButtonGingerbread(this, new ShadowDelegateImpl(),                    ViewUtils.DEFAULT_ANIMATOR_CREATOR);        }    }

上面代码，可以看到谷歌为了兼容性可谓付出不少努力，值得我们学习。

而其内部，LZ个人感觉相关兼容性的适配原则和LZ上篇查看CardView差不多。

就简单分析到这了。

困呐，开会整整开了一天~

---

GitHub查看地址

https://github.com/HLQ-Struggle/MaterialDesignStudy