-
Android应用程序设计—— UI用户设计
-
版权声明:
本文为博主学习整理原创文章,如有不正之处请多多指教。
未经博主允许不得转载。
- 第一章 长度单位
Android中的长度单位有如下几种:
- px
- dpi
- sp
- Dp
- px
像素,屏幕中1个点就是1个像素
我们常说的设备屏幕分辨率,就是长与宽的像素乘积。如800*480
- dpi
每英寸长度像素数.在移动领域中,与ppi(每英寸面积像素数)等价。
具体计算方法:对角线像素数除以设备尺寸(结合勾股定理)
- dp
与像素无关的长度单位。
dpi | 1dp的等价像素值 |
120 | 0.75 |
160 | 1 |
240 | 1.25 |
320 | 2 |
480 | 4 |
720 | 4.5 |
- sp
与像素无关的字体大小单位
当dpi为160,且字体设置为正常(100%)时,1sp = 1px (规则与dp相同)
- 总结
- 设置长度、大小时,建议使用与像素无关的单位
- 设置字体大小建议使用sp
- 其他情况建议使用dp
- 界面布局
用于填充设备界面,展现程序风格与功能。
常用的UI布局如下:
1、LinearLayou(线性布局,重要)
2、RelativeLayout(相对布局,重要)
3、FrameLayout(帧布局)
4、TabLayout(表格布局)
5、GridLayout(网格布局)
6、AbsoluteLayout(绝对布局)
- LinearLayout布局
线性布局控件,它包含的子控件将以横向或竖向的方式排列。示例如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" //设置布局的宽
android:layout_height="match_parent" //设置布局的高
android:orientation="vertical" //设置布局的布局方向
tools:context=".MainActivity">
</LinearLayout>
常用属性设置
- android:orientation:
设置线性布局内组件(子元素)的排列方式。可有水平或者竖直方向:
vertical: 垂直线性布局
horizontal: 水平线性布局
- android:gravity
控制布局中控件的对齐方式。如果是没有子控件的控件设置此属性,表示其内容的对齐方式,比如说TextView里面文字的对齐方式;若是有子控件的控件设置此属性,则表示其子控件的对齐方式。
备注:默认对其方式为left|top,如果需要设置多个属性值,需要使用“|”进行组合。
android:layout_gravity
是指定本元素整体内容相对它的父元素的对齐方式
备注:如果父元素指定为Horizontal(水平线性布局),那么它只能设置相对于父元素上下的对齐方式;如果父元素指定为vertical(垂直线性布局),那么它只能设置相对于父元素左右的对其方式。
- android:gravity与 android:layout_gravity的区别
android:gravity是指定本元素的子元素相对它的对齐方式,如元素内的文本。
android:layout_gravity是指定本元素相对它的父元素的对齐方式
- Android:weight
设置元素在线性布局中所占的长或宽的权重,
计算方式:元素的长或宽 = 父元素长或宽 * 该元素的权重/父元素下所有元素的权重和
备注:当子元素未指定长或宽时,元素的长和宽按上面权重比例的计算方法分配;当子元素指定长或宽时,子元素的长或宽 = 子元素指定的长或宽 + 未分配空间该元素所占的空间(未分配的空间按上面权重比例的计算方法分配)
- RelativeLayout布局
允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一。它灵活性大很多,当然属性也多,操作难度也大,属性之间产生冲突的的可能性也大,使用相对布局时要多做些测试。
声明布局。示例如下
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" //设置布局的宽
android:layout_height="match_parent" //设置布局的高
tools:context=".MainActivity">
</RelativeLayout>
常用属性设置:
备注:1~7属性值为 “true”或”false”,
1)android:layout_centerHrizontal 水平居中
2)android:layout_centerVertical 垂直居中
3)android:layout_centerInparent 相对于父元素完全居中
4)android:layout_alignParentBottom 贴紧父元素的下边缘
5)android:layout_alignParentLeft 贴紧父元素的左边缘
6)android:layout_alignParentRight 贴紧父元素的右边缘
7)android:layout_alignParentTop 贴紧父元素的上边缘
备注:8~15属性值必须为id的引用名“@id/id-name”
8)android:layout_below 在某元素的下方
9)android:layout_above 在某元素的上方
10)android:layout_toLeftOf 在某元素的左边
11)android:layout_toRightOf 在某元素的右边
12)android:layout_alignTop 本元素的上边缘和某元素的上边缘对齐
13)android:layout_alignLeft 本元素的左边缘和某元素的左边缘对齐
14)android:layout_alignBottom 本元素的下边缘和某元素的下边缘对齐
15)android:layout_alignRight 本元素的右边缘和某元素的右边缘对齐
备注:16~25属性值必须为固定的值,如”50dp”,如果设置该元素的位置在某元素的上下左右,该元素的上下左右边缘为某元素的下上右左,如果未设置,边缘为其父元素的下上右左。
16)android:layout_marginBottom 离某元素底边缘的距离
17)android:layout_marginLeft 离某元素左边缘的距离
18)android:layout_marginRight 离某元素右边缘的距离
19)android:layout_marginTop 离某元素上边缘的距离
20)android:layout_margin 离某元素边缘的距离
21)android:paddingTop 某元素内部组件或内容与其上边框的距离
22)android:paddingBottom 某元素内部组件或内容与其下边框的距离
23)android:paddingLeft 某元素内部组件或内容与其左边框的距离
24)android:paddingRight 某元素内部组件或内容与其右边框的距离
25)android:padding 某元素内部组件或内容与其边框的距离
- FrameLayout布局
为每个加入其中组件创建一个空白大区域,每个子组建占据一帧,帧布局的效果把组件一个一个的叠加在一起。
- TabLayou布局
自行了解,不做考核
- GridLayout(网格布局)
它把容器划分为 行*列个网格,每个网格可以添加组件。(注:该布局是4.0以后新添加的管理器,因此必须在4.0以后的版本使用。)
声明布局
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" //设置布局的宽
android:layout_height="match_parent" //设置布局的高
android:rowCount="6" //设置布局的行数
android:columnCount="4" //设置布局的列数
tools:context=".MainActivity">
</GridLayout >
常用的属性设置
备注:1~3属性为布局的属性设置
1)android:alignmentmode 设置该布局管理器采用的对齐模式
2)android:columncount 设置该网格的列数量
3)android:rowcount 设置该网格的行数量
4)android:layout_column 设置元素在指定的列(从0开始)
5)Android:layout_row 设置元素在指定的行(从0开始)
6)Android:layout_columnSpan 设置元素跨越的列数
7)Android: layout_rowSpan 设置元素跨越的行数
- absoluteLayout布局
自行了解,不做考核
- 基础控件
常用的有如下几种:
- TextView
- EditText
- Button
- ImageButton
- ImageView
- TextView(文本框)
TextView不仅可以用于显示丰富的文本信息,还可以用来显示图文并茂的混排页面。
声明标签
<TextView 属性……/>
常用属性设置
1)android:text 设置文字
2)android:textColor 设置文字颜色
3)android:textSize 设置文字大小
4)android:singleLine 设置是否显示单行
5)android:textAllCaps 设置字母全大写
6)android:autoLink 指定文字以特殊形式呈现
7)android:textcolorlink 设置特殊形式呈现的字体颜色
8)android:background 设置背景色(图片)
9)android:ellipsize 设置当文字较长时,组件如何显示文字,
none正常显示,start开始为省略号,middle中间为省略号,end省略号在最后marquee以跑马灯实现,但是需要设置3属性:focusable为true
- EditView(编辑框)
声明编辑框
<EditView 属性……/>
常用属性设置
1)android:hint 设置提示文字
2)android:textColorHint 设置提示文字颜色
3)android:password 设置为“.”显示
4)android:maxLength 设置最多能输入的字符数
5)android:lines 设置文本可见行数
6)android:enabled 设置是否可以被编辑
7)android:inputtype 设置输入各种软键盘效果
8)android:drawableLeft 设置左边设置图片
9)android:drawablePadding 设置文本与图片的距离
10)android:background 设置背景色(图片)
备注:去除EditText中底下的一条横线android:background=”@null”:空间背景,这里没有,指透明
11)android:numeric="integer" 设置只能输入整数,如果是小数则是:decimal
12)android:capitalize 首字母大写,"characters":以大写字母写
13)android:textScaleX="1.5" 控制字与字之间的间距
- Button(按钮)
声明按钮
<Button 属性……/>
常用属性设置
1)android:text 设置文字
2)android:textColor 设置文字颜色
3)android:textSize 设置文字大小
4)android:background 设置背景色(图片)
- ImageButton(图片按钮)
本身是图片,有具备按钮的功能。
声明图片按钮
<ImageButton 属性……/>
常用属性设置
1)android:scr=”@mipmap/xxx” 设置使用的图片
2)android:background=”@mipmap/xxx” 设置背景色(图片)
- ImageView(图片)
声明标签
<ImageView 属性……/>
常用属性设置
1)android:scr=”@mipmap/xxx” 设置使用的图片
2)android:background=”@mipmap/xxx” 设置背景色(图片)
- Java代码操作XML文件中的控件
Java代码的写法
public class MainActivity extends Activity {
//声明一个按钮和标签
//备注:必须使用private修饰,把自己的属性封装起来,安全性更高
private Button btn;
private TextView tv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//通过使用XML文件中声明的控件id,来和后台java代码中声明的控件进行绑定,这样就可以操作XML中声明的控件了
btn = (Button) findViewById(R.id.button_enter);
tv = (TextView) findViewById(R.id.Textview_welcome);
//给按钮添加监听事件 setOnClickListener() 创建一个监听事件:new OnClickListener(){}
btn.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
//这里写监听事件处理的逻辑,这里表示设置tv对象显示的文字
tv.setText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ")
}
});
}
findViewById(id)方法
1)id:R.id.xxx就是我们XML布局文件中声明控件时android:id=”@+id/xxx”,用来唯一标识一个控件;
2)R:控件id中的R为R.java文件,由系统自动生成的只读文件,管理android中所有的资源(图片、布局和控件等),像一个中间人:XML布局文件和Java文件;
3)View:Android中所有控件的父类都是View,地位相当于我们Java中的Object,所以通过此方法获取的是控件的父类View,接收时需要强制转换为相应的控件;
4)Java中使用XML布局中声明控件的步骤:1、声明 对应的控件;2、关联id;3、使用。
setOnClickListener(ClickLisntener c)方法
1)给按钮添加监听事件 setOnClickListener(),当点击按钮是触发设置的监听方法;
2)监听对象可以使用new OnClickListener*()创建,也可以使用自定义对象,自定义类必须实习OnClickListenerl类,并重写onClick()方法。