当前位置: 首页 > news >正文

一起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"><ImageViewandroid: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><ImageViewandroid: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><ImageViewandroid: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><ImageViewandroid: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><ImageViewandroid: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><ImageViewandroid: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><ImageViewandroid: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组件实现;圆心的背景图片是橙色圆形,它没有使用圆形类的属性;花瓣的背景图片是黄色圆形,它们使用了圆形类属性,除了角度属性值不同外,其它属性都相同,下面是程序运行的效果图。
在这里插入图片描述

看官们,关于"如何调整组件在约束布局中的角度"的例子咱们就介绍到这里,欲知后面还有什么例子,且听下回分解!

http://www.lryc.cn/news/21756.html

相关文章:

  • 微信投票-课后程序(JAVA基础案例教程-黑马程序员编著-第七章-课后作业)
  • duboo+zookeeper分布式架构入门
  • 黑盒测试用例设计方法-等价类划分法
  • 4.OCR文本识别Connectionist Temporal Classification(CTC)算法
  • 误删了Ubuntu/Linux的一些默认用户目录怎么办?
  • ArXiv简介以及论文提交
  • pytorch学习
  • 【OC】块初识
  • 3-2 创建一个至少有两个PV组成的大小为20G的名为testvg的VG
  • 【密码学】 一篇文章讲透数字证书
  • Linux 操作系统原理 — 内存管理 — 虚拟地址空间(x86 64bit 系统)
  • C语言深入知识——(2)指针的深入理解
  • Git使用笔记
  • 数据库管理-第五十八期 倒腾PDB(20230226)
  • 我看谁还敢说不懂git
  • Scratch少儿编程案例-算法练习-实现加减乘除练习题
  • 【离线数仓-9-数据仓库开发DWS层设计要点-1d/nd/td表设计】
  • python网络数据获取
  • [Datawhale][CS224W]图机器学习(六)
  • aws ecr 使用golang实现的简单镜像转换工具
  • 【20230225】【剑指1】分治算法(中等)
  • 「JVM 高效并发」Java 线程
  • ADAS-可见光相机之Cmos Image Sensor
  • 【ESP 保姆级教程】玩转emqx MQTT篇③ ——封装 EmqxIoTSDK,快速在项目集成
  • Python自动化测试面试题-编程篇
  • CIT 594 Module 7 Programming AssignmentCSV Slicer
  • 链路追踪——【Brave】第一遍小结
  • Vision Transformer(ViT)
  • 104-JVM优化
  • QML 颜色表示法