andriod学习shape+selector美化

安卓作业三

作业要求

1.注册页面出现

2.注册页面可以获取各视图组件相关信息并进行提示

3.登陆页面的美化，使用shape和selector

4.排版，关键步骤和代码

界面效果

实现方法

1. 注册页面的美化

在原本的注册页面之上添加两个单选按钮 增加一个下拉菜单栏spinner 添加三个复选框

注册界面的美化采用了selector+shape的形式 具体对应如下

round_shape.xml

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

    <solid
        android:color="@color/yellow" >
    </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>

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="@mipmap/a"
    android:orientation="vertical"
    tools:context=".Register">
    <TextView
        android:id="@+id/vew_2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:text="@string/register_main"
        android:textColor="@color/yellow"
        android:textSize="20sp" />
    <EditText
        android:id="@+id/login_name_2"
        android:layout_width="350dp"
        android:layout_height="50dp"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/round_shape"
        android:gravity="center"
        android:hint="@string/hint_login" />
    <EditText
        android:id="@+id/login_name_3"
        android:layout_width="350dp"
        android:layout_height="50dp"
        android:layout_below="@+id/login_name_2"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/round_shape"
        android:gravity="center"
        android:hint="@string/hint_pss" />
    <EditText
        android:id="@+id/login_name_4"
        android:layout_width="350dp"
        android:layout_height="50dp"
        android:layout_below="@+id/login_name_3"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="30dp"
        android:background="@drawable/round_shape"
        android:gravity="center"
        android:hint="@string/repeat" />
    <Button
        android:id="@+id/btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/login_name_4"
        android:layout_marginLeft="150dp"
        android:layout_marginTop="150dp"
        android:background="@drawable/round_shape"
        android:text="@string/register"
        android:textSize="15sp" />
    <TextView
        android:id="@+id/text4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_name_4"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="40dp"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="性别" />
    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@+id/login_name_4"
        android:layout_marginTop="30dp"
        android:layout_toRightOf="@+id/text4"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/radiobutton1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:textColor="@color/white"
            android:text="男"
            />
        <RadioButton
            android:id="@+id/radiobutton2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:text="女"
            android:textColor="@color/white"
            android:layout_weight="2"/>
    </RadioGroup>
    <TextView
        android:id="@+id/text5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radiogroup"
        android:layout_marginLeft="60dp"
        android:text="学历"
        android:textColor="@color/white"
        android:textSize="15sp" />
    <Spinner
        android:id="@+id/spinner1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radiogroup"
        android:layout_toRightOf="@+id/text5"
        android:entries="@array/degree"
        android:prompt="@string/academic_prompt"
        android:spinnerMode="dialog" />
    <TextView
        android:id="@+id/text6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text5"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="10dp"
        android:text="爱好"
        android:textColor="@color/white"
        android:textSize="15sp"
        />
    <CheckBox
        android:id="@+id/check1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text5"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="6dp"
        android:layout_toRightOf="@id/text6"
        android:text="跑步"
        android:textColor="@color/white"
        android:textSize="15dp" />
    <CheckBox
        android:id="@+id/check2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text5"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="6dp"
        android:textColor="@color/white"
        android:layout_toRightOf="@id/check1"
        android:textSize="15dp"
        android:text="游泳" />
    <CheckBox
        android:id="@+id/check3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/text5"
        android:layout_marginLeft="22dp"
        android:layout_marginTop="6dp"
        android:textColor="@color/white"
        android:layout_toRightOf="@id/check2"
        android:textSize="15dp"
        android:text="读书" />
</RelativeLayout>

值得赘述的是 ，spinner组件需要额外的组成,需要在strings.xml之中添加选项组，当然我这里是在values之中创建一个set.xml专门存放

set.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name = "academic_prompt"> 请选择学历 </string>
    <string-array name="degree" Size="25sp">
        <item>初中</item>
        <item>高中 </item>
        <item>本科</item>
        <item>硕士</item>
        <item>博士</item>
    </string-array>
</resources>

2.登录界面的优化

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:background="@drawable/gradient"
    android:orientation="vertical"
    tools:context=".Login">
    <LinearLayout
        android:layout_marginTop="150dp"
        android:layout_marginLeft="50dp"
        android:layout_width="350dp"
        android:layout_height="450dp"
        android:orientation="vertical"
        android:background="@drawable/gradient_round"
        >
        <TextView
            android:id="@+id/vew_1"
            android:layout_width="match_parent"
            android:layout_height="97dp"
            android:gravity="center"
            android:text="@string/main"
            android:textColor="@color/black"
            android:textSize="20sp" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="120dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <EditText
                    android:id="@+id/login_name"
                    android:layout_width="300dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center"
                    android:layout_marginLeft="25dp"
                    android:background="@drawable/selector1"
                    android:gravity="center"
                    android:inputType="text"
                    android:hint="@string/hint_login" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="120dp">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">
                <EditText
                    android:id="@+id/pss_name"
                    android:layout_width="300dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center"
                    android:layout_marginLeft="25dp"
                    android:background="@drawable/selector1"
                    android:gravity="center"
                    android:hint="@string/hint_pss"
                    android:inputType="numberPassword" />
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <Button
                android:id="@+id/btn1"
                android:layout_width="114dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="120dp"
                android:background="@drawable/round_shape"
                android:text="@string/login"
                android:textColor="#757575" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="262dp"
            android:orientation="vertical">
            <Button
                android:id="@+id/btn2"
                android:layout_width="match_parent"
                android:layout_height="68dp"
                android:background="@null"
                android:gravity="center"
                android:text="@string/login_new"
                android:textColor="@color/Thistle"
                android:textSize="18sp" />
        </LinearLayout>
        <TextView
            android:layout_width="match_parent"
            android:text="@string/below"
            android:gravity="center"
            android:textColor="@color/black"
            android:layout_height="25dp"/>
    </LinearLayout>
</LinearLayout>

登录界面界面美化

首先就是包裹登录框和按钮的透明矩形 ，我们采用shape之中的透明色彩填充+圆角

gradient_round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#99FFFFFF">

    </solid>
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp"
        android:bottomLeftRadius="20dp"
        android:bottomRightRadius="20dp"
        />
</shape>

接下来就是两个输入框之间，实现鼠标移动光标的同时，进行输入框边界效果的切换

才用的是selector之中android:state_focused="true" 的属性 在两张图片之间进行切换

如下就是selector1.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"  android:drawable="@drawable/input_over">
        <shape>
            <corners
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp"
                android:bottomLeftRadius="20dp"
                android:bottomRightRadius="20dp"
                />
        </shape>
    </item>
    <item  android:drawable="@drawable/login_input">
        <shape>
            <corners
                android:topLeftRadius="20dp"
                android:topRightRadius="20dp"
                android:bottomLeftRadius="20dp"
                android:bottomRightRadius="20dp"
                />
        </shape>
    </item>
</selector>

界面美化结束

信息传递

register.java

package com.example.logindemo;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class Register extends AppCompatActivity {
    EditText text3,text4,text5;// 用户名  密码 重复密码
    Button button3;
    private String input_name,pss_name,repeat_pss;// 用户名 密码 确认密码
    RadioGroup radioGroup;
    CheckBox checkBox1,checkBox2,checkBox3;
    Spinner spinner;
    private String sex = "";
    List<String >hobby = new ArrayList<String>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        Toast.makeText(Register.this,"欢迎来到注册页面",Toast.LENGTH_LONG).show();
        text3 = (EditText) findViewById(R.id.login_name_2);
        text4 = (EditText) findViewById(R.id.login_name_3);
        text5 = (EditText) findViewById(R.id.login_name_4);
        button3 = (Button) findViewById(R.id.btn3);
        radioGroup =(RadioGroup) findViewById(R.id.radiogroup);
        checkBox1 = (CheckBox) findViewById(R.id.check1);
        checkBox2 = (CheckBox) findViewById(R.id.check2);
        checkBox3 = (CheckBox) findViewById(R.id.check3);
        spinner = (Spinner) findViewById(R.id.spinner1);
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //checkId就是当前选中的RadioButton
                sex = checkedId==R.id.radiobutton1 ? "男" : "女";
                hobby.add("性别："+sex+"\n");
            }
        });

        System.out.println(hobby);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                String info = (String) spinner.getSelectedItem();
                hobby.add("学历："+info+"\n");
            }
            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                hobby.add("学历："+"未填写"+"\n");
            }
        });
        checkBox1.setOnCheckedChangeListener(new Listener(1));
        checkBox2.setOnCheckedChangeListener(new Listener(2));
        checkBox3.setOnCheckedChangeListener(new Listener(3));
        button3.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View view) {
                input_name = text3.getText().toString();
                pss_name = text4.getText().toString();
                repeat_pss = text5.getText().toString();
                int flag = -1;
                if (input_name.length()==0 || pss_name.length() ==0)
                {
                    flag = 0;
//                    用户名或者密码为空
                }
                if (!pss_name.equals(repeat_pss))
                {
                    flag = 1;
//                    两次密码输入不一致
                }
                if (flag==0 || flag==1)
                {
//                    输入为空，传递回login界面失败信息 或者  两次密码不一致
                   Intent intent_error = new Intent(Register.this,Login.class);
                   if (flag==0)intent_error.putExtra("error","输入为空，注册失败");
                   else intent_error.putExtra("error","两次密码输入不一致，请重新注册");
                   startActivity(intent_error);

                }
                else if (flag==-1)
                {
                    // 注册成功，传回login页面注册信息
                    String msg = ""+hobby;
                    Toast.makeText(Register.this,msg,Toast.LENGTH_LONG).show();// toast长时间文本
                    Intent intent3 = new Intent(Register.this,Login.class);
                    intent3.putExtra("register_name",text3.getText().toString());
                    intent3.putExtra("register_pss",text4.getText().toString());
                    intent3.putExtra("success","注册成功");
                    startActivity(intent3);
                }
            }
        });
    }
    public class Listener implements CompoundButton.OnCheckedChangeListener {
        int position;

        public Listener(int position) {
            this.position = position;
        }
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if(isChecked){
                Toast toast= Toast.makeText(Register.this,"选中了"+buttonView.getText().toString(),Toast.LENGTH_SHORT);
                toast.show();
                hobby.add("爱好"+buttonView.getText().toString()+"\n");
            }
//            switch (position) {
//                case 1:
//                    hobby.add("爱好"+checkBox1.getText().toString()+"\n");
//                    break;
//                case 2:
//                    hobby.add("爱好"+checkBox2.getText().toString()+"\n");
//                    break;
//                case 3:
//                    hobby.add("爱好"+checkBox3.getText().toString()+"\n");
//                    break;
//
//            }

        }

    }
}

详细说明

基础代码部分不赘述，主要讲述新添加的三个组件之间的信息传递

我这边是采用List储存基本信息，List hobby = new ArrayList ();

1 单选框

RadioGroup radioGroup;
radioGroup =(RadioGroup) findViewById(R.id.radiogroup);/// 获取对应的单选框图
radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {/// 单选框图连接监听器
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                //checkId就是当前选中的RadioButton
                /// 获取单选框图当前被选中的id进行分配
                sex = checkedId==R.id.radiobutton1 ? "男" : "女";
                // 由于只存在两个单选，所以可以和其中的一种比对
                hobby.add("性别："+sex+"\n");
            }
        });

2.spinner 直接采用匿名方法进行监听

Spinner spinner;
spinner = (Spinner) findViewById(R.id.spinner1);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                String info = (String) spinner.getSelectedItem();///获取所点击的item
                hobby.add("学历："+info+"\n");
            }
            @Override
            public void onNothingSelected(AdapterView<?> parent) {
                hobby.add("学历："+"未填写"+"\n");
            }
        });

3.复选框

由于这里有三个复选框需要监听，而且实现功能相同，匿名类就显得冗余了，采用内部类的实现监听

关于区分是哪个复选框传回的监听信号，我这边采用的是两种方法。

1.直接在边监听的时候，获取对应的id，因为是三个都监听了，所以点击某一个复选框就会回调一次，保证了这个方法传回的id是唯一的。

2.添加构造方法，给他们附上一个id

public class Listener implements CompoundButton.OnCheckedChangeListener {
         /// 第一种方法 
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if(isChecked){/// 如果被选中，调用buttonView就知道被选中的信息
                Toast toast= Toast.makeText(Register.this,"选中了"+buttonView.getText().toString(),Toast.LENGTH_SHORT);
                toast.show();
                hobby.add("爱好"+buttonView.getText().toString()+"\n");
            }
        }

    }

public class Listener implements CompoundButton.OnCheckedChangeListener {
        int id;
        public Listener(int id) {
            this.id = id;
        }
         /// 第二种方法 
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            switch (id) {
                case 1:
                    hobby.add("爱好"+checkBox1.getText().toString()+"\n");
                    break;
                case 2:
                    hobby.add("爱好"+checkBox2.getText().toString()+"\n");
                    break;
                case 3:
                    hobby.add("爱好"+checkBox3.getText().toString()+"\n");
                    break;
            }
    }
 }

问题回答

答：为按钮设置监听器有四种方法，第一种采用匿名内部类实现监听 ， 第二种是内部类或者外部类， 将事件监听类改成自己所定义的外部类或者内部类的实例 ，第三种活动本身作为监听器，通过Activity实现监听接口，第四种绑定标签，在xml文件中采用Onclick等属性绑定自定义的监听方法，老师给出示例之中采用的是第四种方法。