布局

Posted on 9 月 30, 2026 by

四种基本布局

布局是一种用于放置很多控件的容器，它可以按照一定的归类调整内部控件的位置。

从而编写出精美的界面。

布局的内部也可以嵌套布局。

布局-线性布局LinearLayout

线性布局，非常常用

如名字一样，它所包含的控件会在线性方向上面依次排列。

通过android:orientation属性 可以指定排列方向vertical和horizontal

基本语法
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="veritical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

</LinearLayout>Code language: HTML, XML (xml)

下面我们来体会一下

我们创建一个布局 修改主活动 使用这个布局

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="veritical"
    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="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        />
</LinearLayout>Code language: HTML, XML (xml)

主活动加载这个布局

setContentView(R.layout.test_linear);

如果改为垂直排序

android:orientation=”horizontal”

布局-LinearLayout子控件的对其方式

通过设置android:layout_gravity 来指定控件的布局对其方式。

不过当LinearLayout的排序为horizontal时 只有垂直方向上的对齐方式才会生效。因为此时水平方向上的长度是不固定的。

<?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="match_parent"
    >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2"
        android:layout_gravity="center"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3"
        android:layout_gravity="bottom"
        />
</LinearLayout>Code language: HTML, XML (xml)

也就是说 当我们的布局是Horizontal排列的时候 上中下的控件排序才有效

布局-LinearLayout控件占屏幕比例

我们如果把子控件的width设为0dp的话

那么我们可以通过设置

android:layout_weight=”n”的方式来设置控件占布局的比例

P108

另外 我们也可以一个是使用weight

一个不使用

这样 另外一个 比如我们这里的按钮 还是保留原来的宽度。这种写法非常适合

<?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="match_parent">
    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="1"        />
    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="wrap_content"
        android:text="2"        />
    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:text="3"        />
</LinearLayout>Code language: HTML, XML (xml)

按钮宽度根据内容来 然后编辑框使用生下来的

<?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="match_parent">
    <EditText
        android:layout_width="0dp"
        android:layout_weight="2"
        android:layout_height="wrap_content" />
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1"        />

</LinearLayout>Code language: HTML, XML (xml)

布局-RelativeLayout相对布局

RelativeLayout又称相对布局

它可以通过相对定位的方式让控件出现在布局的任何位置。

正因为这样RelativeLayout的属性很多。

我们可以设置控件的

android:layout_alignParentLeft

android:layout_alignParentTop

android:layout_alignParentRight

android:layout_alignParentBottom

android:layout_alignParentCenterInParent 这五个属性来设置控件的位置 左 上 右 下 中

<?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:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="1"        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="2"        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="3"        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="4"        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="5"        />

</RelativeLayout>Code language: HTML, XML (xml)
设置相对于控件位置

通过设置android:Layout_above=”@id/button3″

可以让一个一个控件位于另外一个控件的上方。

然后通过设置Layout_below 来设置一个控件位于另外一个控件的下方

通过设置Layout_toLeftOf 表示一个控件位于另外一个控件的左侧。

通过设置layout_toRightOf表示一个控件位于另外一个控件的右侧。

注意，当一个控件需要设置另外一个控件的位置时候 另外一个控件 需要在该控件的前面。

把button1 设为中间 并且写在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:layout_centerInParent="true"
        android:text="1"        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button1"
        android:layout_toLeftOf="@id/button1"
        android:text="2"        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:text="3"        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toRightOf="@id/button1"
        android:text="4"        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button1"
        android:layout_toLeftOf="@id/button1"
        android:text="5"        />

</RelativeLayout>Code language: HTML, XML (xml)

布局-FrameLayout帧布局

比前面两种布局要简单

相对应用场景也少一些。

这种布局没有方便的方位方式，所有的控件都会默认摆放在布局的左上角。

我们来试一下，添加一个TextView和一个ImageView

可以通过使用layout_gravity属性来指定布局中的对其方式。

<?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">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/img1"    />
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="foxdevelop.com"
        android:layout_gravity="right"
        />
</FrameLayout>Code language: HTML, XML (xml)

扩展布局-百分比布局

以上三种布局从android1.0开始就有了。

一直沿用至今。

但是只有LinearLayout支持使用layout_weight来指定控件的大小的功能。其他两种不可以。

比如我们如果想使用RelativeLayout来实现两个按钮的平分功能比较难。

不过好在android新版本中7.0 加入了百分比布局。

这种布局只是在RelativeLayout和FrameLayout中加入Percent前缀。

只是对前面两种布局的扩展。

我们需要在build.gradle中添加百分比布局的依赖。

打开app/build.gradle文件

在dependencieszhong 中加入

compile ‘com.android.support:percent:27.1.1’

当我们修改了build.gradle后 gradle会开始进行同步。新添加百分比布局库到项目中，这些操作不需要我们来。

然后我们修改布局为

<android.support.percent.PercentFrameLayout

然后给子控件设置

app:layout_widthPercent=”50%”

app:layout_heightPercent=”50%”

同时 我们还可以继续设置子控件的layout_gravity属性

自定义控件和引入布局文件

控件和布局的继承机构图

我们用的所有控件都是直接或者间接从View继承。

所有的布局都是直接或者间接从ViewGroup继承。

View是Android的最基本的一个UI组件。

它可以在屏幕上绘制一块矩形区域，并响应这块区域的各种事件。

引入布局

iphone的应用界面基本一个样，左上角返回，右上角标题。

我们模仿它。

现在对于我们来说 加一个按钮和一个textview应该不难。

但是如果我们所有的页面都这样 那就很多重复代码了。

我们可以使用引入布局的方式来解决这个问题。

新建一个justtitle.xml

我们新建一个项目 TestCustom

然后添加一个叫justtitle.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="wrap_content"
    android:background="#137e11"
    >
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:text="返回"
        android:textColor="#fff"
        android:background="@null"

        />
    <TextView
        android:id="@+id/textview"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="center"
        android:text="标题"
        android:textSize="18dp"
        android:textColor="#fff"
        android:background="@null"
        android:layout_margin="5dp"
        />
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="..."
        android:layout_margin="5dp"
        android:background="@null"
        />
</LinearLayout>Code language: HTML, XML (xml)

然后修改主活动视图 代码如下

记得要使用include 引入我们的justtitle.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"
    >
    <include layout="@layout/justtitle"/>
</LinearLayout>Code language: HTML, XML (xml)

添加一个basicactivity 重写oncreate

然后 隐藏原来的actionbar

package com.foxdevelop.www.testcustom;

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;

public class BasicActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar!=null)
        {
            actionBar.hide();
        }
    }
}Code language: JavaScript (javascript)

自定义布局控件的使用

为了更好实现返回功能

我们不可能每个活动都写一份返回的代码

为了更好实现 我们自定义一个我们自己的Layout 继承LinearLayout

我们叫他为TitleLayout

在自定义的布局的构造函数里面 我们可以给自定义布局对应的按钮控件 增加事件监听器

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context, AttributeSet attributes) {
        super(context,attributes);
        //指定使用的视图
        LayoutInflater.from(context).inflate(R.layout.justtitle,this);

        //给返回按钮注册事件
        Button button1 = (Button)findViewById(R.id.button1);
        button1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Activity)getContext()).finish(); //返回其实就是注销当前活动
            }
        });

        //给编辑按钮注册事件
        Button button = (Button)findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(),"显示菜单",Toast.LENGTH_LONG).show();
            }
        });
    }
}Code language: JavaScript (javascript)
<?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">
    <com.foxdevelop.www.testcustom.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>Code language: HTML, XML (xml)
Posted in Android基础课程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注