正文  UI设计 > AlarmManager >

Android UI设计

今天来给大家分享一下Android中UI设计的一些技巧,内容主要有两点:一是Android按钮(Button)的UI设计,二是:ListView以及GridView的UI设计。  按钮的状态:  我们一般搞UI设计,按钮通常有三个状态:norm......

今天来给大家分享一下Android中UI设计的一些技巧,内容主要有两点:一是Android按钮(Button)的UI设计,二是:ListView以及GridView的UI设计。
  按钮的状态:
  我们一般搞UI设计,按钮通常有三个状态:normal(正常状态);focus(焦点状态),pressed(按下状态)。
  我们会在res/drawable目录下定义一个资源文件,比如本例中要用到的handle.xml,在里面定义三种状态,每种状态对应一张图片,下面让我们来看一个例子:
  代码如下:
  


01   viewplaincopytoclipboardprint?
02   <?xmlversion="1.0"encoding="utf-8"?>
03   <selectorxmlns:android="http://schemas.android.com/apk/res/android">
04   <itemandroid:state_window_focused="false"android:drawable="@drawable/handle_normal"/>
05   <itemandroid:state_focused="true"android:drawable="@drawable/handle_focused"/>
06   <itemandroid:state_pressed="true"android:drawable="@drawable/handle_pressed"/>
07   </selector>
08   <?xmlversion="1.0"encoding="utf-8"?>
09   <selectorxmlns:android="http://schemas.android.com/apk/res/android">
10   <itemandroid:state_window_focused="false"android:drawable="@drawable/handle_normal"/>
11   <itemandroid:state_focused="true"android:drawable="@drawable/handle_focused"/>
12   <itemandroid:state_pressed="true"android:drawable="@drawable/handle_pressed"/>
13   </selector>
14   
  而我们使用这个资源文件的用法只需要引用drawable里的资源文件(android:background="@drawable/handle")代码如下:  

01   viewplaincopytoclipboardprint?
02   <Button
03   android:id="@+id/handle"
04   android:layout_width="wrap_content"
05   android:layout_height="fill_parent"
06   android:background="@drawable/handle"
07   />
08   <Button
09   android:id="@+id/handle"
10   android:layout_width="wrap_content"
11   android:layout_height="fill_parent"
12   android:background="@drawable/handle"
13   />
14   

 

  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



01   viewplaincopytoclipboardprint?
02   <?xmlversion="1.0"encoding="utf-8"?>
03   <selectorxmlns:android="http://schemas.android.com/apk/res/android">
04   <itemandroid:state_pressed="true"android:drawable="@drawable/list_selector_background_pressed"/>
05   </selector>
06   <?xmlversion="1.0"encoding="utf-8"?>
07   <selectorxmlns:android="http://schemas.android.com/apk/res/android">
08   <itemandroid:state_pressed="true"android:drawable="@drawable/list_selector_background_pressed"/>
09   </selector>
10   
  第四步:修改main.xml布局文件,这里我用到了SliddingDrawer控件,代码如下:

01   viewplaincopytoclipboardprint?
02   <?xmlversion="1.0"encoding="utf-8"?>
03   <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
04   android:orientation="vertical"
05   android:layout_width="fill_parent"
06   android:layout_height="fill_parent"
07   >
08   <SlidingDrawer
09   android:id="@+id/slidingdrawer"
10   android:layout_width="fill_parent"
11   android:layout_height="fill_parent"
12   android:orientation="horizontal"
13   android:handle="@+id/handle"
14   android:content="@+id/content">
15   <Button
16   android:id="@+id/handle"
17   android:layout_width="wrap_content"
18   android:layout_height="fill_parent"
19   android:background="@drawable/handle"
20   />
21   <ListView
22   android:id="@+id/content"
23   android:layout_width="fill_parent"
24   android:layout_height="wrap_content"
25   />
26   </SlidingDrawer>
27   </LinearLayout>
28   <?xmlversion="1.0"encoding="utf-8"?>
29   <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
30   android:orientation="vertical"
31   android:layout_width="fill_parent"
32   android:layout_height="fill_parent"
33   >
34   <SlidingDrawer
35   android:id="@+id/slidingdrawer"
36   android:layout_width="fill_parent"
37   android:layout_height="fill_parent"
38   android:orientation="horizontal"
39   android:handle="@+id/handle"
40   android:content="@+id/content">
41   <Button
42   android:id="@+id/handle"
43   android:layout_width="wrap_content"
44   android:layout_height="fill_parent"
45   android:background="@drawable/handle"
46   />
47   <ListView
48   android:id="@+id/content"
49   android:layout_width="fill_parent"
50   android:layout_height="wrap_content"
51   />
52   </SlidingDrawer>
53   </LinearLayout>
54   
  我们这里用到了ListView控件,而我们ListView控件显示的内容我事先在layout目录下定义两个TextView,命名为listview_layout.xml,代码如下(这里有三层哦!):  

01   viewplaincopytoclipboardprint?
02   <?xmlversion="1.0"encoding="utf-8"?>
03   <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
04   android:orientation="vertical"
05   android:layout_width="fill_parent"
06   android:layout_height="fill_parent"
07   android:background="#ffffff"
08   >
09   <LinearLayout
10   android:orientation="vertical"
11   android:layout_width="fill_parent"
12   android:layout_height="fill_parent"
13   android:background="@drawable/listview_selected"
14   android:padding="6px"
15   >
16   <TextView
17   android:id="@+id/bookname"
18   android:layout_width="fill_parent"
19   android:layout_height="wrap_content"
20   android:textSize="20px"
21   android:textColor="#000000"
22   />
23   <TextView
24   android:id="@+id/author"
25   android:layout_width="fill_parent"
26   android:layout_height="wrap_content"
27   android:textSize="16px"
28   android:textColor="#000000"
29   />
30   </LinearLayout>
31   </LinearLayout>
32   <?xmlversion="1.0"encoding="utf-8"?>
33   <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
34   android:orientation="vertical"
35   android:layout_width="fill_parent"
36   android:layout_height="fill_parent"
37   android:background="#ffffff"
38   >
39   <LinearLayout
40   android:orientation="vertical"
41   android:layout_width="fill_parent"
42   android:layout_height="fill_parent"
43   android:background="@drawable/listview_selected"
44   android:padding="6px"
45   >
46   <TextView
47   android:id="@+id/bookname"
48   android:layout_width="fill_parent"
49   android:layout_height="wrap_content"
50   android:textSize="20px"
51   android:textColor="#000000"
52   />
53   <TextView
54   android:id="@+id/author"
55   android:layout_width="fill_parent"
56   android:layout_height="wrap_content"
57   android:textSize="16px"
58   android:textColor="#000000"
59   />
60   </LinearLayout>
61   </LinearLayout>
62   
  第五步:修改主核心程序UIDemo.java,代码如下:  

01   viewplaincopytoclipboardprint?
02   packagecom.tutor.uidemo;
03   importandroid.app.Activity;
04   importandroid.os.Bundle;
05   importandroid.view.LayoutInflater;
06   importandroid.view.View;
07   importandroid.view.ViewGroup;
08   importandroid.widget.BaseAdapter;
09   importandroid.widget.ListView;
10   importandroid.widget.TextView;
11   publicclassUIDemoextendsActivity{
12   privateListViewmListView;
13   @Override
14   publicvoidonCreate(BundlesavedInstanceState){
15   super.onCreate(savedInstanceState);
16   setContentView(R.layou.main);
17   setupViews();
18   }
19   privatevoidsetupViews(){
20   mListView=(ListView)findViewById(R。id。content);
21   mListView。setAdapter(newListViewAdapter());
22   }
23   privateclassListViewAdapterextendsBaseAdapter{
24   //这里返回10行,ListView有多少行取决于getCount()方法
25   publicintgetCount(){
26   return10;
27   }
28   publicObjectgetItem(intarg0){
29   returnnull;
30   }
31   publiclonggetItemId(intarg0){
32   return0;
33   }
34   publicViewgetView(intposition,Viewv,ViewGroupparent){
35   finalLayoutInflaterinflater=LayoutInflater.from(getApplicationContext());
36   if(v==null){
37   v=inflater.inflate(R.layout.listview_layout,null);
38   }
39   TextViewmBookName=(TextView)v.findViewById(R.id.bookname);
40   TextViewmBookAuthor=(TextView)v.findViewById(R.id.author);
41   mBookName.setText("Android傻瓜教程"+position);
42   mBookAuthor.setText("Frankiewei"+position);
43   returnv;
44   }
45   }
46   }
47   packagecom.tutor.uidemo;
48   importandroid.app.Activity;
49   importandroid.os.Bundle;
50   importandroid.view.LayoutInflater;
51   importandroid.view.View;
52   importandroid.view.ViewGroup;
53   importandroid.widget.BaseAdapter;
54   importandroid.widget.ListView;
55   importandroid.widget.TextView;
56   publicclassUIDemoextendsActivity{
57   privateListViewmListView;
58   @Override
59   publicvoidonCreate(BundlesavedInstanceState){
60   super.onCreate(savedInstanceState);
61   setContentView(R.layout.main);
62   setupViews();
63   }
64   privatevoidsetupViews(){
65   mListView=(ListView)findViewById(R.id.content);
66   mListView.setAdapter(newListViewAdapter());
67   }
68   privateclassListViewAdapterextendsBaseAdapter{
69   //这里返回10行,ListView有多少行取决于getCount()方法
70   publicintgetCount(){
71   return10;
72   }
73   publicObjectgetItem(intarg0){
74   returnnull;
75   }
76   publiclonggetItemId(intarg0){
77   return0;
78   }
79   publicViewgetView(intposition,Viewv,ViewGroupparent){
80   finalLayoutInflaterinflater=LayoutInflater.from(getApplicationContext());
81   if(v==null){
82   v=inflater.inflate(R.layout.listview_layout,null);
83   }
84   TextViewmBookName=(TextView)v.findViewById(R.id.bookname);
85   TextViewmBookAuthor=(TextView)v.findViewById(R.id.author);
86   mBookName.setText("Android傻瓜教程"+position);
87   mBookAuthor.setText("Frankiewei"+position);
88   returnv;
89   }
90   }
91   }
92   

  第六步:运行上述工程,可以去查看效果图了。