Android UI组件合集(一)
我们将学习Android UI组件容器
学习Android UI组件可以经过大概以下三个过程:
- 学会使用
- 学会自定义
- 了解底层代码如何渲染UI
以下是UI组件关系图
此图会保持更新:
一、首先介绍LinearLayout
ViewGroup
继承自View
,是可以包含View
组件的容器。
LinearLayout
继承自ViewGroup
,是可以进行水平线性排列和垂直线性排列的容器
1. 线性布局代码:
水平线性排列:
activity_main.xml
文件如下:
展开查看
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮3"/> </LinearLayout>
其中
android:layout_width="match_parent"
android:layout_height="match_parent"
表示的是匹配父容器的宽度或高度,父容器多大,此组件就多大。
而
android:layout_width="wrap_content"
android:layout_height="wrap_content"
表示的是正好包裹内容,此组件包裹的内容多大,此组件就多大。
效果如下所示:
垂直线性排列:
只需要将上述代码中的第6行改为
android:orientation="vertical"
效果图如图所示:
2. 填充(padding)
填充就是容器自己给自己添加空白。
activity_main.xml
文件如下:
展开查看
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:paddingStart="20dp"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮1"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮3"/> </LinearLayout>
效果图如图所示:
3. 间距代码
间距是相对于View
与View
之间的,是一种相对关系。
设置Button
与Parent
间距20dp
。
activity_main.xml
文件如下:
展开查看
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮1" android:layout_marginStart="20dp"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮2"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮3"/> </LinearLayout>
说明:这里第7行
*start/*end
一般情况下和*left/*right
是一样的效果,主要是为了做国际化适配,方便从右往左读的语言文字(如阿拉伯文)。
效果图如图所示:
LinearLayout
就学习完成了,还有一些其他属性,我们在实践中慢慢学习。但是我十分不推荐使用LinearLayout
,它最大的缺点就是不会自动适配不同分辨率的手机。以后谁滥用LinearLayout
,直接板砖伺候😡。
二、RelativeLayout
RelativeLayout
是相对布局,可以将父容器或者兄弟容器作为参考系来放置组件。
我们来实现一个案例,案例如下图所示:
activity_main.xml
文件如下:
展开查看
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- 组件默认位置是左上角 --> <!-- 下面四个组件是相对于父容器 --> <Button android:id="@+id/center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="中间" android:layout_centerInParent="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="上"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:text="下"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:text="左"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_alignParentEnd="true" android:text="右"/> <!-- ================================= --> <!-- 必需形成一个椭圆 所以下面的一中间的按钮作为参考系 下面四个组件是相对于兄弟组件 --> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignEnd="@id/center" android:layout_marginEnd="100dp" android:layout_alignBottom="@id/center" android:layout_marginBottom="180dp" android:text="左上"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignStart="@id/center" android:layout_marginStart="100dp" android:layout_alignBottom="@id/center" android:layout_marginBottom="180dp" android:text="右上"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignEnd="@id/center" android:layout_marginEnd="100dp" android:layout_alignTop="@id/center" android:layout_marginTop="180dp" android:text="左下"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignStart="@id/center" android:layout_marginStart="100dp" android:layout_alignTop="@id/center" android:layout_marginTop="180dp" android:text="右下"/> </RelativeLayout>
效果图如图所示:
三、ConstraintLayout
ConstraintLayout
可以减少布局的层级,优化渲染性能。当然Google
提供了图形用户界面进行绘制。请参考如下链接:
ConstraintLayout图像用户界面操作
图形用户界面
1. 普通的相对布局
activity_main.xml
代码如下所示:
展开查看
<?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:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/btn1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="中心" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"/> </androidx.constraintlayout.widget.ConstraintLayout>
app:layout_constraintBottom_toBottomOf="parent"
:第一个Bottom
代表的是本组件下面基线,第二个Bottom
代表的是等号后面parent
的下面基线,其余同理。
app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent"
看如上代码其对应位置Top
与Bottom
相反,且等号后面同一View
所以其便会实现居中效果。
效果如图所示:
1. 事件分发机制
2. AdapterViewFlipper动画效果
本文作者:爱情丶眨眼而去
本文链接:https://www.cnblogs.com/zshsboke/articles/17492119.html
版权声明:本作品采用©️CC BY-NC-SA 4.0许可协议进行许可。