android的线性布局和帧布局的入门

什么是布局
就是把界面中的控件按照某种规律摆放到指定的位置
布局的二种实现
代码
xml配置文件：res/layout目录下
注：也可以同时使用xml和代码
布局的基本属性
取值范围
{ //效果是一样的
fill_parent//过时
match_parent//不过时
}

固定值
{
dp 控件大小
sp 文字大小
}

padding 内补丁
margin 外补丁

android:gravity和android:layout_gravity
用一个TextView、文字、背景查看效果最方便
android:gravity:控件内部的元素
android:layout_gravity：控件所在父元素的位置
但父元素的水平和垂直设置的优先度更高
常见布局
线性布局(重点) LinearLayout
表格布局(几乎不用)
帧布局

绝对布局
相对布局 RelativeLayout
网格布局
RTL(几乎不用)
案例1：padding内补丁、margin外补丁的区别，以及与内容
match_parent/fill_parent
padding/margin
background
wrap_content
案例2：线性布局(重点)
orientation=“vertical|horizontal”
android:gravity:控件内部的元素(对内有效)
案例3:android:gravity和android:layout_gravity的区别
7.1 android:gravity:控件内部的元素(对内有效)
android:layout_gravity：控件所在父元素的位置(对外生效)
7.2 特殊情况
父元素的android:orientation=“vertical”，layout_gravity 水平设置的相关属性有效
父元素的android:orientation=“horizontal”,layout_gravity 垂直设置的相关属性有效
案例4：LinearLayout布局中Layout_weight属性的作用
8.1 首先声明只有在Linearlayout中，layout_weight属性才有效。
8.2 它是用来指定(剩余空闲空间)的分割比例，而非按比例分配整个空间。
8.3 另外android:layout_weight会引起争议，是因为在设置该属性的同时，
设置android:layout_width为wrap_content和match_parent会造成两种截然相反的效果。
8.4 如果想用layout_weight平均分配空间，正确方式是将layout_width(或layout_height)设置为0dp,
再通过layout_weight按比例分配空间
注：关键点在于搞清楚什么是剩余空闲空间

例：<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="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="按钮1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_marginLeft="210dp"
            android:layout_height="wrap_content"
            android:text="按钮2"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">



        <Button
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            android:layout_marginTop="160dp"
            android:layout_marginLeft="150dp"
            android:text="按钮3"/>
    </LinearLayout>
    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:text="按钮4"/>
        <Button
            android:layout_width="wrap_content"

            android:layout_height="wrap_content"
            android:layout_marginTop="200dp"
            android:layout_marginLeft="210dp"
            android:text="按钮5"/>
    </LinearLayout>
</LinearLayout>

//效果图如下：
在这里插入图片描述

案例5：帧布局(就好象一张张卡片堆叠上去，后面会盖出前面的)
FrameLayout
注：帧布局有点类似于awt的CardLayout都是把组件一个一个叠加到一起，
但CardLayout能将下面的组件移上来，但FrameLayout没有提供此功能

例：<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_margin="30dp"
    android:padding="30dp"

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_margin="30dp"
        android:padding="30dp"

        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimaryDark"

            android:text="a"/>


    </FrameLayout>


</FrameLayout>

ImageView 
  src
  scaleType="fitXY" XY方向拉伸

 android:scaleType="fitXY"
        android:src="@drawable/img18"

//效果图如下
在这里插入图片描述

android的线性布局和帧布局的入门

猜你喜欢