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

浅谈安卓UI设计「建议收藏」用户界面在程序开发中十分重要,一个好的用户界面设计需要考虑到用户使用体验、是否美观方便等。在界面设计的过程中,需要考虑如何制作出UI界面,怎么样控制UI界面两大块。这里先放上之前我们UI作业的截图:本文主要介绍通过两种方式来进行界面设计:1、通过xml文件进行界面设计2、通过代码控制进行界面设计一、…

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

用户界面在程序开发中十分重要,一个好的用户界面设计需要考虑到用户使用体验、是否美观方便等。
在界面设计的过程中,需要考虑如何制作出UI界面,怎么样控制UI界面两大块。
这里先放上之前我们UI作业的截图:
1
2
3
4
5
6
本文主要介绍通过两种方式来进行界面设计:
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("你点击了按钮!");
            }
        });         //监听事件

运行代码,点击按钮,将会出现”你点击了按钮!”的文本提示。

三、总结
在界面设计前,需要先调查用户需求,再进一步展开设计。安卓界面设计通过xml文件进行界面设计,这是一种十分高效的方式。通过代码进行界面设计则是一种更为灵活的开发方式。在实际操作中,两者结合能够大大简化界面设计工作。

作者:陈语童
原文链接:https://blog.csdn.net/weixin_41402015/article/details/80716263

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149381.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • pycharm鼠标滚动控制字体大小_pycharm窗口放大

    pycharm鼠标滚动控制字体大小_pycharm窗口放大1、放大页面方法第一步:打开file里面的setting,然后打开Keymap,再搜索框中输入increase,点击increaseFontSize,双击AddMouseShortcut(先不用点OK)第二步:点击AddMouseShortcut弹出下面对话框,然后按住ctrl并向上滚动鼠标滑轮,将变成第二个对话框,点击OK;第三步:显示下面页面表示设置放大成功,点击OK即可。2、缩小页面方法与上面方法类似,将increase变成decrease输入即可;…

  • linux 中增加路由(route)命令详解

    linux 中增加路由(route)命令详解linuxroute命令  显示现在所有路由  #route-n  root@Ubuntu:~#route  KernelIProutingtable  DestinationGatewayGenmaskFlagsMetricRefUseIface  10.147.9.0*255.255.255.0U100eth0  192.1…

  • 初识ABP vNext(7):vue身份认证管理&租户管理

    初识ABP vNext(7):vue身份认证管理&租户管理

    2020年11月20日
  • java实现高斯日记[通俗易懂]

    java实现高斯日记[通俗易懂]题目标题:高斯日记大数学家高斯有个好习惯:无论如何都要记日记。他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几天。这或许也是个好习惯,它时时刻刻提醒着主人:日子又过去一天,还有多少时光可以用于浪费呢?高斯出生于:1777年4月30日。在高斯发现的一个重要定理的日记上标注着:5343,因…

  • adb 安装 与 卸载 命令「建议收藏」

    adb 安装 与 卸载 命令「建议收藏」列出所有连接的设备adbdevicesListofdevicesattached0721596563565device4668652232BMdevice1.选择设备安装与卸载adb-s设备号install/apk文件路径/adb-s设备号uninstall包名…

  • matlab单缝衍射强度分布_matlab双缝衍射曲线图

    matlab单缝衍射强度分布_matlab双缝衍射曲线图基于MATLAB单缝衍射?本科毕业论文(设计)题目基于matlab的单缝衍射和双缝干涉可视化模拟学生姓名学号系别物理学与电子信息工程系年级08级专业物理学指导教师职称完成日期闽江学院毕业论文(设计)诚信声明书本人郑重声明:兹提交的毕业论文(设计)《基于matl…

    2022年10月23日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号