最近写UI小结-CSDN博客

本文链接：https://blog.csdn.net/menogen/article/details/6003837

因为最近在写校园百科的几个界面，感觉虽然之前对一些界面布局，控件已经有所了解，但这次，确实感觉要写出一个好看的界面并非一件很快的事情，自己感觉在写界面时应该考虑几点：

1 先想想自己要实现的功能大体上有哪些，它需要有怎么样的界面，而这部份，自己开始总有这样的疑问：我怎么知道有哪些界面组件或类可以用呢？并且在不知情的情况下根本就不知道怎样去用百度去搜。后来知道了我们可以参考sdk的内置范例，ApiDemo应用程序的作用展示了Android平台大部份可以使用的功能，当我们看到感兴趣的功能或界面时，可以直接打开程序来对照参考。不过一些常见的组件跟类还是得有事先了解才好,例如以下所列：

（1）对话框：Dialog

一种显示于Activity之上的界面元素，由Activity管理，用于显示一些临时信息和功能。我觉得这是蛮好的一个东西。他显示的内容千变万化，与一般全页显示不同之处：在于它可以重叠在原来的页面上，并且在对话框的主要显示内容下方，可以添加几个按钮，用于回到原来页面或者执行其他的动作。而它在Java中的代码也是固定，很好理解的东西。感觉如果是一些提示内容：例如输入格式正确与否的判断提示，是否确定一些操作与否等都可以用对话框的形式来变现。

常用对话框：

AlertDialog：信息对话框

DatePickerDialog，TimePickerDialog：时间日期选择对话框

ProgressDialog：进度对话框

（2）. 菜单：Menu

呵呵，我觉得他也是很好的东西。很多时候，堆砌冗杂的界面往往让人觉得很不舒服。而想吧界面做得简单明了，menu就是个好东西。我们可以把一些并不是用户一进来就得要用到的组件（也就是额外的选项或设置）放在menu里边。当用户需要时，他再去点一下menu进行查看即可。例如一些about，setting，quit等都可以安排在这里。

常用菜单：

Options Menu：按Menu键时从屏幕底部滑出的菜单

Context Menu：用户通过在按件上长按调出它

相关函数：

onCreateOptionMenu()：创建菜单（onCreateContextMenu…）

onOptionsItemSelected()：处理菜单项的单击事件

（3）列表： ListView

列表视图的运用很多，如在手机上显示通信录或电话本，应用软件中那种查看别人的评论，相类似的搜索结果显示等等都会用到它。列表的显示需要三个元素：

A．ListVeiw 用来展示列表的View。

B．适配器用来把数据映射到ListView上的中介。

C．数据具体的将被映射的字符串，图片，或者基本组件。

根据列表的适配器类型，列表分为三种，ArrayAdapter，SimpleAdapter和SimpleCursorAdapter。其中ArrayAdapter最为简单，只能展示一行字。SimpleAdapter有最好的扩充性，可以自定义出各种效果。SimpleCursorAdapterSimpleAdapter对数据库的简单结合，可以方面的把数据库的内容以列表的形式展示出来。

而在使用ListView中，我们可以使用“ListActivity”类，他继承了Activity。默认绑定了一个ListView ,并提供一些与列表视图处理的相关操作。如果整个屏幕只需要显示一个列表。我们甚至可以吧setContentView这一行去掉，不用定义列表的xml文件，例如：

package com.demo.android.dummynote; import com.demo.android.dummynote.R; import android.app.Activity; import android.app.ListActivity; import android.os.Bundle; import android.widget.ArrayAdapter; import android.widget.ListAdapter; public class DummyNote extends ListActivity { private String[] note_array={"perfect","good","pretty","magic"}; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.main); getListView().setEmptyView(findViewById(R.id.empty)); setAdapter(); } private void setAdapter(){ ListAdapter adapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,note_array); setListAdapter(adapter); } }

就可以简单地显示一个列表了。

而自己还是更喜欢simpleAdapter，他使我们列表的定义更为自如，我们可以在重新定义每个列表中显示ImageView，Button，CheckBox,等等,使用simpleAdapter的数据用一般都是HashMap构成的List，list的每一节对应ListView的每一行。例如这次写的：

首先在xml中定义好一个用来显示每一个列内容：

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/ItemImage" android:layout_width="wrap_content" android:layout_marginLeft="5px" android:layout_marginTop="3px" android:layout_height="50px" /> <TextView android:id="@+id/ItemText" android:layout_width="fill_parent" android:textColor="#000000" android:layout_height="50px" android:layout_marginTop="8px" android:textSize="22px" /> </LinearLayout>

下面是其实现代码（其中还包括了menu的代码实现）

package com.search; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.Intent; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.widget.AdapterView; import android.widget.EditText; import android.widget.ImageButton; import android.widget.ListView; import android.widget.SimpleAdapter; import android.widget.TextView; import android.widget.AdapterView.OnItemClickListener; public class Search extends Activity implements OnClickListener { private ImageButton imBtn_search1,imBtn_search2,imBtn_create,imBtn_friends,imBtn_behindInput; private TextView text_notice; private EditText edit_input; private ListView list; private HashMap<String, Object> map; private ArrayList<HashMap<String, Object>> listItem; SimpleAdapter listItemAdapter; private int list_position; /** Called when the activity is first created. */ @Override public boolean onCreateOptionsMenu(Menu menu) /*menu菜单*/ { menu.add(0, 0, 0, R.string.about); menu.add(0, 1, 1, R.string.quit); return super.onCreateOptionsMenu(menu); } public boolean onOptionsItemSelected(MenuItem item) /*menu菜单响应函数*/ { super.onOptionsItemSelected(item); switch (item.getItemId()) { case 0: openOptionsDialog(); break; case 1: Search.this.finish(); break; } return true; } private void openOptionsDialog() /*打开对话框*/ { AlertDialog show = new AlertDialog.Builder(this) .setTitle(R.string.about) .setMessage(R.string.aboutmessage) .setPositiveButton("确定", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialoginterface, int i) { } }).show(); } public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.search); findViews(); setListeners(); listOpreate(); } private void findViews(){ imBtn_search1 = (ImageButton) findViewById(R.id.imBtn_search1); imBtn_search2 = (ImageButton) findViewById(R.id.imBtn_search2); imBtn_create = (ImageButton) findViewById(R.id.imBtn_create); imBtn_friends = (ImageButton) findViewById(R.id.imBtn_friends); imBtn_behindInput = (ImageButton) findViewById(R.id.imBtn_behindInput); edit_input = (EditText) findViewById(R.id.edit_input); text_notice=(TextView)findViewById(R.id.text_notice); } private void setListeners(){ imBtn_search1.setOnClickListener(this); imBtn_search2.setOnClickListener(this); imBtn_create.setOnClickListener(this); imBtn_friends.setOnClickListener(this); imBtn_behindInput.setOnClickListener(this); } public void onClick(View v){ int btn_id=((ImageButton)v).getId(); switch(btn_id){ case R.id.imBtn_search1: { Intent intent = new Intent(); intent.setClass(Search.this, Search.class); startActivity(intent); break; } // case R.id.imBtn_search2: // { // Intent intent = new Intent(); // intent.setClass(Search.this, Search2.class); // startActivity(intent); // break; // } // case R.id.imBtn_create: // { // Intent intent = new Intent(); // intent.setClass(Search.this, Create.class); // startActivity(intent); // break; // } // case R.id.imBtn_friends: // { // Intent intent = new Intent(); // intent.setClass(Search.this, Friends.class); // startActivity(intent); // break; // } case R.id.imBtn_behindInput: { String str=edit_input.getText().toString(); } } } private void listOpreate(){ edit_input.setHint(R.string.scence); list = (ListView) findViewById(R.id.list); listItem = new ArrayList<HashMap<String, Object>>(); map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable.scence); map.put("ItemText", " 景点"); listItem.add(map); map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable.dining); map.put("ItemText", " 餐厅"); listItem.add(map); map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable.teaching); map.put("ItemText", " 教学楼"); listItem.add(map); map = new HashMap<String, Object>(); map.put("ItemImage", R.drawable.lab); map.put("ItemText", " 实验室"); listItem.add(map); listItemAdapter = new SimpleAdapter(this, listItem, R.layout.list_items, new String[] { "ItemImage", "ItemText" }, new int[] { R.id.ItemImage, R.id.ItemText }); list.setAdapter(listItemAdapter); list.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView<?> parent, View view,int position, long id) /*三种搜索的切换*/ { if(position==0) { edit_input.setHint(R.string.scence); list_position=0; } if (position == 1) { edit_input.setHint(R.string.dining); list_position=1; } if (position == 2) { edit_input.setHint(R.string.teaching); list_position=2; } if (position == 3) { edit_input.setHint(R.string.lab); list_position=3; } } }); } }

界面：

你仍然可以往每一列里边加入一些其他的组件。

（4）另外一些常用控件：

TextView, ImageView

Button, CheckBox, RadioButton, ImageButton, ToggleButton

AnalogClock, DigitalClock

EditText, List…等等需要的时候就到内置范例中去参考吧

2 当确定了需要的界面组件后，下一件事就是想怎样安排他们才是最舒服的了，这就需要对集中常用的布局有一定的了解，之前比较常写的都是运用一种布局很简单地去安排组件，所以这次很多时候写出来的界面也不好看，所以得不断地完善。其实说起五种布局，貌似还是挺简单的，但是，要把它们很好地结合起来运用，写出漂亮舒适的界面，也不是一蹴而就的事情，例如这个界面：

就很灵活的组合LinearLayout布局方式。（不过貌似不是很好看~~）

最开始自己写时定义的那些xml属性都是很简单常用的一些，而对于很多都没有比较系统的认识，这次很多时候会把布局改一下，并且也常常看别人的一些布局文件，对其中的一些小细节进行改动看又会是什么效果，所以对此的运用应该相对前边娴熟了很多。

还是简单地讲一下几种布局吧，也当做个巩固。

1、 线性布局

线性布局方式是我们应用程序中最常用的布局方式，主要提供控件水平或者垂直排列的模型

2、坐标布局

控件的在父容器上所处的位置主要是有其横纵坐标决定的~这种布局自己没用过，但见过一个例子，就是用它控制一个小人的运动，让其表现出跑动的状态等。

3、表格布局

表格布局主要以行列的形式来管理子控件，其中每一行即一个TableRow对象，每个TableRow对象可以添加子控件，并且每加入一个空间即相当于添加了一列。建议写计算器的时候用这种布局来安排按钮是最好的了。其中比较新的三个属性就是collapseColumns（隐藏列），stretchColumns（设置可伸展），shrinkColumns（设置课收缩），具体的运用可以见下面（这是网上的一个例子）：

<?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="wrap_content"> <TableLayout android:id="@+id/table1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:collapseColumns="1,2,3" > <TableRow> <TextView android:id="@+id/txt1" android:gravity="center" android:text="Table" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </TableRow> <TableRow> <TextView android:text="col0"></TextView> <TextView android:text="col1"></TextView> <TextView android:text="col2"></TextView> <TextView android:text="col3"></TextView> </TableRow> </TableLayout>  <TableLayout android:id="@+id/table2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:stretchColumns="1" > <TextView android:id="@+id/txt2" android:gravity="center" android:text="Table2" android:layout_width="fill_parent" android:layout_height="wrap_content" > </TextView> <TableRow> <TextView android:text="col0"></TextView> <TextView android:text="col1"></TextView> <TextView android:text="col2"></TextView> <TextView android:text="col3"></TextView> </TableRow> </TableLayout>  <TableLayout android:id="@+id/table3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:shrinkColumns="0" > <TextView android:id="@+id/txt3" android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Table3" > </TextView> <TableRow> <TextView android:text="welcome to world of android"></TextView> <TextView android:text="col1"></TextView> <TextView android:text="col2"></TextView> <TextView android:text="col3"></TextView> </TableRow> </TableLayout>  <TableLayout android:id="@+id/table4" android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/txt3" android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Table4" > </TextView> <TableRow> <TextView android:text="col0"></TextView> <TextView android:text="this column will be very long"></TextView> <TextView android:text="col2"></TextView> <TextView android:text="col3"></TextView> </TableRow> </TableLayout> </LinearLayout>

不过自己有一点不了解的地方就是他里边嵌套的每一个tableLayout中的第一个组件TextView为什么没有用<Tablerow></tablerow>给括起来呢，而自己把它括起来后 gravity="center "就失去了他的作用，变成右边的样子。

4 相对布局：relativeLayout

这个感觉对实现组件间的对齐是很好的一种方式。

5 帧布局>frameLayout:

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/FrameLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/img1" android:src="@drawable/img1" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> <ImageView android:id="@+id/img2" android:paddingLeft="50dip" android:paddingTop="22dip" android:src="@drawable/img2" android:layout_width="wrap_content" android:layout_height="wrap_content"> </ImageView> </FrameLayout>

效果：

3 另外，在写界面时，参考一些现有的好的界面，然后模仿着写实一种很好的方式，所以平时应该养成见到一些好的应用的界面应该要留心一下，收藏一下，这样当自己需要写时，就不会为要写一个好看的界面而感觉无从下手了。

4 自己刚写时常出现的问题:

(1)在linearLayout中，忘了写android:orientation="vertical"，而明明自己定义了几个组件，而显示出来的只有一个而已，其他的都不见了，原来这个布局他默认的是水平的。

（2）经常会遇见the application has stopped unexceptedly的问题，这个除了之前有说到的一些错误后：后来自己还遇到了一些

A 对于组件的属性定义时，一定有height ,width这2个，如果遗漏掉其中的人一个，都会出现该错误

B忘了通过“findViewbyId ”从资源文件中取得对应的组件，虽然这点是不大会犯的错误，但之前因为自己定义的按钮过多，后来有一个忘了这一句，所以一点到那个按钮他就出现了the application has stopped unexceptedly.那时确实都不知道究竟是哪里错了，幸好是舒攀学长帮我找到了。

C 当新添一个活动时，一定要到Mainfest。xml里添加活动标签，尽管这个明明是知道了的，但刚写时还是总忘了。

小结：最近算是写界面最多的时候了，通过这次，确实也看了些很好的界面定义例子，确实有些细节让自己感觉一新，因为自己可能在为怎样去控制各个界面的放置这里总是尝试很多遍，后来看到别人的例子他恰当地运用一些属性便很好地解决了，自己感触较深的是在定义留空对齐这里。当然具体还是得看具体例子了。

做个生活的有心人，从小处完善，使运用自如吧。