Android中的几种基本布局

作者: 小牧头 | 来源:发表于2017-10-21 23:47 被阅读0次

Android 界面的基本属性
Android中的几种基本布局
Android 布局优化的几种方法
Ios-自动布局
初识CSS布局
css的几个布局
Android 常见布局
Android ConstraintLayout百分比布局-适配
Android中的WebView详解
想要深入学习Android性能优化？看完这篇直接让你一步到位

布局是一种可以放置很多控件的容器,在容器中的控件会按照容器规定的布局规则来放置自己,系统有很多这样的容器,但是最基本的布局只有几种,下面我们就来依次学习.
1.LinearLayout
线性布局:它所包含的控件会按照线性方向放置,它可以设置两种方向,水平和垂直,当然还有一个重要的layout_weight属性,会按照指定的比例来设置大小,在适配上起到很大的作用.
垂直方向:设置的上下布局属性没有作用.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.dwj.demob.MainActivity">

    <Button
        android:layout_gravity="start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first" />

    <Button
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second" />

    <Button
        android:layout_gravity="end"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third" />

</LinearLayout>

效果:

2017-10-21 21-03-42屏幕截图.png

水平方向:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.dwj.demob.MainActivity">

    <Button
        android:layout_gravity="top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first" />

    <Button
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="second" />

    <Button
        android:layout_gravity="bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="third" />

</LinearLayout>

效果:

2017-10-21 21-07-37屏幕截图.png

layout_weight属性:用屏幕的剩余空间来按比例分配控件的大小

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context="com.dwj.demob.MainActivity">

    <Button
        android:layout_gravity="top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="first" />

    <EditText
        android:layout_marginStart="5dp"
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

</LinearLayout>

效果:

2017-10-21 21-11-20屏幕截图.png

2,RelativeLayout:
相对布局:没有指定特殊的排列方式,位置的定位是相对某一个目标来设定,比如相对于父控件,或者相对于某一个子控件.在没有指定相对位置的情况下,子控件重叠放置.
相对目标设定为父控件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dwj.demob.ActivityA">

    <Button
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center" />

    <Button
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="topStart" />

    <Button
        android:layout_alignParentTop="true"
        android:layout_alignParentEnd="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="topEnd" />

    <Button
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BottomStart" />

    <Button
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BottomEnd" />
</RelativeLayout>

效果:

2017-10-21 22-23-46屏幕截图.png

相对目标设置为某一个子控件:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dwj.demob.ActivityA">

    <Button
        android:id="@+id/center"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="center" />

    <Button
        android:id="@+id/topStart"
        android:layout_toStartOf="@id/center"
        android:layout_above="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="topStart" />

    <Button
        android:id="@+id/topEnd"
        android:layout_toEndOf="@id/center"
        android:layout_above="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="topEnd" />


    <Button
        android:layout_below="@id/center"
        android:layout_alignStart="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="below" />

    <Button
        android:layout_below="@id/topEnd"
        android:layout_toEndOf="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="right" />

    <Button
        android:layout_below="@id/topStart"
        android:layout_toStartOf="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="left" />

    <Button
        android:layout_above="@id/center"
        android:layout_alignStart="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="top" />


    <Button
        android:layout_toStartOf="@id/center"
        android:layout_below="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BotStart" />

    <Button
        android:layout_below="@id/center"
        android:layout_toEndOf="@id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="BotEnd" />

</RelativeLayout>

效果图:

2017-10-21 22-44-38屏幕截图.png

3,FrameLayout:
帧布局:子控件的默认布局是重叠在一起.定义布局的属性和相对布局相似,使用场景主要是作为放置fragment的容器,因为是和相对布局设置相似,就不贴代码了.
4,TableLayout:
表格布局:子节点是TableRow,每一个子节点表示一行,并且子节点中的控件不能设置宽度.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="1" //拉伸的行数,自适应屏幕宽度
    tools:context="com.dwj.demob.ActivityC">

    <TableRow>
        <TextView
            android:layout_width="wrap_content"
            android:text="Account"/>

        <EditText
            android:hint="input account"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow>
        <TextView
            android:text="PassWord"
            android:layout_height="wrap_content"/>

        <EditText
            android:hint="input pass word"
            android:layout_height="wrap_content"/>
    </TableRow>

    <TableRow>
        <Button
            android:layout_span="2" //合并单元格
            android:text="enter"
            android:layout_height="wrap_content"/>
    </TableRow>
</TableLayout>

效果:

2017-10-21 23-12-56屏幕截图.png

5,Percent:
百分比布局:这是support包新添加的布局,综合类似线性布局的weight属性同时也有相对布局属性的布局,可以直接设定控件占屏幕的百分比大小,需要在build gradle中引入:compile 'com.android.support:percent:24.2.1'

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.dwj.demob.ActivityD">

    <Button
        android:layout_alignParentStart="true"
        android:text="first"
        android:gravity="center"
        app:layout_widthPercent ="20%"
        android:layout_height="wrap_content"/>

    <Button
        android:layout_alignParentEnd="true"
        android:text="second"
        android:gravity="center"
        app:layout_widthPercent ="80%"
        android:layout_height="wrap_content"/>

</android.support.percent.PercentRelativeLayout>

效果图:

2017-10-21 23-39-56屏幕截图.png

当然还有PercentFrameLayout控件,布局功能和PercentRelativeLayout相似.
以上就是Android中常用的几种布局的用法.

river-2813346__340.jpg

Android 界面的基本属性
Android 界面的常用基本属性布局：在 android 中我们常用的布局方式有这么几种： 1.Linear...
Android中的几种基本布局
布局是一种可以放置很多控件的容器,在容器中的控件会按照容器规定的布局规则来放置自己,系统有很多这样的容器,但是最基...
Android 布局优化的几种方法
Android 布局优化的几种方法在布局优化中，Androi的官方提到了这三种布局、、
Ios-自动布局
以前做android的时候已经觉得布局方便的不行，几种简单的布局容器，再加上停靠和weight，基本所有需求都能满...
初识CSS布局
本文将简单学习几种基本的CSS布局方式：左右布局，左中右布局，水平居中，垂直居中。左右布局本文只介绍两种最基础...
css的几个布局
CSS布局的方法有很多种，这里介绍一下基本的几种布局方式 1、左右布局 1.png1.1.png 2、左中右布局 ...
Android 常见布局
基本理论 Android六大基本布局分别是：线性布局LinearLayout、表格布局TableLayout、相对...
Android ConstraintLayout百分比布局-适配
1.1 简介除了几种传统的Android的布局方式，Google 在Android Studio 2.3发布以后，...
Android中的WebView详解
Android中的WebView详解 WebView详解基本用法布局文件配置WebView WebView加载...
想要深入学习Android性能优化？看完这篇直接让你一步到位
Android性能优化 Android中的性能优化基本上可以分为以下几个方面： ● 布局优化 ● 网络优化 ● 内...