Android应用程序设计—— UI用户设计

Android应用程序设计—— UI用户设计
版权声明：本文为博主原创文章，未经博主允许不得转载。https://mp.csdn.net/postedit/81838267
第一章长度单位

Android中的长度单位有如下几种：

px
dpi
sp
Dp
1. px

像素，屏幕中1个点就是1个像素

我们常说的设备屏幕分辨率，就是长与宽的像素乘积。如800*480

每英寸长度像素数.在移动领域中，与ppi(每英寸面积像素数)等价。

具体计算方法:对角线像素数除以设备尺寸（结合勾股定理）

与像素无关的长度单位。

dpi	1dp的等价像素值
120	0.75
160	1
240	1.25
320	2
480	4
720	4.5

与像素无关的字体大小单位

当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
1. 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(编辑框)

声明编辑框

常用属性设置

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(按钮)

声明按钮

常用属性设置

1)android:text 设置文字

2)android:textColor 设置文字颜色

3)android:textSize 设置文字大小

4)android:background 设置背景色(图片)

ImageButton(图片按钮)

本身是图片，有具备按钮的功能。

声明图片按钮

常用属性设置

1)android:scr=”@mipmap/xxx” 设置使用的图片

2)android:background=”@mipmap/xxx” 设置背景色(图片)

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()方法。

Android应用程序设计—— UI用户设计

Android应用程序设计—— UI用户设计

猜你喜欢