您的位置:首页 > 移动开发 > Android开发

android五大布局对象

2012-11-25 21:10 435 查看
1.RelativeLayout :相对布局类

允许子元素指定他们相对于其它元素或父元素的位置(通过ID 指定)。

android:layout_below="@id/text" 在布局id为text的下面

android:layout_above:在某view的之上

android:layout_marginLeft="20dp":表示距离视图左面20dp的位置,及坐标(20,0),

android:layout_marginTop="50dp":[b]表示距离视图上沿50dp的位置及(0,50),[/b]

还可设置right,bottom的值

android:layout_toLeftOf="@id/ok": 表示在ok组件的左侧

如下效果:





xml文件布局代码:

<?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="match_parent" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="50dp"
android:text="昵称"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#243447" />

<EditText
android:id="@+id/edit"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginTop="50dp" >
</EditText>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="140dp"
android:text="时间"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TimePicker
android:id="@+id/timePicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="80dp"
android:layout_marginTop="140dp" />

</RelativeLayout>

2.LinearLayout:线性布局

可以设置布局的方向orientation:水平和垂直,

所有的子元素是按顺序水平或垂直排列,高度不同的也会布局在同行或同列,也可以设置该元素在行或列的权重gravity,子元素可以嵌套多个LinearLayout

效果图:





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="match_parent"
android:orientation="horizontal" >
<!-- 第一列显示图片 -->
<ImageView
android:id="@+id/image"
android:layout_width="60dp"
android:layout_height="60dp"
android:padding="10dp" />
<!-- 第二列显示文本 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- 第一行水平显示昵称、发表时间 -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- 昵称 -->
<TextView
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- 发表时间 -->
<TextView
android:id="@+id/text2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="right" />
</LinearLayout>
<!-- 第二行显示发表内容 -->
<TextView
android:id="@+id/text3"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>

</LinearLayout>


3.AbsoluteLayout:绝对布局

可以指定子元素准确的x/y坐标值,并显示在屏幕上。(0, 0)为左上角,当向下或向右移动时,坐标值将变大

效果:





xml代码:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dp"
android:layout_y="40dp"
android:text="昵称"
android:textSize="23dp" />

<EditText
android:id="@+id/name"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_x="80dp"
android:layout_y="40dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="20dp"
android:layout_y="120dp"
android:text="密码"
android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
android:id="@+id/pass"
android:layout_width="180dp"
android:layout_height="wrap_content"
android:layout_x="80dp"
android:layout_y="120dp" />

</AbsoluteLayout>

4.TableLayout:表格布局

表格式的布局,把[b]包含的元素以行和列的形式排列[/b]

效果图:





xml文件代码编写

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >

<TableRow>

<TextView
android:gravity="right"
android:padding="3dip"
android:text="用户名:"
android:textStyle="bold" />

<EditText
android:id="@+id/username"
android:padding="3dip"
android:scrollHorizontally="true" />
</TableRow>

<TableRow>

<TextView
android:gravity="right"
android:padding="3dip"
android:text="密码:"
android:textStyle="bold" />

<EditText
android:id="@+id/pass"
android:padding="3dip"
android:password="true"
android:scrollHorizontally="true" />
</TableRow>

<TableRow android:gravity="right" >

<Button
android:id="@+id/cancel"
android:text="取消" />

<Button
android:id="@+id/login"
android:text="登录" />
</TableRow>

</TableLayout>

5.FrameLayout:框架布局

所有的元素都被放置在最左上的区域,无法为这些元素指定确切的位置,多个元素,后面的元素会重叠在前一个元素上,最后的元素在最上面一层。

效果图:



布局文件代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >

<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="@drawable/aa" />

<EditText
android:id="@+id/username"
android:layout_width="fill_parent"
android:layout_height="60dp" >
</EditText>

<Button
android:id="@+id/login"
android:layout_width="100dp"
android:layout_height="80dp"
android:text="登录" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="见到你很高兴"
android:textStyle="bold" />

</FrameLayout>

从效果图可看出,图片在最下面一层,接着是输入文本框、按钮、最上面一层是文本域
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐