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动画效果

posted @ 2023-11-19 10:46 爱情丶眨眼而去阅读(139) 评论(0) 收藏举报

刷新页面返回顶部

ITGuoKe

安卓开发工程师

Android UI组件合集（一）

我们将学习Android UI组件容器

以下是UI组件关系图

一、首先介绍`LinearLayout`

1. 线性布局代码：

2. 填充(padding)

3. 间距代码

二、`RelativeLayout`

三、`ConstraintLayout`

1. 普通的相对布局

1. 事件分发机制

2. AdapterViewFlipper动画效果

公告

ITGuoKe

安卓开发工程师

Android UI组件合集（一）

我们将学习Android UI组件容器

以下是UI组件关系图

一、首先介绍LinearLayout

1. 线性布局代码：

2. 填充(padding)

3. 间距代码

二、RelativeLayout

三、ConstraintLayout

1. 普通的相对布局

1. 事件分发机制

2. AdapterViewFlipper动画效果

公告

一、首先介绍`LinearLayout`

二、`RelativeLayout`

三、`ConstraintLayout`