Android UI组件合集(一)

我们将学习Android UI组件容器

学习Android UI组件可以经过大概以下三个过程:

  1. 学会使用
  2. 学会自定义
  3. 了解底层代码如何渲染UI

以下是UI组件关系图

此图会保持更新:
image

一、首先介绍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"
表示的是正好包裹内容,此组件包裹的内容多大,此组件就多大。

效果如下所示:
image
垂直线性排列:
只需要将上述代码中的第6行改为
android:orientation="vertical"
效果图如图所示:
image

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>

效果图如图所示:
image

3. 间距代码

间距是相对于ViewView之间的,是一种相对关系。
设置ButtonParent间距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 是一样的效果,主要是为了做国际化适配,方便从右往左读的语言文字(如阿拉伯文)。

效果图如图所示:
image

LinearLayout就学习完成了,还有一些其他属性,我们在实践中慢慢学习。但是我十分不推荐使用LinearLayout,它最大的缺点就是不会自动适配不同分辨率的手机。以后谁滥用LinearLayout,直接板砖伺候😡。

二、RelativeLayout

RelativeLayout是相对布局,可以将父容器或者兄弟容器作为参考系来放置组件。
我们来实现一个案例,案例如下图所示:
image
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>

效果图如图所示:
image

三、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"

看如上代码其对应位置TopBottom相反,且等号后面同一View所以其便会实现居中效果。
效果如图所示:
image

1. 事件分发机制

2. AdapterViewFlipper动画效果

本文作者:爱情丶眨眼而去

本文链接:https://www.cnblogs.com/zshsboke/articles/17492119.html

版权声明:本作品采用©️CC BY-NC-SA 4.0许可协议进行许可。

posted @   爱情丶眨眼而去  阅读(94)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
🔑
  1. 1 赤伶 HITA
  2. 2 樱花树下的约定 (DJ-lucky小阳版) 旺仔小乔
  3. 3 踏雪 国风新语,Babystop_山竹
  4. 4 虞兮叹 闻人听書_
  5. 5 广寒宫 花沫
  6. 6 踏山河 七叔(叶泽浩)
  7. 7 破茧 张韶涵
  8. 8 下山 要不要买菜
  9. 9 红昭愿 音阙诗听
  10. 10 渡我不渡她 独孤
  11. 11 海草舞 陈冬霖
  12. 12 纸短情长 (女声版) 林玉冰
  13. 13 把梦照亮 赵小炮
  14. 14 沙漠骆驼 烟火兄弟
  15. 15 赢在江湖 姜鹏
  16. 16 孤勇者 杨宇峰
  17. 17 口是心非 张大帅
  18. 18 赐我 小时姑娘
  19. 19 囍(Chinese Wedding) 葛东琪
樱花树下的约定 (DJ-lucky小阳版) - 旺仔小乔
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Da da da da da da da da da da

Da da da da da da da da da da

Da da da da da da da da da da

Da da da da da da da da da da

Da da da da da da da da

是谁醉酒策马我嘶吼望断天涯

是谁妙曲生花我十指谈笑风华

是谁高歌天下我目送海角余霞

是谁拨乱丝发我愁思默语不答

孤身夺下噬血龙剑

脚踏浮云轻似燕

奈何瑟瑟风中久站

儿女情长看不断

一把酸泪怎写沧桑

万箭齐发留残伤

两行青汗岂知芳香

她还映在水中央

如诗啊如画

放不下的是牵挂

你曾问我害不害怕

抵不住那一刹

若晴呐若雨

爱恨情仇千万缕

我曾问你何时

迎娶禁不得起赞许

不急又不缓

在山的一头呼喊

不管听见还是不见

哪怕黑发被浸染

不悲我不喜

就在心里等着你

让这新曲飘过万里

带去我的灵体

如诗啊如画

放不下的是牵挂

你曾问我害不害怕

抵不住那一刹

若晴呐若雨

爱恨情仇千万缕

我曾问你何时

迎娶禁不得起赞许

不急又不缓

在山的一头呼喊

不管听见还是不见

哪怕黑发被浸染

不悲我不喜

就在心里等着你

让这新曲飘过万里

带去我的灵体

如诗啊如画

放不下的是牵挂

你曾问我害不害怕

抵不住那一刹

若晴呐若雨

爱恨情仇千万缕

我曾问你何时

迎娶禁不得起赞许

不急又不缓

在山的一头呼喊

不管听见还是不见

哪怕黑发被浸染

不悲我不喜

就在心里等着你

让这新曲飘过万里

带去我的灵体

未经许可,不得翻唱或使用