【Android】Ui开发常见的7种控件

摸鱼小小虫

已于 2023-12-09 14:35:37 修改

阅读量932

点赞数

分类专栏： Android 文章标签： java 开发语言 android xml

于 2023-07-19 18:46:13 首次发布

本文链接：https://blog.csdn.net/m0_72983118/article/details/131815672

版权

Android 专栏收录该内容

30 篇文章 7 订阅

订阅专栏

一、常见控件

1、TextView

<TextView
          android:id="@+id/text"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:gravity="right"
          android:textSize="25sp"
          android:textColor="#00ff00"
          android:text="你好"/>

我们使用android:gravity来指定文字的对齐方式，可选值有top、bottom、left、right、center等，可以用 “|” 来同时指定多个值，这里我们指定的center,效果等同于center_vertical | center_horizontal,表示文字在垂直和水平方向都居中对齐。

通过android:textsize属性可以指定文字的大小，通过android:textColor属性可以指定文字的颜色，在Android中字体大小使用sp作为单位。

2、Button

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="next"
        android:textAllCaps="false"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

系统会对Button中的所有英文字母自动进行大写转换，android:textAllCaps="false"可以设定不进行大小写转化。

app:layout_constraintStart_toStartOf="parent": 这是一个约束属性，它定义了按钮相对于其父容器（parent）的水平对齐方式。在这里，按钮的左边缘与父容器的左边缘对齐。

app:layout_constraintTop_toTopOf="parent": 这也是一个约束属性，它定义了按钮相对于其父容器（parent）的垂直对齐方式。在这里，按钮的顶部边缘与父容器的顶部边缘对齐。

3、EditText

<EditText
          android:id="@+id/editText"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="请输入数据"
          
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent"
          app:layout_constraintVertical_bias="0.207" />;

细心的你平时应该会留意到，一些做得比较人性化的软件会在输人框里显示一些提示性的文字，然后一旦用户输入了任何内容，这些提示性的文字就会消失。

android:hint="请输入数据"

可以使用这段代码解决这个问题。

将视图绑定：

Buttom ：底部

Top ：顶部

End ：右边缘

Start ：左边缘

app:layout_constraintBottom_toBottomOf="parent": 这个约束将视图的底部边缘与父容器的底部边缘对齐。换句话说，视图的底部边缘将位于父容器的底部边缘。
app:layout_constraintEnd_toEndOf="parent": 这个约束将视图的右边缘（End）与父容器的右边缘（End）对齐。换句话说，视图的右边缘将位于父容器的右边缘。
app:layout_constraintStart_toStartOf="parent": 这个约束将视图的左边缘（Start）与父容器的左边缘（Start）对齐。换句话说，视图的左边缘将位于父容器的左边缘。
app:layout_constraintTop_toTopOf="parent": 这个约束将视图的顶部边缘与父容器的顶部边缘对齐。换句话说，视图的顶部边缘将位于父容器的顶部边缘。
app:layout_constraintVertical_bias="0.207": 这个属性设置视图在垂直方向上的偏移量。偏移量的值范围从0到1，其中0表示视图会与顶部对齐，1表示视图会与底部对齐，0.5表示视图会在垂直方向上居中对齐。在这里，偏移量为 0.207，表示视图的垂直位置会接近于垂直中心的位置。

可以看到，EditText中显示了一段提示性文本，然后当我们输人任何内容时，这段文本就会自动消失。
不过，随着输人的内容不断增多，EditText会被不断地拉长。这时由于EditText的高度指定的是wrap_content,因此它总能包含住里面的内容，但是当输人的内容过多时，界面就会变得非常难看。我们可以使用android:maxLines属性来解决这个问题，修改activity_main.xml：

android:maxLines="2"

3.1 获取EditText的数据

//获取EditText的数据
String inputText = activityMainBinding.editText.getText().toString();
Toast.makeText(getApplicationContext(),inputText,Toast.LENGTH_SHORT).show();

4、ImageVIew

学习这个控件需要提前准备好一些图片，图片通常都是放在以“drawable”开头的目录下的。

<ImageView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/img_1" />

可以看到，这里使用android:src属性给ImageView指定了一张图片。由于图片的宽和高都是未知的，所以将ImageView的宽和高都设定为wrap_content,这样就保证了不管图片的尺寸是多少，图片都可以完整地展示出来。

4.1 动态修改图片

activityMain2Binding = ActivityMain2Binding.inflate(getLayoutInflater());
activityMain2Binding.imageView.setImageResource(R.drawable.img_2);

当点击这个按钮时，即可切换图片。

我们还可以设计点击按钮对两张图片来回切换。

//全局变量： 
    private int i = 0;

List<Integer> list = new ArrayList<>();
list.add(R.drawable.img_1);
list.add(R.drawable.img_2);

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Log.d("IMG","img"+i);
        activityMain2Binding.imageView.setImageResource(list.get(i));
        i++;
        if(i == list.size()) i = 0;
    }
});

同样，我们如果用一个List保存多个R.drawable.img_x,就可以实现多个图片切换。

5、ProgressBar

<ProgressBar
             android:id="@+id/progressBar"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_marginTop="72dp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />

显示一个圆形进度条。

5.1 控制进度条的状态

这时你可能会问，旋转的进度条表明我们的程序正在加载数据，那数据总会有加载完的时候吧？如何才能让进度条在数据加载完成时消失呢？这里我们就需要用到一个新的知识点：Android控件的可见属性。所有的Android控件都具有这个属性，可以通过android:visibility 进行指定，可选值有3种：visible、invisible和gone。

visible表示控件是可见的，这个值是默认值，不指定android:visibility时，控件都是可见的。

invisbale 表示控件不可见，但是它仍然占据着原来的位置和大小，可以理解成控件变成透明状态了。

gone 则表示控件不仅不可见，而且不再占用任何屏幕空间。

我们还可以通过代码来设置控件的可见性，使用的是setVisibility()方法，可以传入View.VISIBLE、View.INVISIBLE和View.G0NE这3种值。

利用一个按钮控制进度条消失和显示：

View button3 = activityMain2Binding.button3;

button3.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        if(activityMain2Binding.progressBar.getVisibility() == View.GONE){
            activityMain2Binding.progressBar.setVisibility(View.VISIBLE);
        }else{
            activityMain2Binding.progressBar.setVisibility(View.GONE);
        }
    }
});

5.2 修改进度条的样式和进度

<ProgressBar
             android:id="@+id/progressBar"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             style="?android:attr/progressBarStyleHorizontal"
             android:max="100"
             android:layout_marginTop="72dp"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toTopOf="parent" />

使用style="?android:attr/progressBarStyleHorizontal"语句修改进度条的样式。此时进度条为这样：

使用android:max="100"设置进度条最大值，我们可以用代码动态修改进度条进度。

View button3 = activityMain2Binding.button3;

button3.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        int progress = activityMain2Binding.progressBar.getProgress();
        progress += 10;
        activityMain2Binding.progressBar.setProgress(progress);
    }
});

6、AlertDialog

if(itemId == R.id.one_tim){
    AlertDialog.Builder dialog = new AlertDialog.Builder(FirstActivity.this);
    dialog.setTitle("This is dialog");  //设置标题
    dialog.setMessage("Something important"); //设置内容
    dialog.setCancelable(false); //是否可以通过Back键关闭，如果是false就只能通过对话框上的按钮关闭

    //正极按钮
    dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            Toast.makeText(FirstActivity.this,"数据已清除",Toast.LENGTH_SHORT).show();
            finishAll();
        }
    });

    //负极按钮
    dialog.setNegativeButton("NO", new DialogInterface.OnClickListener() {
        @Override
        public void onClick(DialogInterface dialogInterface, int i) {
            //获取内部类的外部类
            AlertDialog dialog1 = dialog.create();
            //关闭弹窗
            dialog1.dismiss();

            //当然不写上面两段代码也可以关闭弹窗，这里只是想体现一下create()的用法
        }
    });
    //显示对话框
    dialog.show();
}

首先通过AlertDialog.Builder创建一个AlertDialog的实例，然后可以为这个对话框设置标题、内容、可否取消等属性，接下来调用setPositiveButton()方法为对话框设置确定按钮的点击事件，调用setNegativeButton()方法设置取消按钮的点击事件，最后调用show()方法将对话框显示出来。

6.1 dialog.create()和dialog.show()的区别。

builder.create()：

用于创建一个 AlertDialog 对象，并将通过 AlertDialog.Builder 设置的标题、消息、按钮等配置应用到对话框中。
返回一个 AlertDialog 对象，您可以将其保存在变量中，以便后续操作（例如显示对话框或在其他地方使用）。
调用 builder.create() 后，对话框并没有立即显示在屏幕上，您需要调用 dialog.show() 方法来显示它。

AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Alert");
builder.setMessage("This is an important message.");

// ... 添加按钮等配置 ...

// 创建 AlertDialog 对象并保存在变量中
AlertDialog dialog = builder.create();

// 显示对话框
dialog.show();

builder.show()：

直接在 AlertDialog.Builder 对象上调用 show() 方法，用于创建并显示 AlertDialog 对话框。
返回一个 AlertDialog 对象，但通常不需要显式保存它在变量中，因为它已经显示在屏幕上了。
使用 builder.show() 可以省略创建 AlertDialog 对象的中间步骤，直接在一行代码中创建并显示对话框。

AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setTitle("Alert");
builder.setMessage("This is an important message.");

// ... 添加按钮等配置 ...

// 直接创建并显示对话框，不需要额外的变量保存
builder.show();

在大多数情况下，可以根据个人喜好选择使用 builder.create() 或 builder.show()。如果需要在显示对话框之前执行其他操作（例如设置按钮的点击监听器），或者需要对对话框进行更多的配置，使用 builder.create() 可能更有优势。

7、ProgressDialog的替代方案

我们在layout目录下新建一个xml，定义一个ProgressBar。

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

然后使用AlerTDialog的setView方法调用这个layout下的进度条就行了。

  @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        AlertDialog.Builder builder = new AlertDialog.Builder(this);
            dialog.setTitle("This is dialog");  //设置标题
            dialog.setView(R.layout.progress_dialog);	//调用layout
            dialog.setMessage("Something important"); //设置内容
        builder.show();
    }