Android开发UI界面设计之按钮状态.doc

Android 开发开发 UI 界面设计界面设计 ON 六 16 2011 IN ANDROID 界面设计 BY ANDROID 智能手机 NO COMMENTS已有 1420 位网友关注 Android 开发 UI 界面设计主要有两点 一是 Android 按钮 Button 的 UI 设计 二是 ListView 以 及 GridView 的 UI 设计 按钮的状态按钮的状态 我们一般搞 UI 设计 按钮通常有三个状态 normal 正常状态 focus 焦点状态 pressed 按下状 态 如下图所示 我们会在 res drawable 目录下定义一个资源文件 比如我们本例中要用到的 handle xml 在里 面定义三种状态 每种状态对应一张图片 代码如下 而我们使用这个资源文件的用法只需要引用 drawable 里的资源文件 android background drawable handle 代码如下 Android 中的层 看过 盗梦空间 的人都知道 梦境有多少层 而 Android 中也有层次之分 在 Android 中第 一层 梦境 我们可以认为是壁纸 第二层就是应用的 Activity 第三层就是放在 Activity 上的容器 ViewGroup 以及它的子类 FrameLayout LinearLayout 等布局对象 当然容器中还可以放容器 你也可以放到 N 层 最多放多少我还没验证过 总之最后一层就是那些继承于 View 的控件了 诸如 Button TextView 等 而 ListView 以及 GridView 中 UI 是怎么设计的呢 下面我们看一下效果图 上图是一个 ListView 的效果图 正常状态下是白色背景黑色字体 当我们点击一列时会出现黄色 背景 这一效果是如何做到的呢 ListView 单元格显示的内容其实是我们事先定义在 Layout 目录下的一个布局文件 从这个效果 来看 我们可以看出它一共有三个 层 第一层容器 LinearLayout 背景色为白色 第二层也是容器 LinearLayout 当按下时 背景色为黄色 把第一层挡住 具体做法可以参照按 钮 第三层是控件 TextView 实例 上面说了一些 有些人肯定会云里雾里 所以我们直接来个实例 实例做完后 再看一下 效 果会更好 大家按照步骤跟我来 第一步 首先准备素材 准备三个按钮 以及 ListView 的背景图 上面三个按钮已经有了 下面 我只贴一个 ListView 背景图片 第二步 新建一个 Android 工程 命名为 UIDemo 目录结构如下图所示 第三步 在 res 目录下新建一个 drawable 文件夹 定义两个资源文件一个是 handle xml 另一个 为 listview selected xml 其中 handle xml 代码已经在上面贴出 listview selected xml 代码如 下 第四步 修改 main xml 布局文件 这里我用到了 SliddingDrawer 控件 代码如下 我们这里用到了 ListView 控件 而我们 ListView 控件显示的内容我事先在 layout 目录下定义 两个 TextView 命名为 listview layout xml 代码如下 这里有三层哦 第五步 修改主核心程序 UIDemo java 代码如下 package com tutor uidemo import android app Activity import android os Bundle import android view LayoutInflater import android view View import android view ViewGroup import android widget BaseAdapter import android widget ListView import android widget TextView public class UIDemo extends Activity private ListView mListView Override public void onCreate Bundle savedInstanceState super onCreate savedInstanceState setContentView R layout main setupViews private void setupViews mListView ListView findViewById R id content mListView setAdapter new ListViewAdapter private class ListViewAdapter extends BaseAdapter 这里返回 10 行 ListView 有多少行取决于 getCount 方法 public int getCount return 10 public Object getItem int arg0 return null public long getItemId int arg0 return 0 public View getView int position View v ViewGroup parent final LayoutInflater inflater LayoutInflater from getApplicationContext if v null v inflater inflate R layout listview layout null TextView mBookName TextView v findViewById R id bookname TextView mBookAuthor TextView v findViewById R id author mBookName setText And