極坐標(biāo)系相對(duì)于笛卡爾坐標(biāo)系衍慎,使用角度和半徑來(lái)指定點(diǎn)的位置转唉。通過(guò)三角函數(shù)公式,兩者可以互相轉(zhuǎn)換稳捆,本質(zhì)上并沒(méi)有區(qū)別赠法。
那么使用極坐標(biāo)布局的意義在哪里呢?既然是使用角度和半徑的乔夯,如果基于角度和半徑可以方便地做出一些效果砖织,那就能提高開(kāi)發(fā)的效率,使代碼更加簡(jiǎn)潔末荐。
ConstraintLayout 中對(duì)極坐標(biāo)的支持非常直接侧纯,ConstraintLayout 的核心思維就是靠關(guān)系,在極坐標(biāo)布局中甲脏,就是作為圓心的 View 與其他 View 之間通過(guò)半徑和角度產(chǎn)生的關(guān)系眶熬。
使用方法
作為圓心的 View 不用設(shè)置任何極坐標(biāo)相關(guān)屬性。除非它相對(duì)于另一個(gè)圓心以極坐標(biāo)布局块请。
圍繞這個(gè)圓心的其他 View 需要設(shè)置 3 個(gè) LayoutParams 屬性:
- layout_constraintCircle 指定圓心 View 的 id
- layout_constraintCircleAngle 指定角度娜氏,單位是度°。官方文檔中說(shuō)是 0 - 360 度墩新,實(shí)際上可以設(shè)置大于 360 度的值贸弥。0 度的方向是豎直向上,順時(shí)針角度增大海渊,和鐘表的數(shù)字刻度一樣绵疲。用 ConstraintLayout 畫(huà)個(gè)表盤(pán)很方便有木有。
- layout_constraintCircleRadius 指定半徑切省,dimension最岗。
代碼示例
<Button
android:id="@+id/button_center"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#900000"
app:layout_constraintCircle="@id/button_center"
app:layout_constraintCircleAngle="0"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="@android:drawable/ic_menu_camera" />
做個(gè)動(dòng)畫(huà)
屬性動(dòng)畫(huà),轉(zhuǎn)個(gè)圈圈朝捆。
private void animate() {
// 代碼里角度可以用負(fù)值般渡。
PropertyValuesHolder holderAngle = PropertyValuesHolder.ofFloat("angle", 0, -90, -180, -270);
PropertyValuesHolder holderRadius = PropertyValuesHolder.ofInt("radius", 0, 100, 200, 300);
ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(circleAdapter, holderAngle, holderRadius);
animator.setDuration(2000);
animator.start();
}
// 沒(méi)有屬性可以直接設(shè)置角度和半徑,自定義一個(gè)對(duì)象來(lái) adapt 這兩個(gè)屬性。
private static class CircleAdapter {
private View view;
public CircleAdapter(View view) {
this.view = view;
}
public float getAngle() {
ViewGroup.LayoutParams lp = view.getLayoutParams();
if (lp instanceof ConstraintLayout.LayoutParams) {
return ((ConstraintLayout.LayoutParams) lp).circleAngle;
}
return 0;
}
public void setAngle(float angle) {
ViewGroup.LayoutParams lp = view.getLayoutParams();
if (lp instanceof ConstraintLayout.LayoutParams) {
((ConstraintLayout.LayoutParams) lp).circleAngle = angle;
view.requestLayout();
}
}
public int getRadius() {
ViewGroup.LayoutParams lp = view.getLayoutParams();
if (lp instanceof ConstraintLayout.LayoutParams) {
return ((ConstraintLayout.LayoutParams) lp).circleRadius;
}
return 0;
}
public void setRadius(int radius) {
ViewGroup.LayoutParams lp = view.getLayoutParams();
if (lp instanceof ConstraintLayout.LayoutParams) {
((ConstraintLayout.LayoutParams) lp).circleRadius = radius;
view.requestLayout();
}
}
}
畫(huà)質(zhì)有點(diǎn)渣……
題圖:Pixabay License