android app开发学习之表单组件学习（一）

这阵子不知道怎么了，心态不稳很着急。恰好前几天看到一句话分享给大家

我最近处理问题有点急，这是老年人心态

以上为邓爷爷在1993年发出的感叹。想来心态平稳才是年轻人应该有的心态。

这几天继续学习andorid app开发，学习了表单组件部分，记录一下学习过程。最终layout代码

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/reset_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email"
        android:layout_marginTop="16dp"
        android:text="Reset Password"
        android:background="@drawable/button_background"/> <!-- 使用自定义的背景 -->
    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 1" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 2" />

    </RadioGroup>
    <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="输入:" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter text here" />

    </LinearLayout>
</LinearLayout>

以上最外层是一个LinearLayout线性布局标签，里面写了按钮Button、单选框组RadioGroup、复选框CheckBox和文本输入框。

我首先是新创建了一个layout布局文件activity_form，然后添加一个class名称ActivityForm，然后将这个类添加到AndroidManifest.xml文件中，也就是相当于vue中的注册一下路由，以便可以访问到。然后就开始开发了。

Button

xml 复制代码

 <Button
        android:id="@+id/reset_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email"
        android:layout_marginTop="16dp"
        android:text="Reset Password"
        android:background="@drawable/button_background"/> <!-- 使用自定义的背景 -->

Button组件这里使用android:background="@drawable/button_background"作为背景图，@drawable/button_background具体代码

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3F51B5"/> <!-- 按钮的背景颜色 -->

    <corners android:radius="20dp"/> <!-- 按钮的圆角半径 -->

    <stroke android:color="#FFFFFF" android:width="2dp"/> <!-- 按钮的边框颜色和宽度 -->

    <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp"/> <!-- 按钮的内边距 -->
</shape>

具体上面是什么含义有注释。包括背景的颜色，按钮的圆角半径、按钮的边框颜色和宽度、按钮的内边距。这个竟然可以是单独拿出来的，相对web开发，不借助库的话，原生还是不好这样实现的，颗粒度上android要比web更细。

RadioGroup

xml 复制代码

  <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radioButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 1" />

        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 2" />

    </RadioGroup>

就是一个单选框组，之后相应的java脚本如下

java 复制代码

RadioGroup radioGroup = (RadioGroup) findViewById(R.id.radioGroup);
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId) {
            case R.id.radioButton1:
                // handle radioButton1
                break;
            case R.id.radioButton2:
                // handle radioButton2
                break;
        }
    }
});

CheckBox

xml 复制代码

 <CheckBox
        android:id="@+id/checkBox1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1" />

    <CheckBox
        android:id="@+id/checkBox2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2" />

复选框对应的java脚本

java 复制代码

CheckBox checkBox1 = (CheckBox) findViewById(R.id.checkBox1);
checkBox1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            // handle checkBox1 is checked
        } else {
            // handle checkBox1 is not checked
        }
    }
});
CheckBox checkBox2 = (CheckBox) findViewById(R.id.checkBox2);
checkBox2.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if (isChecked) {
            // handle checkBox2 is checked
        } else {
            // handle checkBox2 is not checked
        }
    }
});

EditText

xml 复制代码

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="输入:" />

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter text here" />

    </LinearLayout>

EditText文本输入框使用了线性布局的水平布局。给输入框安排了一个label。

总结

整体来说，本次学习的比较简单。开发体验上的话，有点类似vue开发的感觉，添加一个路由，然后在开发页面。

对于android开发，开发一个activity，包括它的class和layout，之后把class注册到配置文件AndroidManifest.xml，之后就是具体的功能开发：包括布局和脚本两部分。

本文完。