第三章:常见控件的使用

木婉清2023/11/24

简单控件的使用

  • 控件是界面组成的主要元素,用户直接与控件进行交互

TextView

  • TextView 控件用于显示文本信息
布局属性功能描述
id设置 TextView 控件的唯一标识
layout_width设置 TextView 控件的宽度
layout_height设置 TextView 控件的高度
gravity设置 TextView 控件内容的对齐方向
text设置文本内容
textColor设置文本颜色
textStyle设置字体风格bolditalicnormal
textSize设置字体大小【 单位用 sp
background设置 TextView 控件的背景
layout_margin设置当前控件与外部元素的距离
padding设置当前控件与该控件内容直接的距离
layout_centerHorizontal设置 ImageView 控件是否水平居中
layout_centerVertical设置 ImageView 控件是否垂直居中
layout_centerInParent设置 ImageView 控件是否在水平垂直居中
ellipsize内容无法完整显示时,用 ··· 表示
  • 通过 id.getText().toString() 可取得 TextView 中的数据

注意

gravity :设置控件中内容的位置

layout_gravity :设置控件的位置

Button

  • Button 控件表示按钮,它继承自 TextView 控件,既可以显示文本,又可以显示图片,同时也允许用户通过点击来执行操作,当 Button 控件被点击时,被按下与弹起的背景会有一个动态的切换效果,这个效果就是点击效果

点击事件实现方式

  1. 在布局文件中指定 Button 控件的 onClick 属性方式

    • layout 文件中指定 onClick 属性

      android:onClick="click1"
      
    • Activity 中实现这个 click 方法

      import android.view.View;
      import android.widget.Button;
      
      // 类 myActivity 中编辑如下信息
      Button btn1 = null;
      
      // 方法 onCreate() 中编辑如下信息
      btn1 = findViewById(R.id.btn1);
      
      
      // 类 myActivity 中编辑如下信息
      public void click1(View view){
          btn1.setText("按钮1被点击!");
      }
      
  2. 匿名内部类方式

    import android.view.View;
    import android.widget.Button;
    
    // 类 myActivity 中编辑如下信息
    Button btn2 = null;
    
    // 方法 onCreate() 中编辑如下信息
    btn2 = findViewById(R.id.btn1);
    
    btn2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            btn2.setText("按钮2被点击!");
        }
    });
    
  3. 接口方式【不推荐使用】

    • 设置 Button 控件的点击监听事件

      btn3.setOnClickListener(this);
      
    • 接着当前 Activity 实现 onClickListener 接口

      public class MainActivity extends AppCompatActivity implements View.OnClickListener
      
    • 实现 onClickListener 接口中的方法

      // 类 MainActivity 中编辑如下信息
      @Override
      public void onClick(View v) {
          btn3.setText("按钮3被点击!");
      }
      

EditText

  • EditText 表示编辑框,它是 TextView 的子类,用户可以在此控件中输入信息
属性名称功能描述
hint提示文本信息
textColorHint提示文本信息的颜色
password输入内容显示为 ······
phoneNumber输入内容只能是数字
minLines输入内容的最小行数
singleLine只允许单行输入
scrollHorizontally输入内容超出 EditText 的宽度时,是否出现横拉条
editable是否可以编辑
selectAllOnFocus设置点击 EditText 时是否选中全部内容
layout_centerHorizontal设置 ImageView 控件是否水平居中
layout_centerVertical设置 ImageView 控件是否垂直居中
layout_centerInParent设置 ImageView 控件是否在水平垂直居中

限制 EditText 输入类型

image-20231124213119600

ImageView

  • ImageView 表示图片,它继承自 View ,可以加载各种图片资源
属性名称功能描述
id设置 ImageView 控件的唯一标识
layout_width设置 ImageView 控件的宽度
layout_height设置 ImageView 控件的高度
background设置 ImageView 控件的背景
layout_margin设置当前控件与外部元素的距离
padding设置当前控件与该控件内容直接的距离
src设置 ImageView 控件需要显示的图片资源
scaleType将图片资源移动或缩放以适应 ImageView尺寸
tint将图片渲染成指定的颜色
layout_centerHorizontal设置 ImageView 控件是否水平居中
layout_centerVertical设置 ImageView 控件是否垂直居中
layout_centerInParent设置 ImageView 控件是否在水平垂直居中

RadioButton

  • RadioButton 为单选按钮, android:checked 属性指定是否选中的状态
  • RadioGroup 是单选组合框,可容纳多个 RadioButton,并把它们组合在一起,实现单选状态

注意

要为每个 RadioButton 添加一个 id ,否则单选功能会失效

CheckBox

  • CheckBox 表示复选框,它是 Button 的子类,用于实现多选功能,通过 android:checked 属性指定CheckBox 控件是否选中的状态

Toast

  • ToastAndroid 系统提供的轻量级信息提醒机制,用于向用户提示即时消息,它显示在应用程序界面的最上层,显示一段事件后自动消失不会打断当前操作,也不获得焦点

Toast 的基本用法:

Toast.makeText(context, "Hello, Toast!", Toast.LENGTH_SHORT).show();
  • 第一个参数表示当前活动或应用程序的上下文对象,例如:MainActivity.this
  • 第二个参数表示消息内容
  • 第三个参数表示 Toast 的显示时长,可以是 Toast.LENGTH_SHORT (短时)或 Toast.LENGTH_LONG (长时)

AlertDialog 对话框的使用

  • AlertDialog 对话框用于提示一些重要信息或者显示一些需要用户额外交互的内容。它一般以小窗口的形式展示在界面上。使用 AlertDialog 创建的对话框一般包含标题、内容和按钮三个区域。

普通对话框

  • 普通对话框的内容区域一般显示简单的文本信息。通过 setMessage() 方法设置的
  1. 创建对话框的 builder 对象,用于构建一个对话框的模板
  2. buildersetxxx 方法进行链式调用实现对话框的基本结构
  3. builder 对象调用 create() 方法创建一个对话框对象
  4. 用该对象调用 show() 方法

实例:退出 app 对话框

// 1. 创建对话框的 builder 对象,用于构建一个对话框的模板
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
// 2. 对 builder 的 setxxx 方法进行链式调用实现对话框的基本结构
builder.setIcon(R.drawable.beer)
       .setTitle("退出")
       .setMessage("确定退出APP?")
       .setPositiveButton("确定", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
//               对话框退出
               dialog.dismiss();
//               当前页面退出
               MainActivity.this.finish();
               }
       })
       .setNegativeButton("取消", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
           	   dialog.dismiss();
           }
       });
// 3. builder 对象调用 create() 方法创建一个对话框对象
AlertDialog ad = builder.create();
// 4. 用该对象调用 show() 方法
ad.show();

单选对话框

  • 单选对话框的内容区域显示为单选列表。单选列表通过 AlertDialog.Builder 对象调用 setSingleChoiceItem() 方法设置的

实例:选择字号对话框

// 1. 创建对话框的 builder 对象,用于构建一个对话框的模板
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
// 2. 对 builder 的 setxxx 方法进行链式调用实现对话框的基本结构
String[] showMsg = new String[]{"小号", "默认", "中号", "大号"};
final int[] checked = {1};
int[] txtSize = new int[]{20, 30, 40, 50};

builder.setIcon(R.drawable.beer)
       .setTitle("修改文本大小")
//  参数:1. 设置选项内容; 2. 默认选项; 3. 建立监听,允许被点击
       .setSingleChoiceItems(showMsg, 1, new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               checked[0] = which;
           }
       })
       .setPositiveButton("确定", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
//               设置字号
               txtTitle.setTextSize(txtSize[checked[0]]);
           }
       })
       .setNegativeButton("取消", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               dialog.dismiss();
           }
       });
// 3. builder 对象调用 create() 方法创建一个对话框对象
AlertDialog ad = builder.create();
// 4. 用该对象调用 show() 方法
ad.show();

多选对话框

  • 多选对话框的内容区域显示为多选列表。多选列表通过 AlertDialog.Builder 对象调用 setMultiChoiceItem() 方法设置的

实例:兴趣爱好对话框

// 1. 创建对话框的 builder 对象,用于构建一个对话框的模板
AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
// 2. 对 builder 的 setxxx 方法进行链式调用实现对话框的基本结构

String[] showMsg = new String[]{"学习", "做饭", "看电影", "跑步"};
boolean[] isCheck = new boolean[]{false, true, false, false};

builder.setIcon(R.drawable.beer)
       .setTitle("请选择爱好")
//       参数:1. 设置选项内容; 2. 默认选项布尔数组; 3. 建立监听,允许被点击
       .setMultiChoiceItems(showMsg, isCheck, new DialogInterface.OnMultiChoiceClickListener() {
           @Override
//           which 接收被选中选项的索引,isChecked 接收选项的选中状态,选中返回true
           public void onClick(DialogInterface dialog, int which, boolean isChecked) {
//               更新 isCheck 列表
               isCheck[which] = isChecked;
               }
           })
       .setPositiveButton("确定", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               StringBuffer sb = new StringBuffer();
               for (int i = 0; i < isCheck.length; ++i){
                   if (isCheck[i] == true){
                       sb.append(showMsg[i]).append(" | ");
                   }
               }
               if (sb.length()>0){
                   sb.deleteCharAt(sb.length()-2);
               }
               Toast.makeText(MainActivity.this, sb, Toast.LENGTH_SHORT).show();
           }
       })
       .setNegativeButton("取消", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               dialog.dismiss();
           }
       });
// 3. builder 对象调用 create() 方法创建一个对话框对象
AlertDialog ad = builder.create();
// 4. 用该对象调用 show() 方法
ad.show();

自定义对话框【暂时不讲】

略。。。

ListView 的使用

ListView

  • ListView 以列表的形式展示数据内容,并且能够根据列表的高度自适应屏幕显示

ListView 中的属性

属性名称功能描述
listSelector当条目被点击后,改变条目的颜色
divider设置分割线的颜色
dividerHeight设置分割线的高度
scrollbars是否显示滚动条
fadingEdge去掉上边和下边的黑色阴影

注意

ListView 搭配 适配器 ( Adapter )进行使用

适配器(Adapter)

  • BaseAdater 是基本的适配器。它实际上是一个抽象类,通常在自定义适配器时会继承 BaseAdapter

BaseAdapter 中的方法

方法名称功能描述
public int getCount()获取 Item 条目的总数
public Object getItem(int position)根据 position 获取某个 Item 的对象
public long getItemId(int position)根据 position 获取某个 Itemid
public View getView(int position, View convertView, ViewGroup parent)获取相应 position 对应的 Item 视图,position 是当前 Item 的位置,convertView 用于复用旧视图,parent 用于加载 XML 布局
  • SimpleAdapter 继承自 BaseAdapter ,实现了 BaseAdapter 的四个抽象方法并进行封装。因此在使用 SimpleAdapter 进行数据适配时,只需要在构造方法中传入相应的参数即可。 SimpleAdapter 的构造方法的具体信息如下

    public SimpleAdapter (Context context, List<? extends Map<String, ?>> data, int resource, String[] from, int[] to)
    
    • context:上下文对象
    • data:数据集合
    • resourceItem 布局的资源 id
    • fromMap 集合中的 Key
    • toItem 布局中对应的控件
  • ArrayAdapter 也是 BaseAdapter 的子类,用法与 SimpleAdapter 类似,开发者只需要在构造方法里面传入相应参数即可。 ArrayAdapter 通常用于适配 TextView 控件

ArrayAdapter 的构造方法如下:

ArrayAdapter(Context context, int resource)
ArrayAdapter(Context context, int resource, int textViewResourceId)
ArrayAdapter(Context context, int resource, T[] objects)
ArrayAdapter(Context context, int resource, int textViewResourceId, T[] objects)
ArrayAdapter(Context context, int resource, List objects)
ArrayAdapter(Context context, int resource, int textViewResourceId, List objects)

RecyclerView 的使用

  • RecyclerView:是 Android5.0 之后提供的用于在有限的窗口范围内显示大量数据的控件
  • ListView 相比,RecyclerView 的优势为:
    • 展示效果:RecyclerView 控件可以通过 LayoutManager 类实现横向或竖向的列表效果、瀑布流效果和 GridView 效果,而 ListView 控件只能实现竖直的列表效果。
    • 适配器:RecyclerView 控件使用的是 RecyclerView.Adapter 适配器,该适配器将 BaseAdapter 中的 getView() 方法拆分为 onCreateViewHolder() 方法和 onBindViewHolder() 方法,强制使用 ViewHolder 类,使代码编写规范化,避免了初学者写的代码性能不佳。
    • 复用效果:RecyclerView 控件复用 Item 对象的工作由该控件自己实现,而 ListView 控件复用 Item 对象的工作需要开发者通过 convertViewsetTag() 方法和 getTag() 方法进行操作。
    • 动画效果:RecyclerView 控件可以通过 setItemAnimator() 方法为 Item 添加动画效果,而 ListView 控件不可以通过该方法为 Item 添加动画效果。

自定义 View

  • 当使用系统控件不满足需求时,需要自定义控件

  • 最简单的自定义 View 就是创建一个类继承自 View 类或者其他子类,并重写该类的构造方法

  • 由于系统自带的控件不能满足需求中的某种样式或功能,因此我们需要在自定义 View 中通过重写指定的方法来添加额外的样式和功能

自定义 View 常用的 3 个方法如下:

方法名功能
onMeasure()方法测量尺寸
onDraw()方法绘制图像
onLayout()方法指定布局中子控件的位置

onMeasure()方法

  • 作用:测量尺寸
onMeasure(int widthMeasureSpec, int heightMeasureSpec)

测量模式

  • EXACTLY:当自定义控件的宽高的值设置为具体值时使用,如 100dp ,此时控件的宽高值是精确的尺寸。

  • AT_MOST:当自定义控件的宽高值为 wrap_content 时使用,此时控件的宽高值是控件中的数据内容可获得的最大空间值。

  • UNSPECIFIED:当父容器没有指定自定义控件的宽高值时使用。

onDraw()方法

  • 作用:绘制图像
onDraw(Canvas canvas)
  • canvas 表示画布,他与 Paint 类(画笔)配合使用

onLayout()方法

  • 作用:指定布局中子控件的位置
onLayout(boolean changed, int left, int top, int right, int bottom)
  • changed 表示自定义 View 的大小和位置是否发生变化

  • lefttoprightbottom 分别表示子控件与父容器左边、顶部、右边、底部的距离

编辑于 2023/11/26 19:00:23