Android 布局分析
先建项目然后写 string.xml文件
<?xml version="1.0"encoding="utf-8"?>
<resources>
<string name="app_name">LayoutMyTestChen</string>
<string name="name_text">请输入您的信息:</string>
<string name="ok_text">插入</string>
<string name="reset_text">重置</string>
<string name="plumflower">*</string>
<string name="name">姓名</string>
<string name="gender">性别</string>
<string name="age">年龄</string>
<string name="phonenumber">电话</string>
<string name="nameZs">张三</string>
<string name="genderZs">男</string>
<string name="ageZs">23</string>
<string name="phonenumberZs">110</string>
<string name="nameLs">李思</string>
<string name="genderLs">女</string>
<string name="ageLs">23</string>
<string name="phonenumberLs">120</string>
</resources>
1.LinearLayout(线性布局)
“LinearLayout”翻译成中文是“线性布局”,所谓线性布局就是在该标签下的所有子
元素会根据其orientation属性的值来决定是按行或者是按列逐个显示。
linear_layout.xml代码如下:
<?xml version="1.0"encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/name_text"/>
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="@string/reset_text"
android:id="@+id/cancel_button"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/ok_text"
android:layout_toLeftOf="@id/cancel_button"
/>
</RelativeLayout>
</LinearLayout>
效果如图:
2. RelativeLayout(相对布局)
相对布局中的视图组件是按相互之间的相对位置来确定的,并不是线性布局中的必须
按行或按列单个显示。
relative_layout.xml代码如下:
<?xml version="1.0"encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/plumflower"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button1"
android:layout_below="@id/button1"
android:text="@string/plumflower"
/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button2"
android:text="@string/plumflower"
/>
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/button2"
android:layout_below="@id/button2"
android:text="@string/plumflower"
/>
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button2"
android:layout_below="@id/button2"
android:text="@string/plumflower"
/>
</RelativeLayout>
效果如下:
3. TableLayout(表格布局)
表格布局的风格跟HTML中的表格比较接近,只是所采用的标签不同。
? <TableLayout> 是顶级元素,说明采用的是表格布局
? <TableRow>定义一个行
? <TextView>定义一个单元格的内容
table_layout.xml代码如下:
<?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">
<TableRow >
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/name"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/gender"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/age"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/phonenumber"/>
</TableRow>
<TableRow >
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/nameZs"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/genderZs"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/ageZs"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/phonenumberZs"/>
</TableRow>
<TableRow >
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/nameLs"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/genderLs"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/ageLs"/>
<TextView
android:gravity="center"
android:padding="3dip"
android:text="@string/phonenumberLs"/>
</TableRow>
</TableLayout>
效果如下:
4.FrameLayout(帧布局)
帧布局中的每一个组件都代表一个画面,默认以屏幕左上角作为(0,0)坐标,按组件
定义的先后顺序依次逐屏显示,后面出现的会覆盖前面的画面。用该布局可以实现动画效果。
FrameLayoutTestChenActivity代码如下:
package cn.class3g.activity;
importandroid.app.Activity;
importandroid.graphics.drawable.Drawable;
import android.os.Bundle;
importandroid.os.Handler;
importandroid.os.Message;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.FrameLayout;
public classFrameLayoutTestChenActivity extends Activity {
FrameLayout frame = null;
private boolean flag = true;
public void onCreate(BundlesavedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.main);
findViews();
final MyHandler myHandler = newMyHandler();
myHandler.sleep(10);
frame.setOnClickListener(newOnClickListener() {
public void onClick(View v) {
flag = !flag;
myHandler.sleep(10);
}
});
}
private void findViews() {
frame = (FrameLayout)this.findViewById(R.id.frame);
}
class MyHandler extends Handler {
int i = 0;
public void handleMessage(Message msg) {
i++;
show(i % 8);
sleep(50);
}
public void sleep(long delayMillis) {
if (flag) {
this.sendMessageDelayed(this.obtainMessage(10),delayMillis);
}
}
}
void show(int id) {
Drawable[] pic = new Drawable[10];
pic[0] =this.getResources().getDrawable(R.drawable.p1);
pic[1] =this.getResources().getDrawable(R.drawable.p2);
pic[2] =this.getResources().getDrawable(R.drawable.p3);
pic[3] = this.getResources().getDrawable(R.drawable.p4);
pic[4] =this.getResources().getDrawable(R.drawable.p5);
pic[5] =this.getResources().getDrawable(R.drawable.p6);
pic[6] =this.getResources().getDrawable(R.drawable.p7);
pic[7] =this.getResources().getDrawable(R.drawable.p8);
frame.setForeground(pic[id]);
}
}
main.xml代码如下:
<?xml version="1.0"encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:id="@+id/frame"
>
</FrameLayout>
效果图如下:
动作为: