神奇的约束布局ConstraintLayout

我们都知道android studio创建布局默认根布局都是ConstraintLayout布局,那么这个布局到底是什么？具体有哪些不同之处?

  写在前面:我在博客上面看到有位大佬写了一篇关于利用Constraintlayout实现圆形菜单的文章,觉得很有意思于是乎我就结合kt自己操作了一番，发现ConstraintLayout约束布局确实强大,好了废话不多说直接上代码了

   

 

    首先看下我的xml布局：

<?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=".KotlinActivity">

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_btn1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintCircle="@id/fab_menu"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="0dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_btn2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        app:layout_constraintCircle="@id/fab_menu"
        app:layout_constraintCircleAngle="315"
        app:layout_constraintCircleRadius="0dp"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_btn3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        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="65dp"
        android:layout_height="65dp"
        android:layout_margin="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>

  很简单就几个FloatingActionButton,那么这几个悬浮按钮怎么实现圆形菜单呐？请看ac代码：

class KotlinActivity : AppCompatActivity() {
    var views = ArrayList<FloatingActionButton>()
    var isOpened = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_kotlin)
        var fab1 = findViewById<FloatingActionButton>(R.id.fab_btn1)
        var fab2 = findViewById<FloatingActionButton>(R.id.fab_btn2)
        var fab3 = findViewById<FloatingActionButton>(R.id.fab_btn3)
        views.add(fab1)
        views.add(fab2)
        views.add(fab3)
        var fab_menu = findViewById<FloatingActionButton>(R.id.fab_menu)
        fab_menu.setOnClickListener { view: View? ->
            switchMenu(isOpened)
            isOpened = !isOpened

        }

    }

    fun switchMenu(isOpened: Boolean) {
        //---创建一个0-90,90-0的动画
        var stratRadius = dpToPixel(if (isOpened) 180 else 0)
        var endRadius = dpToPixel(if (isOpened) 0 else 180)
        var anima = ValueAnimator.ofInt(stratRadius, endRadius)
        anima.duration = 500
        anima.addUpdateListener { valueAnimator: ValueAnimator? ->
            //--给每个FloatingActionButton设置circleRadius（几个FloatingActionButton值都是一样的，只是角度不同，这个可以在xml布局里面发现不同之处）
            var radius: Int = valueAnimator?.animatedValue as Int
            views.forEach { floatingActionButton: FloatingActionButton ->
                var layoutParams = floatingActionButton.layoutParams as ConstraintLayout.LayoutParams
                layoutParams.circleRadius = radius
                floatingActionButton.layoutParams = layoutParams

            }

        }
        anima.start()

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

总结:从上面的kt代码可以看出,我们只需要设置一个系统动画然后为每个FloatingActionButton设置一个circleRadius值就可以实现圆形菜单了,当然circleRadius是ConstraintLayout特有的属性，可见ConstraintLayout强大之处，至于这个控件其他用途我就不阐述了，网上现在也有很多相关博客

           欢迎各位android爱好者加群交流:290611780