现在的位置: 首页 > 综合 > 正文

Android界面设计基础:控件焦点4个步骤_12点圆形布局

2014年12月10日 ⁄ 综合 ⁄ 共 8688字 ⁄ 字号 评论关闭

IT168技术】现在,随着越来越多的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>

java代码
public class SimpleFocusActivity extends Activity {
/** Called when the activity is first created. */
ceState) {
@Override public void onCreate(Bundle savedInsta n super.onCreate(savedInstanceState);
blic void numClicked(View v) {
setContentView(R.layout.main); } p u Button butClicked = (Button)v;
ext().toString(); Toast.makeText(getApplicationCont
String strButton = butClicked.get Text(), "Clicked " + strButton, Toast.LENGTH_SHORT).show(); }
}

  运行后,效果如下图:

  步骤1 定义界面布局

  步骤2 默认的控件焦点切换顺序

  比如当用户将控件焦点点在12号按钮时,点往下的“down”按钮,默认的控件焦点切换顺序如下图:

步骤1 定义界面布局

  也就是说,当在按钮12上往下按的时候,控件的焦点会切换到11,接着就是键10,如此类推。

 步骤3 创建自定义的控件焦点顺序

  下面,我们尝试创建自定义的控件焦点顺序,即同时允许在上面的界面中,当用户按键时,以顺时针或逆时针进行控件切换,如下图:

步骤1 定义界面布局

  也就是说,允许用户当按“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"<span
st<="" div="">

抱歉!评论已关闭.