• 【Android笔记03】Android基本的UI控件（TextView、Button、EditText、ImageView、ProgressBar）

    这篇文章，主要介绍Android中提供的一些基本UI控件的使用，包含：TextView、Button、EditText、ImageView、ProgressBar组件。

    目录

    一、基本UI控件

    1.1、TextView

    （1）设置基础属性

    （2）设置带有阴影的TextView

    （3）实现跑马灯效果

    1.2、Button

    （1）按钮效果

    （2）点击切换背景

    （3）按钮事件

    1.3、EditText

    （1）输入框基础属性

    （2）获取输入框内容

     1.4、ImageView

    （1）基础属性

     1.5、ProgressBar

    （1）基础属性

    一、基本UI控件

    Android里面提供了很多的UI控件，并且Android中的所有控件可以有两种创建方式：

    • 第一种方式：在【activity.xml】（布局文件）的XML配置文件里面使用标签创建。
    • 第二种方式：在java代码中通过控件对象来创建。

    1.1、TextView

    TextView控件的主要作用是用于显示文本内容的，Android里面通过XML设置属性时候，所有的属性几乎都是使用【android:】开头。

    下面看下TextView这个控件的属性：

    • layout_width：设置控件宽度，三个可选值（fill_parent，match_parent，wrap_content），也可以直接使用数字，采用【dp】单位。
    • layout_height：设置控件高度，三个可选值（fill_parent，match_parent，wrap_content），也可以直接使用数字，采用【dp】单位。
    • id：控件的唯一标识。
    • text：控件显示的内容。
    • textColor：控件字体颜色。
    • textStyle：控件字体的风格，三个可选值（normal正常，bold加粗，italic斜体）。
    • textSize：控件字体大写。一般采用【sp】作为单位。
    • background：控件的背景颜色，也可以是图片。
    • gravity：控件中内容对齐方式。这个有很多的可选值，上下左右水平垂直等等方向，查询需要的属性即可。
    • shadowColor：设置阴影颜色。
    • shadowRadius：设置阴影的模糊程度，设为0.1就变成了字体颜色，建议使用3.0。
    • shadowDx：设置阴影在水平方向的偏移。
    • shadowDy：设置阴影在竖直方向的偏移。

    （1）设置基础属性

    下面看个案例代码：

    • 在layout目录下，新创建一个activity活动配置文件，可以使用Android Studio提供的快捷创建方式。

    • 此时会弹出窗口，让我们填写activity的文件名称。

    • 填写完成之后，点击【Finish】，此时我们项目里面就会创建【activity_textview.xml】布局文件，并且还会创建一个【textview】类。

    • 创建完成之后，我们就可以在【activity_textview.xml】布局文件里面，添加一个【TextView】控件，设置【TextView】控件的相关属性，也可以在【textview.java】类里面通过java代码设置相关的属性。
    1.     <TextView
    2.         android:id="@+id/tv01"
    3.         android:text="这是TextView的文本内容"
    4.         android:layout_width="match_parent"
    5.         android:layout_height="match_parent"
    6.         android:textSize="100sp"
    7.         android:textColor="#FFFF0000"
    8.         android:background="@color/black"
    9.         android:textStyle="bold"
    10.         android:gravity="center"/>
    • 创建了【TextView】控件之后，我们还不能访问，因为一个App应用启动时候，默认是访问【activity_main.xml】的布局页面，我们没有设置页面跳转之类的话，是不能访问到我们自己写的【activity_textview.xml】布局页面的。
    • 我们可以设置启动时候，直接访问我们写的【activity_textview.xml】布局页面即可，后面学到到页面跳转之类的，也可以通过页面跳转来访问。

    • 启动之后，就可以看到TextView设置的属性效果了。

    （2）设置带有阴影的TextView

    1.     <TextView
    2.         android:id="@+id/tv02"
    3.         android:text="设置阴影"
    4.         android:textSize="40sp"
    5.         android:textStyle="bold"
    6.         android:textColor="@color/black"
    7.         android:shadowColor="#FFFF0000"
    8.         android:shadowRadius="3.0"
    9.         android:shadowDx="30"
    10.         android:shadowDy="20"
    11.         android:layout_width="match_parent"
    12.         android:layout_height="match_parent"
    13.         />
    • 启动查看效果。

    （3）实现跑马灯效果

    跑马灯效果是指：一行文字可以自动的移动，并且是循环。

    • singleLine：内容单行显示。
    • focusable：是否可以获取焦点。
    • fosusableInTouchMode：触摸的时候是否可以获取焦点。
    • ellipsize：省略文本（是否显示【...】的格式），要实现跑马灯效果就设置为【marquee】。
    • marqueeRepeatLimit：字幕动画重复的次数。
    • clickable：是否可点击。
    1.     <TextView
    2.         android:id="@+id/tv03"
    3.         android:text="采用TextView控件实现跑马灯效果"
    4.         android:layout_width="match_parent"
    5.         android:layout_height="match_parent"
    6.         android:ellipsize="marquee"
    7.         android:focusable="true"
    8.         android:marqueeRepeatLimit="marquee_forever"
    9.         android:singleLine="true"
    10.         android:clickable="true"
    11.         android:focusableInTouchMode="true"
    12.         android:textSize="40sp"/>

    启动App，然后点击文字，就可以看到文字自己会从右往左滚动。

    到这里，【TextView】控件常用的属性就介绍完了。

    1.2、Button

    Button是按钮控件，它是一个继承自TextView控件的子控件。

    （1）按钮效果

    • 按钮基础属性。
    1.     <Button
    2.         android:id="@+id/btn01"
    3.         android:text="这是按钮"
    4.         android:layout_width="200dp"
    5.         android:layout_height="100dp"/>
    • 按钮效果如下所示。

    （2）点击切换背景

    这里我们实现一个功能，就是点击按钮的时候，按钮背景会自动切换。通过【android:background】属性设置背景，但是这种不能直接设置颜色，要设置drawable类型，才能够生效。

    • 我们在【drawable】目录下面，创建一个【btn_selector.xml】文件。

    • 创建之后，我们在里面添加【<item>】标签，然后设置需要显示的一些背景图，添加一些背景图。

     

     

     

    • 然后在【btn_selector.xml】文件里面，设置我们的选择的图标，图标可以选择很多个。
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    3.  
    4.     <!-- 当点击时候显示这个drawable -->
    5.     <item android:drawable="@drawable/ic_baseline_alarm_on_24" android:state_pressed="true"/>
    6.     <!-- 默认显示的图标 -->
    7.     <item android:drawable="@drawable/ic_baseline_bug_report_24"/>
    8.  
    9. </selector>

     设置按钮的背景为drawable的XML文件。

    1.     <Button
    2.         android:id="@+id/btn02"
    3.         android:text="这是按钮02"
    4.         android:background="@drawable/btn_selector"
    5.         android:layout_width="200dp"
    6.         android:layout_height="100dp"/>
    • drawable一些属性如下所示。

    • 启动访问页面，然后鼠标点击不释放，此时显示的就是另外一个图标，释放后，就显示之前的图标。

     

    （3）按钮事件

     Button控件有三个事件：点击事件，长按事件，触摸事件。事件需要通过事件监听器来获取，三个监听器分别如下所示：

    • setOnClickListener：点击事件监听器。重写【onClick】方法。
    • setOnLongClickListener：长按事件监听器。重写【onLongClick】方法。
    • setOnTouchListener：触摸事件监听器。重写【onTouch】方法。

     看下案例代码：

    1. package com.android.demo;
    2.  
    3. import androidx.appcompat.app.AppCompatActivity;
    4.  
    5. import android.os.Bundle;
    6. import android.util.Log;
    7. import android.view.MotionEvent;
    8. import android.view.View;
    9. import android.widget.Button;
    10.  
    11. public class MainActivity extends AppCompatActivity {
    12.  
    13.     private static final String TAG = "btn";
    14.  
    15.     @Override
    16.     protected void onCreate(Bundle savedInstanceState) {
    17.         super.onCreate(savedInstanceState);
    18. //        setContentView(R.layout.activity_main);
    19. //        setContentView(R.layout.activity_textview);
    20.         setContentView(R.layout.activity_button);
    21.  
    22.         // 获取按钮
    23.         Button btn01 = findViewById(R.id.btn01);
    24.         // 设置监听事件
    25.         btn01.setOnClickListener(new View.OnClickListener() {
    26.             @Override
    27.             public void onClick(View v) {
    28.                 Log.i(TAG, "触发按钮的点击事件");
    29.             }
    30.         });
    31.         btn01.setOnLongClickListener(new View.OnLongClickListener() {
    32.             @Override
    33.             public boolean onLongClick(View v) {
    34.                 Log.i(TAG, "触发按钮的长按事件");
    35.                 return false;
    36.             }
    37.         });
    38.         btn01.setOnTouchListener(new View.OnTouchListener() {
    39.             @Override
    40.             public boolean onTouch(View v, MotionEvent event) {
    41.                 Log.i(TAG, "触发按钮的触摸事件");
    42.                 return false;
    43.             }
    44.         });
    45.     }
    46. }

    启动应用，点击按钮，查看【Logcat】控制台，可以看到如下输出日志。

     我们也可以在XML里面通过属性来设置触发的事件，然后属性值填写对应的方法名称，接着在对应的java类里面，实现对应的方法即可。

     以上，就是Button控件的相关属性和事件。

    1.3、EditText

    EditText是一个文本输入框的控件，它也是继承自TextView控件的。它有如下属性：

    • hint：输入提示，类似于HTML中的placeholder。
    • textColorHint：输入提示文字的颜色。
    • inputType：输入框类型，是数字，字符，密码框还是其他的。
    • drawableXxxx：输入框前面的图标（Xxxx是指具体的图标名称）。
    • drawablePadding：设置图标和输入框的间距。
    • paddingXxxx：设置文本内容和输入框的间距（Xxxx是上下左右哪个间距）。
    • background：输入框的背景颜色。

    （1）输入框基础属性

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical"
    8.     tools:context=".edittext">
    9.  
    10.     <EditText
    11.         android:id="@+id/edt01"
    12.         android:hint="请输入用户名称"
    13.         android:layout_width="200dp"
    14.         android:layout_height="80dp"/>
    15.  
    16.     <EditText
    17.         android:id="@+id/edt02"
    18.         android:hint="请输入用户名称"
    19.         android:inputType="numberPassword"
    20.         android:layout_width="200dp"
    21.         android:layout_height="80dp"/>
    22.  
    23.     <EditText
    24.         android:id="@+id/edt03"
    25.         android:hint="请输入用户名称"
    26.         android:inputType="text"
    27.         android:textColorHint="#95a1aa"
    28.         android:layout_width="200dp"
    29.         android:layout_height="80dp"/>
    30.  
    31.     <EditText
    32.         android:id="@+id/edt04"
    33.         android:hint="请输入用户名称"
    34.         android:inputType="text"
    35.         android:textColorHint="#95a1aa"
    36.         android:drawableLeft="@drawable/ic_baseline_how_to_reg_24"
    37.         android:drawablePadding="20dp"
    38.         android:paddingLeft="10dp"
    39.         android:layout_width="200dp"
    40.         android:layout_height="80dp"/>
    41.  
    42. </LinearLayout>

    运行效果如下所示：

    （2）获取输入框内容

    要获取输入框的内容，一般是结合Button按钮控件，当我们点击按钮的时候，通过触发按钮的点击事件，然后在方法里获取EditText输入框的内容。

    • 新增一个按钮。
    1.     <Button
    2.         android:id="@+id/btn01"
    3.         android:text="获取内容"
    4.         android:layout_width="200dp"
    5.         android:layout_height="80dp"/>
    • java代码里面获取输入框内容。
    1. // 获取按钮
    2. Button btn01 = findViewById(R.id.btn01);
    3. // 获取输入框
    4. EditText editText = findViewById(R.id.edt04);
    5. // 设置点击事件
    6. btn01.setOnClickListener(new View.OnClickListener() {
    7.     @Override
    8.     public void onClick(View v) {
    9.         // 获取输入框内容
    10.         Editable text = editText.getText();
    11.         Log.i(TAG, "输入框的内容是: " + text.toString());
    12.     }
    13. });

    运行应用，可以看到控制台的输出日志。

     1.4、ImageView

    ImageView控件是用于存放图片的容器，它也是TextView的一个子类。ImageView控件具有如下属性：

    • src：指定图片的路径。
    • scaleType：设置图片的缩放类型。
    • maxWidth：设置图片的最大宽度，当图片宽度达到最大值后，高度会等比缩放。
    • maxHeight：设置图片的最大高度，当图片高度达到最大值后，宽度会等比缩放。
    • adjustViewBounds：调整view容器的界限，是否自动调整图片的边界大小。

    （1）基础属性

    新建一个【activity】，然后在【drawable】目录下面，放一张测试图片，图片任意就可以啦。

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical"
    8.     tools:context=".imageview">
    9.  
    10.     <ImageView
    11.         android:id="@+id/img01"
    12.         android:src="@drawable/ceshi"
    13.         android:layout_width="200dp"
    14.         android:layout_height="200dp"/>
    15.  
    16.     <ImageView
    17.         android:id="@+id/img02"
    18.         android:src="@drawable/ceshi"
    19.         android:scaleType="centerCrop"
    20.         android:layout_width="200dp"
    21.         android:layout_height="200dp"/>
    22.  
    23.     <ImageView
    24.         android:id="@+id/img03"
    25.         android:src="@drawable/ceshi"
    26.         android:maxWidth="200dp"
    27.         android:maxHeight="200dp"
    28.         android:adjustViewBounds="true"
    29.         android:layout_width="wrap_content"
    30.         android:layout_height="wrap_content"/>
    31.  
    32. </LinearLayout>

    运行效果如下所示：

     1.5、ProgressBar

    ProgressBar是一个进度条控件，它也是TextView的子类。具有如下属性：

    • max：进度条最大值。
    • progress：进度条已经完成的数值。
    • indeterminate：是否精确显示进度条的数值，true表示不精确显示进度。
    • style：进度条的样式（android里面提供了一些进度条样式，我们可以直接使用）。

    （1）基础属性

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:orientation="vertical"
    8.     tools:context=".progressbar">
    9.  
    10.     <!-- 默认转圈圈的进度条 -->
    11.     <ProgressBar
    12.         android:id="@+id/pro01"
    13.         android:layout_width="wrap_content"
    14.         android:layout_height="wrap_content"/>
    15.  
    16.     <!-- 设置水平进度条 -->
    17.     <ProgressBar
    18.         android:id="@+id/pro02"
    19.         style="?android:attr/progressBarStyleHorizontal"
    20.         android:max="100"
    21.         android:layout_width="200dp"
    22.         android:layout_height="wrap_content"/>
    23.     <!-- 创建按钮,点击按钮时候,进度条增加 -->
    24.     <Button
    25.         android:id="@+id/btn01"
    26.         android:text="增加进度条"
    27.         android:layout_width="120dp"
    28.         android:layout_height="60dp"/>
    29.  
    30.     <!-- 设置水平进度条，不显示进度值 -->
    31.     <ProgressBar
    32.         android:id="@+id/pro03"
    33.         style="?android:attr/progressBarStyleHorizontal"
    34.         android:max="100"
    35.         android:layout_width="200dp"
    36.         android:indeterminate="true"
    37.         android:layout_height="wrap_content"/>
    38.  
    39. </LinearLayout>

    java代码如下所示：

    1. // 获取按钮
    2. Button btn01 = findViewById(R.id.btn01);
    3. // 设置点击事件
    4. btn01.setOnClickListener(new View.OnClickListener() {
    5.     @Override
    6.     public void onClick(View v) {
    7.         // 获取进度条,将进度条数值增加
    8.         ProgressBar progress = findViewById(R.id.pro02);
    9.         // 获取进度条数值
    10.         int num = progress.getProgress();
    11.         // 加10
    12.         num += 10;
    13.         // 重新设置进度条数值
    14.         progress.setProgress(num);
    15.     }
    16. });

    查看效果如下所示：

     以上，就是ProgressBar进度条组件的使用。

    综上，这篇文章结束了，主要介绍了Android中提供的一些基本UI控件的使用，包含：TextView、Button、EditText、ImageView、ProgressBar组件。

  • 相关阅读:
    计算机网络 （中科大郑烇老师）笔记（一）概论
    40 JAVA安全-JWT安全及预编译CASE注入等
    python plot绘图
    多因子认证和微软AD的4个FAQ
    XXPermissions权限请求框架
    论文阅读--On optimization methods for deep learning
    校园水电费管理微信小程序的设计与实现+ssm（lw+演示+源码+运行）
    Spring AOP：原理与示例代码
    【解决AWS上死机问题】
    Mybatis的sql语句执行异常后打印到日志
  • 原文地址：https://blog.csdn.net/qq_39826207/article/details/125420353