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文件中确定其各种属性。

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

  

三.完成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 allchoice = new ArrayList(); ArrayAdapter choiceAd; for(int i = 0; i < choicelist.length; i++) { allchoice.add(choicelist[i]); } choiceAd = new ArrayAdapter(this,layout.simple_spinner_item,allchoice); choiceAd.setDropDownViewResource(layout.simple_dropdown_item_1line); spinner1.setAdapter(choiceAd); ArrayList> users = new ArrayList>(); HashMap user1 = new HashMap(); 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 user2 = new HashMap(); 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 user3 = new HashMap(); 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 user4 = new HashMap(); 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 user5 = new HashMap(); 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); } }

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

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

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

 

 

你可能感兴趣的:(android,ui,layout,listview,user,object)