Android五大布局的使用及其它

最新推荐文章于 2024-06-17 14:21:30 发布

海纳百川叶

最新推荐文章于 2024-06-17 14:21:30 发布

阅读量647

点赞数

分类专栏： Android学习文章标签： android Layout 五大布局

本文链接：https://blog.csdn.net/CSDNYUANDAIMAXUEXI/article/details/48438913

版权

Android学习专栏收录该内容

56 篇文章 0 订阅

订阅专栏

几大布局的使用：

android.widget.AbsoluteLayout 绝对布局

android.widget.RelativeLayout 相对布局

android.widget.LinearLayout 线性布局

android.widget.TableLayout 表格布局

android.widget.FrameLayout 层布局

android.widget.GridLayout网格布局

android.widget.ScrollView滚动视图

使用频率：

1.LinearLayout

2.FrameLayout

3.RelativeLayout

4.TableLayout

5.AbsoluteLayout

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <Button
            android:id="@+id/LinearLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="LinearLayout"
            android:textSize="25dp"
            />
    <Button
            android:id="@+id/TableLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TableLayout"
            android:textSize="25dp"
            />
    <Button
            android:id="@+id/RelativeLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="RelativeLayout"
            android:textSize="25dp"
            />
    <Button
            android:id="@+id/AbsoluteLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="AbsoluteLayout"
            android:textSize="25dp"
            />
    <Button
            android:id="@+id/FrameLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="FrameLayout"
            android:textSize="25dp"
            />
    <Button
            android:id="@+id/GridLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="GridLayout"
            android:textSize="25dp"
            />
    <Button
            android:id="@+id/ScrollView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="ScrollView"
            android:textSize="25dp"
            />
</LinearLayout>

LinearLayout
是线性布局，通过orientation设置：垂直（vertical），水平（horizontal）， android:layout_weight="1" 设置比重

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入注册用户名"
            />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入密码"
            />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请再次输入密码"
            />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入您的邮箱"
            />
    <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入您的手机"
            />
    <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="注册"
            />




</LinearLayout>

TableLayout布局

TableLayout其实就是在LinearLayout基础上进一步扩展，用LinearLayout合成一个横向+纵向的特有布局。

特有参数

android:collapseColumns="0,1"折叠

android:shrinkColumns="0,1" 收缩

android:stretchColumns="0,1" 拉伸

android:layout_span="3" 表示两个单元格合并

TableRow表格布局，应用场景信息的列表显示，已经淘汰，当你的数据是动态显示的时候，完全没有，现在的数据有不是动态显示的吗
TableRow代表表格中的四行，每行可以设置显示水平或者垂直
表格布局
表格布局是一个ViewGroup以表格显示它的子视图（view）元素，即行和列标识一个视图的位置。
表格布局常用的属性如下：
android:collapseColumns：隐藏指定的列
android:shrinkColumns：收缩指定的列以适合屏幕，不会挤出屏幕
android:stretchColumns：尽量把指定的列填充空白部分
android:layout_column:控件放在指定的列
android:layout_span:该控件所跨越的列数

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:orientation="vertical"
             android:layout_width="match_parent"
             android:layout_height="match_parent">
<TableRow android:orientation="vertical">
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20dp"
            android:layout_weight="1"
            android:text="学生姓名"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20dp"
            android:layout_weight="1"
            android:text="数学成绩"/>
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textSize="20dp"
            android:layout_weight="1"
            android:text="语文成绩"/>

</TableRow>
    <TableRow android:orientation="vertical">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="20dp"
                android:layout_weight="1"
                android:text="张三"/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="20dp"
                android:layout_weight="1"
                android:text="90"/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="20dp"
                android:layout_weight="1"
                android:text="96"/>

    </TableRow>
    <TableRow android:orientation="vertical">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="20dp"
                android:layout_weight="1"
                android:text="李四"/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="20dp"
                android:layout_weight="1"
                android:text="85"/>
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:textSize="20dp"
                android:layout_weight="1"
                android:text="99"/>

    </TableRow>
</TableLayout><span style="font-size: 18pt;">
</span>


RelativeLayout相对布局 牵一发而动全身的布局

// 相对于给定ID控件
android:layout_above 将该控件的底部置于给定ID的控件之上;
android:layout_below 将该控件的底部置于给定ID的控件之下;
android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
android:layout_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;
android:layout_alignBaseline 将该控件的baseline与给定ID的baseline对齐;
android:layout_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;
android:layout_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;
android:layout_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;
android:layout_alignRight 将该控件的右边缘与给定ID的右边缘对齐;
// 相对于父组件
android:layout_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;
android:layout_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;
android:layout_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;
android:layout_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;
// 居中
android:layout_centerHorizontal 如果为true,将该控件的置于水平居中;
android:layout_centerVertical 如果为true,将该控件的置于垂直居中;
android:layout_centerInParent 如果为true,将该控件的置于父控件的中央;
// 指定移动像素
//相对于父控件
android:layout_marginTop 上偏移的值;
android:layout_marginBottom 下偏移的值;
android:layout_marginLeft 　　左偏移的值;

android:layout_marginRight 　右偏移的值;

<?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">
<EditText
        android:id="@+id/etUserName"
        android:layout_width="match_parent"
          android:layout_height="wrap_content"
        android:hint="请输入用户名"/>
    <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/etUserName"
            android:hint="请输入用密码"/>
    <Button
            android:id="@+id/btnExit"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/etPassword"
            android:layout_alignParentRight="true"
            android:layout_marginRight="22dp"
            android:text="退出"/>
    <Button
            android:id="@+id/btnLogin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/etPassword"
            android:layout_toLeftOf="@id/btnExit"
            android:text="登录"/>
</RelativeLayout>

AbsoluteLayout绝对布局使用较少，基本淘汰
// 绝对布局通过指定子组件的确切X,Y坐标来确定组件的位置，
// 在Android2.0 API文档中标明该类已经过期，可以使用FrameLayout或者RelativeLayout来代替。
// 所以这里不再详细介绍。

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
<TextView
        android:layout_width="wrap_content"
          android:layout_height="wrap_content"
        android:layout_x="46dp"
        android:layout_y="14dp"
        android:text="软件开发模型图"
        android:textSize="30dp"
        />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="223dp"
            android:layout_y="120dp"
            android:text="运行"
            android:textSize="30dp"
            />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="190dp"
            android:layout_y="165dp"
            android:text="测试"
            android:textSize="30dp"
            />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="164dp"
            android:layout_y="205dp"
            android:text="编码"
            android:textSize="30dp"
            />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="112dp"
            android:layout_y="242dp"
            android:text="设计"
            android:textSize="30dp"
            />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="69dp"
            android:layout_y="287dp"
            android:text="需求"
            android:textSize="30dp"
            />
    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_x="46dp"
            android:layout_y="14dp"
            android:text="软件开发模型图"
            android:textSize="30dp"
            />
</AbsoluteLayout>

FrameLayout→多在游戏中使用，控件叠加

FrameLayout是最厚的布局。

FrameLayout中添加的View都只能从左上角开始，然后一个一个叠加起来。说白了就是用来叠加其他布局用的。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="fill_parent"
             android:layout_height="fill_parent">
    <TextView android:id="@+id/textview1"
              android:layout_width="300dp"
              android:layout_height="300dp"
              android:layout_gravity="center"
              android:background="#FF33ffff"/>
    <TextView android:id="@+id/textview2"
              android:layout_width="240dp"
              android:layout_height="240dp"
              android:layout_gravity="center"
              android:background="#FF33ccff"/>
    <TextView android:id="@+id/textview3"
              android:layout_width="180dp"
              android:layout_height="180dp"
              android:layout_gravity="center"
              android:background="#FF3399ff"/>
    <TextView android:id="@+id/textview4"
              android:layout_width="120dp"
              android:layout_height="120dp"
              android:layout_gravity="center"
              android:background="#FF3366ff"/>
    <TextView android:id="@+id/textview5"
              android:layout_width="60dp"
              android:layout_height="60dp"
              android:layout_gravity="center"
              android:background="#FF3300ff"/>
</FrameLayout>

GridLayout网格布局：
可以将屏幕的大小分成大小不同的一个一个格子，然后把控件一个一个的放进去，要想使用GridLayout，工程的android:minSdkVersion和android:targetSdkVersion
都必须大于等于APILevel14

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
        android:columnCount="4">
<TextView
        android:layout_width="150dp"
        android:layout_height="60dp"
        android:layout_columnSpan="2"
        android:layout_gravity="left"
        android:background="#ff08b0ff"
        android:gravity="center"
        android:text="男装"
        android:width="50dp"
        />
    <TextView
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_columnSpan="2"
            android:background="#ff11ffc5"
            android:gravity="center"
            android:text="女装"
            android:width="50dp"
            />
    <TextView
            android:layout_width="75dp"
            android:layout_height="60dp"
            android:layout_gravity="top"
            android:background="#ffff60a9"
            android:gravity="center"
            android:text="童装"
            android:width="25dp"
            />
    <TextView
            android:layout_width="150dp"
            android:layout_height="60dp"
            android:layout_columnSpan="2"
            android:background="#ffeeff52"
            android:gravity="center"
            android:text="流行装"
            android:width="50dp"
            />
    <TextView
            android:layout_width="75dp"
            android:layout_height="60dp"
            android:background="#ffc570ff"
            android:gravity="center"
            android:text="男装"
            android:width="25dp"
            />
</GridLayout>

ScrollView滚动视图
注意使用限制：
ScrollView中只能有一个View，本例张只包含一个TextView控件没有问题，
如果亚欧页面中包含多个控件的话，就会出问题的，解决方法：
ScrollView布局中嵌套LinearLayout布局，把需要放置的多个控件放到LinearLayout中,如home_page.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
<TextView
        android:layout_width="match_parent"
          android:layout_height="match_parent"
        android:text="@string/tv_content"
        android:textSize="20dp"
        />
</ScrollView>

三字经定义在res/values/strings.xml中

java代码：

package com.ncsyeyy.YeyyLayout;


import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;


public class MyActivity extends Activity {


    private Button btnLL;
    private Button btnTL;
    private Button btnRL;
    private Button btnAL;
    private Button btnFL;
    private Button btnGL;
    private Button btnSV;


    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        findView();
        setListener();
    }
    private void setListener() {
        btnLL.setOnClickListener(listener);
        btnTL.setOnClickListener(listener);
        btnRL.setOnClickListener(listener);
        btnAL.setOnClickListener(listener);
        btnFL.setOnClickListener(listener);
        btnGL.setOnClickListener(listener);
        btnSV.setOnClickListener(listener);
    }
    View.OnClickListener listener=new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.LinearLayout:
                    setTitle("线性布局");
                    setContentView(R.layout.linearlayout);
                    break;
                case R.id.TableLayout:
                    setTitle("表格布局");
                    setContentView(R.layout.tablelayout);
                    break;
                case R.id.RelativeLayout:
                    setTitle("相对布局");
                    setContentView(R.layout.relativelayout);
                    break;
                case R.id.AbsoluteLayout:
                    setTitle("绝对布局");
                    setContentView(R.layout.absolutelayout);
                    break;
                case R.id.FrameLayout:
                    setTitle("帧布局");
                    setContentView(R.layout.framelayout);
                    break;
                case R.id.GridLayout:
                    setTitle("网格布局");
                    setContentView(R.layout.gridlayout);
                    break;
                case R.id.ScrollView:
                    setTitle("滚动视图");
                    setContentView(R.layout.scrollview);
                    break;
            }
        }


    };
    private void findView() {
        btnLL = (Button) findViewById(R.id.LinearLayout);//线性布局
        btnTL = (Button) findViewById(R.id.TableLayout);//表格布局
        btnRL = (Button) findViewById(R.id.RelativeLayout);//相对布局
        btnAL = (Button) findViewById(R.id.AbsoluteLayout);//绝对布局
        btnFL = (Button) findViewById(R.id.FrameLayout);//帧布局
        btnGL = (Button) findViewById(R.id.GridLayout);//网格布局
        btnSV = (Button) findViewById(R.id.ScrollView);//滚动视图
    }


//    listener = new View.OnClickListener() {
//        Intent intent;
//        @Override
//        public void onClick(View v) {
//            switch (v.getId()){
//                case R.id.LinearLayout:
                        setTitle("线性布局");
                        setContentView(R.layout.linearlayout);
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this,LinearLayoutActivity.class);
//                    startActivity(intent);
//                    break;
//                case R.id.TableLayout:
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this, TableLayoutActivity.class);
//                    startActivity(intent);
//                    break;
//                case R.id.RelativeLayout:
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this, RelativeLayoutActivity.class);
//                    startActivity(intent);
//                    break;
//                case R.id.AbsoluteLayout:
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this, AbsoluteLayoutActivity.class);
//                    startActivity(intent);
//                    break;
//                case R.id.FrameLayout:
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this, FramelaLayoutActivity.class);
//                    startActivity(intent);
//                    break;
//                case R.id.GridLayout:
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this, GridLayoutActivity.class);
//                    startActivity(intent);
//                    break;
//                case R.id.ScrollView:
//                    intent=new Intent();
//                    intent.setClass(MyActivity.this, ScrollViewActivity.class);
//                    startActivity(intent);
//                    break;
//            }
//        }
//    };
}

布局的综合应用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="wrap_content">
    <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_weight="4">
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="1"
                    />
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="2"
                    />
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="3"
                    />
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="-"
                    />
        </LinearLayout>
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="0"
                    />
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="."
                    />
            <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="+"
                    />
        </LinearLayout>
    </LinearLayout>
    <Button
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="/"
            />


</LinearLayout>

源码地址：http://download.csdn.net/detail/csdnyuandaimaxuexi/9105545

海纳百川叶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Android五大布局的使用及其它

几大布局的使用：android.widget.AbsoluteLayout 绝对布局android.widget.RelativeLayout 相对布局android.widget.LinearLayout 线性布局android.widget.TableLayout 表格布局android.widget.FrameLayout 层布局android
复制链接

扫一扫

专栏目录