天天看點

一起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

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

一起Talk Android吧(第五百零六回:如何調整元件在限制布局中的角度)背景介紹相關屬性使用方法示例程式

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