天天看点
返回

使用ConstraintLayout实现圆形菜单使用ConstraintLayout实现圆形菜单

使用ConstraintLayout实现圆形菜单

使用ConstraintLayout实现圆形菜单使用ConstraintLayout实现圆形菜单
使用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>

效果：

使用ConstraintLayout实现圆形菜单使用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>

效果：

使用ConstraintLayout实现圆形菜单使用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>

效果：

使用ConstraintLayout实现圆形菜单使用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)
}

运行之。

使用ConstraintLayout实现圆形菜单使用ConstraintLayout实现圆形菜单

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

android Android圆形菜单 圆形菜单
上一篇: android圆形菜单框架,CycleMenu[利用RecyclerView实现一个圆形菜单
下一篇: Android自定义圆形头像

继续阅读