【Android常用UI组件练习】

今日Android复习——Android常用UI组件练习

一、概述

Android基本组件包括Button、TextView、ImgeView、EditText、CheckBox、RadioButton等等，这些也是我们移动设备软件的必备组件，Android的组件在Android.widget包中。

二、要求

完成一个注册信息页面布局

三、效果

---

四、代码

1.  将布局改为线性布局(LinearLayout),   把orientation属性改为vertical（全局的垂直排布）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/yellow"
    >

<!-------------中间的代码----------------->


</LinearLayout>

---

2.  注册和图片为单独的布局部分，照片设置外边距。

    设置外边距： android : layout_margin=" xx dp"

    设置内边距： android : padding=" xx dp"

<!---------------注册部分------------------>
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/orange"
        android:gravity="center"
        android:text="@string/login"
        android:textColor="@color/yellow"
        android:textSize="50dp"></TextView>

<!---------------头像部分--------------------->
    <ImageView
        android:layout_width="140dp"
        android:layout_height="148dp"
        android:layout_gravity="center"
        android:background="@drawable/logo"
        android:scaleType="centerCrop"
        android:layout_margin="15dp"
        ></ImageView>

 3.  用户名和密码都是一样的，我们先用LinearLayout包起来，形成一个局部的布局环境，主要是把orientation属性改为horizontal（局部的水平排布）

---

    <!--用户名-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_margin="5dp"
        android:paddingTop="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="55dp"
            android:layout_weight="0"
            android:digits="true"
            android:text="@string/un"
            android:textColor="@color/orange"
            android:textSize="30dp"/>
        <EditText
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@string/gz"
            />
    </LinearLayout>


    <!--密码-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="27dp"
        android:paddingTop="10dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="55dp"
            android:layout_weight="0"
            android:digits="true"
            android:text="@string/ps"
            android:textColor="@color/orange"
            android:textSize="30dp"/>
        <EditText
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:password="true"
            android:text="1234567890"
            />
    </LinearLayout>

4.  RadioButton组件就是我们在其他GUI组件中使用的单选按钮。在一般情况下，我们总是将RadioButton与RadioGroup结合使用：使得在一组RadioButton中只有一个可以被选中。通过RadioGroup来控制RadioButton的选中状态。实现如下：

---

    <!--性别-->
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="26dp"
        android:paddingTop="10dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/sex"
            android:textColor="@color/orange"
            android:textSize="30dp"
            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/man"
            android:textSize="20dp"

            />
        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/woman"
            android:textSize="20dp"
            />

    </RadioGroup>

5.CheckBox多选组件

---

    <!--    兴趣爱好-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="26dp"
        android:paddingTop="10dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/fator"
            android:textSize="30dp"
            android:textColor="@color/orange"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/f1"
            android:textSize="20dp"
            android:checked="true"/>
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/f2"
            android:textSize="20dp"
            />
        <CheckBox
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/f3"
            android:textSize="20dp"
            android:checked="true"
            />
    </LinearLayout>

6. Button按钮部分：

---

    <!--    按钮-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="10dp"
        android:layout_margin="5dp">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/zc"
            android:textSize="20dp"
            android:textColor="@color/yellow"
            android:layout_margin="10dp"
            />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/qx"
            android:textSize="20dp"
            android:textColor="@color/yellow"
            android:layout_margin="10dp"/>
    </LinearLayout>

values-string:

<resources>
    <string name="login">注 册</string>
    <string name="un">用户名:</string>
    <string name="ps">密 码:</string>
    <string name="sex">性 别：</string>
    <string name="man">男</string>
    <string name="woman">女</string>
    <string name="fator">爱 好：</string>
    <string name="f1">篮 球</string>
    <string name="f2">足 球</string>
    <string name="f3">羽毛球</string>
    <string name="zc">确 定</string>
    <string name="qx">取 消</string>
    <string name="gz">狗 贼</string>
</resources>

values-colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFF</color>
    <color name="yellow">#FFFFC107</color>
    <color name="orange">#FF5722</color>
</resources>