首页 > 代码库 > 第二章 吸引你的眼球—UI编程（1）

第二章 吸引你的眼球—UI编程（1）

2024-08-10 14:03:20   219人阅读

第二章 吸引你的眼球—UI编程

学习Android应用程序的开发技术，除了先要熟悉相关工具以外，最直接的，就是学习如何使用各种UI组件。我们开发的应用程序，一般都会包含一组用户可见的界面，而这些界面就是由一个个的AndroidUI组件组成的。我们在学习界面开发技术的过程中，首先就要熟悉这些组件，然后才能将它们有效的组织起来，构成一个美观、合理的界面。

本章会先详细讲解一些常用的UI组件，及如何自定义组件，然后会说明一些其它常用的UI编程技术。

2.1 UI基础—常用UI组件

Android的组件数量庞大，我们要完全地掌握它们是一个经验积累的过程。在这里，我们先介绍一些Android中常用的组件，它们就好比是Android工程的基石，在每个开发设计中或多或少的总会用到它们。在接下来的介绍中，我们会举出一些比较有特色的例子来帮助大家更好地掌握它们。

2.1.1文本显示—文本框（TextView）

文本框是用来显示文本标签的android组件，是我们最常用的android组件之一。

TextView使用起来非常简单，我们以一个简单的例子来加以说明。

1）在res/layout目录下新建一个布局文件textview.xml，代码如下:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:id="@+id/my_textview"

        android:layout_gravity="center_vertical"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textColor="@android:color/white"

        android:text="0123456789"

        android:textSize="16sp"/>

</LinearLayout>

 

在这个布局文件中，我们定义了一个id属性为“my_textview”的TextView并让它垂直居中，给组件定义id的作用是为了让别的组件或者代码可以可以找到并引用它。

2）新建一个Activity，并将textview.xml文件作为 该Activity的contentview，部分代码如下：

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.textview);

}

 

我们来看看效果，如图2-1所示：

技术分享

图2-1TextView的使用

 

上面的例子可以看出，TextView的使用是非常简单的，我们使用的也只是TextView的基本属性。但是试想一下，如果宽度不够，我们又只想用一行来显示的话，怎么办呢？没有关系，我们可以让TextView滚动起来。我们在布局文件中改变TextView的属性，代码如下：

<TextView

    android:id="@+id/my_textview"

    android:layout_width="50dp"

    android:layout_height="wrap_content"

    android:layout_gravity="center_vertical"

    android:textColor="@android:color/white"

    android:text="0123456789"

    android:textSize="16sp"

    android:focusable="true"

    android:focusableInTouchMode="true"

    android:singleLine="true"

    android:ellipsize="marquee"

    android:marqueeRepeatLimit="marquee_forever"/>

在这里，我们要注意下面几个属性：android:focusable设置是否获得焦点；android:singleLine设置是否单行显示；android:ellipsize设置当文字过长时,该组件该如何显示，有如下值设置：“start”—–省略号显示在开头；“end”——省略号显示在结尾；“middle”—-省略号显示在中间；“marquee” ——以跑马灯的方式显示(动画横向移动)；android:marqueeRepeatLimit设置重复的次数；特别需要注意的是android:focusableInTouchMode这个属性，我们只有将它设为true，获得焦点才能生效。

下面，我们再来看看效果，如图2-2所示：

技术分享

图2-2TextView跑马灯效果

 

可以看到，TextView滚动起来了。

 

经验分享：

由于设备或系统的不同，有的时候我们调试好的应用放到另外的设备上往往得不到想要的结果，不是位置偏移了就是字体的大小不对，这里就涉及到一些size单位的问题：

px（像素）：屏幕上的点；

in（英寸）：长度单位；

mm（毫米）：长度单位；

pt（磅）：1/72英寸；

dp（与密度无关的像素）：一种基于屏幕密度的抽象单位。在每英寸160点的显示器上，1dp = 1px；

dip：与dp相同，多用于android/ophone示例中；

sp（与刻度无关的像素）：与dp类似，但是可以根据用户的字体大小首选项进行缩放。

为了使用户界面能够在现在和将来的显示器类型上正常显示，建议大家始终使用sp作为文字大小的单位，将dip作为其他元素的单位。

 

2.1.2按钮（Button）

按钮也是我们最常用的组件之一。在Android平台中，按钮是通过Button组件来实现的。它实现起来也非常简单，我们以一个简单的例子来让大家掌握按钮的使用。

1）定义按钮

在布局文件中定义一个Button和一个TextView：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:id="@+id/my_textview"

        android:gravity="center"

        android:layout_width="fill_parent"

        android:layout_height="100dp"

        android:text="按钮未点击"

        android:textColor="@android:color/white"/>

    <Button

        android:id="@+id/my_button"

        android:layout_width="fill_parent"

        android:layout_height="37dp"

        android:background="@drawable/button"

        android:padding="1dp"

        android:text="确定"/>

</LinearLayout>

 

2）按钮的状态

按钮有三种状态：normal(正常状态)，focus(焦点状态)，pressed(按下状态)，我们在使用Button的时候往往需要对这三种状态设置不同的响应效果，这个实现起来也很简单。

我们可以在res/drawable目录下定义一个资源文件button.xml,在里面定义三种状态，每种状态对应一张图片，在这里，我们在按钮获取焦点和按下时使用同一张图片，正常状态时使用另一张图片，代码如下所示：

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:state_pressed="true"

        android:drawable="@drawable/press"/>

    <item

        android:state_focused="true"

        android:drawable="@drawable/press" />

    <item

        android:drawable="@drawable/normal"/>

</selector>

 

而我们使用这个资源文件的用法只需要引用drawable里的资源文件（android:background="@drawable/button"），就可以实现按钮的三种状态。代码如下所示:

<Button

    android:id="@+id/my_button"

    android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/button"

    android:text="我的按钮"/>

 

3）按钮点击事件

既然是按钮，被点击之后自然要触发相应的事件，所以需要对按钮设置setOnClickListener进行事件监听，在这个例子中，我们让它在点击后改变TextView的文本内容：

Button button = (Button)findViewById(R.id.my_button);

TextView textView = (TextView)findViewById(R.id.my_textview);

Button.setOnClickListener(new View.OnClickListener() {

        @Override

        public void onClick(View v) {

             textView.setText("按钮已点击");

        }

    });

 

下面，我们来看看效果吧，如图2-3、2-4、2-5所示：

技术分享

图2-3 按钮未点击

 

技术分享

图2-4 按钮点击时

 

技术分享

图2-5 按钮点击后

 

经验分享：

    在这个例子中，我们使用的是.9格式的图片做为背景，这样按钮拉伸的时候不会失真。并且在定义按钮的时候为它添加了一个android:padding="1dp"属性，如果没有这个属性的话，按钮上的文字会被背景所覆盖而不会显示，大家可以自己尝试一下。

第二章 吸引你的眼球—UI编程（1）


联系
我们