使用ConstraintLayout实现圆形菜单

使用ConstraintLayout实现圆形菜单

[ConstraintLayout][1]1.1.0发布之后增加了Circular Positioning
官方解释：

You can constrain a widget center relative to another widget center, at an angle and a distance. This allows you to position a widget on a circle

大致理解为：

你可以将一个控件的中心以一定的角度和距离约束到另一个控件的中心上，相当于在一个圆上放置一个控件。

可以设置的属性有：

• layout_constraintCircle：引用另一个控件的 id。
• layout_constraintCircleRadius：到另一个控件中心的距离。
• layout_constraintCircleAngle：控件的角度（顺时针，0 - 360 度）。

示例

find . -name "*.kt" | xargs grep -v "^$" | wc -l

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".SampleActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_menu"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_email"
        android:tint="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

效果：

layout_constraintCircleRadius

修改layout_constraintCircleRadius为100dp

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".SampleActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_menu"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_email"
        android:tint="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

效果：

layout_constraintCircleAngle

修改layout_constraintCircleAngle为45

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".SampleActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="100dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_menu"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_email"
        android:tint="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

效果：

实现圆形菜单（图二为例）

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="315"
        app:layout_constraintCircleRadius="0dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@android:drawable/ic_dialog_info"
        android:tint="#fff"
        app:elevation="@null"
        app:layout_constraintCircle="@+id/fab_menu"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="0dp" />


    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_menu"
        android:layout_width="55dp"
        android:layout_height="55dp"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        android:tint="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

class MainActivity : AppCompatActivity() {
    private val menuViews = ArrayList<View>()
    private var isOpened = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val fab1 = findViewById<FloatingActionButton>(R.id.fab1)
        val fab2 = findViewById<FloatingActionButton>(R.id.fab2)
        val fab3 = findViewById<FloatingActionButton>(R.id.fab3)

        menuViews.add(fab1)
        menuViews.add(fab2)
        menuViews.add(fab3)

        val menuFab = findViewById<FloatingActionButton>(R.id.fab_menu)
        menuFab.setOnClickListener {
            switchMenu(isOpened)
            isOpened = !isOpened
        }
    }

    private fun switchMenu(isOpen: Boolean) {
        val startRadius = dpToPixel(if (isOpen) 90 else 0)
        val endRadius = dpToPixel(if (isOpen) 0 else 90)
        val anim = ValueAnimator.ofInt(startRadius, endRadius)
        anim.duration = 300
        anim.addUpdateListener { valueAnimator ->
            val radius: Int = valueAnimator.animatedValue as Int
            menuViews.forEach { view ->
                val lp = view.layoutParams as ConstraintLayout.LayoutParams
                lp.circleRadius = radius
                view.layoutParams = lp
            }
        }
        anim.start()
    }
}

fun Context.dpToPixel(dp: Int): Int {
    val displayMetrics = this.resources.displayMetrics
    return if (dp < 0) dp else Math.round(dp * displayMetrics.density)
}

运行之。

[1]: https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout