- 浏览: 5883 次
- 性别:
- 来自: 北京
文章分类
最新评论
//--------------------------------------
现在,随着越来越多的Android的应用出现在Android Market上,如何能更加吸引用户成为摆在开发者面前的重要课题。作为Android应用,不仅要在内容上取胜,在比如界面等细节上也要很重视用户的使用体验,如果用户觉得操作困难和不符合操作习惯的话,就会认为应用不好用而不去下载或购买。在用户体验中,一些细节的问题更容易引起程序员的忽视。本文将介绍,在Android的界面设计中的各个控件的焦点顺序其中要注意的问题,这个很似简单的问题,值得开发者的重视。
//--------------------------------------
Android设备有多种多样,操纵界面也有所不同,比如有触摸屏、轨迹球,传统的手机键盘等,因此开发者需要更好地了解,当用户在应用程序界面中的不同控件间移动时,各个控件的获得焦点和失去焦点的顺序,以及如何根据用户的操作习惯去自定义这些顺序。
一般情况下,Android对于特定的布局界面,会自动得出一个合适的控件焦点顺序,很多情况下是足够用的了。但是在有的情况下是有例外的。控件的下一个焦点会到达哪一个控件,主要是判断当前控件在指定的方向布局上(up/down/left/right),哪一个是最领近的控件,其扫描顺序为从左到右,从上到下,就象平时阅读书籍一样。
然而,这种顺序有时会带来一点小问题,比如当控件都布置在屏幕的上方时,如果用户再按“up”键,则不会有任何效果,同样,当控件都在屏幕下方、左边、右边时,此时再按如“down”、“Left”,“Right”键时都不会再获得控件的焦点。
在本文的例子中,将讲解如何修改默认的控件焦点顺序,以定制特定的控件切换顺序,例子中,多个按钮以一个圆形进行了排列,例子可以在
http://android-mt-tutorials.googlecode.com/svn/trunk/SimpleFocus中下载。
步骤1 定义界面布局
我们先设计出界面的布局,代码如下,使用的是Relative相对布局:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <Button
- style="@style/clockFaceNum"
- android:text="12"
- android:id="@+id/button12"
- android:layout_alignParentTop="true"
- android:layout_centerHorizontal="true">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="11"
- android:id="@+id/button11"
- android:layout_below="@+id/button12"
- android:layout_toLeftOf="@+id/button12">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="1"
- android:id="@+id/button1"
- android:layout_below="@+id/button12"
- android:layout_toRightOf="@+id/button12">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="10"
- android:id="@+id/button10"
- android:layout_below="@+id/button11"
- android:layout_toLeftOf="@+id/button11">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="2"
- android:id="@+id/button2"
- android:layout_below="@+id/button1"
- android:layout_toRightOf="@+id/button1">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="9"
- android:id="@+id/button9"
- android:layout_below="@+id/button10"
- android:layout_toLeftOf="@+id/button10">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="3"
- android:id="@+id/button3"
- android:layout_below="@+id/button2"
- android:layout_toRightOf="@+id/button2">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="8"
- android:id="@+id/button8"
- android:layout_below="@+id/button9"
- android:layout_toRightOf="@+id/button9">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="4"
- android:id="@+id/button4"
- android:layout_below="@+id/button3"
- android:layout_toLeftOf="@+id/button3">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="7"
- android:id="@+id/button7"
- android:layout_below="@+id/button8"
- android:layout_toRightOf="@+id/button8">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="5"
- android:id="@+id/button5"
- android:layout_below="@+id/button4"
- android:layout_toLeftOf="@+id/button4">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="6"
- android:id="@+id/button6"
- android:layout_below="@+id/button5"
- android:layout_centerHorizontal="true">
- </Button>
- </RelativeLayout>
上面定义的style文件如下:
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <style
- name="clockFaceNum">
- <item
- name="android:layout_width">38dp</item>
- <item
- name="android:layout_height">38dp</item>
- <item
- name="android:onClick">numClicked</item>
- <item
- name="android:textSize">9sp</item>
- </style>
- </resources>
运行后,效果如下图:
步骤2 默认的控件焦点切换顺序
比如当用户将控件焦点点在12号按钮时,点往下的“down”按钮,默认的控件焦点切换顺序如下图:
也就是说,当在按钮12上往下按的时候,控件的焦点会切换到11,接着就是键10,如此类推。
步骤3 创建自定义的控件焦点顺序
下面,我们尝试创建自定义的控件焦点顺序,即同时允许在上面的界面中,当用户按键时,以顺时针或逆时针进行控件切换,如下图:
也就是说,允许用户当按“Down”或“Right”键时,切换顺序是顺时针方向,比如假设当前在键12上,按“Down”或“Right”键时,会切换到键1,而按“Up”或”Left”时,会切换到键11,如此类推。要实现这点,可以在每个按钮中进行设置如下四个属性:
android:nextFocusUp- 定义当点up键时,哪个控件将获得焦点
android:nextFocusDown-定义当点down键时,哪个控件将获得焦点
android:nextFocusLeft-定义当点left键时,哪个控件将获得焦点
android:nextFocusRight--定义当点right键时,哪个控件将获得焦点
下面是其代码:
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <Button
- style="@style/clockFaceNum"
- android:text="12"
- android:id="@+id/button12"
- android:layout_alignParentTop="true"
- android:layout_centerHorizontal="true"
- android:nextFocusUp="@+id/button11"
- android:nextFocusLeft="@+id/button11"
- android:nextFocusRight="@+id/button1"
- android:nextFocusDown="@+id/button1">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="11"
- android:id="@+id/button11"
- android:layout_below="@+id/button12"
- android:layout_toLeftOf="@+id/button12"
- android:nextFocusUp="@+id/button10"
- android:nextFocusLeft="@+id/button10"
- android:nextFocusRight="@+id/button12"
- android:nextFocusDown="@+id/button12">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="1"
- android:id="@+id/button1"
- android:layout_below="@+id/button12"
- android:layout_toRightOf="@+id/button12"
- android:nextFocusUp="@+id/button12"
- android:nextFocusLeft="@+id/button12"
- android:nextFocusRight="@+id/button2"
- android:nextFocusDown="@+id/button2">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="10"
- android:id="@+id/button10"
- android:layout_below="@+id/button11"
- android:layout_toLeftOf="@+id/button11"
- android:nextFocusUp="@+id/button9"
- android:nextFocusLeft="@+id/button9"
- android:nextFocusRight="@+id/button11"
- android:nextFocusDown="@+id/button11">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="2"
- android:id="@+id/button2"
- android:layout_below="@+id/button1"
- android:layout_toRightOf="@+id/button1"
- android:nextFocusUp="@+id/button1"
- android:nextFocusLeft="@+id/button1"
- android:nextFocusRight="@+id/button3"
- android:nextFocusDown="@+id/button3">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="9"
- android:id="@+id/button9"
- android:layout_below="@+id/button10"
- android:layout_toLeftOf="@+id/button10"
- android:nextFocusUp="@+id/button8"
- android:nextFocusLeft="@+id/button8"
- android:nextFocusRight="@+id/button10"
- android:nextFocusDown="@+id/button10">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="3"
- android:id="@+id/button3"
- android:layout_below="@+id/button2"
- android:layout_toRightOf="@+id/button2"
- android:nextFocusUp="@+id/button2"
- android:nextFocusLeft="@+id/button2"
- android:nextFocusRight="@+id/button4"
- android:nextFocusDown="@+id/button4">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="8"
- android:id="@+id/button8"
- android:layout_below="@+id/button9"
- android:layout_toRightOf="@+id/button9"
- android:nextFocusUp="@+id/button7"
- android:nextFocusLeft="@+id/button7"
- android:nextFocusRight="@+id/button9"
- android:nextFocusDown="@+id/button9">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="4"
- android:id="@+id/button4"
- android:layout_below="@+id/button3"
- android:layout_toLeftOf="@+id/button3"
- android:nextFocusUp="@+id/button3"
- android:nextFocusLeft="@+id/button3"
- android:nextFocusRight="@+id/button5"
- android:nextFocusDown="@+id/button5">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="7"
- android:id="@+id/button7"
- android:layout_below="@+id/button8"
- android:layout_toRightOf="@+id/button8"
- android:nextFocusUp="@+id/button6"
- android:nextFocusLeft="@+id/button6"
- android:nextFocusRight="@+id/button8"
- android:nextFocusDown="@+id/button8">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="5"
- android:id="@+id/button5"
- android:layout_below="@+id/button4"
- android:layout_toLeftOf="@+id/button4"
- android:nextFocusUp="@+id/button4"
- android:nextFocusLeft="@+id/button4"
- android:nextFocusRight="@+id/button6"
- android:nextFocusDown="@+id/button6">
- </Button>
- <Button
- style="@style/clockFaceNum"
- android:text="6"
- android:id="@+id/button6"
- android:layout_below="@+id/button5"
- android:layout_centerHorizontal="true"
- android:nextFocusUp="@+id/button5"
- android:nextFocusLeft="@+id/button5"
- android:nextFocusRight="@+id/button7"
- android:nextFocusDown="@+id/button7">
- </Button>
- </RelativeLayout>
下图中是假定在键12开始按down键时的焦点切换顺序:
步骤4 设置界面的初始控件焦点
在每个页面加载时,可以设置界面中初始的控件焦点,以方便用户的定位操作,只需要在控件中加入即可。比如:
- <Button
- style="@style/clockFaceNum"
- android:text="12"
- android:id="@+id/button12"
- android:layout_alignParentTop="true"
- android:layout_centerHorizontal="true"
- android:nextFocusUp="@+id/button11"
- android:nextFocusLeft="@+id/button11"
- android:nextFocusRight="@+id/button1"
- android:nextFocusDown="@+id/button1">
- <requestFocus />
- </Button>
相关推荐
人机交互实验 实验二:界面设计:控件与布局
适合Android初学者,主要介绍界面的一些功能
Android 流程步骤控件,实现对提交资料的时候,分部的流程控制
详细介绍了Android 的界面布局 及UI设计,pdf格式。
Android各种控件属性,不用搜索,一本够用
2. 第一个android程序——电话拨号器 android布局和控件 LinearLayout:线性布局,从左到右 第一种方法实现界面布局:手动写布局 第二种方法实现界面布局:布局文件(layout中的activty_main.xml) 其实就是标签的...
嵌入式Android项目设计与开发 第四章 基本控件编程 ——图像控件ImageView ImageView ImageView是用于在界面上展示图片的一种控件。 ImageView 应用: 把准备好的图片存放在drawable或mipmap的资源目录中。 在布局中...
vc++ MFC 界面设计编程 各种控件设计,包括树控件,视图控件
android控件的展示 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_...
android 设置控件按宽:高=4:3显示。可应用于ImageView、Button、LinearLayout、RelativeLayout等。
原创android界面效果全汇总.pdf 对各种控件说得很不错
JavaSwing界面设计(所有控件及示例),JavaSwing界面设计(所有控件及示例)课件,JavaSwing界面设计(所有控件及示例)PPT
本文实例为大家分享了Android用户注册界面的设计,供大家参考,具体内容如下 ...设计一个用户注册界面,在其中要使用到 文本框、编辑框、按钮、单选按钮、复选框、列表选择框、列表视图、图片视图 等控件。 (1)
基于Android的显示步骤的控件,可定制
Android自定义控件步骤总结 http://www.cnblogs.com/duanxz/p/3625589.html
android基础控件开发,部分控件
下面的 gif 图是一个Android SDK 自带的 BottomSheetDialog 内部加了 RecyclerView 列表控件的效果 可以看出: 下滑动作会收起,隐藏掉 dialog 上滑会完全展开 展开后,才能滑动 RecyclerView 内部 其次 如果你...
Android基本用户界面控件详解,主要包括Radiobutton,ListView,Spinner等控件的详细讲解
控件是界面组成的主要元素,是与用户进行直接交互的。 常用控件 TextView EditText Button RadioButton ImageView TextView 常用控件 Common controls TextView是Android中很常用的用于显示文字(字符串)的控件,...