Android UI基础组件|青训营笔记

树梢还未果
494 阅读3分钟

「第四届青训营 -客户端&Android基础场」笔记创作活动的第3天（一切内容仅供参考）

我们应该如何去学习Android UI组件?怎么样才能学会呢？带着这些问题我们来一一谈讨。首先想要学习UI组件我们就需要先了解什么是Android UI；它的组件是什么，都有哪些组件！然后想要学会这些组件我们就需要知道应该怎么去使用它，在什么地方应该用什么组件。

什么是Android UI？

UI：即UserInterface(用户界面)的简称。它是指对软件的人机交互、操作逻辑、界面美观的整体设计。
Android UI：则是由多个不同功能的UI组件构成的，在AndroidStudio中SDK提供了大量的UI组件给我们去布局设计。

常用的UI基础组件

TextView：文本框，主要用于在界面上显示一段文本信息。

用法举例：

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:layout_marginTop="32dp"
        android:padding="10dp"
        android:text="这是一个文本框"
        android:textSize="25sp"
        android:background="#bbb"
        android:textColor="#fff"/>

image.png

属性说明
android:text文本内容
android:textSize文字大小
android:textColor文字颜色
android:textStyle文字格式(bold:粗体，italic:斜体，)

ImageView：图片组件,适用于在界面上展示图片的一个控件，它可以使得程序界面变得更加丰富多彩。注意，图片一般都是放在drawable文件下的，且必须以英文命名。

用法举例：

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

image.png

scaleType设置缩放类型: android:scaleType用于设置显示的图片如何缩放或者移动以适应ImageView的大小。

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

Button：表示在界面上显示一个按钮。

注意：默认的按钮是紫蓝色的需要在src\values\themes.xml里将parent="Theme.MaterialComponents.DayNight.DarkActionBar"后面加上.Bridge

用法举例：

<Button
    android:id="@+id/btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:onClick="onbtn"
    android:text="按钮"/>

image.png

按钮可以设置其点击事件，有两种方式：

    1. XML中定义android:onClick属性,属性值为Activity中的一个public void functionName(View view)的一个自定义函数，如android:onClick="functionName"
    1. 设置点击监听事件：需要在Button里添加一个id
        ```
//        获取需要点击的按钮控件
        Button btn=findViewById(R.id.btn);
        
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
//                写当点击按钮后的逻辑
            }
        });

image.png

EditText:允许用户在控件里输入和编辑内容，并可以在程序中对这些内容进行处理.

用法举例：

    	 <EditText
	       android:id="@+id/edit_text"
	       android:layout_width="match_parent"
	       android:layout_height="wrap_content"
  // 表示在输入框内显示一些提示性的文字，当用户输入任何内容时，这些提示性文字就会消失
	       android:hint="Type somethinghere"
               //表示指定Edit的最大行数为两行
	       android:maxLines="2"/>

image.png

image.png

CheckBox(多选框): 每个多选框是独立的，可以选择或取消，也可以同时选中多个选项，还乐意获到选中的值。

用法举例：

    
<CheckBox
    android:id="@+id/checkbox_meat"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="苹果"
    android:onClick="onCheckboxClicked"/>
<CheckBox
    android:id="@+id/checkbox_cheese"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="香蕉"
    android:onClick="onCheckboxClicked"/>

image.png

RadioButton(单选框)：单选框，通常都置于RadioGroup中，形成一组单选框，一组中有且仅有一个单选框处于被选中状态，选中后无法取消（除非选中了一组中的其他单选框）。

用法举例：

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="男"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="女"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>

image.png

  • 可以看到在Java中通过radioButton.isChecked()方法来判断某个单选框是否被选中，通过View.getID()来判断用户点击的是哪个单选框。
avatar
文章
阅读
粉丝