一個(gè)使用FloatingActionButton實(shí)現(xiàn)的FloatingActionMenu料饥。

代碼

• kotlin

class FAB @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, defStyleRes: Int = 0
) : LinearLayout(context, attrs, defStyleAttr, defStyleRes) {
    init {
        LayoutInflater.from(context).inflate(R.layout.fab, this, true).apply {
            orientation = LinearLayout.HORIZONTAL
            val a = context.obtainStyledAttributes(
                    attrs, R.styleable.FAB, defStyleAttr, defStyleRes)
            fabSrc = a.getDrawable(R.styleable.FAB_fab_src)
            fabLabel = a.getString(R.styleable.FAB_fab_label)
            a.recycle()
        }
    }

    var fabSrc: Drawable?
        get() = findViewById<FloatingActionButton>(R.id.fab_button)?.drawable
        set(value) {
            findViewById<FloatingActionButton>(R.id.fab_button).setImageDrawable(value)
        }
    var fabLabel: CharSequence?
        get() = findViewById<TextView>(R.id.fab_label).text
        set(value) {
            findViewById<TextView>(R.id.fab_label).apply {
                text = value
                visibility = if (value == null) View.GONE else View.VISIBLE
            }
        }
}

class FAM @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0, defStyleRes: Int = 0
) : LinearLayout(context, attrs, defStyleAttr, defStyleRes) {
    var famSrc: Drawable? = null
        set(value) {
            findViewById<FloatingActionButton>(R.id.fam_button)?.setImageDrawable(value)
            field = value
        }

    init {
        orientation = LinearLayout.VERTICAL
        gravity = Gravity.END
        val a = context.obtainStyledAttributes(attrs, R.styleable.FAM, defStyleAttr, defStyleRes)
        famSrc = a.getDrawable(R.styleable.FAM_fam_src)
        a.recycle()
    }

    override fun onFinishInflate() {
        super.onFinishInflate()
        addView(LayoutInflater.from(context).inflate(R.layout.fam, this, false))
        children<LinearLayout>().forEach { it.visibility = View.INVISIBLE }
        findViewById<FloatingActionButton>(R.id.fam_button)?.let { fab ->
            fab.setImageDrawable(famSrc)
            fab.setOnClickListener {
                TransitionManager.beginDelayedTransition(this, TransitionSet().apply {
                    addTransition(Fade())
                    addTransition(Slide(Gravity.BOTTOM))
                })
                if (fab.rotation == 135F) {
                    fab.animate().rotation(0F).start()
                    children<FAB>().forEach { it.visibility = View.INVISIBLE }
                } else {
                    fab.animate().rotation(135F).start()
                    children<FAB>().forEach { it.visibility = View.VISIBLE }
                }
            }
        }
    }
}

• resource value id定義

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="FAM">
        <attr name="fam_src" format="reference" />
    </declare-styleable>
    <declare-styleable name="FAB">
        <attr name="fab_src" format="reference" />
        <attr name="fab_label" format="string" />
    </declare-styleable>
</resources>

• FloatingActionMenu 布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.FloatingActionButton xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fam_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:fabSize="normal" />

• FloatingActionButton 布局

<?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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/fab_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="3dp" />
    </android.support.v7.widget.CardView>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:fabSize="mini" />
</LinearLayout>

使用

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <io.github.yueeng.meitu.FAM
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        app:fam_src="@drawable/ic_add">

        <io.github.yueeng.meitu.FAB
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_label="按鈕2"
            app:fab_src="@drawable/ic_button2" />

        <io.github.yueeng.meitu.FAB
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fab_label="按鈕1"
            app:fab_src="@drawable/ic_button1" />
    </io.github.yueeng.meitu.FAM>
</android.support.design.widget.CoordinatorLayout>

應(yīng)用 https://github.com/yueeng/meitu