第三讲 UI控件使用

简介: 第三讲 UI控件使用

一、引言


活动类似于桌子,UI控件类似于桌子上的菜,是时候了解各种菜式(UI控件)


二、教学内容


1、view类(****)

  • view类,是几乎所有具有外观的UI控件的共同父类
  • view类属性设置有两种,静态(文本型,可视化型),动态
  • view类的共有属性:


ID:组件的标识,是组件的唯一标记


<Textview
//控件命名参考
android:id=”@+id/tv(代表类型)Info(意义,用途,功能)” 
//列如:tv(textview缩写)Username,这样便于快速找到控件,同样bt(button)、iv(imaginview),诚然,这只是老师在课堂上建议的一种方式。
layout_width://组件的宽度
layout_height://组件的高度
(三种赋值方式:1.具体值(sp)2.Wrap_content和内容大小一致3.Match_parent 和父容器一致)


不过现在我还是更倾向于在design下完成一些修改操作,毕竟这样对于初学者来说,不用刻意的去记这么些代码被劝退,嘻嘻!


2、 TextView(****)

可以用来显示一段提示信息


  • Text:显示的文本
  • TextSize:文字字体大小
  • TextColor:文字字体颜色


3、 Button(****)

按钮,为了和用户进行交互,当用户点击,执行一段代码,称为事件相应。


Button btnTest = findViewById(R.id.btnTest);
    btnTest.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            }
        });


4、EditText(****)

输入框,接收用户的信息输入

-InputType:设定输入框输入信息类型

-hint:给出提示


<EditText
        android:id="@+id/etTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ems="10"
        android:hint="请输入用户名"
        android:inputType="textPersonName"
        android:text="name " />


如果同时对name、hint进行了设置那么会出现下图情况:

image.png

只需要将android:text=""删除即可:

image.png


5、 度量单位

六种不同度量单位

1) px:像素点,分辨率的单位

2) sp:字体单位

3) dp:dip单位像素密度

dpi=160 1dp =1px,建议使用

4) pt:磅

5) in:英寸

6) mm:毫米


6、 RadioButton 和RadioGroup(***)

单选框,只能让用户选中其中一个选项,


  • RadioGroup:为我们提供了RadioButton单选按钮的容器,可以保证用户的排他性选择。
  • RadioButton:通常放于RadioGroup容器中进行使用。
  • GetCheckRadioButton:获取选中项的ID


android:checked="true"//实现按钮的选中


单选框实现:

一般步骤:在design模式下,先拖入一个RadioGroup,然后在Group中拖入按钮即可实现。


<RadioGroup
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="A" />
        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="B" />
        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="C" />
    </RadioGroup>


image.png

image.png


功能完善:


public class MainActivity extends AppCompatActivity {
//定义按钮对象
    private RadioButton rbA;
    private RadioButton rbB;
    private RadioButton rbC;
    private Button btnConfirm;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initOption();
        feedback();
    }
    //初始化按钮对象
    private void initOption()
    {
        rbA = findViewById(R.id.rbA);
        rbB = findViewById(R.id.rbB);
        rbC = findViewById(R.id.rbC);
        btnConfirm = findViewById(R.id.btConfirm);
    }
    //Toast反馈
    private void feedback()
    {
        btnConfirm.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (rbA.isChecked()) {
                    Toast.makeText(MainActivity.this, "选择为A", Toast.LENGTH_LONG).show();
                }
                if (rbB.isChecked()) {
                    Toast.makeText(MainActivity.this, "选择为B", Toast.LENGTH_LONG).show();
                }
                if (rbC.isChecked()) {
                    Toast.makeText(MainActivity.this, "选择为C", Toast.LENGTH_LONG).show();
                }
            }
        });
    }
}


image.png


7、 CheckBox

复选框,允许用户同时选中多项

IsChecked:判断是否选中


8、 Spinner(****)

单选下拉列表框,让用户从更多的选项中选择其中之一

三种设置选项方式:

1) 定义一个资源文件,使用Entries设定选项

2) 定义一个资源文件,使用ArrayAdapter类的CreateFormResource方法

3) 定义一个List对象,使用ArrayAdapte的构造方法

这里我主要讲第一种方法的实现(因为后面两种我还没掌握(#.#)):


  1. 在res->values下创建一个.xml文件
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="spinner">
    <item>A</item>
    <item>B</item>
    <item>C</item>
    <item>D</item>
</string-array>>
</resources>


2.布局文件里通过android:entries引用


<Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/spinner" />


效果

image.png

参考:Spinner的功能和用法


9、 ImageView(*****)

显示图片

Src:指定图片路径(文件夹可以自己创建,文件名命名不要使用中文)


<ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:src="@drawable/img01" />


scaleType:缩放模式也可以好好了解:

image.png


10、 CalendarView、DatePicker和TimePicker(**)

显示时间、日期


<TimePicker
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  </TimePicker>

image.png


<DatePicker
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  </DatePicker>

image.png


11、 Toast(*****)

  • 临时显示一段提示信息给用户

这在前面的部分已经使用了,具体格式如下

Toast.makeText(上下文,显示的信息,显示的时间长度).show();


12、 AlertDIalog(****)

消息提示框,可以和用户交互;


可以在当前的界面上弹出一个对话框,这个对话框是置顶于所有界面元素之上的,能够屏蔽掉其他控件的交互能力,所以一般用来提示一些非常重要的内容或者警告信息


Button btnAlert = findViewById(R.id.btnAlert);
        btnAlert.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                //通过AlertDialog.Builder创建一个AlertDialog的实例
                dialog.setTitle("this is a Dialog");
                dialog.setMessage("something you hated is important");
                dialog.setCancelable(false);
                //可否取消
                dialog.setPositiveButton("OK", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                    }
                });
                dialog.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                    }
                });
                dialog.show();
            }
        });

image.png

目录
相关文章
|
7月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
401 0
|
7月前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
556 0
|
7月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
804 0
|
7月前
|
API C# 开发者
一款开源免费美观的WinForm UI控件库
一款开源免费美观的WinForm UI控件库
534 9
|
1月前
|
人工智能 API Apache
推荐3款开源、美观且免费的WinForm UI控件库
推荐3款开源、美观且免费的WinForm UI控件库
140 6
|
1月前
|
API C# 开发者
基于Material Design风格开源、免费的WinForms UI控件库
基于Material Design风格开源、免费的WinForms UI控件库!
|
2月前
|
Linux C# Android开发
分享3款开源、免费的Avalonia UI控件库
分享3款开源、免费的Avalonia UI控件库
237 0
|
4月前
|
C# 开发者 Windows
一款基于Fluent设计风格、现代化的WPF UI控件库
一款基于Fluent设计风格、现代化的WPF UI控件库
113 1
|
7月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)
|
5月前
|
C# Windows
一款开源、免费、现代化风格的WPF UI控件库
一款开源、免费、现代化风格的WPF UI控件库
174 0