浅谈安卓UI设计「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

用户界面在程序开发中十分重要，一个好的用户界面设计需要考虑到用户使用体验、是否美观方便等。
在界面设计的过程中，需要考虑如何制作出UI界面，怎么样控制UI界面两大块。
这里先放上之前我们UI作业的截图：

本文主要介绍通过两种方式来进行界面设计：
1、通过xml文件进行界面设计
2、通过代码控制进行界面设计

一、通过xml文件进行界面设计
打开Android Studio，建立工程，在res/layout下存放的是界面布局文件。双击创建的文件，左边是界面设计，右边对应了界面设计的xml文本。
1>在左边控件中，拖动一个button到右边的手机界面中，之后点击上线画圈右边的text查看文本，可以看到xml已经编写完成。
2>切换到代码目录，打开之前创建的MainActivity，在onCreate()方法中：

setContentView(R.layout.activity_main);  //将编写的界面显示到手机屏幕

MainActivity添加两个私有数据成员：

private TextView tv;
private Button bt;

onCreate()里面初始化tv和bt，并给bt添加监听事件

tv = (TextView)findViewById(R.id.textView);//控件初始化
bt = (Button) findViewById(R.id.button);//控件初始化

bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
tv.setText("你点击了按钮!");
}
);//添加监听

运行程序，点击按钮，原来的hello world！文本发生改变。在这里，两个控件都是通过xml文件定义的，我们在代码中实现了一个监听器，也就是界面的控制逻辑。
实例：
通过代码进行界面设计时，我们建立一个TextView控件来写标题；建立一个ImageView控件来写标题。先将图片复制到res/drawable目录下，然后通过app:srcCompat=”@drawable/sysu”来引用；建立两个TextView控件，用来写“学号”和“密码”，设置建立两个EditView控件，用来输入学号和密码；建立一个RadioGroup，之后再在里面建立两个单选按钮RadioButton。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.yc.sysu.MainActivity">

    <TextView  android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="学生信息系统" android:textSize="20sp" android:textColor="#000000" app:layout_constraintTop_toTopOf="parent" android:layout_marginTop="20dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>

    <ImageView  android:id="@+id/icon" android:layout_width="104dp" android:layout_height="104dp" app:srcCompat="@drawable/sysu" app:layout_constraintTop_toBottomOf="@id/title" android:layout_marginTop="20dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" />

    <TextView  android:id="@+id/user_id" android:text="学号：" android:textColor="#000000" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginLeft="20dp" app:layout_constraintTop_toBottomOf="@id/icon" android:layout_marginTop="20dp" />

    <TextView  android:id="@+id/user_pwd" android:text="密码：" android:textColor="#000000" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginLeft="20dp" app:layout_constraintTop_toBottomOf="@id/user_id" android:layout_marginTop="20dp"/>

    <EditText  android:id="@+id/text_userid" android:hint="请输入学号" android:textColor="#000000" android:textSize="18sp" android:paddingTop="0dp" android:digits="0123456789" android:layout_width="fill_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="@id/user_id" app:layout_constraintLeft_toRightOf="@+id/user_id" app:layout_constraintRight_toRightOf="parent" android:layout_marginRight="20dp"/>

    <EditText  android:id="@+id/text_userpwd" android:hint="请输入密码" android:textColor="#000000" android:textSize="18sp" android:password="true" android:paddingTop="0dp" android:layout_width="fill_parent" android:layout_height="wrap_content" app:layout_constraintTop_toTopOf="@id/user_pwd" app:layout_constraintLeft_toRightOf="@+id/user_pwd" app:layout_constraintRight_toRightOf="parent" android:layout_marginRight="20dp" />

    <RadioGroup  android:id="@+id/radioButton" android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toBottomOf="@id/user_pwd" android:layout_marginTop="30dp">

    <RadioButton  android:id="@+id/radioButton1" android:text="学生" android:textColor="#000000" android:textSize="18sp" android:checked="true" android:layout_width="wrap_content" android:layout_height="wrap_content"/>

    <RadioButton  android:id="@+id/radioButton2" android:text="教职工" android:textColor="#000000" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp"/>
    </RadioGroup>

    <View  android:id="@+id/button_box" android:layout_height="50dp" android:layout_width="185dp" app:layout_constraintTop_toBottomOf="@id/radioButton" android:layout_marginTop="20dp" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent"/>

    <Button  android:id="@+id/button1" android:text="登录" android:textColor="#ffffff" android:background="@drawable/shape" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toLeftOf="@id/button_box" app:layout_constraintTop_toTopOf="@id/button_box" />

    <Button  android:id="@+id/button2" android:text="注册" android:textColor="#ffffff" android:background="@drawable/shape" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" app:layout_constraintLeft_toRightOf="@id/button1" android:layout_marginLeft="10dp" app:layout_constraintTop_toTopOf="@id/button_box"/>


</android.support.constraint.ConstraintLayout>

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="#3f51b5"/>
    <corners android:radius="10dip"/>
    <padding  android:bottom="5dp" android:top="5dp" android:left="10dp" android:right="10dp"/>
</shape>

二、通过代码进行界面设计
定义MainActivity的私有成员：

    private TextView tv;
    private Button bt;

重写onCreate()，通过new定义一个线性布局和Button按钮和文本框控件，布局里面加入控件，控件加上监听事件

LinearLayout l = new LinearLayout(this);  //定义线性布局
        setContentView(l);                //线性布局加入屏幕

        tv = new TextView(this);          //定义控件
        bt = new Button(this);            //定义控件

        l.addView(bt);                   //加入布局
        l.addView(tv);                  //加入布局

        bt.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tv.setText("你点击了按钮!");
            }
        });         //监听事件