今天在干嘛
简单控件
MoMo Lv5
  2023-02-28 10:51:47   2023-02-28 11:03:19    

image

文本显示

设置文本内容

  • 在 XML 文件中通过属性 android:text 设置文本，在XML文件中引用（@string/xxx）

    • ```xml
      1
      2
      3
      4
      5
      6
      7
      8

      - 在 Java 代码中调用文本视图对象的 setText 方法设置文本
        引用字符串资源，在Java代码中引用（R.string.xxx）

        - ```java
          // 获取名为tv_hello的文本视图
          TextView tv_hello = findViewById(R.id.tv_hello);
          tv_hello.setText("你好，世界"); // 设置tv_hello的文字内容

设置文本的大小

TextView允许设置文本内容，也允许设置文本大小，在Java代码中调用setTextSize方法，即可指定文本大小 

1
2
3
// 从布局文件中获取名叫tv_sp的文本视图
TextView tv_sp = findViewById(R.id.tv_sp);
tv_sp.setTextSize(30); // 设置tv_sp的文本大小

XML文件要求在字号数字后面写明单位类型，常见的字号单位主要有px、dp、sp 3种，分别介绍如下。

px

px是手机屏幕的最小显示单位，它与设备的显示屏有关。一般来说，同样尺寸的屏幕（比如6英寸手机），如果看起来越清晰，则表示像素密度越高，以px计量的分辨率也越大。

dp

dp有时也写作dip，指的是与设备无关的显示单位，它只与屏幕的尺寸有关。一般来说，同样尺寸的屏幕以dp计量的分辨率是相同的，比如同样是6英寸手机，无论它由哪个厂家生产，其分辨率换算成dp单位都是一个大小。

sp（推荐）

sp的原理跟dp差不多，但它专门用来设置字体大小。手机在系统设置里可以调整字体的大小（小、标准、大、超大）。设置普通字体时，同数值dp和sp的文字看起来一样大；如果设置为大字体，用dp设置的文字没有变化，用sp设置的文字就变大了。

字体大小采用不同单位的话，显示的文字大小各不相同。例如，30px、30dp、30sp这3个字号，在不同手机上的显示大小有所差异。有的手机像素密度较低，一个dp相当于两个px，此时30px等同于15dp；
有的手机像素密度较高，一个dp相当于3个px，此时30px等同于10dp。假设某个App的内部文本使用字号30px，则该App安装到前一部手机的字体大小为15dp，安装到后一部手机的字体大小为10dp，显然后一部手机显示的文本会更小。

名称 解释
px（Pixel像 素） 也称为图像元素，是作为图像构成的基本单元，单个像素的大小并不固定，跟随 屏幕大小和像素数量的关系变化，一个像素点为1px。
Resolution （分辨率） 是指屏幕的垂直和水平方向的像素数量，如果分辨率是 1920*1080 ，那就是垂 直方向有 1920 个像素，水平方向有 1080 个像素。
Dpi（像素密 度） 是指屏幕上每英寸（1英寸 = 2.54 厘米）距离中有多少个像素点。
Density（密 度） 是指屏幕上每平方英寸（2.54 ^ 2 平方厘米）中含有的像素点数量。
Dip / dp (设 备独立像素) 也可以叫做dp，长度单位，同一个单位在不同的设备上有不同的显示效果，具体 效果根据设备的密度有关，详细的公式请看下面 。

设置文本的颜色

1
2
3
4
// 从布局文件中获取名为tv_code_system的文本视图
TextView tv_code_system = findViewById(R.id.tv_code_system);
// 将tv_code_system的文字颜色设置系统自带的绿色
tv_code_system.setTextColor(Color.GREEN);

注意属性android:background和setBackgroundResource方法，它俩用来设置控件的背景，不单单是背景颜色，还包括背景图片。

视图基础

设置视图的宽高

手机屏幕是块长方形区域，较短的那条边叫作宽，较长的那条边叫作高。App控件通常也是长方形状，控件宽度通过属性android:layout_width表达，控件高度通过属性android:layout_height表达，宽高的取值主要有下列3种：

  • match_parent：表示与上级视图保持一致。上级视图的尺寸有多大，当前视图的尺寸就有多大。
  • wrap_content：表示与内容自适应。对于文本视图来说，内部文字需要多大的显示空间，当前视图就要占据多大的尺寸。但最宽不能超过上级视图的宽度，一旦超过就要换行；最高不能超过上级视图
    的高度，一旦超过就会隐藏。
  • 以dp为单位的具体尺寸，比如300dp，表示宽度或者高度就是这么大。

设置视图的间距

每个TextView标签都携带新的属性android:layout_marginTop="5dp"，该属性的作用是让当前视图与上方间隔一段距离。同理，
android:layout_marginLeft让当前视图与左边间隔一段距离，android:layout_marginRight让当前视图与右边间隔一段距离，android:layout_marginBottom让当前视图与下方间隔一段距离。如果上下左右都间隔同样的距离，还能使用android:layout_margin一次性设置四周的间距。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?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="300dp"
    android:background="#00AAFF"
    android:orientation="vertical">

    <!-- 中间层的布局背景为黄色 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="20dp"
        android:background="#FFFF99"
        android:padding="60dp">

        <!-- 最内层的视图背景为红色 -->
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF0000"/>
    </LinearLayout>

</LinearLayout>
image

设置视图的对齐方式

在XML文件中通过属性android:layout_gravity可以指定当前视图的对齐方向，当属性值为top时表示视图朝上对齐，为bottom时表示视图朝下对齐，为left时表示视图靠左对齐，为right时表示视图靠右对齐。如果希望视图既朝上又靠左，则用竖线连接top与left，此时属性标记为
android:layout_gravity="top|left"；如果希望视图既朝下又靠右，则用竖线连接bottom与right，此时属性标记为android:layout_gravity="bottom|right"。

注意layout_gravity规定的对齐方式，指的是当前视图往上级视图的哪个方向对齐，并非当前视图的内部对齐。若想设置内部视图的对齐方向，则需由当前视图的android:gravity指定，该属性一样拥有top、bottom、left、right 4种取值及其组合。

gravity与layout_gravity的不同之处在于：layout_gravity设定了当前视图相对于上级视图的对齐方式，而gravity设定了下级视图相对于当前视图的对齐方式；前者决定了当前视图的位置，而后者决定了下级视图的位置。

常用布局

线性布局LinearLayout

线性布局像是用一根线把它的内部视图串起来，故而内部视图之间的排列顺序是固定的，要么从左到右排列，要么从上到下排列。

在XML文件中，LinearLayout通过属性android:orientation区分两种方向，其中从左到右排列叫作水平方向，属性值为horizontal；从上到下排列叫作垂直方向，属性值为vertical。

如果LinearLayout标签不指定具体方向，则系统默认该布局为水平方向排列，也就是默认android:orientation="horizontal"

除了方向之外，线性布局还有一个权重概念，所谓权重，指的是线性布局的下级视图各自拥有多大比例的宽高，在XML文件中通过属性android:layout_weight来表达。

一旦设置了layout_weight属性值，便要求layout_width填0dp或者layout_height填0dp。如果layout_width填0dp，则layout_weight表示水平方向的权重，下级视图会从左往右分割线性布局；如果layout_height填0dp，则layout_weight表示垂直方向的权重，下级视图会从上往下分割线性布局。 

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
46
47
48
49
50
51
52
53
<?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="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="横排第一个"
            android:textSize="17sp"
            android:textColor="#000000"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="横排第二个"
            android:textSize="17sp"
            android:textColor="#000000"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="竖排第一个"
            android:textSize="17sp"
            android:textColor="#000000"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:text="竖排第二个"
            android:textSize="17sp"
            android:textColor="#000000"/>

    </LinearLayout>

</LinearLayout>
image

相对布局RelativeLayout

线性布局的下级视图是顺序排列着的，另一种相对布局的下级视图位置则由其他视图决定。相对布局名为RelativeLayout，因为下级视图的位置是相对位置，所以得有具体的参照物才能确定最终位置。

如果不设定下级视图的参照物，那么下级视图默认显示在RelativeLayout内部的左上角。用于确定下级视图位置的参照物分两种，一种是与该视图自身平级的视图；另一种是该视图的上级视图。

  1. 属性值为true或者false
    1. android：layout_centerHrizontal 水平居中
    2. android：layout_centerVertical 垂直居中
    3. android：layout_centerInparent 相对于父控件完全居中
    4. android：layout_alignParentBottom 贴紧父控件的下边缘
    5. android：layout_alignParentLeft 贴紧父控件的左边缘
    6. android：layout_alignParentRight 贴紧父控件的右边缘
    7. android：layout_alignParentTop 贴紧父控件的上边缘
    8. android：layout_alignWithParentIfMissing 如果对应的兄弟控件找不到的话，就以父控件作为参照物
  2. 属性值必须为id的引用名“@id/id-name”
    1. android：layout_below 在某控件下方
    2. android：layout_above 在某控件上方
    3. android：layout_toLeftOf 在某控件的左边
    4. android：layout_toRightOf 在某控件的右边
    5. android：layout_alignTop 本控件的上边缘和某控件的上边缘对齐
    6. android：layout_alignLeft 本控件的左边缘和某控件的左边缘对齐
    7. android：layout_alignBottom 本控件的下边缘和某控件的下控件对齐
    8. android：layout_alignRight 本控件的右边缘和某控件的有边缘对齐
  3. 属性值为具体的像素值，如30dip，40px
    1. android：layout_marginBottom 离某控件底边缘的距离
    2. android：layout_marginLeft 离某控件左边缘的距离
    3. android：layout_marginRight 离某控件右边缘的距离
    4. android：layout_marginTop 离某控件上边缘的距离

网格布局GridLayout

网格布局默认从左往右、从上到下排列，它先从第一行从左往右放置下级视图，塞满之后另起一行放置其余的下级视图，如此循环往复直至所有下级视图都放置完毕。

为了判断能够容纳几行几列，网格布局新增了android:columnCount与android:rowCount两个属性，其中columnCount指定了网格的列数，即每行能放多少个视图；rowCount指定了网格的行数，即每列能放多少个视图。 

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
46
47
48
49
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="2">
  <!--两行两列-->

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#ffcccc"
        android:gravity="center"
        android:text="浅红色"
        android:textColor="#000000"
        android:textSize="17sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#ffaa00"
        android:gravity="center"
        android:text="橙色"
        android:textColor="#000000"
        android:textSize="17sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#00ff00"
        android:gravity="center"
        android:text="绿色"
        android:textColor="#000000"
        android:textSize="17sp" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_columnWeight="1"
        android:background="#660066"
        android:gravity="center"
        android:text="深紫色"
        android:textColor="#000000"
        android:textSize="17sp" />

</GridLayout>

滚动视图ScrollView

与线性布局类似，滚动视图也分为垂直方向和水平方向两类，其中垂直滚动视图名为ScrollView，水平滚动视图名为HorizontalScrollView。这两个滚动视图的使用并不复杂，主要注意以下3点：

  1. 垂直方向滚动时，layout_width属性值设置为match_parent，layout_height属性值设置为wrap_content。
  2. 水平方向滚动时，layout_width属性值设置为wrap_content，layout_height属性值设置为match_parent。
  3. 滚动视图节点下面必须且只能挂着一个子布局节点，否则会在运行时报错Caused by： java.lang.IllegalStateException：ScrollView can host only one direct child。

有时ScrollView的实际内容不够，又想让它充满屏幕，再增加一行android:fillViewport（该属性为true表示允许填满视图窗口 

1
2
android:layout_height="match_parent"
android:fillViewport="true"

按钮

Button继承于TextView，因此它们拥有的属性都是共通的。

textAllCaps

对于TextView来说，text属性设置了什么文本，文本视图就显示什么文本。但对于Button来说，不管text属性设置的是大写字母还是小写字母，按钮控件都默认转成大写字母显示。比如在XML文件中加入下面的Button标签 

1
2
3
4
<Button
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Hello World"/>

编译运行后的App界面，按钮上显示全大写的“HELLO WORLD”，而非原来大小写混合的“Hello
World”。显然这个效果不符合预期，为此需要给Button标签补充textAllCaps属性，该属性默认为true表示全部转为大写，如果设置为false则表示不转为大写。 

1
2
3
4
5
<Button
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="Hello World"
  android:textAllCaps="false"/>

点击事件

除此之外，Button最重要的是点击事件。

  • 点击监听器：通过setOnClickListener方法设置。按钮被按住少于500毫秒时，会触发点击事件。

    • ```java
      // 从布局文件中获取名为btn_click_single的按钮控件
      Button btn_click_single = findViewById(R.id.btn_click_single);
      // 给btn_click_single设置点击监听器，一旦用户点击按钮，就触发监听器的onClick方法
      btn_click_single.setOnClickListener(new MyOnClickListener());// 定义一个点击监听器，它实现了接口View.OnClickListener
      class MyOnClickListener implements View.OnClickListener {
      @Override
      public void onClick(View v) { // 点击事件的处理方法
      String desc = String.format("%s 点击了按钮：%s", ((Button) v).getText());
tv_result.setText(desc); // 设置文本视图的文本内容
      }
      }
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18

      - 长按监听器：通过`setOnLongClickListener`方法设置。按钮被按住超过500毫秒时，会触发长按事件。

        - ```java
          // 从布局文件中获取名为btn_click_public的按钮控件
          Button btn_longclick_public = findViewById(R.id.btn_longclick_public);
          // 设置长按监听器，一旦用户长按按钮，就触发监听器的onLongClick方法
          btn_longclick_public.setOnLongClickListener(this);
          
          @Override
          public boolean onLongClick(View v) { // 长按事件的处理方法
            if (v.getId() == R.id.btn_longclick_public) { // 来自于按钮
              btn_longclick_public
              String desc = String.format("%s 长按了按钮：%s", ((Button)v).getText());
              tv_result.setText(desc); // 设置文本视图的文本内容
            } 
            return true;
          }

点击监听器和长按监听器不局限于按钮控件，其实它们都来源于视图基类View，凡是从View派生而来的各类控件，均可注册点击监听器和长按监听器。譬如文本视图TextView，其对象也能调用setOnClickListener方法与setOnLongClickListener方法，此时TextView控件就会响应点击动作和长按动作。

因为按钮存在按下和松开两种背景，便于提示用户该控件允许点击，但文本视图默认没有按压背景，不方便判断是否被点击，所以一般不会让文本视图处理点击事件和长按事件。

禁用与恢复按钮

  • 不可用按钮：按钮不允许点击，即使点击也没反应，同时按钮文字为灰色。
  • 可用按钮：按钮允许点击，点击按钮会触发点击事件，同时按钮文字为正常的黑色。 
1
2
btn_test.setEnabled(true); // 启用当前控件
btn_test.setEnabled(false); // 禁用当前控件

图像显示

图片一般放在res/drawable目录下，设置图像显示一般有两种方法：

  1. 在XML文件中，通过属性android:src设置图片资源，属性值格式形如 @drawable/不含扩展名的图片名称。
  2. 在Java代码中，调用setImageResource方法设置图片资源，方法参数格式形如 R.drawable.不含扩展名的图片名称。
    （1）图像的缩放问题：
    ImageView本身默认图片居中显示，若要改变图片的显示方式，可通过scaleType属性设定，该属性的取值说明如下：

图像视图ImageView

由于图像通常保存为单独的图片文件，因此需要先把图片放到res/drawable目录，然后再去引用该图片的资源名称。XML文件通过属性android:src设置图片资源，属性值格式形如“@drawable/不含扩展名的图片名称”。 

1
2
3
4
5
<ImageView
  android:id="@+id/iv_scale"
  android:layout_width="match_parent"
  android:layout_height="220dp"
  android:src="@drawable/apple" />

ImageView本身默认图片居中显示，不管图片有多大抑或有多小，图像视图都会自动缩放图片，使之刚好够着ImageView的边界，并且缩放后的图片保持原始的宽高比例，看起来图片很完美地占据视图中央。这种缩放类型在XML文件中通过属性android:scaleType定义，即使图像视图未明确指定该属性，系统也会默认其值为fitCenter，表示让图像缩放后居中显示。 

1
2
3
4
5
6
<ImageView
  android:id="@+id/iv_scale"
  android:layout_width="match_parent"
  android:layout_height="220dp"
  android:src="@drawable/apple"
  android:scaleType="fitCenter"/>

在Java代码中可调用setScaleType方法设置图像视图的缩放类型，其中fitCenter对应的类型为ScaleType.FIT_CENTER

1
2
// 将缩放类型设置为“保持宽高比例，缩放图片使其位于视图中间”
iv_scale.setScaleType(ImageView.ScaleType.FIT_CENTER);

可选值如下：

  • fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比可能会发生改变
  • fitStart:保持纵横比缩放图片,知道较长的边与Image的边长相等,缩放完成后将图片放在ImageView的左上角
  • fitCenter:同上,缩放后放于中间;
  • fitEnd:同上,缩放后放于右下角;
  • center:保持原图的大小，显示在ImageView的中心。当原图的size大于ImageView的size，超过部分裁剪处理。
  • centerCrop:保持横纵比缩放图片,知道完全覆盖ImageView,可能会出现图片的显示不完全
  • centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片
  • matrix:默认值，不改变原图的大小，从ImageView的左上角开始绘制原图，原图超过ImageView的部分作裁剪处理

图像按钮ImageButton：

ImageButton是显示图片的图像按钮，但它继承自ImageView，而非继承Button。

ImageButton和Button之间的区别有：

  • Button既可显示文本也可显示图片，ImageButton只能显示图片不能显示文本。
  • ImageButton上的图像可按比例缩放，而Button通过背景设置的图像会拉伸变形。
  • Button只能靠背景显示一张图片，而ImageButton可分别在前景和背景显示图片，从而实现两张图片叠加的效果。

同时展示文本与图像

Button标签通过属性android:drawableTop设置了文字上边的图标，若想变更图标所处的位置，
只要把drawableTop换成对应方向的属性即可

  • drawableTop：指定文字上方的图片。
  • drawableBottom：指定文字下方的图片。
  • drawableLeft：指定文字左边的图片。
  • drawableRight：指定文字右边的图片。
  • drawablePadding：指定图片与文字的间距。
image
  1. 1. 文本显示
    1. 1.1. 设置文本内容
    2. 1.2. 设置文本的大小
      1. 1.2.1. px
      2. 1.2.2. dp
      3. 1.2.3. sp（推荐）
    3. 1.3. 设置文本的颜色
  2. 2. 视图基础
    1. 2.1. 设置视图的宽高
    2. 2.2. 设置视图的间距
    3. 2.3. 设置视图的对齐方式
  3. 3. 常用布局
    1. 3.1. 线性布局LinearLayout
    2. 3.2. 相对布局RelativeLayout
    3. 3.3. 网格布局GridLayout
    4. 3.4. 滚动视图ScrollView
  4. 4. 按钮
    1. 4.1. textAllCaps
    2. 4.2. 点击事件
    3. 4.3. 禁用与恢复按钮
  5. 5. 图像显示
    1. 5.1. 图像视图ImageView
    2. 5.2. 图像按钮ImageButton：
    3. 5.3. 同时展示文本与图像
© 2023 - 2025    MoMo
Powered by Hexo & Theme Keep
Unique Visitor Page View
  1. 1. 文本显示
    1. 1.1. 设置文本内容
    2. 1.2. 设置文本的大小
      1. 1.2.1. px
      2. 1.2.2. dp
      3. 1.2.3. sp（推荐）
    3. 1.3. 设置文本的颜色
  2. 2. 视图基础
    1. 2.1. 设置视图的宽高
    2. 2.2. 设置视图的间距
    3. 2.3. 设置视图的对齐方式
  3. 3. 常用布局
    1. 3.1. 线性布局LinearLayout
    2. 3.2. 相对布局RelativeLayout
    3. 3.3. 网格布局GridLayout
    4. 3.4. 滚动视图ScrollView
  4. 4. 按钮
    1. 4.1. textAllCaps
    2. 4.2. 点击事件
    3. 4.3. 禁用与恢复按钮
  5. 5. 图像显示
    1. 5.1. 图像视图ImageView
    2. 5.2. 图像按钮ImageButton：
    3. 5.3. 同时展示文本与图像