3、描述用户界面 2011.10 湖南城市学院.

Slides:



Advertisements
Similar presentations
开发入门 一个 android 初学者的心得与体会. 前言 两周前张老师通知我说,让我根据教练助手的学习与开发的过程讲下 android 开发的心得与体会,我觉得自己在这么多 Android 前辈大佬面前讲 android 简 直是班门弄斧。由于是刚入门的初学者,水平有限,很多方面还很不足,对 错误或不周到之处欢迎批评指正。顺便还得提下,我这个标题有抄袭积聚童.
Advertisements

Android ADT + Android SDK Eclipse Eclipse 編輯器 JAVA JAVA 開發工具.
第二章 Android 简单界面开发 倚动软件工厂实验室 View 组件介绍 布局管理器 自定义组件 目录 CONTENTS.
Android开发入门 -----第一个Android程序 主讲:李晓蕾
第2章  Android应用的界面编程.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
项目2 字符格式和段落编排 2017年3月7日6时54分.
第一章 Android简介与环境搭建 QQ号: QQ群: (Android编程入门) 网络资源:
插入超链接 高邮市第一实验小学 范太国 任务一:设置文本超链接 任务一:设置文字超链接 步骤:1、选定文字并右击,在快捷菜单 中选择“超链接”命令。 2、在弹出的对话框中选择左侧“链接到:”中的“本文档中的位置(A)”项,在“请选择文档中的位置(C):”中选择需要链接的幻灯片,单击“确定”按钮。
實驗五:多媒體播放器選單介面.
Part 2 開發Android應用程式的流程
Android 黄锵.
在PHP和MYSQL中实现完美的中文显示
Android App 系統開發教學 Luna 陳雯琳 2014/12/18
第2章 Android界面设计基础 QQ号: QQ群: (Android编程-清华版)
建立Android新專案 建國科技大學 資管系 饒瑞佶 2010/10.
厦门大学数据库实验室 报告人:谢荣东 导师:林子雨 2014年8月30日
第5讲 Android用户界面(三).
UI 软件 设计 网页基本元素设计(二).
Chapter 4 手機控制項應用.
實驗四:單位轉換程式.
第2章 建立Android應用程式 2-1 Java語言、XML文件與Android 2-2 建立第一個Android應用程式
Ch06 再談選單元件 物件導向系統實務.
Chapter 6 Advanced UI Design.
Android介面設計 Android智慧型手機程式設計 建國科技大學 資管系 饒瑞佶 2012/4 V1 2012/8 V2
Chapter 6 進階UI設計.
第八章 菜单设计 §8.1 Visual FoxPro 系统菜单 §8.2 为自己的程序添加菜单 §8.3 创建快捷菜单.
CH7 佈局、按鈕與文字編輯元件.
Android 基礎.
Android五大布局 线性布局/相对布局.
實驗十四:顯示與控制地圖.
建立Android新專案 Android智慧型手機程式設計 程式設計與應用班 建國科技大學 資管系 饒瑞佶 2012/4 V1
第6章 建立Android使用介面 6-1 介面元件的基礎 6-2 Android的事件處理 6-3 按鈕元件 6-4 文字元件
POWERPOINT TEMPLATE Design by Richasy
VSS使用简介 王树升
POWERPOINT TEMPLATE HI.
主编:钟元生 赵圣鲁.
UI 软件 设计 页面布局(三).
Android Studio介面設計 建國科技大學資管系 饒瑞佶 2016/3 V1.
SOA – Experiment 2: Query Classification Web Service
编程作业3:网页正文抽取 (10分).
第二章 登录UNIX操作系统.
Chapter 5 Basic UI Design.
Android視窗介面 建國科技大學 資管系 饒瑞佶 2010/10.
Location Based Services - LBS
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
姚金宇 MIT SCHEME 使用说明 姚金宇
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
第4章 Excel电子表格制作软件 4.4 函数(一).
iSIGHT 基本培训 使用 Excel的栅栏问题
Android視窗介面 建國科技大學 資管系 饒瑞佶 2010/10.
第六章 素材的加工与处理 第13讲 用GoldWave进行音频的截取、合并、淡入淡出操作
Delphi 7.0开发示例.
RecyclerView and CardView
Python 环境搭建 基于Anaconda和VSCode.
武汉纺织大学传媒学院 cm.wtu.edu.cn
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
基于列存储的RDF数据管理 朱敏
C++语言程序设计 C++语言程序设计 第一章 C++语言概述 第十一组 C++语言程序设计.
基本组件 本讲大纲: 支持网站: 1、文本框(TextView)与编辑框(EditText)
布局管理器 本讲大纲: 1、线性布局 2、表格布局 3、帧布局 4、相对布局 5、范例1:使用表格布局与线性布局实现分类工具栏
第四章 UNIX文件系统.
第4章 闪烁霓虹灯--层布局的应用 授课老师:高成珍 QQ号: QQ群: 、
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
控制UI界面 本讲大纲: 1、使用XML布局文件控制UI界面 2、在代码中控制UI界面 3、使用XML和Java代码混合控制UI界面
使用Fragment 本讲大纲: 1、创建Fragment 2、在Activity中添加Fragment
《手把手教你学STM32-STemWin》 主讲人 :正点原子团队 硬件平台:正点原子STM32开发板 版权所有:广州市星翼电子科技有限公司
進階UI元件:Spinner與接合器 靜宜大學資管系 楊子青
百万行、千万行数据查询教程 老黄牛.
Presentation transcript:

3、描述用户界面 2011.10 湖南城市学院

User Interface Guidelines Activity and Task Design Activities are the basic, independent building blocks of applications. As you design your application's UI and feature set, you are free to re-use activities from other applications as if they were yours, to enrich and extend your application. These guidelines describe how activities work, illustrates them with examples, and describes important underlying principles and mechanisms, such as multitasking, activity reuse, intents, the activity stack, and tasks. It covers this all from a high-level design perspective. 湖南城市学院

湖南城市学院

界面组件 所有的Android中的界面组件都是由view类继承而来 Android提供非常丰富而多样的界面组件,可分为三类 View is subclass of java.lang.Object viewGroup is subclass of View Attach a view to an activity using Activity.setContentView Android提供非常丰富而多样的界面组件,可分为三类 显示界面类(例如文字、按钮、输入字段) 页面布局类(如Layout、Tab) 状态提示类(例如进度条、等待圈) 湖南城市学院

常用的页面布局 页面布局类的组件的作用,是提供如何分配屏幕上各种显示组件位置的方式。 线性布局(LinearLayout) 框架页面布局(FrameLayout) 表格布局(TableLayout) 相对布局(RelativeLayout) 绝对布局(AbsoluteLayout) ………… 湖南城市学院

基本界面组件 文本框(TextView)和编辑框(EditText) 按钮(Button)和图片按钮(ImageButton) 单选按钮(RadioButton)和复选按钮(CheckBox) 状态开关按钮(ToggleButton) 时钟(AnalogClock和DigitalClock) 图像视图(ImageView) ………………. 湖南城市学院

高级界面组件 自动完成文本框AutoCompleteTextView Spinner 日期、时间选择器DataPicker,TimePicker 进度条ProgressBar 拖动条SeekBar 星级评分条RatingBar 选项卡TabHost 滚动视图ScrollView 列表视图ListView,ListActivity 可展开的列表组件ExpandableListView 网络视图GridView和画面切换器ImageSwitcher 画廊视图Gallery 湖南城市学院

修改项目helloworld,使其显示变换为“哈罗!” 第一个应用程序,在屏幕上显示“哈罗!” 修改项目helloworld,使其显示变换为“哈罗!” 先打开“helloworld”项目中的“res/layout/main.xml”文件,我们看到这个文件的预览页面 接着我们切换到main.xml标签,我们看到如下代码 湖南城市学院

湖南城市学院

讲解代码 <?xml version="1.0" encoding="utf-8"?> xml(Extensible Markup Language)是一种可扩展标记语言,类似网页中所使用的HTML标记语言。在main.xml文件里,第一行是每个xml说明文档固定的开头内容,用来指示这个文本文件是以xml格式描述的 湖南城市学院

</LinearLayout> “LinearLayout”标签,使用了两个标签来概括出一个界面组件的区块 <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android ………………….. </LinearLayout> “LinearLayout”标签,使用了两个标签来概括出一个界面组件的区块 后面的标签前面加上了一个/,来表示结束标签 线性布局方式,为一个界面组件接一个界面组件,由上而下排队排下来的意思 湖南城市学院

xmlns:android=http://schemas.android.com/apk/res/android xmlns开头的这串语句,是用来声明这个xml描述文件的命名空间(NameSpace),后面接的URL(网址),表示这个描述文件会引用到Android名称空间提供的定义。所有Android页面布局文件的最外层标签中,都必须包含这个属性 湖南城市学院

Android:orientation=”vertical” Android:layout_width=”fill_parent” Android:layout_height=”fill_parent LinearLayout标签的属性。大多数属性前都有一个android:前缀。同一个界面组件之间是以空白做间隔,当然,将属性排成多行更易于阅读。我们应该保持这个习惯。 Android:orientation是页面走向属性,在此填入vertical属性值,表示这个界面的页面布局方式是从上而下垂直地排列其包含的界面组件。 Android:layout_width界面组件的宽度属性;Android:layout_height界面的长度属性。Fill_parent表示填满整个上层组件。默认LinearLayout界面组件会占满整个屏幕空间。 Android有很多种页面布局方式可以选用,但大多数的应用程序并不需特意去改变默认的线性页面布局方式,只需专注在其中填入需要的界面组件即可。所以,在此之后的内容才是一般应用程序开发时教常修改的地方 湖南城市学院

注意:在Eclipse编辑画面中按下“ALT+/”组合键,编辑画面上会弹出输入提示窗口。所以读者不需背诵,只要知道不同界面组件的用途即可。 湖南城市学院

android:layout_width="fill_parent" <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> TextView文字查看组件。其作用是在屏幕上显示文字。 Android:layout_height=”wrap_content”(总结内容),即随着文字字段行数的不同而改变这个界面组件的高度 Android:text属性是指文字字段中显示的文字内容。 湖南城市学院

@string/hello。在res/values/strings.xml文件中,定义了 <string name=“hello”>Hello World, helloworld!</string> 定义了字符串hello,接着,我们把这个字符串应用到xml说明文件中。通过使用@string/hello,来代替“Hello World,helloworld”字符串 湖南城市学院

Android在res目录下用到不同子目录来保存不同的应用资源, res/drawable/? res/layout/? res/values/? 湖南城市学院

存放各种简单值的xml文件。这些简单的值包括字符串值、整数值、颜色值、数组值等。如string.xml定义字符串资源 res/drawable/? 该目录下存放各种位图文件(如png,jpg,gif等图片)。对于Android2.3版本而言,则是提供了drawable-ldpi(低分辨率)、 drawable-mdpi(中等分辨率)、 drawable-hdpi(高分辨率)这三个目录存放的图片文件的文件名完全相同,只是分辨率不同 res/layout/? 存放各种用户界面的布局文件。如main.xml res/values/? 存放各种简单值的xml文件。这些简单的值包括字符串值、整数值、颜色值、数组值等。如string.xml定义字符串资源 湖南城市学院

思考? 湖南城市学院

线性布局 第二个应用程序bmi的界面 湖南城市学院

湖南城市学院

湖南城市学院

android:inputType=numberDecimal 湖南城市学院

android:id 属性 要使用一个用户界面组件,第一件事就是定义出界面说明文档。 大部分的界面组件不需要在程序中作后续处理(如LinearLayout,TextView),因此可以直接使用。 对于那些将在程序中被引用到的界面组件(如Button,EditText),我们需要通过在XML说明文档中定义出该界面组件的android:id标志符号属性。之后在程序中所有与这个界面有关的操作,都能通过android:id标识符号来调用这个组件。 湖南城市学院

android:id 属性 Android:id属性的定义: @+id/组件名 注意:在以后的程序,会使用R.id.组件名来取得这个界面组件。如XML中定义:android:id=@+id/height,后续程序中,会使用R.id.height来取得这个界面组件。 Java代码中可以通过findViewById来获取它 湖南城市学院

第三个应用程序:不同字体,颜色显示文本 湖南城市学院

湖南城市学院

湖南城市学院

XML属性 android:text 设置文本框内文本的内容 android:textsize设置文本框内文本的大小 android:singline 设置该文本框是否为单行显示 android:ellipsize 设置当显示的文本超过了TextView的长度时如何处理文本内容 android:autolink是否将符合指定格式的文本转换为可单击的超链接形式 android:shadowColor设置文本框内文本的阴影的颜色 android:shadowDx设置文本框内文本在水平方向的偏移 android:shadowDy设置文本框内文本在垂直方向的偏移 android:password设置该文本框是一个密码框(用点代替字符) 湖南城市学院

相对布局(RelativeLayout) 相对布局内子组件的位置总是相对兄弟组件、父容器来决定的 如果A组件的位置是由B组件的位置来决定的,Android要求先定义B组件,再定义A组件 湖南城市学院

RelativeLayout的XML属性 RelativeLayout可支持的XML属性,URL: http://developer.android.com/reference/android/widget/RelativeLayout.html 湖南城市学院

Android:gravity:设置文本框内文本的对齐方式 Android:ignoregravity:设置那个组件不受gravity组件的影响 湖南城市学院

RelativeLayout中的一个内部的类RelativeLayout RelativeLayout中的一个内部的类RelativeLayout.LayoutParams,提供了大量的XML属性来控制RelativeLayout布局中子组件的布局分布,URL: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html 湖南城市学院

湖南城市学院

相对布局属性 Android:layout_above:控制该子组件位于各出ID组件的上方 Android:layout_below:控制该子组件位于各出ID组件的下方 Android:layout_alignBottom:控制该子组件位于各出ID组件的下边界对齐 Android:layout_alignTop:控制该子组件位于各出ID组件的上边界对齐 Android:layout_alignLeft控制该子组件位于各出ID组件的左边界对齐 Android:layout_alignRight控制该子组件位于各出ID组件的右边界对齐 Android:layout_alignParentBottom控制该子组件是否与布局容器底端对齐 Android:layout_alignParentLeft控制该子组件是否与布局容器左边对齐 Android:layout_alignParentRight控制该子组件是否与布局容器右边对齐 Android:layout_alignParentTop控制该子组件是否与布局容器顶端对齐 湖南城市学院

相对布局属性 Android:layout_centerHorizontal控制该子组件是否位于布局容器的水平居中位置 Android:layout_centerVertical控制该子组件是否位于布局容器的垂直居中位置 Android:layout_centerInParent控制该子组件是否位于布局容器的中央位置位置 Android:layout_toRightOf:控制该子组件位于给出ID组件的右侧 Android:layout_toLeftOf:控制该子组件位于给出ID组件的左侧 湖南城市学院

第四个应用程序: 梅花布局 湖南城市学院

湖南城市学院

湖南城市学院

控制该组件位于父容器的中间 android:layout_centerInParent If true, centers this child horizontally and vertically within its parent. Must be a boolean value, either "true" or "false". 控制该子组件是否位于布局容器的中央位置 湖南城市学院

控制该组件位于view01组件的上方 android:layout_above =“id/view01” android:layout_alignLeft=“id/view01” android:layout_above Positions the bottom edge of this view above the given anchor view ID. Accommodates bottom margin of this view and top margin of anchor view. Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 控制该子组件位于给出ID组件的上方 湖南城市学院

android:layout_alignLeft Makes the left edge of this view match the left edge of the given anchor view ID. Accommodates left margin. Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院

控制该组件位于view01组件的下方 android:layout_below=“@id/view01” android:alignLeft=“@id/view01” 湖南城市学院

控制该组件位于view01组件的左边 android:layout_toLeftof=“@id/view01” android:alignTop=“@id/view01” android:layout_toLeftOf Positions the right edge of this view to the left of the given anchor view ID. Accommodates right margin of this view and left margin of anchor view. Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院

android:layout_alignTop Makes the top edge of this view match the top edge of the given anchor view ID. Accommodates top margin. Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院

控制该组件位于view01组件的右边 android:layout_toRightof=“@id/view01” android:alignTop=“@id/view01” android:layout_toRightOf Positions the left edge of this view to the right of the given anchor view ID. Accommodates left margin of this view and right margin of anchor view. Must be a reference to another resource, in the form "@[+][package:]type:name" or to a theme attribute in the form "?[package:][type:]name". 湖南城市学院