Android——布局
本文最后更新于298 天前,其中的信息可能已经过时,如有错误请发送邮件到big_fw@foxmail.com

布局是指对界面结构的全面规划与安排,通过API中提供的各种布局能够快速的完成对于界面的设计。

1.线性布局(LinearLayout)

重要属性

  • android:orientation:方向
  • android:layout_weight:权重
  • android:layout_gravity:重力
<?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"
    android:layout_margin="20dp"
    android:padding="20dp">

    <!-- vertical 垂直的 horizontal 竖直的-->
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="你好阿"
        android:background="#ff0000"
        android:layout_weight="1"
        android:layout_gravity="bottom"/>
    
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="你好阿"
        android:background="#ff00ff"
        android:layout_weight="1"/>
    
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="你好阿"
        android:background="#0000ff"
        android:layout_weight="1"/>


</LinearLayout>
<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:background="#333333"
        android:paddingLeft="15dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="<"
            android:textColor="#ffffff"
            android:textSize="30dp"
            android:layout_gravity="center"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="彭于晏"
            android:layout_weight="1"
            android:textColor="#ffffff"
            android:textSize="20dp"
            android:layout_gravity="center_vertical"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/user"
            android:layout_weight="0.5"/>

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1">


    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:background="#cccccc">

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/user"
            android:layout_weight="0.5"
            android:layout_gravity="center_vertical"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/user"
            android:layout_weight="0.5"
            android:layout_gravity="center_vertical"/>

        <ImageView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:src="@mipmap/user"
            android:layout_weight="0.5"
            android:layout_gravity="center_vertical"/>

    </LinearLayout>
</LinearLayout>

2.相对布局(RelativeLayout)

重要属性

  • 相对于父容器(取值:true/false):android:layout_alignParentRight
  • 相对于控件(取值:其它控件id):android:layout_toRightOf
<?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">

    <!--
         android:layout_centerInParent
         android:layout_alignParentLeft
         android:layout_alignParentRight
         android:layout_alignParentTop
         android:layout_alignParentBottom
         android:layout_centerHorizontal
         android:layout_centerVertical

    -->
    <TextView
        android:id="@+id/center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="屏幕正中"
        android:background="#ff0000"
        android:layout_centerInParent="true"/>


    <!--
    1.在参照物的某边
        android:layout_toLeftOf
        android:layout_toRightOf
        android:layout_above
        android:layout_below
    2.和参照物某边线对其
        android:layout_alignTop
        android:layout_alignBottom
        android:layout_alignLeft
        android:layout_alignRight
    -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="中偏左上"
        android:background="#00ff00"
        android:layout_toLeftOf="@+id/center"
        android:layout_above="@id/center"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="中偏右上"
        android:background="#00ff00"
        android:layout_toRightOf="@+id/center"
        android:layout_above="@id/center"/>


    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="中偏右下"
        android:background="#00ff00"
        android:layout_toRightOf="@+id/center"
        android:layout_below="@id/center"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="中偏左下"
        android:background="#00ff00"
        android:layout_toLeftOf="@+id/center"
        android:layout_below="@id/center"/>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="和中间上边线对齐"
        android:background="#0000ff"
        android:layout_alignTop="@id/center"/>
</RelativeLayout>

3.帧布局(FrameLayout)

重要属性

  • android:layout_gravity 控件重力
  • android:foreground 设置前景
  • android:foregroundGravity 设置前景重力
<?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"
    android:background="#cccccc">

    <TextView
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#ff0000"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="350dp"
        android:layout_height="350dp"
        android:background="#00ff00"
        android:layout_gravity="center"/>


    <TextView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="#0000ff"
        android:layout_gravity="center"/>


    <TextView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="#00ffff"
        android:layout_gravity="center"/>
</FrameLayout>

4.表格布局(TableLayout)

5.网格布局(GridLayout)

6.约束布局(ConstraintLayout)

重要属性

当前控件的某个方位和另一个参照物的某个方位对齐

  • app:layout_constraintBottom_toBottomOf 类似于RelativeLayout的alignBottom属性
  • app:layout_constraintTop_toTopOf 类似于RelativeLayout的alignTop属性
  • app:layout_constraintRight_toRightOf 类似于RelativeLayout的alignRight属性
  • app:layout_constraintLeft_toLeftOf 类似于RelativeLayout的alignLeft属性
  • app:layout_constraintStart_toStartOf 同Left_toLeftOf
  • app:layout_constraintEnd_toEndOf 同Right_toRightOf

当前控件的A侧会在参照物的B侧

  • app:layout_constraintBottom_toTopOf 类似于RelativeLayout的above属性
  • app:layout_constraintTop_toBottomOf 类似于RelativeLayout的below属性
  • app:layout_constraintRight_toLeftOf 类似于RelativeLayout的toLeftOf属性
  • app:layout_constraintLeft_toRightOf 类似于RelativeLayout的toRightOf属性
  • app:layout_constraintStart_toEndOf 同Left_toRightOf
  • app:layout_constraintEnd_toStartOf 同Right_toLeftOf

偏移量

  • app:android_constraintVertical_bias 垂直偏移量,0.5在正中间
  • app:android_constraintHorizontal_bias 水平偏移量,0.5在正中间
如果觉得本文对您有所帮助,可以支持下博主,一分也是缘
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇