Android入门之布局篇.doc

Android简单入门最近Android挺火的，可惜刚毕业，温饱才刚刚解决，还没能力买台Android手机，所以目前的开发只能用模拟器来做。就目前 Android SDK 1.5 + Eclipse + ADT的开发方式来说，跟J2ME最大的区别在于UI的不同，当然Android比J2ME多出很多东西，多出的是J2ME无法作对比的。刚开始做 Android开发，很多人都是先写个简单的界面，再加点控制代码，本文就是这样。 本文所讲到的是LinearLayout + Button + EditText + AlertDialog的简单使用。 Activity以 LinearLayout排列，共用到两个 LinearLayout，第一个是用于全窗体，第二个用于存放两个Button，第二个 LinearLayout放在EditText控件下面，以下给出main.xml的代码： main.xml用于 Activity的UI设计，目前设计起来的速度，比 J2ME上的LWUIT略快(两者类似，Android提供了GUI设计工具)，比WM上的.NET CF略慢（.NETCF 是RAD）。 接下来给出JAVA代码： package com.studio.android;import android.app.Activity;import android.app.AlertDialog;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.Button;import android.widget.EditText;public class HelloAndroid extends Activity /* Called when the activity is first created. */Button btnShow;Button btnClear;EditText edtInput; Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); btnShow=(Button)findViewById(R.id.btnShow);/控件与代码绑定 btnClear=(Button)findViewById(R.id.btnClear);/控件与代码绑定 edtInput=(EditText)findViewById(R.id.edtInput);/控件与代码绑定 btnShow.setOnClickListener(new ClickListener();/使用点击事件 btnClear.setOnClickListener(new ClickListener();/使用点击事件 class ClickListener implements OnClickListener public void onClick(View v) if(v=btnShow) new AlertDialog.Builder(HelloAndroid.this) .setIcon(android.R.drawable.ic_dialog_alert) .setTitle(Information) .setMessage(edtInput.getText() .show(); else if(v=btnClear) edtInput.setText(HelloAndroid); 刚开始Android的开发，界面设计是J2ME程序员的瓶颈之处，不过以后Android的开发工具会越来越智能化，期待 Netbeans 推出更好的 ADT出来(Netbeans目前已经有Android插件)。LinearLayout、AbsoluteLayoutAndroid 的UI 布局都以Layout 作为容器，在上面按照规定排列控件，这方面跟JAVA 的Swing 和LWUIT 很像。控件跟Layout 有很多属性是一样的，可以在Properties 里面修改，跟.NET/Delphi 等RAD 类似，其中最常用的属性有以下这些：id=+id/edtInput，ID 是连接UI 与代码的桥梁gravity= center，Layout 中的控件居中 layout_width=fill_parent ，自动填充至屏幕宽度，layout_height 同理 layout_width=wrap_content ，自动填充为控件大小，layout_height 同理 LinearLayout很简单：在LinearLayout 里面的控件，按照水平或者垂直排列：orientation=horizontal ：水平排列；orientation= vertical ：垂直排列 当LinearLayout 是horizontal ，并且里面的控件使用了layout_width=fill_parent ，第二组控件会挡在屏幕的右边，那也就是看不到了。 AbsoluteLayout ，是一个按照绝对坐标定义的布局，由于使用绝对坐标去定位控件，因此要实现自适应界面时，应尽少使用 AbsoluteLayout 。 AbsoluteLayout 里面的控件都以layout_x 、layout_y 来定义其位置：上图中的TextView01的X坐标为10px，Y坐标为10px： RelativeLayout、FrameLayoutRelativeLayout是一个按照相对位置排列的布局，跟AbsoluteLayout这个绝对坐标布局是个相反的理解。 在RelativeLayout布局里的控件包含丰富的排列属性： Layout above:选择ID A，则该控件在A控件的上方， Layout below、Layout to left of。等同样用法。使用 RelativeLayout布局的时候，最好在界面设计时 做好布局，尽少程序运行时 做控件布局的更改，因为 RelativeLayout布局里面的属性之间，很容易冲突，例如， Layout below、 Layout above同选 ID A，那就肯定发生冲突了。 FrameLayout，顾名思义跟帧有关，布局里所有的控件都被放到布局的左上角，并且一层覆盖一层。FrameLayout布局里面的控件布局属性才那几项，其中关键的是layout_gravity，负责控制控件的位置。 FrameLayout布局常用在哪些情况目前我也不太了解，钻研中TableLayoutTableLayout跟TableLayout 是一组搭配使用的布局，TableLayout置底，TableRow在TableLayout的上面,而Button、TextView等控件就在 TableRow之上，另外，TableLayout之上也可以单独放控件。TableLayout是一个使用复杂的布局，最简单的用法就仅仅是拖拉控件做出个界面，但实际上，会经常在代码里使用TableLayout，例如做出表格的效果。 TableLayout经常用的属性是： android:collapseColumns：以第0行为序，隐藏指定的列： android:collapseColumns该属性为空时，如下图： 把android:collapseColumns=0,2-意思是把第0和第2列去掉，如下图： android:shrinkColumns：以第0行为序，自动延伸指定的列填充可用部分： 当LayoutRow里面的控件还没有布满布局时，shrinkColumns不起作用，如下图： 设置了shrinkColumns=0,1,2，布局完全没有改变，因为LayoutRow里面还剩足够的空间。 当LayoutRow布满控件时，如下图： 设置了shrinkColumns=2，则结果如下图，控件自动向垂直方向填充空间： android:stretchColumns：以第0行为序，尽量把指定的列填充空白部分： 设置stretchColumns=1，则结果如下图，第1列被尽量填充(Button02与TextView02同时向右填充,直到TextView03被压挤到最后边)。 Android的TableLayout + TableRow虽然使用有点复杂，但是功能很强大。Android提供了很多布局属性，但是手机程序的界面没有PC那么花俏，所以常用的就那几项而已。main.xml的代码如下，用到TableLayout的ID为TableLayout01： JAVA代码如下：package com.LayoutDemo;import com.LayoutDemo.R;import android.app.Activity;import android.os.Bundle;import android.view.ViewGroup;import android.widget.TableLayout;import android.widget.TableRow;import android.widget.TextView;public class LayoutDemo extends Activity /* Called when the activity is first created. */private final int WC = ViewGroup.LayoutParams.WRAP_CONTENT;private final int FP = ViewGroup.LayoutParams.FILL_PARENT; Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); /新建TableLayout01的实例 TableLayout tableLayout = (TableLayout)findViewById(R.id.TableLayout01); /全部列自动填充空白处 tableLayout.setStretchAllColumns(true); /生成10行，8列的表格 for(int row=0;row10;row+) TableRow tableRow=new TableRow(this); for(int col=0;col8;col+) /tv用于显示 TextView tv=new TextView(this); tv.setText(+col+,+row+); tableRow.addView(tv); /新建的TableRow添加到TableLayout tableLayout.addView(tableRow, new TableLayout.LayoutParams(FP, WC); 结果如下图： ListViewListView是一个经常用到的控件，ListView里面的每个子项Item可以使一个字符串，也可以是一个组合控件。先说说ListView的实现： 1.准备ListView要显示的数据； 2.使用一维或多维动态数组 保存数据；2.1构建适配器， 简单地来说， 适配器就是 Item数组 ， 动态数组 有多少元素就生成多少个Item； 3.把适配器添加到ListView,并显示出来。 接下来，看看本文代码所实现的ListView: 接下来，就开始UI的XML代码： main.xml代码如下，很简单，也不需要多做解释了： my_listitem.xml的代码如下，my_listitem.xml用于设计ListView的Item： 解释一下，里面用到的一些属性： 1.paddingBottom=3dip，Layout往底部留出3个像素的空白区域 2.paddingLeft=10dip，Layout往左边留出10个像素的空白区域 3.textSize=30dip，TextView的字体为30个像素那么大。 最后就是JAVA的源代码：public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); /绑定XML中的ListView，作为Item的容器 ListView list = (ListView) findViewById(R.id.MyListView); /生成动态数组，并且转载数据 ArrayListHashMap mylist = new ArrayListHashMap(); for(int i=0;i30;i+) HashMap map = new HashMap(); map.put(ItemTitle, This is Title.); map.put(ItemText, This is text.); mylist.add(map); /生成适配器，数组=ListItem SimpleAdapter mSchedule = new SimpleAdapter(this, /没什么解释 mylist,/数据来源 R.layout.my_listitem,/ListItem的XML实现 /动态数组与ListItem对应的子项 new String ItemTitle, ItemText, /ListItem的XML文件里面的两个TextView ID new int R.id.ItemTitle,R.id.ItemText); /添加并且显示 list.setAdapter(mSchedule); 另一个例子：main.xml的源代码，跟上一个一样，这里就不作解释了，直接贴出my_imageitem.xml的代码，就是它实现ImageItem的UI： 解释一下 my_imageitem.xml的代码：这里使用了RelativeLayout布局，控件的关键的属性是： ItemTitle的属性 android:layout_toRightOf=+id/ItemImage ，ItemTitle在ItemImage的右边； ItemText的属性 android:layout_toRightOf=+id/ItemImage，ItemText在ItemImage的右边， android:layout_below=+id/ItemTitle， ItemText 在 ItemTitle的下面。 最后，贴出JAVA的源代码，这里的源代码跟上一篇的很类似，只是修改了一部分，引入Item Image： Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); /绑定XML中的ListView，作为Item的容器 ListView list = (ListView) findViewById(R.id.MyListView); /生成动态数组，并且转载数据 ArrayListHashMap lstImageItem = new ArrayListHashMap(); for(int i=0;i10;i+) HashMap map = new HashMap(); map.put(ItemImage, R.drawable.icon);/添加图像资源的ID map.put(ItemTitle, This is Title.); map.put(ItemText, This is text.); lstImageItem.add(map); /生成适配器的ImageItem 动态数组的元素，两者一一对应 SimpleAdapter saImageItems = new SimpleAdapter(this, /没什么解释 lstImageItem,/数据来源 R.layout.my_imageitem,/ListItem的XML实现 /动态数组与ImageItem对应的子项 new String ItemImage,ItemTitle, ItemText, /ImageItem的XML文件里面的一个ImageView,两个TextView ID new int R.id.ItemImage,R.id.ItemTitle,R.id.ItemText); /添加并且显示 list.setAdapter(saImageItems); Override public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); /绑定XML中的ListView，作为Item的容器 ListView list = (ListView) findViewById(R.id.MyListView); /生成动态数组，并且转载数据 ArrayListHashMap lstImageItem = new ArrayListHashMap(); for(int i=0;i10;i+) HashMap map = new HashMap(); map.put(ItemImage, R.drawable.icon);/添加图像资源的ID map.put(ItemTitle, This is Title.); map.put(ItemText, This is text.); lstImageItem.add(map); /生成适配器的ImageItem 动态数组的元素，两者一一对应 SimpleAdapter saImageItems = new SimpleAdapter(this, /没什么解释 lstImageItem,/数据来源 R.layout.my_imageitem,/ListItem的XML实现 /动态数组与ImageItem对应的子项 new String ItemImage,ItemTitle, ItemText, /ImageItem的XML文件里面的一个ImageView,两个TextView ID new int R.id.ItemImage,R.id.ItemTitle,R.id.ItemText); /添加并且显示 list.setAdapter(saImageItems); GridViewGridView跟ListView都是比较常用的多控件布局，而GridView更是实现九宫图的首选!本文就是介绍如何使用GridView实现九宫 图。GridView的用法很多，网上介绍最多的方法就是自己实现一个ImageAdapter继承BaseAdapter，再供GridView使用， 类似这种的方法本文不再重复，本文介绍的GridView用法跟前文ListView的极其类似本文需要添加/修改3个文件：main.xml、night_item.xml、JAVA源代码。main.xml源代码如下，本身是个GirdView，用于装载Item：介绍一下里面的某些属性：android:numColumns=auto_fit ，GridView的列数设置为自动android:columnWidth=90dp，每列的宽度，也就是Item的宽度android:stretchMode=columnWidth，缩放与列宽大小同步android:verticalSpacing=10dp，两行之间的边距，如：行一(NO.0NO.2)与行二(NO.3NO.5)间距为10dpandroid:horizontalSpacing=10dp，两列之间的边距。接下来介绍 night_item.xml，这个XML跟前面ListView的ImageItem.xml很类似： 最后就是JAVA的源代码了，也跟前面的ListView的JAVA源代码很类似，不过多了“选中”的事件处理：public void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.gridview); /生成动态数组，并且转入数据 ArrayListHashMap lstImageItem = new ArrayListHashMap(); for(int i=0;i10;i+) HashMap map = new HashMap(); m