失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > Android手机应用开发(一) | 基本的UI界面设计

Android手机应用开发(一) | 基本的UI界面设计

时间:2020-02-14 17:30:27

相关推荐

Android手机应用开发(一) | 基本的UI界面设计

实验目的:

熟悉Android Studio开发工具操作。熟悉Android Studio基本UI开发,并进行UI基本设计。

创建一个文本框TextView

首先要清楚布局文件在哪里

Android模式查看项目结构,在layout里面存放着app的所有布局,默认第一个页面就是activity_main.xml

那么就可以直接在这里面添加一些列界面元素了

<TextViewandroid:id="@+id/text" //表示它的id为text,放在id xml里,而且这是新加的id所以用+号android:layout_width="wrap_content"//这个是必须的,定义了组件的宽度android:layout_height="wrap_content"//这个也是必须的,定义了组件的高度android:text="@string/display_name"//这个定义了显示的文本为string的xml里的display_name字符串,这样有利于修改,其实也可以直接写android:textSize="20sp" //定义了文字的大小,一般用sp作单位android:layout_marginTop="20dp" //定义了组件距离上边界的空白,一般用dp作单位app:layout_constraintLeft_toLeftOf="parent"//约束布局:表明其左边界与父组件的左边对齐app:layout_constraintRight_toRightOf="parent"//约束布局:表明其右边界与父组件的右边对齐app:layout_constraintTop_toTopOf="parent" />//约束布局:表明其顶部与父组件的顶部对齐

这里有一点需要注意的

官方是建议使用layout_marginEndlayout_marginStart代替layout_marginLeftlayout_marginRight,说法是这样文字不论从左到右还是从右到左都不会出现问题,之前我还一直疑惑为什么又有Left又有Start,不知道该用什么,反正就按官方的做,不过有时候用不了?我还是用回了LeftRight

创建一个图片块ImageView

一般来说图片文件放在mipmap文件夹里,不过其实不止一个文件夹

这里的不同后缀代表不同的分辨率图片

不过一般的小程序放错了问题应该不大,反正都能找到(/emm)

然后在xml这样引用这个图片

这里的sysu是图片文件名,不带格式后缀!

<ImageView......android:src="@mipmap/sysu" />

创建一个输入框EditText

<EditText......android:layout_width="0dp"android:layout_height="wrap_content"android:gravity="center" //表示文字格式android:hint="@string/edit_text" //表示未输入时提示的文字app:layout_constraintTop_toBottomOf="@+id/image" /> //表示它始终位于组件`image`的下方

这里有一个小问题,我用的layout_width0dp,它表示与外组件适应,这是因为如果我用的是wrap_content,将会是这样的效果,因为文字只有七个字,这样以后文字多了它也会一直拉伸,很不美观

修改之后就是这样的了,它处于并将长期处于这个长度!

创建一系列单选按钮RadioButton

单选按钮组件是不能独立存在的,它需要一个组即RadioGroup(因为一个按钮实在没什么意思),然后再在这个组里面创建需要数目的RadioButton

<RadioGroup......android:orientation="horizontal"><RadioButton......style="@style/AppTheme"/><!--设置默认选中--><RadioButton/><RadioButton /><RadioButton /></RadioGroup>

主要不同的就是需要确定其排列方向horizontal或者vertical

RadioButton还可以指定style,这里随便写了个系统默认的,如果没有特别好看的style就不用写了吧【haha

效果如下

其实可以试用一下group的padding属性(因为我不太熟),我加了句android:padding="10dp"之后,成了下面这个样子,确实内部边框都加粗了,不过我觉得还是用外边距Margin内边距Padding其中一个就好了(针对我这种小应用),不然跟别的组件距离不好计算,用一个就能解决的话多好

每个小按钮可以设置其周围的margin,当然可以设置不一致,难道还会担心group包不下吗

创建一个简单按钮Button

<Button......android:background="@drawable/button_shape"android:textColor="@color/colorWhite"/>

主要有两个需要注意的属性

background:这个是按钮文本的颜色,用的是colors.xml中定义的颜色

background:说是叫按钮背景,其实差不多也是按钮样式了,因为默认按钮是这样的

想要有颜色的椭圆形按钮的话需要自己定义样式,在drawable文件夹新建一个文件button_shape,用下列代码就可以创建一个蓝色椭圆按钮了,其本质上是使长方形的边角弧度增大

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android"android:shape="rectangle"><solid android:color="#3F51B5" /> //指定颜色<corners android:radius="180dp" /> //指定弧度</shape>

最后的样子就是这个样子

需要注意,xml是不能用//作为注释的,但是既然不是在代码里,用<-- -->好麻烦,就用//意思意思【傲娇

如果觉得《Android手机应用开发(一) | 基本的UI界面设计》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。