安卓开发(2):基本UI界面设计

下面用开发一个小应用的方法来学习一下安卓基本的UI界面设计

这个应用的界面如下:


应用的具体界面设置如下:

(1)     该界面为应用启动后看到的第一个界面 

(2)     各控件:只用一个 ConstraintLayout 实现整个布局;标题字体大小20sp,与顶部距离 20dp,居中;  图片与标题的间距为 20dp,居中;输入框整体距屏幕右边间距 20dp,上下两栏间距20dp,内容(包括提示内容)如图所示,内容字体大小 18sp; 学号对应的EditText 只能输入数字,密码对应的 EditText 输入方式为密码;两个单选按钮整体居中,字体大小18sp,间距 10dp,默认选中的按钮为第一个; 两个按钮整体居中,与上方控件间距20dp,按钮间的间距 10dp,文字大小 18sp。按钮背景框左右边框与文字间距 10dp,上下边框与文字间距 5dp,圆角半径 10dp,背景色为#3F51B5  

(3)     使用的布局和控件:ConstraintLayout、TextView、EditText、Button、ImageView、RadioGroup、RadioButton 

相关基础知识:

Android 的组件分为布局和控件。布局,就是让控件在里面按一定的次序排列好的一种组件,本身并不提供内容。控件,就是显示内容的组件,比如显示一张图片,显示文字等等。现在的主流是用 ConstraintLayout。最常用的控件有以下几种:用于显示文字的TextView、用于显示图片的 ImageView、用于接受用户输入的输入框 EditText、按钮 Button、单选按钮 RadioButton,等等。以下简要介绍本次应用开发中使用到的布局和组件。 

1. ConstraintLayout 

约束布局,根据布局中的其他元素或视图, 确定 View 在屏幕中的位置, 受到三类约束, 即其他视图, 父容器(parent),基准线(Guideline)。

layout_constraint[本源位置]_[目标位置]="[目标 ID]“

例如:app:layout_constraintBottom_toBottomOf=“parent”

约束当前 View 的底部至目标 View 的底部, 目标 View 是 constraintLayout. 即, 把当前 View 的底部对齐到constraintLayout 的底部. 

全部边界与 constraintLayout(父容器)边界对齐, 则为居中。 




ConstraintLayout 除了与视图约束以外, 还支持与引导线(Guideline)约束. 如, 设置竖直引导线(Guideline)距离左侧 22dp,TextView 左侧与引导线约束:

表示的 Guideline 是垂直的,与左边屏幕相距 22dp。 

还支持链样式,可以参考https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html


2. TextView 

用于显示文字内容的控件,通过设置 text 的值来显示要显示的内容,常用的属性有 textColor,用于设置文字的颜色,textSize,用于设置文字大小。示例: 


3. EditText 

用于接受用户输入的输入框,常用属性除了和 TextView 相同的 textColor 和 textSize 之外,还有

inputType,用于设置输入框中文本的类型,如果设置为 textPassword,会使输入的文字变为小黑, hint用于设置当输入框为空时的提示内容。

4. ImageView 

显示图片的控件,通过设置 src 来设置要显示的图片  



5. RadioButton 和 RadioGroup 

RadioButton 是单选按钮,一组单选按钮需要包括在一个 RadioGroup 中,并且需要对 RadioGroup 和其包括的每一个 RadioButton 都设置 id,RadioButton 才能正常工作。示例:  




可以用android:checked=true来设置哪个RadioButton被默认选中

下面简单介绍以下几个重要的通用属性 :

 

1. layout_width 和 layout_height 

这两个属性分别指定所属组件的宽度和高度,属性值可以是具体的距离,如:20dp,更常见的是指定为 match_parent 或者 wrap_content,match_parent 指的是组件的宽度或高度与父组件的宽度或高度一

致,如果组件没有父组件,那么组件的宽度或高度与屏幕的宽度或高度一致。wrap_content 指组件的宽度或高度刚好可以包裹住组件内的子组件即可。  

  

2. layout_gravity 和 gravity 

这两个属性的基本属性值有五种:top、bottom、center、left、right,可以使用组合属性,如 left|bottom 表示左下角。区别在于 layout_gravity 用于指定设置该属性的组件相对于父组件的位置, gravity 用于指定指定设置该属性的组件下的子组件的位置。  

  

3. layout_margin 和 padding 

layout_margin指定外边距,padding 指定内边距,这两个属性配合上四个方向还各有四个属性,如layout_marginTop,paddingTop 等。 


关于自定义背景边框  

若想设置一个部件的形状或者背景颜色,光设置基本属性是不够的,可以定义一个自定义的xml文件来设置边框啊,形状啊,背景颜色啊等等,放在drawable(图片文件放mipmap文件夹)文件夹里,然后用android:background=“@drawable/xxx”来引用。

定义方法

在 drawable 文件夹下新建一个 Drawableresource file,填写 file name,然后把自动生成的 selector 标签改为 shape,shape 下有多个属性,padding,radius,solid 等等,具体怎么使用参见这篇教程:http://blog.csdn.net/sysukehan/article/details/52022307 


引用资源文件里的变量

我们可以把要用到的变量定义在资源文件中(字符串定义在strings.xml,颜色值定义在colors.xml,这是一个好习惯)如下:


然后就可以直接用android:textColor=“@color/primary_black”来使用黑色。

关于自定义style

style 定义在 res/values/styles.xml 文件中,也是一种资源。例如当多个TextView 具有相同的 layout_height,layout_width,textSize,textColor 设定时,如果每次都要把这些属性设定一次会很烦,而且如果全部需要修改的话(改变字体大小)也不方便,因此可以把这些属性统一定义为一个 style,这样使用的时候只要直接引用这个 style 即可。  

定义 style 的方法:在 styles.xml 文件中定义自定义 style  




一个自定义 style下包含多个键值对,引用的时候设置style=“@style/my_edittext_style”即可,注意不要写成 android:style=“@style/my_edittext_style”。在引用 style之后,还可以继续定义属性,如果有重复,以继续定义的属性为准。 

下面是我的代码:

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.administrator.lab1.MainActivity">

    <TextView
        android:id="@+id/titl"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="中山大学学生信息系统"
        android:textSize="20sp"
        android:textColor="@color/primary_black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"/>
    <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="90dp"/>
    <ImageView
        android:id="@+id/sysuimag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/sysu"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titl"
        android:layout_marginTop="20dp"
        />
    <TextView
        android:id="@+id/textid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="学号:"
        android:textSize="20sp"
        android:textColor="@color/primary_black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline1"
        app:layout_constraintTop_toBottomOf="@+id/sysuimag"
        android:layout_marginTop="30dp"/>
    <EditText
        android:id="@+id/studid"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="@color/primary_black"
        android:textSize="18sp"
        android:inputType="number"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/sysuimag"
        android:hint="请输入学号"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        app:layout_constraintLeft_toLeftOf="@+id/guideline1" />
    <TextView
        android:id="@+id/textpasword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="密码:"
        android:textSize="20sp"
        android:textColor="@color/primary_black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline1"
        app:layout_constraintTop_toBottomOf="@+id/studid"
        android:layout_marginTop="30dp"/>
    <EditText
        android:id="@+id/pasword"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="@color/primary_black"
        android:textSize="18sp"
        android:inputType="textPassword"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/studid"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:hint="请输入密码"
        app:layout_constraintLeft_toLeftOf="@+id/guideline1" />
    <RadioGroup
        android:id="@+id/id0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pasword"
        android:layout_marginTop="20dp">
        <RadioButton
            android:id="@+id/id1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="学生"
            android:textSize="18sp" />
        <RadioButton
            android:id="@+id/id2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            app:layout_constraintLeft_toRightOf="@id/id1"
            android:layout_marginLeft="10dp"
            android:text="教职工"/>
    </RadioGroup>

    <Button
            android:id="@+id/signn"
            android:text="登陆"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:background="@drawable/buttonbg"
            android:textColor="@color/primary_white"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="70dp"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintTop_toBottomOf="@id/id0"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/regist"
            />
        <Button
            android:id="@+id/regist"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="18sp"
            android:background="@drawable/buttonbg"
            android:textColor="@color/primary_white"
            android:text="注册"
            android:layout_marginLeft="20dp"
            app:layout_constraintTop_toTopOf="@id/signn"
            app:layout_constraintLeft_toRightOf="@id/signn"
            app:layout_constraintRight_toRightOf="patent"
            />
</android.support.constraint.ConstraintLayout>


colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="primary_black">#D5000000</color>
    <color name="primary_white">#FFFFFFFF</color>
</resources>


MainActivity.java

package com.example.administrator.lab1;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main); //把布局文件加载
    }
}



buttonbg.xml(按钮的背景自定义边框)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners
        android:radius="10dp"/>
    <padding
        android:top="5dp"
        android:bottom="5dp"
        android:left="10dp"
        android:right="10dp"/>
    <solid
        android:color="#3F51B5"/>
</shape>


  • 7
    点赞
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值