Android学习进入第三天,通过今天学习,我了解到,Android中的布局方式有:LinearLayout(线性布局)、RelativeLayout(相对布局)、TableLayout(表格布局)、FrameLayout(帧布局),当然还有线性布局与相对布局嵌套的布局方式。下面,就来结合一些案例来了解一下Android的布局方式。
线性布局:LinearLayout
线性布局就是,在<LinearLayout>标签下的所有子元素,根据orientation属性的值来按行或者按列逐个显示。其orientation的值有:vertical(按行显示)、horizontal(按列显示)。
例,linear_layout.xml布局文件,这个布局文件,采用了线性布局按行显示嵌套线性布局按列显示的布局模式,内容如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/user_name" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/password" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="220dp"
android:text="@string/enter_text" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cencel_text" />
</LinearLayout>
</LinearLayout>
以上代码实现的布局如图所示:
这个线性布局文件中,定义了六个元素组件,显示为三行,且每行两列。其整体布局采用了orientation=”vertical”的按行显示,嵌套了orientation=” horizontal”按列显示的线性布局。
其中,在定义组件视图尺寸的时候用到的【warp_content】:设置一个视图的尺寸为wrap_content,将强制性地使视图扩展以显示全部内容。
【match_parent】:设置一个视图的尺寸为match_parent,将强制性地使视图扩展填充其上一级组件的剩余尺寸。
相对布局:RelativeLayout
相对布局的元素组件是按照相互之间的相对位置来确定的,需要为各个组件定义上一id,根据id来进行组件之间的相对位置。
例,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/one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/enter_text"/>
<Button
android:id="@+id/three"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/enter_text"
android:layout_below="@id/one"
android:layout_toRightOf="@id/one"/>
<Button
android:id="@+id/two"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/enter_text"
android:layout_toRightOf="@id/three"/>
<Button
android:id="@+id/four"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/enter_text"
android:layout_below="@id/three"/>
<Button
android:id="@+id/five"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/enter_text"
android:layout_below="@id/three"
android:layout_toRightOf="@id/three"/>
</RelativeLayout>
以上代码实现的布局如图所示:
这个表格布局文件,定义了五个按钮元素组件,其中,以左上角id为one的按钮组件为基准,再根据每个组件的id,进行了相对的布局。代码举例说明:
android:layout_toRightOf="@id/one":是将该元素组件放在id为one的元素组件的右侧。
android:layout_below="@id/one":是将该元素组件放在id为one的元素组件的下侧。
表格布局:TableLayout
表格布局,与HTML中的表格实现方式极为相似。其中<TableLayout>相当于HTML中的<Table>标签,说明采用的是表格布局。<TableRow>相当于HTML中的<tr>标签,定义一个行。<TextView>相当于HTML中的<td>标签,定义一个列。
例,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: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/sex"/>
<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/call"/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name_liming"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sex_liming"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/age_liming"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/call_liming"/>
</TableRow>
<TableRow>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/name_wangli"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sex_wangli"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/age_wangli"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/call_wangli"/>
</TableRow>
</TableLayout>
以上代码实现的布局如图所示:
这个表格布局文件中定义了一十二个元素组件。分三行四列显示。代码举例说明:
android:stretchColumns="0,1,2,3":是设置TableLayout所有行的第一、二、三、四列为扩展列,也即是说,每行都有4列的话,那将均等分空间。
帧布局:FrameLayout
帧布局中的每一个组件都代表一个画面,默认以屏幕左上角为(0,0)坐标,按组件定义的先后顺序依次逐屏显示,后面出现的会覆盖前面的画面。可以实现动画效果。
例,frame_layout.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:id="@+id/frame" >
</FrameLayout>
对应的activity.java文件如下:
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 LayoutHomeWorkActivity extends Activity {
private boolean flag = true;
FrameLayout frame = null;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.frame_layout);
findViews();
final MyHandler myHandler = new MyHandler();
myHandler.sleep(10);
frame.setOnClickListener(new OnClickListener() {
@Override
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;
@Override
public void handleMessage(Message msg) {
i++;
show(i % 7);
sleep(80);
}
public void sleep(long delayMillis) {
if (flag) {
this.sendMessageDelayed(obtainMessage(10), delayMillis);
}
}
}
private void show(int j) {
Drawable pic[] = new Drawable[7];
pic[0] = this.getResources().getDrawable(R.drawable.s1);
pic[1] = this.getResources().getDrawable(R.drawable.s2);
pic[2] = this.getResources().getDrawable(R.drawable.s3);
pic[3] = this.getResources().getDrawable(R.drawable.s4);
pic[4] = this.getResources().getDrawable(R.drawable.s5);
pic[5] = this.getResources().getDrawable(R.drawable.s6);
pic[6] = this.getResources().getDrawable(R.drawable.s7);
frame.setForeground(pic[j]);
}
以上代码实现的效果为:
七种颜色逐次闪现。
注意:在创建布局文件的时候,其名称中不得含有大写英文字母。否则,程序将报错。