完善登录注册界面（相对布局）

完善登录注册界面（相对布局）

一、Register布局设计（相对布局）

1.在Register.xml中进行如下设计：

<?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"
    android:background="@drawable/h"
    android:orientation="vertical"
    tools:context=".Register">

    <TextView
        android:id="@+id/TextView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="130dp"
        android:layout_marginTop="30sp"
        android:text="@string/textView3"
        android:textColor="@color/pink3"
        android:textSize="40sp" />

    <TextView
        android:id="@+id/TextView4"
        android:layout_width="116dp"
        android:layout_height="60dp"
        android:layout_below="@+id/TextView3"
        android:layout_marginTop="16dp"
        android:gravity="center"
        android:text="@string/textView1"
        android:textColor="@color/plum"
        android:textSize="22sp" />

    <EditText
        android:id="@+id/Editext3"
        android:layout_width="231dp"
        android:layout_height="48dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/shape_round"
        android:hint="@string/Editext1"
        android:textColorHint="@color/blue"
        android:layout_below="@+id/TextView3"
        android:layout_marginLeft="150dp"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/TextView6"
        android:layout_width="118dp"
        android:layout_height="60dp"
        android:layout_below="@+id/TextView4"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="@string/textView2"
        android:textColor="@color/plum"
        android:textSize="20sp" />

    <EditText
        android:id="@+id/Editext4"
        android:layout_width="231dp"
        android:layout_height="48dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/shape_round"
        android:hint="@string/Editext2"
        android:textColorHint="@color/blue"
        android:layout_marginLeft="150dp"
        android:layout_below="@+id/TextView4"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/TextView2"
        android:layout_width="118dp"
        android:layout_height="60dp"
        android:layout_below="@+id/TextView6"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="@string/textView2"
        android:textColor="@color/plum"
        android:textSize="20sp" />

    <EditText
        android:id="@+id/Editext5"
        android:layout_width="231dp"
        android:layout_height="48dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/shape_round"
        android:hint="请再次确认密码"
        android:textColorHint="@color/blue"
        android:layout_marginLeft="150dp"
        android:layout_below="@+id/TextView6"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/TextView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/TextView2"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="40dp"
        android:gravity="center"
        android:text="性别"
        android:textColor="@color/plum"
        android:textSize="20sp" />
<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/radiogroup1"
    android:layout_below="@+id/TextView2"
    android:layout_toRightOf="@+id/TextView7"
    android:layout_marginLeft="30dp"
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    >

    <RadioButton
        android:id="@+id/radiobutton1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="男"
        android:textSize="20sp"
        tools:ignore="TouchTargetSizeCheck" />

    <RadioButton
        android:id="@+id/radiobutton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="女"
        android:textSize="20sp"
        tools:ignore="TouchTargetSizeCheck" />
</RadioGroup>

    <TextView
        android:id="@+id/TextView8"
        android:layout_width="118dp"
        android:layout_height="60dp"
        android:layout_marginTop="10dp"
        android:gravity="center"
        android:text="学历"
        android:textColor="@color/plum"
        android:layout_below="@+id/radiogroup1"
        android:textSize="20sp" />

    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radiogroup1"
        android:layout_marginTop="30dp"
        android:layout_toRightOf="@+id/TextView8"
        android:entries="@array/degree"
        android:prompt="@string/degree_prompt"
        tools:ignore="TouchTargetSizeCheck">
        android:spinnerMode="dialog"
    </Spinner>

        <LinearLayout
            android:id="@+id/linearlayout1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="40dp"
            android:layout_below="@+id/TextView8"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="爱好"
                android:textColor="@color/plum"
                android:textSize="20sp"/>

            <CheckBox
                android:id="@+id/check1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="游泳"
                android:textSize="20sp"
                tools:ignore="TouchTargetSizeCheck" />

            <CheckBox
                android:id="@+id/check2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="唱歌"
                android:textSize="20sp"
                tools:ignore="TouchTargetSizeCheck" />

            <CheckBox
                android:id="@+id/check3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="阅读"
                android:textSize="20sp"
                tools:ignore="TouchTargetSizeCheck" />

        </LinearLayout>

    <Button
        android:id="@+id/Button3"
        android:layout_width="120dp"
        android:layout_height="70dp"
        android:layout_marginLeft="150dp"
        android:background="@drawable/shape_round"
        android:hint="@string/Button3"
        android:textColor="@color/blue"
        android:layout_below="@+id/TextView2"
        android:textColorHint="@color/plum"
        android:layout_marginTop="220dp"
        android:textSize="20sp" />

</RelativeLayout>

2.设置Spinner

（1）对应的xml代码：

（注意：以下代码中的注释仅供理解，非Android Studio标准注释格式）

<Spinner
    android:id="@+id/spinner1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/radiogroup1"
    android:layout_marginTop="30dp"
    android:layout_toRightOf="@+id/TextView8"
    
    android:entries="@array/degree"      //entries 表示使用数组资源设置下拉列表框的列表项目
    
    android:prompt="@string/degree_prompt"  
    //prompt表示设置对话框模式的列表框的提示信息(标题),只能够引用 string.xml中的资源id,而不能直接写字符串
   
   android:spinnerMode="dialog"   
   //spinnerMode 列表框的模式，有两个可选值 dialog 和 dropdown，分别表示对话框模式和下拉列表模式。                                    
    tools:ignore="TouchTargetSizeCheck">
</Spinner>

（2）在 res/values/strings.xml 文件中加入以下内容：

  <string name = "degree_prompt"> 请选择学历 </string>     
<string-array name="degree">      
    <item>博士</item>
    <item>硕士</item>
    <item>本科</item>
    <item>高中</item>
</string-array>

标签表示定义名字是 degree的一个字符数组资源。

二、Login页面美化

1.设置渐变背景

（1）在Login.xml 的最外层布局文件的 LinearLayout 中增加 background 属性：

android:background="@drawable/gradient">

（2）在 drawable 下新建资源文件 gradient.xml

（3）在 gradient.xml 中加入以下代码：

（注意：以下代码中的注释仅供理解，非Android Studio标准注释格式）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient    //渐变
    android:startColor="@color/lavender"      //开始颜色
    android:endColor="@color/blue"            //结束颜色
    android:type="radial"                    //渐变方式：径向渐变
    android:gradientRadius="400"            //径向渐变指定半径
    />
    <stroke      //描边
    android:width="5dp"   //描边宽度
    android:color="@color/pink3"    //描边颜色
    />

    <corners   //圆角
        android:topLeftRadius="20dp"    //四个角的半径
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        />
</shape>

（4）效果图如下：

2.设置圆角布局背景

（1）在各控件的外面插入一个 LinearLayout，并在LinearLayout中设置属性：

android:background="@drawable/gradient_round"

（2）在 drawable 下新建资源文件 gradie_round.xml,并添加以下代码：

（注意：以下代码中的注释仅供理解，非Android Studio标准注释格式）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        />
    <solid  android:color="#99FFFFFF"  //填充
        />
</shape>

（3）效果图如下：

3.设置圆角按钮背景

（1）先修改登录按钮属性，设置

android:background="@drawable/shape_round"

（2）在 drawable 下新建资源文件shape.round.xml，并加入以下代码，用于按钮的背景 ：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid
        android:color="#FFFFFF" >
    </solid>
    <!-- 设置圆角 -->
    <corners
        android:radius="1dp"
        android:bottomLeftRadius="15dp"
        android:bottomRightRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp" >
    </corners>
    <!-- 设置边框 -->
    <stroke android:width="1dip" android:color="#ff000000" />

</shape>

（3）效果图如下：

（4）在 drawable 下新建资源文件 text_btn_selector.xml，用于修改按钮颜色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 按压时 -->
    <item android:color="@android:color/holo_blue_bright" android:state_pressed="true" />
    <!-- 默认时 -->
    <item android:color="@android:color/white" />
</selector>

4.设置EditText 背景

（1）修改用户名和密码 EditText 的 background属性：

android:background="@drawable/selector1"

（2） 在 drawable 下新建资源文件 edit_login.xml，并加入以下代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!--获得焦点输入状态时显示pig背景 -->
    <item android:state_focused="true" android:drawable="@drawable/pig">
    
    </item>
    <item android:drawable="@drawable/tt">
    </item>
</selector>

5.完整的Login.xml代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".Login"
    android:background="@drawable/gradient">
    <LinearLayout
        android:layout_width="370dp"
        android:layout_height="400dp"
        android:orientation="vertical"
        android:layout_marginTop="150dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/gradient_round"
        >
        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="center"
            android:text="@string/textView"
            android:textColor="@color/hotpink"
            android:textSize="30sp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="50dp"
                android:orientation="horizontal">
                <TextView
                    android:id="@+id/TextView1"
                    android:layout_width="104dp"
                    android:layout_height="53dp"
                    android:gravity="center"
                    android:text="@string/textView1"
                    android:textColor="@color/hotpink"
                    android:textSize="20sp" />

                <EditText
                    android:id="@+id/Editext1"
                    android:layout_width="250dp"
                    android:layout_height="53dp"
                    android:background="@drawable/selector1"
                    android:hint="@string/Editext1"
                    android:textColor="@color/plum"
                    android:textColorHint="@color/blue" />


            </LinearLayout>

        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="53dp">

            <TextView
                android:id="@+id/TextView2"
                android:layout_width="106dp"
                android:layout_height="match_parent"
                android:gravity="center"
                android:text="@string/textView2"
                android:textColor="@color/hotpink"
                android:textSize="20sp" />
            <EditText
                android:id="@+id/Editext2"
                android:layout_width="250dp"
                android:layout_height="match_parent"
                android:textColor="@color/plum"
                android:inputType="number"
                android:textColorHint="@color/blue"
                android:background="@drawable/selector1"
                android:hint="@string/Editext2"/>
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="129dp"
            android:layout_marginTop="20dp"
            android:orientation="vertical">

            <Button
                android:id="@+id/Button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="140dp"
                android:background="@drawable/shape_round"
                android:text="@string/Button1"
                android:textColor="@color/plum"
                android:textSize="20sp" />

            <Button
                android:id="@+id/Button2"
                android:layout_width="239dp"
                android:layout_height="64dp"
                android:layout_marginLeft="76dp"
                android:background="@null"
                android:paddingTop="20dp"
                android:text="注册请点击这里哦"
                android:textColor="@color/purple_200"
                android:textColorHint="@color/purple_500"
                android:textSize="20sp" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

三、监听按钮

1.设置Register.java文件，为注册活动的注册按钮设置事件监听处理程序。

单击按钮后检查用户输入 的基本信息，然后将用户名和密码通过 Bundle，利用 setResult()方法返回给 LogiActivity 活动，同时将用 户注册的信息利用 Toast 显示。

（1）设置私有变量，绑定ID

private RadioGroup radiog1;
private Spinner sp1;
private CheckBox cb1,cb2,cb3;

radiog1=(RadioGroup)findViewById(R.id.radiogroup1);
sp1=(Spinner)findViewById(R.id.spinner1);
cb1=(CheckBox)findViewById(R.id.check1);
cb2=(CheckBox)findViewById(R.id.check2);
cb3=(CheckBox)findViewById(R.id.check3);

（2）自定义MyClick方法，用绑定标签的方法实现监听

//绑定标签方法监听
public void MyClick(View v)
{
    String s1,s2,s3,message="";
    s1 = text1.getText().toString();  //获取注册时输入的新用户名
    s2 = text2.getText().toString();  //获取注册时输入的新密码
    s3 = text3.getText().toString();  //获取注册时输入的新密码
    // 如果两次输入的密码不一致，则提示注册失败
    if (!s2.equals(s3))
    {
        new AlertDialog.Builder(Register.this).setTitle("注册失败")
                .setMessage("请确认两次输入的密码一致")
                .setPositiveButton("重新注册", new DialogInterface.OnClickListener()
                {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i)
                    {
                        //finish();
                    }
                }).show();
        text1.setText("");//清空用户框
        text2.setText("");//清空密码框
        text3.setText("");//清空密码框
        text1.requestFocus();//获取焦点,光标出现
    }
    else
    {
        message+="姓名："+s1+"\n";
    }
    if(radiog1.getCheckedRadioButtonId()==R.id.radiogroup1)
    {
        message+="性别：男\n";
    }
    else
    {
        message+="性别：女\n";
    }
    message+="学历："+sp1.getSelectedItem().toString()+"\n";
    message+="爱好：";
    if(cb1.isChecked())
    {
        message+=cb1.getText().toString()+" ";
    }
    if(cb2.isChecked())
    {
        message+=cb2.getText().toString()+" ";
    }
    if(cb3.isChecked())
    {
        message+=cb3.getText().toString()+" ";
    }
    message+="\n";
    Toast.makeText(this,message,Toast.LENGTH_LONG).show();
    setMessage(s1,s2);
}

（3）自定义setMessage方法获取信息

private void setMessage(String s1,String s2)
{
    Intent data=new Intent();
    Bundle buddle=new Bundle();
    buddle.putString("text1",s1);
    buddle.putString("text2",s2);
    data.putExtras(buddle);
    setResult(RESULT_OK,data);
    finish();
}

（4）在Register.xml文件的注册按钮中添加属性

android:onClick="MyClick"

四、效果演示

五、相关问题：为按钮设置监听有几种方式？

​ 有四种方式：匿名内部类、内部类或外部类、Activity本身作为事件监听器、绑定标签

​ 本作业所用方法为：绑定标签