Android入门：It's All About UI（2）

 继续谈UI。话说我上次写到了几种常见的布局方式和按钮，按照原计划，这次本来应该继续讲讲其他的组件。可是我现在不打算这样讲了，一来，强大的Android拥有各种各样的UI组件，如果我一一去分析，实在是费时费力，估计一时半会写不完；第二，我觉得目前同志们在UI方面的了解都比我多，如果我再讲这些组件的基本功能和实现方法，相信也不能让大家有什么收获。所以，我决定在这篇文章中，以一个例子贯穿全文，讲讲制作一个界面的基本流程。大家可以当故事听哈^ ^

我要讲的这个例子是一个我们导航软件的一个搜索界面，它先让用户选择搜索项目（餐厅/厕所/商店），然后将搜索结果以列表形式显示出来。

一.准备好各种图片&数据资源

将这个需要的图片文件放置在drawable目录下，以后写代码时通过R.drawble对其进行引用。

在现在的Android版本中，有三个layout文件夹，为什么一个不够要三个捏？因为大家的手机型号各不一样，不同的手机屏幕适合不同分辨率的图片。hdpi,mdpi,ldpi代表高，中，低三种分辨率。在兼容性好的软件中，设计者会把相同内容不同分辨率的图片放到相应的三个文件夹中。

二.设计整个屏幕的布局

布局应该是根据界面内容实际功能来进行设计的，在这个搜索界面中，我们需要给用户提供选项，需要列表显示信息，所以我的界面的主要元件是一个Spinner和一个Listview，而它们是通过一个竖直的LinearLayout整合在一起的。

实际上这个界面是两个LinearLayout嵌套而成的，因为Spinner的右边还有一个ImageButton，所以我把这两个组件一起放在一个水平的LinearLayout中，再把这个LinearLayout放在大的竖直LinearLayout中。

然后再对每个元件进行具体设计，在XML文件中确定其各种属性。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:text="搜索 " android:textSize="18px" android:layout_height="wrap_content" android:layout_width="fill_parent" android:background="#DAA520" android:textColor="#000000"> </TextView> <LinearLayout android:orientation="horizontal" android:id="@+id/LinearLayout" android:paddingTop="0px" android:layout_width="fill_parent" android:layout_height="fill_parent" > <Spinner android:id="@+id/spinner1" android:layout_width="270px" android:layout_height="50px" android:textSize="20px" android:drawSelectorOnTop="false" /> <ImageButton android:id="@+id/inputSearch" android:src="@drawable/menu_searchposition" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="3px" /> </LinearLayout> <ListView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/foodlist"> </ListView> </LinearLayout>

在我这个界面中，对ListView的单个item也做了个性化的设计，另外用了一个XML文件（名为fooditem.xml）实现这个item的布局。

<?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:maxHeight="80px" android:maxWidth="100px" android:id="@+id/img"> </ImageView> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="18px" android:textColor="#DAA520" android:id="@+id/name"> </TextView> <TextView android:layout_height="wrap_content" android:layout_width="wrap_content" android:textSize="10px" android:textColor="#FFFFFFFF" android:id="@+id/address"> </TextView> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:adjustViewBounds="true" android:maxHeight="12px" android:maxWidth="12px" android:id="@+id/direction"> </ImageView> <TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:textSize="10px" android:textColor="#FFFFFFFF" android:id="@+id/extra"> </TextView> </LinearLayout> </LinearLayout> </LinearLayout>  

三.完成Java文件

布局已经通过XML文件实现了，所以Java文件中的代码是很少的。

最关键的一句是setContentView(R.layout.main);

它将布局文件和Java文件关联起来。

另外，这个Java文件中还通过ArrayList为ListView提供数据，然后用ArrayAdapter将数据和装数据的容器关联起来。

由于数据较少，数据的存储用到的不是，而是Hashmap,它实现了键值对应的快速存取。

package com.google.SearchList; import java.util.ArrayList; import java.util.HashMap; import android.R.layout; import android.app.Activity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.ImageButton; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.Spinner; public class SearchList extends Activity { /** Called when the activity is first created. */ private Spinner spinner1; private static final String[] choicelist={"餐厅","厕所","商店"}; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); spinner1=(Spinner)findViewById(R.id.spinner1); ArrayList<String> allchoice = new ArrayList<String>(); ArrayAdapter<String> choiceAd; for(int i = 0; i < choicelist.length; i++) { allchoice.add(choicelist[i]); } choiceAd = new ArrayAdapter<String>(this,layout.simple_spinner_item,allchoice); choiceAd.setDropDownViewResource(layout.simple_dropdown_item_1line); spinner1.setAdapter(choiceAd); ArrayList<HashMap<String, Object>> users = new ArrayList<HashMap<String, Object>>(); HashMap<String, Object> user1 = new HashMap<String, Object>(); user1.put("img", R.drawable.baijing); user1.put("name", "华中科技大学百景园"); user1.put("address", "洪山区武昌珞喻路1037号华中科技大学校内"); user1.put("direction",R.drawable.d1); user1.put("extra","50m 评分 76 人均￥22"); users.add(user1); HashMap<String, Object> user2 = new HashMap<String, Object>(); user2.put("img", R.drawable.jixianlou); user2.put("name", "华中科技大学集贤楼"); user2.put("address", "洪山区珞喻路1037号华中科技大学教工食堂2楼"); user2.put("direction",R.drawable.d2); user2.put("extra","100m 评分 25 人均￥28"); users.add(user2); HashMap<String, Object> user3 = new HashMap<String, Object>(); user3.put("img", R.drawable.yuanayi); user3.put("name", "袁阿姨"); user3.put("address", "洪山区武昌华中科技大学西门外"); user3.put("direction",R.drawable.d3); user3.put("extra","150m 评分 45 人均￥20"); users.add(user3); HashMap<String, Object> user4 = new HashMap<String, Object>(); user4.put("img", R.drawable.baiwei); user4.put("name", "百味小吃城"); user4.put("address", "洪山区武昌珞喻路1037号华中科技大学校内集贸旁"); user4.put("direction",R.drawable.d4); user4.put("extra","200m 评分 40 人均￥12"); users.add(user4); HashMap<String, Object> user5 = new HashMap<String, Object>(); user5.put("img", R.drawable.gangyin); user5.put("name", "港饮之港"); user5.put("address", "洪山区武昌华中科技大学西三门外"); user5.put("direction",R.drawable.d3); user5.put("extra","300m 评分 25 人均￥8"); users.add(user5); SimpleAdapter saImageItems = new SimpleAdapter(this, users,// 数据来源 R.layout.fooditem, new String[] { "img", "name", "address","direction","extra" }, // 分别对应view 的id new int[] { R.id.img, R.id.name, R.id.address, R.id.direction, R.id.extra }); // 获取listview ((ListView) findViewById(R.id.foodlist)).setAdapter(saImageItems); } }

这样一来，一个界面的布局就完成了。

但是，它还仅仅是一个界面，没有为各种元件添加监听器等相应装置，列表中数据也都是虚拟的，这些功能还需继续完善。

欢迎大家提各种意见建议，我最喜欢听批评了，哈哈~