浅谈安卓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)
blank

相关推荐

  • STL库 总览_stl库函数

    STL库 总览_stl库函数  STL库1泛型程序设计2STL标准模板库2.1STL库的基本组件2.1.1STL基本组件—-容器2.1.2STL基本组件—-迭代器2.1.3STL基本组件—-函数对象2.1.4STL基本组件—-算法3迭代器4容器的基本功能与分类4.1顺序容器  1泛型程序设计  泛型程序设计就是时候,将程序设计的尽量的通用。STL标准库就是泛型程序设计的一个很好的范例。  ◇编写不依赖具体数据类型的程序;  ◇将算法从特定的数据结构中抽象出来,成为通用的;  ◇

    2022年10月10日
  • verifycode验证码模版「建议收藏」

    verifycode验证码模版「建议收藏」#-*-coding:utf-8-*-fromdjango.shortcutsimportHttpResponsedefverifycode(request):#引入绘图模块fromPILimportImage,ImageDraw,ImageFont#引入随机函数模块importrandom#定义变量,…

  • python数组操作方法_python 数组赋值

    python数组操作方法_python 数组赋值python列表数组类型,用中括号代表,具有顺序关系,可以修改,是最常用的数组bracket=[‘b’,’r’,’a’,’c’,’k’,’e’,’t’]pyhon元组数组类型,用小括号代表,具有顺序关系,不可以修改,是只读型数组,用来保护不需要改变的数据parentheses=(‘p’,’a’,’r’,’e’,’n’,’t’,’h’,’e’,’s’,’e’,’s’)python字典数组

  • ubuntu安装rabbitvcs[通俗易懂]

    ubuntu安装rabbitvcs[通俗易懂]安装RabbitVCS的方法步骤如下:第一步:将rabbitvcs的添加到源里面。(次操作会提示是否要添加到源里面,点击ENTER添加,Ctrl+C不添加),这里选择ENTER方便更新。sudoadd-apt-repositoryppa:rabbitvcs/ppa第二步:根据第一步的情况来是否跳过该步骤,如果第一步出现导入key,那第二步可以跳过,否则需要导入keysudo

  • idea 2022.01.13激活码【中文破解版】2022.02.20

    (idea 2022.01.13激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlHCIQ56F36O-eyJsaWN…

  • singletask生命周期

    singletask生命周期1.singleTask和singletop都是保真了Activity在栈中的唯一性  2.singleTask和singleTop实例存在时,都不会重新创建newtask  不同之处有如下几点:  如果singleTask启动的ActivityA位于栈底,在栈顶startActivity到这个ActivityA时会调动 onNewInt

发表回复

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

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