使用ConstraintLayout实现圆形菜单
程序员文章站
2024-02-02 12:30:16
...
使用ConstraintLayout实现圆形菜单
ConstraintLayout1.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 度)。
图解:
示例
<?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)
}
运行之。
推荐阅读
-
使用ConstraintLayout实现圆形菜单
-
请问关于php中使用ajax实现菜单联动查询的思路和方法
-
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单_PHP
-
android使用PopupWindow实现页面点击顶部弹出下拉菜单
-
使用无序列表ul实现多级菜单
-
Android使用ExpandableListView实现三层嵌套折叠菜单
-
使用函数递归实现基于php和MySQL的动态树型菜单_php基础
-
使用函数递归实现基于php和MySQL的动态树型菜单
-
使用json方式实现省市两级下拉级联菜单[原创] - 橙色时光
-
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单_PHP