一起Talk Android吧（第五百零六回：如何調整元件在限制布局中的角度）

文章目錄

• 背景介紹
• 相關屬性
• 使用方法
• 示例程式

各位看官們大家好，上一回中咱們說的例子是"如何調整元件在限制布局中的大小",這一回中咱們說的例子是"如何調整元件在限制布局中的角度"。閑話休提，言歸正轉， 讓我們一起Talk Android吧！

背景介紹

我們在前面章回中介紹了如何調整元件在限制布局中的位置和大小，在實際項目中使用限制(

constraintlayout

)布局的時候需要調整元件在布局中的角度，進而調整元件的位置。這樣的需求不是很多，但是也存在。比如使用花瓣的圖檔拼出一朵花，就需要按照角度來調整元件的位置。

相關屬性

調整元件的角度需要使用元件的三個圓形類屬性,詳細如下：

app:layout_constraintCircle        //指定圓心元件
app:layout_constraintCircleRadius  //指定圓心半徑
app:layout_constraintCircleAngle   //指定圓心角度
           

• 圓心元件的屬性值就是某個元件的id,圓心變化後其它的元件也會跟着變化；
• 圓心半徑的屬性值就xxdp，它表示某個元件中心位置到圓心的距離，和數學中圓的半徑含義相同；
• 圓心角度的屬性值是浮點數值，比如1.2.它表示目前元件與圓心的角度，12點鐘方向為0度，沿着順時針方向旋轉,角度依次增大。直到360為止；

使用方法

我們通過具體的例子來說明這些屬性的用法，示例：使用花瓣的圖檔拼出一朵花。

1. 選取一個圖檔元件當作花朵的圓心，
2. 設定花瓣圖檔元件的三個圓形屬性；
3. 調整花瓣元件的半徑和角度，使它們圍繞圓心排列；

示例程式

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.ActivityConstrilayout">

    <ImageView
        android:id="@+id/id_circle_center"
        android:background="@drawable/ic_circle_in"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintVertical_bias="0.5"
        app:layout_constraintHorizontal_bias="0.5"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>


    <ImageView
        android:background="@drawable/ic_circle_out"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintCircle="@id/id_circle_center"
        app:layout_constraintCircleRadius="65dp"
        app:layout_constraintCircleAngle="30.0"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>


    <ImageView
        android:background="@drawable/ic_circle_out"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintCircle="@id/id_circle_center"
        app:layout_constraintCircleRadius="65dp"
        app:layout_constraintCircleAngle="90.0"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>


    <ImageView
        android:background="@drawable/ic_circle_out"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintCircle="@id/id_circle_center"
        app:layout_constraintCircleRadius="65dp"
        app:layout_constraintCircleAngle="150.0"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>


    <ImageView
        android:background="@drawable/ic_circle_out"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintCircle="@id/id_circle_center"
        app:layout_constraintCircleRadius="65dp"
        app:layout_constraintCircleAngle="210.0"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>

    <ImageView
        android:background="@drawable/ic_circle_out"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintCircle="@id/id_circle_center"
        app:layout_constraintCircleRadius="65dp"
        app:layout_constraintCircleAngle="270.0"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>

    <ImageView
        android:background="@drawable/ic_circle_out"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintCircle="@id/id_circle_center"
        app:layout_constraintCircleRadius="65dp"
        app:layout_constraintCircleAngle="330.0"

        app:layout_constraintWidth_default="percent"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintHeight_percent="0.1"
        android:layout_width="0dp"
        android:layout_height="0dp">
    </ImageView>
</androidx.constraintlayout.widget.ConstraintLayout>
           

程式中建立了一個花朵，由七個

ImageView

元件構成，圓心使用一個

ImageView

元件實作，周圍的花瓣使用六個

ImageView

元件實作；圓心的背景圖檔是橙色圓形，它沒有使用圓形類的屬性；花瓣的背景圖檔是黃色圓形，它們使用了圓形類屬性，除了角度屬性值不同外，其它屬性都相同，下面是程式運作的效果圖。

看官們，關于"如何調整元件在限制布局中的角度"的例子咱們就介紹到這裡，欲知後面還有什麼例子，且聽下回分解！