初识Android | 青训营笔记

初识Android | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第4天

UI组件

• UI组件都是作为View的子类因此天然继承了View的属性。
• 常规UI组件大多由Android Framework中的android.widget这个package提供

基本的UI组件

文本框（TextView）：显示文本。

常用属性	说明
android:text	文字内容
android:textSize	文字大小
android:textStyle	文字格式
android:textColor	文字颜色

• 代码演示：

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
     <TextView
         android:id="@+id/text_view_id"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:text="@string/hello" />
  </LinearLayout>

输入框（EidtText）:字面意思，是TextView的子类。

常用属性	说明
android:hint	提示文字
android:inputType	输入类型，值为：text, number, textPassword…，多类型用
android:drawableLeft	输入框左侧（其他边也有相应的属性）绘制对象，值通常为一个可绘制资源文件
android:drawablePadding	可绘制对象的内边距
android:lines	输入框高多少行，值为整数。

• 代码演示：

<EditText
      android:id="@+id/text_input"
      android:layout_height="wrap_content"
      android:layout_width="match_parent"
      android:inputType="text"/>

按钮（Button):按钮，也是TextView的子类。

• 代码演示：

<Button
      android:id="@+id/button_id"
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      android:text="@string/self_destruct" />

设置其点击事件：

1. XML中定义android:onClick属性，属性值为Activity中的一个public void functionName(View view)的一个自定义函数，如android:onClick="functionName"。
2. 自定义事件（函数）：

public class MyActivity extends Activity {
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
 
          setContentView(R.layout.content_layout_id);
 
          final Button button = findViewById(R.id.button_id);
          button.setOnClickListener(new View.OnClickListener() {
              public void onClick(View v) {
                  // Code here executes on main thread after user presses button
              }
          });
      }
  }

图片按钮（ImageButton）：图片样式的按钮，ImageView的子类。

常用属性	说明
android:src	设置图片
android:background	设置背景

• 代码演示：

<LinearLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:src="@drawable/image1"
          />
  </LinearLayout>

单选框（RadioButton）：单选框，通常都置于RadioGroup中，形成一组单选框，一组中有且仅有一个单选框处于被选中状态，选中后无法取消（除非选中了一组中的其他单选框）,使用android:onClick进行事件绑定。

• 代码演示：

<?xml version="1.0" encoding="utf-8"?>
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <RadioButton android:id="@+id/radio_pirates"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/pirates"
        android:onClick="onRadioButtonClicked"/>
    <RadioButton android:id="@+id/radio_ninjas"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/accc"
        android:onClick="onRadioButtonClicked"/>
</RadioGroup>

多选框（CheckBox）:多选框。和单选不同的是，每个多选框是独立的，可以选择或取消;同样使用android:onClick进行事件绑定。

• 代码演示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <CheckBox android:id="@+id/checkbox_meat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/test1"
        android:onClick="onCheckboxClicked"/>
    <CheckBox android:id="@+id/checkbox_cheese"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/test2"
        android:onClick="onCheckboxClicked"/>
</LinearLayout>

计时器（Chronometer）：简易计时器。

• 代码演示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="white">

    <Chronometer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:format="%s"
        android:id="@+id/chronometer"/>
</RelativeLayout>

• 在Java代码中，Chronometer类有以下方法控制这个计时器
  • getBase(), setBase(<long base>)：获取或设置参考时间，参数为表示时间的长整数，当前时间用SystemClock.elapsedRealtime获取。
  • start()：开始计时，未手动设置参考时间时，则以start运行的时间为参考时间
  • stop()：结束计时。
  • setOnChronometerTickListener（<Chronometer.OnChronometerTickListener listener>）：设置计时监听器。

列表组件（ListView）:是一种以垂直方式列出列表项的常用组件。

下拉列表组件（Spinner）:是一种用来从多个选项中选择一个所需选项的常用组件。

More

布局

LinearLayout:线性布局，主要以水平和垂直方式来显示界面中的控件；当控件水平排列时，显示顺序依次为从左现石，当控件垂直排列时，显示顺序依次为从上到下。

• 该布局中重要属性orientation,用于控制控件的排列方向，该属性有两个值vertical和horizontal (默认)，其中，vertical 表示线性布局垂直显示，horizontal 表示线性布局水平显示。

RelativeLayout:相对布局，系统默认布局，即通过相对定位的方式指定控件位置，即以其它控件或父容器为参照物，摆放控件位置(在设计相对布局时要遵循控件之间的依赖关系，后放入控件的位置依赖于先放入的控件。)。

• 属性：

FrameLayout:帧布局，该布局为每个加入其中的控件创建一个空白区域(称为一帧， 每个控件占据一帧)。采用帧布局方式设计界面时，所有控件都默认显示在屏幕左上角，并按照先后放入的顺序重叠摆放，先放入的控件显示在最底层，后放入的控件显示在最顶层，

• 属性：

ConstraintLayout：约束布局，类似于RelativeLayout（相对布局），但约束布局比相对布局更灵活，性能更出色。而且ContraintLayout可以按照比例约束控件位置和尺寸，能够更好的去设计界面。

• 属性：

布局之间的通用属性：

属性名称	功能描述
android:id	设置布局的标识
android：layout_width	设置布局的宽度
android：layout_height	设置布局的高度
android：background	设置布局的背景
android：layout_margin	设置当前布局与屏幕边界或与周围控件的距离
android：padding	设置当前布局与该布局中控件的距离

总结：

渲染