原文出处是：http://blog.chinaunix.net/uid-29006784-id-3880944.html

感谢原创作者！

在一个Android应用程序中，用户界面通过View和viewGroup对象构建，Android中有很多种View和ViewGroup,他们都继承自View类，View对象是Android平台上表示用户界面的几本单元

下面分别介绍几种常用的布局方式：

①LinearLayout:线性布局，可以使用垂直线性布局(vertical),也可以使用水平线性布局，在LinearLayout里面可以放多个控件，但是一行(列)只能放一个控件；

◎ 小列子：布局文件

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:orientation="horizontal"
   
4. android:layout_width="fill_parent"
   
5. android:layout_height="fill_parent">
   
6. <TextView
   
7. android:layout_width="wrap_content"
   
8. android:layout_height="wrap_content"
   
9. android:text="第一行"
   
10. android:textSize="20px"/>
    
11. <TextView
    
12. android:layout_width="wrap_content"
    
13. android:layout_height="wrap_content"
    
14. android:text="第二行"
    
15. android:textSize="20px"/>
    
16. <TextView
    
17. android:layout_width="wrap_content"
    
18. android:layout_height="wrap_content"
    
19. android:text="第三行"
    
20. android:textSize="20px"/>
    
21. <TextView
    
22. android:layout_width="wrap_content"
    
23. android:layout_height="wrap_content"
    
24. android:text="第四行"
    
25. android:textSize="20px"/>
    
26. </LinearLayout>

在activity文件中引入该文件，运行可看到：

如果垂直布局方式：

点击(此处)折叠或打开

1. android:orientation="vertical"

则会显示：

②RelativeLayout:相对布局，里面可以放置多个控件，但控件的位置都是相对的，并且提供了各种确定相对位置的参数，类型丰富；一般通过指定id来确定相对位置

◎小案列：布局文件

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:layout_width="fill_parent"
   
4. android:layout_height="fill_parent">
   
5. <TextView
   
6. android:id="@+id/label"
   
7. android:layout_width="fill_parent"
   
8. android:layout_height="wrap_content"
   
9. android:text="请输入:"/>
   
10. <EditText
    
11. android:id="@+id/entry"
    
12. android:layout_width="fill_parent"
    
13. android:layout_height="wrap_content"
    
14. android:background="@android:drawable/editbox_background"
    
15. android:layout_below="@id/label"/>
    
16. <Button
    
17. android:id="@+id/ok"
    
18. android:layout_width="wrap_content"
    
19. android:layout_height="wrap_content"
    
20. android:layout_below="@id/entry"<!--通过指定id确定相对位置-->
    
21. android:layout_alignParentRight="true"
    
22. android:layout_marginLeft="10dip"
    
23. android:text="确定"/>
    
24. <Button
    
25. android:layout_width="wrap_content"
    
26. android:layout_height="wrap_content"
    
27. android:layout_toLeftOf="@id/ok"
    
28. android:layout_alignTop="@id/ok"
    
29. android:text="取消"/>
    
30. </RelativeLayout>

运行可看到：

③TableLayout:表格布局，用行和列标识一个视图，和HTML中的表格布局非常类似，TableRow就像HTML表格的<tr>标记，但是TableRow中的单元格不能跨列，这又与HTML有所区别

几个重要属性：
●android:shrinkColumns作用设置表格的列是否收缩(列编号从0开始,列之间用逗号隔开),如android:shrinkColumns="1,2,3",即表格的第1,2,3列可以收缩适应屏幕
●android:collapseColumns作用设置表格的列是否隐藏
●android:stretchColumns作用设置表格的列是否拉伸

◎小案列：布局文件

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:layout_width="fill_parent"
   
4. android:layout_height="fill_parent"
   
5. android:stretchColumns="1">
   
6. <TableRow>
   
7. <TextView
   
8. android:layout_column="1"
   
9. android:text="name"
   
10. android:padding="3dip"/>
    
11. <TextView
    
12. android:text="Scoield"
    
13. android:gravity="right"
    
14. android:padding="3dip"/>
    
15. </TableRow>
    
16. <TableRow>
    
17. <TextView
    
18. android:layout_column="1"
    
19. android:text="age"
    
20. android:padding="3dip"/>
    
21. <TextView
    
22. android:text="22"
    
23. android:gravity="right"
    
24. android:padding="3dip"/>
    
25. </TableRow>
    
26. <TableRow>
    
27. <TextView
    
28. android:layout_column="1"
    
29. android:text="salary"
    
30. android:padding="3dip"/>
    
31. <TextView
    
32. android:text="-1000"
    
33. android:gravity="right"
    
34. android:padding="3dip"/>
    
35. </TableRow>
    
36. <View
    
37. android:layout_height="2dip"
    
38. android:background="#FF909090"/>
    
39. <TableRow>
    
40. <TextView
    
41. android:text="*"
    
42. android:padding="3dip"/>
    
43. <TextView
    
44. android:text="cellphone"
    
45. android:padding="3dip"/>
    
46. </TableRow>
    
47. <TableRow>
    
48. <TextView
    
49. android:text="*"
    
50. android:padding="3dip"/>
    
51. <TextView
    
52. android:text="telephone"
    
53. android:padding="3dip"/>
    
54. <TextView
    
55. android:text="I Don't Know"
    
56. android:gravity="right"
    
57. android:padding="3dip"/>
    
58. </TableRow>
    
59. <View
    
60. android:layout_height="2dip"
    
61. android:background="#FF909090"/>
    
62. <TableRow>
    
63. <TextView
    
64. android:layout_column="2"
    
65. android:text="退出"
    
66. android:padding="3dip"/>
    
67. </TableRow>
    
68. </TableLayout>

运行可看到左边的结果；右边的是增加了android:collapseColumns隐藏了第一列的结果

④FrameLayout:帧布局，该布局可以用来占有屏幕的某块区域来显示单一的对象，可以包含多个widgets或者布局，但是所包含必须被固定到屏幕的左上角，并且一层覆盖一层，类似堆栈结构，最后加进来的widgets或者布局显示在最上面，所以最后的一个会覆盖前面一个(除非最后一个是透明的，这必须得到FrameLayout Container的允许)

◎小案例：定义三个简单的控件

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:layout_width="fill_parent"
   
4. android:layout_height="fill_parent"
   
5. android:stretchColumns="1"
   
6. android:collapseColumns="1">
   
7. <ImageView
   
8. android:id="@+id/iv_image"
   
9. android:layout_width="wrap_content"
   
10. android:layout_height="wrap_content"
    
11. android:src="@drawable/icon"/>
    
12. <TextView
    
13. android:id="@+id/tv_text"
    
14. android:layout_width="wrap_content"
    
15. android:layout_height="wrap_content"
    
16. android:text="我是TextView"/>
    
17. <Button
    
18. android:id="@+id/bt_button"
    
19. android:layout_width="wrap_content"
    
20. android:layout_height="wrap_content"
    
21. android:text="我是按钮"/>
    
22. </FrameLayout>

运行显示结果……

可看到他们都显示在左上角，而且最后的会覆盖前面的显示在最上方；

⑤TabLayout:标签布局，犹如安卓手机里面的通话记录界面布局，而要创建一个TabLayout,需要使用到TabHost和TabWidget,TabHost必须是布局的根节点，它包含显示标签的TabWidget和显示标签内容的FrameLayout,

实现标签内容有两种方法：1.使用标签在同一个活动中交换视图；2.使用标签在完全隔离的活动之间改变

◎小案例

1.布局文件

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:id="@android:id/tabhost"
   
4. android:layout_width="fill_parent"
   
5. android:layout_height="fill_parent">
   
6. <LinearLayout
   
7. android:orientation="vertical"
   
8. android:layout_width="fill_parent"
   
9. android:layout_height="fill_parent">
   
10. <TabWidget
    
11. android:id="@android:id/tabs"
    
12. android:layout_width="fill_parent"
    
13. android:layout_height="wrap_content"/>
    
14. <FrameLayout
    
15. android:id="@android:id/tabcontent"
    
16. android:layout_width="fill_parent"
    
17. android:layout_height="fill_parent">
    
18. <TextView
    
19. android:id="@+id/textview1"
    
20. android:layout_width="fill_parent"
    
21. android:layout_height="fill_parent"
    
22. android:text="我是第一个标签"/>
    
23. <TextView
    
24. android:id="@+id/textview2"
    
25. android:layout_width="fill_parent"
    
26. android:layout_height="fill_parent"
    
27. android:text="我是第二个标签"/>
    
28. <TextView
    
29. android:id="@+id/textview3"
    
30. android:layout_width="fill_parent"
    
31. android:layout_height="fill_parent"
    
32. android:text="我是第三个标签"/>
    
33. </FrameLayout>
    
34. </LinearLayout>
    
35. </TabHost>

2. 创建主activity，注意是继承自TabActivity而不是Activity;

点击(此处)折叠或打开

1. publicclassLayoutActivityextendsTabActivity{
   
2. //定义一个TabHost
   
3. TabHost tabHost;
   
4. @Override
   
5. publicvoidonCreate(Bundle savedInstanceState){
   
6. super.onCreate(savedInstanceState);
   
7. setContentView(R.layout.main);
   
8. //取得TabHost对象
   
9. tabHost=getTabHost();
   
10. /* 为TabHost添加标签 */
    
11. //新建一个newTabSpec(newTabSpec)
    
12. //设置其标签和图标(setIndicator)
    
13. //设置内容(setContent)
    
14. tabHost.addTab(tabHost.newTabSpec("tab_1").setIndicator("tab1",getResources()
    
15. .getDrawable(R.drawable.img1)).setContent(R.id.textview1));
    
16. tabHost.addTab(tabHost.newTabSpec("tab_2").setIndicator("tab2",getResources()
    
17. .getDrawable(R.drawable.img2)).setContent(R.id.textview2));
    
18. tabHost.addTab(tabHost.newTabSpec("tab_3").setIndicator("tab3",getResources()
    
19. .getDrawable(R.drawable.img3)).setContent(R.id.textview3));
    
20. //设置TabHost的背景颜色
    
21. tabHost.setBackgroundColor(Color.argb(150,22,70,150));
    
22. //设置TabHost的背景图片资源
    
23. //mTabHost.setBackgroundResource(R.drawable.bg0);
    
24. 
    
25. //设置当前显示哪一个标签
    
26. tabHost.setCurrentTab(0);
    
27. 
    
28. //标签切换事件处理，setOnTabChangedListener
    
29. tabHost.setOnTabChangedListener(newOnTabChangeListener(){
    
30. 
    
31. @Override
    
32. publicvoidonTabChanged(StringtabId){
    
33. // TODO Auto-generated method stub
    
34. Dialogdialog=newAlertDialog.Builder(LayoutActivity.this)
    
35. .setTitle("提示")
    
36. .setMessage("当前选中了："+tabId+"标签")
    
37. .setPositiveButton("确定",newDialogInterface.OnClickListener(){
    
38. 
    
39. @Override
    
40. publicvoidonClick(DialogInterfacedialog,intwhich){
    
41. // TODO Auto-generated method stub
    
42. dialog.cancel();
    
43. }
    
44. }).create();//创建按钮
    
45. dialog.show();
    
46. }
    
47. });
    
48. }
    
49. }

运行结果……

上面的确是实现了TabLayout的功能，但从用户的角度来看不太直观…而且现在的应用软件大部分都是把TabWidget放到底部，人性化较好……

更改代码：利用android:layout_alignParentBottom="true"实现底部显示，并且把上面的LinearLayout改为RelativeLayout

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:id="@android:id/tabhost"
   
4. android:layout_width="fill_parent"
   
5. android:layout_height="fill_parent">
   
6. <RelativeLayout
   
7. android:orientation="vertical"
   
8. android:layout_width="fill_parent"
   
9. android:layout_height="fill_parent">
   
10. <TabWidget
    
11. android:id="@android:id/tabs"
    
12. android:layout_width="fill_parent"
    
13. android:layout_height="wrap_content"
    
14. android:layout_alignParentBottom="true"/>
    
15. <FrameLayout
    
16. android:id="@android:id/tabcontent"
    
17. android:layout_width="fill_parent"
    
18. android:layout_height="fill_parent">
    
19. <TextView
    
20. android:id="@+id/textview1"
    
21. android:layout_width="fill_parent"
    
22. android:layout_height="fill_parent"
    
23. android:text="我是第一个标签"
    
24. android:textSize="40px"/>
    
25. <TextView
    
26. android:id="@+id/textview2"
    
27. android:layout_width="fill_parent"
    
28. android:layout_height="fill_parent"
    
29. android:textSize="40px"
    
30. android:text="我是第二个标签"/>
    
31. <TextView
    
32. android:id="@+id/textview3"
    
33. android:layout_width="fill_parent"
    
34. android:layout_height="fill_parent"
    
35. android:textSize="40px"
    
36. android:text="我是第三个标签"/>
    
37. </FrameLayout>
    
38. </RelativeLayout>
    
39. </TabHost>

运行可看到

⑥GridView：网格布局，效果就像安卓手机就如主菜单查看软件一样，一个二维的，滚动的网格；

◎小案例：这是我以前写的一个新闻客户端，其中用到了GridView

1.GridView的布局文件：newsactivity.xml

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <GridView xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:id="@+id/gridview"
   
4. android:numColumns="auto_fit"
   
5. android:horizontalSpacing="10dp"
   
6. android:verticalSpacing="10dp"
   
7. android:columnWidth="90dp"
   
8. android:stretchMode="columnWidth"
   
9. android:gravity="center"
   
10. android:background="#ffffffcc"
    
11. android:layout_width="fill_parent"
    
12. android:layout_height="fill_parent">
    
13. </GridView>

2.Activity中Adapter用到的布局文件：adapter.xml

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <RelativeLayout
   
3. xmlns:android="http://schemas.android.com/apk/res/android"
   
4. android:layout_height="wrap_content"
   
5. android:paddingBottom="4dip"android:layout_width="fill_parent">
   
6. <ImageView
   
7. android:layout_height="wrap_content"
   
8. android:id="@+id/ItemImage"
   
9. android:layout_width="wrap_content"
   
10. android:layout_centerHorizontal="true">
    
11. </ImageView>
    
12. <TextView
    
13. android:layout_width="wrap_content"
    
14. android:layout_below="@+id/ItemImage"
    
15. android:layout_height="wrap_content"
    
16. android:text="TextView01"
    
17. android:layout_centerHorizontal="true"
    
18. android:id="@+id/ItemText">
    
19. </TextView>
    
20. </RelativeLayout>

3.主Activity文件：

点击(此处)折叠或打开

1. publicclassgridViewextendsActivity{
   
2. //定义相关控件
   
3. GridView gridView;
   
4. TextView textView;
   
5. //定义TextView对应资源
   
6. String[]arr={"国内新闻","国际新闻","军事新闻","社会新闻","深度新闻",
   
7. "评论新闻","图片新闻",
   
8. "探索新闻","校园焦点","产业新闻","IT业界","电影世界"};
   
9. //定义ImageView对应资源
   
10. int[]picarr={R.drawable.innernews,R.drawable.outernews,R.drawable.junshinews,
11. R.drawable.innernews,R.drawable.innernews,R.drawable.innernews,
12. R.drawable.innernews,R.drawable.innernews,R.drawable.innernews,
13. R.drawable.innernews,R.drawable.innernews,R.drawable.innernews};
14. @Override
    
15. publicvoidonCreate(Bundle savedInstanceState){
    
16. super.onCreate(savedInstanceState);
    
17. setContentView(R.layout.newsactivity);
    
18. //初始化相关控件
    
19. gridView=(GridView)this.findViewById(R.id.gridview);
    
20. textView=(TextView)this.findViewById(R.id.ItemText);
    
21. //为下面的SimpleAdapter准备参数
    
22. ArrayList<HashMap<String,Object>>ImageItemList=newArrayList<HashMap<String,Object>>();
    
23. for(inti=0;i<arr.length;i++){
    
24. HashMap<String,Object>map=newHashMap<String,Object>();
    
25. map.put("ItemImage",picarr[i]);
    
26. map.put("ItemText",arr[i]);
    
27. ImageItemList.add(map);
    
28. }
    
29. //创建一个SimpleAdapter
    
30. SimpleAdapter adapter=newSimpleAdapter(this,ImageItemList,R.layout.adapter,
    
31. newString[]{"ItemImage","ItemText"},newint[]{R.id.ItemImage,R.id.ItemText});
    
32. //在GridView上显示adapter
    
33. gridView.setAdapter(adapter);
    
34. //实现点击打开另一个Activity
    
35. gridView.setOnItemClickListener(newOnItemClickListener(){
    
36. @Override
    
37. publicvoidonItemClick(AdapterView<?>parent,Viewview,
    
38. intposition,longid){
    
39. // TODO Auto-generated method stub
    
40. HashMap<String,Object>item=(HashMap<String,Object>)parent.getItemAtPosition(position);
    
41. setTitle((String)item.get("ItemText"));
    
42. 
    
43. switch(position){
    
44. case0:
    
45. //Intent intent = new Intent(NewsActivity.this, InNewsActivity.class);
    
46. //startActivity(intent);
    
47. break;
    
48. 
    
49. default:
    
50. break;
    
51. }
    
52. }
    
53. });
    
54. }
    
55. }

运行可看到结果^0^!

⑦ListView:列表视图，列表的元素通过ListAdapter自动插入到列表

◎小案例

1.布局文件：main.xml

点击(此处)折叠或打开

1. <?xmlversion="1.0"encoding="utf-8"?>
   
2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
   
3. android:layout_width="fill_parent"
   
4. android:layout_height="wrap_content">
   
5. </TextView>

2.Activity文件

点击(此处)折叠或打开

1. publicclassgridViewextendsListActivity{//这里继承的是ListActivity
   
2. @Override
   
3. protectedvoidonCreate(Bundle savedInstanceState){
   
4. // TODO Auto-generated method stub
   
5. super.onCreate(savedInstanceState);
   
6. //为ArrayAdapter创造参数
   
7. String[]array=newString[20];
   
8. for(inti=0;i<20;i++){
   
9. array[i]=i+"";
   
10. }
    
11. //设置ListAdapter而不是setContentView
    
12. setListAdapter(newArrayAdapter<String>(this,R.layout.main,array));
    
13. //得到一个ListView
    
14. ListViewlistView=getListView();
    
15. //触发点击事件
    
16. listView.setOnItemClickListener(newOnItemClickListener(){
    
17. 
    
18. @Override
    
19. publicvoidonItemClick(AdapterView<?>parent,Viewview,
    
20. intposition,longid){
    
21. //点击时打印该Item所在的position
    
22. Toast.makeText(getApplicationContext(),position+"",0).show();
    
23. }
    
24. });
    
25. }
    
26. }

运行可看到*o*

最后还有个AbsoluteLayout绝对布局;由于安卓手机泛滥，这个个人觉得很少用到……所以就不说了

更多相关文章

1. Android：控件布局（线性布局）LinearLayout
2. 布局（2、相对布局）
3. android 设置布局为无标题样式
4. 【Android】配置文件属性说明
5. Android中attr自定义标签详解
6. 在sd卡存储文件
7. Android 解决布局问题

随机推荐

1. Android事件处理之监听事件
2. android sdk adt 版本
3. Android(安卓)自定义RadioButton样式 Rad
4. Android中gravity与layout_gravity的区别
5. Android异步处理二：使用AsyncTask异步更新
6. android 开发技巧(9)--为文本添加发亮的
7. Android(安卓)资源文件中@、@android:typ
8. Android中gravity与layout_gravity的区别
9. Android(安卓)并发之CountDownLatch、Cyc
10. android:textAppearance解析