Android-UI布局1

最新推荐文章于 2024-05-14 12:13:25 发布

原创最新推荐文章于 2024-05-14 12:13:25 发布 · 406 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android

本文详细介绍了四种常见的Android布局：LinearLayout、RelativeLayout、TableLayout和FrameLayout，包括它们的XML语法、运行结果及核心特性的解释。

LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个按钮"
        android:id="@+id/button1"
        android:textColor="#0000ff"
        android:layout_weight="1"
         />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个按钮"
        android:id="@+id/button2"
        android:textColor="#0000ff"
        android:layout_weight="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三个按钮"
        android:id="@+id/button3"
        android:textColor="#0000ff"
        android:layout_weight="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第四个按钮"
        android:id="@+id/button4"
        android:textColor="#0000ff"
        android:layout_weight="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第五个按钮"
        android:id="@+id/button5"
        android:textColor="#0000ff"
        android:layout_weight="1"
        />

</LinearLayout>

运行结果：

LinearLayout子元素是以线性方式水平布局的。

RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <TextView
        android:id="@+id/label"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="请输入信息：" />
    <EditText
        android:id="@+id/entry"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry"
        android:layout_alignParentRight="true"
        android:text="确定"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok"
        android:text="取消"/>
</RelativeLayout>

运行结果：

RelativeLayout允许子元素指定它们相对于其他元素或父元素的位置（通过ID指定）可以用右对齐、上下对齐或置于屏幕中央的形式来排列两个元素。

这些属性很简单，就是英文单词的直译。

TableLayout

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

    <TableRow>
        <Button
            android:id="@+id/button1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第一个按钮"
            android:layout_column="0"
            />
        <Button
            android:id="@+id/button2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="第二个按钮"
            android:layout_column="1"
            />
    </TableRow>
    <TableRow>
        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第三个按钮"
            android:layout_column="1"
            />
        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第四个按钮"
            android:layout_column="1"
            />
        </TableRow>
    <TableRow>
        <Button
            android:id="@+id/button5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第五个按钮"
            android:layout_column="3"
            />
    </TableRow>
</TableLayout>

运行结果：

表格布局通常用于将子元素放入行和列中，不显示行、列或单元格边界线。

android:shrinkColumns="0,1,2" ，表示表格的第1,2,3列的内容是收缩以适合屏幕，不会挤出屏幕。

android:setColumnCollapsed(int,boolean)，作用是设置表格的列是否隐藏。

android:setStretchAllColumns(boolean)，作用是设置表格的列是否拉伸。

FrameLayout

<?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" >
<TextView
    android:text="big"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="50pt"/>
    <TextView
        android:text="middle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20pt"/>
    <TextView
        android:text="small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="10pt"/>

</FrameLayout>

运行结果：