android开发layout及实例

来源：互联网发布：兰精莫代尔内裤知乎编辑：程序博客网时间：2024/06/07 01:42

“LinearLayout”翻译成中文是“线性布局”，所谓线性布局就是在该标签下的所有子元素会根据其orientation属性的值来决定是按行或者是按列逐个显示。

线性布局我们一般不会单用的，因为它太局限性了，它只能制作简单的界面，如果我们想做如下界面，那么就必须运用嵌套了。

实现代码如下

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>

3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

5. android:layout_width="match_parent"

7. android:layout_height="match_parent"

9. android:orientation="vertical" >

10.

11.

12.

13. <LinearLayout

14.

15. android:layout_width="match_parent"

16.

17. android:layout_height="wrap_content"

18.

19. android:orientation="horizontal" >

20.

21.

22.

23. <TextView

24.

25. android:layout_width="wrap_content"

26.

27. android:layout_height="wrap_content"

28.

29. android:text="@string/username" />

30.

31.

32.

33. <EditText

34.

35. android:layout_width="fill_parent"

36.

37. android:layout_height="wrap_content" />

38.

39. </LinearLayout>

40.

41.

42.

43. <LinearLayout

44.

45. android:layout_width="match_parent"

46.

47. android:layout_height="wrap_content"

48.

49. android:orientation="horizontal" >

50.

51.

52.

53. <TextView

54.

55. android:layout_width="wrap_content"

56.

57. android:layout_height="wrap_content"

58.

59. android:text="@string/userpass" />

60.

61.

62.

63. <EditText

64.

65. android:layout_width="fill_parent"

66.

67. android:layout_height="wrap_content" />

68.

69. </LinearLayout>

70.

71.

72.

73. <TableLayout

74.

75. android:layout_width="match_parent"

76.

77. android:layout_height="match_parent"

78.

79. android:stretchColumns="*" >

80.

81.

82.

83. <TableRow >

84.

85.

86.

87. <Button

88.

89. android:layout_width="wrap_content"

90.

91. android:layout_height="wrap_content"

92.

93. android:text="@string/login" />

94.

95.

96.

97. <Button

98.

99. android:layout_width="wrap_content"

100.

101. android:layout_height="wrap_content"

102.

103. android:text="@string/cancel" />

104.

105. </TableRow>

106.

107. </TableLayout>

108.

109.

110.

</LinearLayout>

相对布局中的视图组件是按相互之间的相对位置来确定的，如以下代码：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

<TextView

android:id="@+id/view1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ic_launcher"

android:layout_centerInParent="true"/>

<TextView

android:id="@+id/view2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ic_launcher"

android:layout_above="@id/view1"

android:layout_alignLeft="@id/view1"/>

<TextView

android:id="@+id/view3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ic_launcher"

android:layout_below="@id/view1"

android:layout_alignLeft="@id/view1"/>

<TextView

android:id="@+id/view4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ic_launcher"

android:layout_toLeftOf="@id/view1"

android:layout_alignTop="@id/view1"/>

<TextView

android:id="@+id/view5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ic_launcher"

android:layout_toRightOf="@id/view1"

android:layout_alignBottom="@id/view1"/>

</RelativeLayout>

表格布局的风格跟HTML中的表格比较接近，只是所采用的标签不同。

<TableLayout> 是顶级元素，说明采用的是表格布局

<TableRow>定义一个行

<TextView>定义一个单元格的内容

实现代码如下：

<?xml version="1.0" encoding="utf-8"?>

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:stretchColumns="0,1,2,3" >

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/name" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/gender" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/age" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/phonenumber" />

</TableRow>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/nameZs" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/genderZs" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/ageZs" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/phonenumberZs" />

</TableRow>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/nameLy" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/genderLy" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/ageLy" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/phonenumberLy" />

</TableRow>

</TableLayout>

android:stretchColumns="*"

该属性指定每行都由第“0、1、2、3…”列占满空白空间。

gravity指定文字对齐方式，本例都设为居中对齐。

padding指定视图与视图内容间的空隙，单位为像素。

实现效果如下：

帧布局中的每一个组件都代表一个画面，这个程序的主要原理是大图片覆盖小的图片，首先由一张最小的图片显示，然后是比它大一点，在它外围增加点东西的这样显示的效果就像动态的似的。以此类推，然后再循环显示。

编写main.xml文件：

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="utf-8"?>

3. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

5. android:layout_width="wrap_content"

7. android:layout_height="wrap_content"

9. android:layout_gravity="center"

10.

11. android:id="@+id/frame"

12.

13. >

14.

15.

16.

</FrameLayout>

在该布局文件中定义一个id为frame的帧布局文件。

然后把我们需要的图片放入工程resàdrawable下。

主要实现代码如下：

package cn.class3g.activity;

import android.app.Activity;

import android.graphics.drawable.Drawable;

import android.os.Bundle;

import android.os.Handler;

import android.os.Message;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.FrameLayout;

public class FrameLayoutTestActivity extends Activity {

FrameLayout frame = null;

boolean flag=true;

class MyHandler extends Handler{

int i=0;

public void handlerMessage(Message msg){

i++;

show(i%3);

sleep(100);

}

public void sleep(long delayMillis){

if(flag){

this.sendMessageDelayed(this.obtainMessage(0), delayMillis);

}

void show(int idx){

Drawable[] pic = new Drawable[3];

pic[0] = this.getResources().getDrawable(R.drawable.p1);

pic[1] = this.getResources().getDrawable(R.drawable.p2);

pic[2] = this.getResources().getDrawable(R.drawable.p3);

frame.setForeground(pic[idx]);

}

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

frame = (FrameLayout) this.findViewById(R.id.frame);

final MyHandler myHandler = new MyHandler();

myHandler.sleep(100);

frame.setOnClickListener(new OnClickListener(){

public void onClick(View v){

flag=!flag;

myHandler.sleep(100);

}

});

}

其实现效果为三张图片连起来的一个动画