安卓开发学习4 - 安卓常用布局

已于 2024-12-16 11:09:44 修改
阅读量1.5k 收藏 35
点赞数 62
CC 4.0 BY-SA版权
分类专栏： 安卓开发 文章标签： android 学习 前端
于 2024-12-16 11:08:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/asastong/article/details/144501599

线性布局 - LinearLayout

两种排列方式，水平方向，垂直方向，默认是水平方向。

orientation - horizontal 水平方向，内部视图从左往右排列。

orientation - vertical 垂直方向，内部视图从上往下排列。

demo1 - 横向排列

<?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="300dp"
    android:background="@color/green"
    android:orientation="vertical">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="横向排列"
            android:textSize="18sp"></TextView>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="横向排列"
            android:textSize="18sp"></TextView>
    </LinearLayout>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="竖向排列"
            android:textSize="18sp"></TextView>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="竖向排列"
            android:textSize="18sp"></TextView>
    </LinearLayout>
</LinearLayout>

demo2 - 竖向排列

<?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="300dp"
  android:background="@color/green"
  android:orientation="vertical">
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="横向排列"
      android:textSize="18sp"></TextView>
    <TextView
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="横向排列"
      android:textSize="18sp"></TextView>
  </LinearLayout>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:background="#ffff"
      android:gravity="center"
      android:text="竖向排列"
      android:textSize="18sp"></TextView>
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="0dp"
      android:layout_weight="1"
      android:background="#ffff"
      android:gravity="center"
      android:text="竖向排列"
      android:textSize="18sp"></TextView>
  </LinearLayout>
</LinearLayout>

image-20241216092618196

相对布局 - RelativeLayout

相对布局的下级视图位置由其他视图决定。用于确定下级视图位置的参数有两种：

  • 与该视图的平级视图
  • 该视图的上级视图，就是离它最近的 RelativeLayout 视图

相对位置属性及位置说明

相对位置的属性相对位置的说明
layout_toLeftOf当前视图在指定视图的左边(指定视图Id)
layout_toRightOf当前视图在指定视图的右边(指定视图Id)
layout_above当前视图在指定视图的上方(指定视图Id)
layout_below当前视图在指定视图的下方(指定视图Id)
layout_alignLeft当前视图与指定视图的左对齐(指定视图Id)
layout_alignRight当前视图与指定视图的右对齐(指定视图Id)
layout_alignTop当前视图与指定视图的顶部对齐(指定视图Id)
layout_alignBottom当前视图与指定视图的底部对齐(指定视图Id)
layout_centerInParent当前视图在上级视图的中间(上级视图，父级LinearLayout)
layout_centerHorizontal当前视图在上级视图的水平方向居中(上级视图，父级LinearLayout)
layout_centerVertical当前视图在上级视图的垂直方向居中(上级视图，父级LinearLayout)
layout_alignParentLeft当前视图与上级视图的左侧对齐(上级视图，父级LinearLayout)
layout_alignParentRight当前视图与上级视图的右侧对齐(上级视图，父级LinearLayout)
layout_alignParentTop当前视图与上级视图的顶部对齐(上级视图，父级LinearLayout)
layout_alignParentBottom当前视图与上级视图的底部对齐(上级视图，父级LinearLayout)

Demo

<?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="300dp">

    <TextView
        android:id="@+id/center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#f00"
        android:text="水平垂直中间"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/center"
        android:layout_alignTop="@id/center"
        android:background="#000"
        android:text="水平垂直中间的左边"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/center"
        android:layout_alignBottom="@id/center"
        android:background="#000"
        android:text="水平垂直中间的右边"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/center"
        android:layout_alignLeft="@id/center"
        android:background="#000"
        android:text="水平垂直中间的上边"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/center"
        android:layout_alignRight="@id/center"
        android:background="#000"
        android:text="水平垂直中间的下面"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="20dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#000"
        android:text="我跟上级的左边对齐"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#000"
        android:text="我跟上级的右边对齐"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="20dp"
        android:background="#000"
        android:text="我跟上级的顶部对齐"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#000"
        android:text="我跟上级的底部对齐"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:background="#000"
        android:text="我跟上级的底部和右侧对齐"
        android:textColor="#fff"
        android:textSize="11dp"></TextView>

</RelativeLayout>

image-20241216092535994

网格布局 - GridLayout

网格布局支持多行多列的表格排列

网格默认布局，由左至右、由上到下排列

columnCount：指定网格的列数，每行放多少个视图

rowCount：指定了网格的行数，每列网多少个视图。

DEMO

<?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="300dp"
    android:columnCount="2"
    android:rowCount="2">


    <TextView
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_columnWeight="1"
        android:background="#f00"
        android:gravity="center"
        android:text="1"
        android:textColor="#fff"
        android:textSize="17sp"></TextView>

    <TextView
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_columnWeight="1"
        android:background="#f55"
        android:gravity="center"
        android:text="2"
        android:textColor="#fff"
        android:textSize="17sp"></TextView>

    <TextView
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_columnWeight="1"
        android:background="#c84"
        android:gravity="center"
        android:text="3"
        android:textColor="#fff"
        android:textSize="17sp"></TextView>

    <TextView
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_columnWeight="1"
        android:background="#a55"
        android:gravity="center"
        android:text="4"
        android:textColor="#fff"
        android:textSize="17sp"></TextView>

</GridLayout>

滚动布局

包含横向滚动和纵向滚动

纵向滚定 - ScrollView

layout_width 属性设置成 match_parent

layout_height 属性设置成 wrap_content

横向滚动 - HorizontalScrollView

layout_width 属性设置成 wrap_content

layout_height 属性设置成 match_parent

Demo

<?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"
    android:orientation="vertical">
    <HorizontalScrollView
        android:layout_width="wrap_content"
        android:layout_height="200dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <View
                android:layout_width="300dp"
                android:layout_height="match_parent"
                android:background="#f00"></View>
            <View
                android:layout_width="300dp"
                android:layout_height="match_parent"
                android:background="#00f"></View>
        </LinearLayout>
    </HorizontalScrollView>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#686"></View>
            <View
                android:layout_width="match_parent"
                android:layout_height="400dp"
                android:background="#213"></View>
        </LinearLayout>
    </ScrollView>
</LinearLayout>

在ScrollView中，只能包含一个直接子视图（ViewGroup），否则会提示异常。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值