前言

本篇主要为Android 软件UI界面基础

常用控件

Android提供了很多UI控件来帮助开发者开发应用程序,本节记录其中部分,比如TextView、EditText、Button、ImageView

所有View共有的属性

属性 含义
android:layout_width=”wrap_content” 宽度
android:layout_height=”wrap_content” 高度
android:gravity=”center” 内容的对齐方式
android:layout_gravity=”center” 自己在相对父容器中的对齐方式
android:layout_margin=”5dp” 边距:边线和外部容器的距离
android:padding=”5dp” 空白:内容距边线的距离

高度与宽度值

含义
wrap_content 根据内容大小定
match_parent 撑满父容器
10dp 固定大小

gravity / layout_gravity 常用值

含义
bottom
center 中间
center_horizontal 横向中间
center_vertical 纵向中间
left
right
top

TextView

TextView主要用于不可编辑的文字显示

  • android:text 文字内容

  • android:textColor 字体颜色:颜色值表示法

  • android:background 背景色:可用颜色、图片

  • android:textSize 字体大小:大小的单位,sp,dp,px

EditText

EditText继承自TextViewEditText最大的特点就是可以输入和修改文字的内容,是与用户交互的重要控件

  • android:hint 该属性是给用户一个提示,在EditText中输入内容后,含有内容的情况下它将不会显示
  • android:textColorHint 设置提示文本属性
  • android:inputType 限制输入类型,具体参数可参考菜鸟教程2.3.2 EditText(输入框)详解 | 菜鸟教程 (runoob.com)

其它属性同样可以参考菜鸟教程的内容

Button

Button同样继承自TextView,拥有TextView所有的属性,主要用来监听用户的点击交互

  • android:onClick 设置点击事件

更多属性可参考2.3.3 Button(按钮)与ImageButton(图像按钮) | 菜鸟教程 (runoob.com)

ImageView

ImageView主要用于展示图片资源

  • android:adjustViewBounds:设置ImageView是否调整自己的边界来保持所显示图片的长宽比。
  • android:maxHeight:设置ImageView的最大高度。
  • android:maxWidth:设置ImageView的最大宽度。
  • android:scaleType:设置所显示的图片如何缩放或移动以适应ImageView的大小。
  • android:src:设置ImageView所显示的Drawable对象的ID。

scaleType属性

  • matrix:使用matrix方式进行缩放。
  • fitXY:横向、纵向独立缩放,以适应该ImageView。
  • fitStart:保持纵横比缩放图片,并且将图片放在ImageView的左上角。
  • fitCenter:保持纵横比缩放图片,缩放完成后将图片放在ImageView的中央。
  • fitEnd:保持纵横比缩放图片,缩放完成后将图片放在ImageView的右下角。
  • center:把图片放在ImageView的中央,但是不进行任何缩放。
  • centerCrop:保持纵横比缩放图片,以使图片能完全覆盖ImageView。
  • centerInside:保持纵横比缩放图片,以使得ImageView能完全显示该图片。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="第二课安卓程序初探"
/>
<ImageView
android:scaleType="fitXY"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/avatar"/>
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello World"
/>
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="星空下的YZY"/>
<TextView
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="欢迎访问我的博客"/>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:onClick="Back"
android:text="返回">

</Button>
</LinearLayout>


布局

Android中有六大布局,分别是: LinearLayout(线性布局),RelativeLayout(相对布局),TableLayout(表格布局) FrameLayout(帧布局),AbsoluteLayout(绝对布局),GridLayout(网格布局)。本节主要记录LinearLayout(线性布局)和RelativeLayout(相对布局)

LinearLayout :线性布局

orientation: 方向

  • Horizontal:水平方向

  • Vertical:竖向

layout_weight属性

作用:父容器的剩余宽度(或高度),按容器中各子view所定义的layout_weight进行加权平均分配。

剩余宽度=父容器总宽度-所有子view的宽度和

RelativeLayout:相对布局

相对布局特有属性

  • 相对于容器的位置:

​ 居中:水平居中、垂直居中、容器居中

​ 对齐:左对齐、右对齐、上对齐、下对齐

  • 相对于其它同级别子View的位置:

​ 对齐:左对齐、右对齐、上对齐、下对齐

​ 从哪里开始:在上面、下面、左边、右边

:相对布局容器内的子View的位置,在各子View中定义属性

相对于容器位置

  • android:layout_alignParentLeft 相对于父靠左
  • android:layout_alignParentTop 相对于父靠上
  • android:layout_alignParentRight 相对于父靠右
  • android:layout_alignParentBottom 相对于父靠下
  • android:layout_centerInParent=”true” 相对于父既垂直又水平居中(中间位置)
  • android:layout_centerHorzontal=”true” 相对于父水平居中
  • android:layout_centerVertical=”true” 相对于父垂直居中

相对于同级子View位置

  • android:layout_above 位于参考组件之上
  • android:layout_below 位于参考组件之下
  • android:layout_toLeftOf 位于参考组件左边
  • android:layout_toRight 位于参考组件右边
  • android:layout_alignLeft 对齐参考组件的左边界
  • android:layout alignRight 对齐参考组件的右边界
  • android:llayout_alignTop 对齐参考组件的上边界
  • android:layout_alignBottom 对齐参考组件的下边界

更多布局

更多布局参考1.0 Android基础入门教程 | 菜鸟教程 (runoob.com)

参考文献

在线资源

Android基础入门教程_w3cschool

1.0 Android基础入门教程 | 菜鸟教程 (runoob.com)

Android—UI之ImageView - 承香墨影 - 博客园 (cnblogs.com)

参考书籍

安卓软件开发实践 / 周世凯,陈小龙,周国辉主编 . -哈尔滨:东北林业大学出版社,2020.8

其他

参考了林逢升老师在超星上的资料