android适配手机升级:最新布局FlexboxLayout替代LinearLayout(支持RecycleView)

本文详细介绍了Android中FlexboxLayout如何替代LinearLayout,通过5大布局属性(justifyContent与alignItems)的实例演示,展示了其在RecycleView中的应用,帮助开发者实现更灵活的布局适配。
摘要由CSDN通过智能技术生成

<TextView

android:id=“@+id/textview5”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#022cff”

android:gravity=“center”

android:text=“textview5” />

</com.google.android.flexbox.FlexboxLayout>

  • Flexboxlayout 5大布局属性之-justifyContent

这里写图片描述

1、flex_start(默认值):左对齐

2、flex-end:右对齐

3、center: 居中

4、space-between:两端对齐,控件之间的间隔相等

5、space-around:每个控件距离两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)

详细对应的属性如下:

1、flex_start(默认值):左对齐

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<com.google.android.flexbox.FlexboxLayout

android:id=“@+id/flexbox_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:justifyContent=“flex_start”>

<TextView

android:layout_width=“80dp”

android:layout_height=“80dp”

android:gravity=“center”

android:padding=“5dp”

android:text=“flex_start(默认值):左对齐” />

<TextView

android:id=“@+id/textview1”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ff0202”

android:gravity=“center”

android:text=“textview1” />

<TextView

android:id=“@+id/textview2”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ffc402”

android:gravity=“center”

android:text=“textview2” />

</com.google.android.flexbox.FlexboxLayout>

2、flex-end:右对齐

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<com.google.android.flexbox.FlexboxLayout

android:id=“@+id/flexbox_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:justifyContent=“flex_end”>

<TextView

android:layout_width=“80dp”

android:layout_height=“80dp”

android:gravity=“center”

android:padding=“5dp”

android:text=“flex-end:右对齐” />

<TextView

android:id=“@+id/textview1”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ff0202”

android:gravity=“center”

android:text=“textview1” />

<TextView

android:id=“@+id/textview2”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ffc402”

android:gravity=“center”

android:text=“textview2” />

</com.google.android.flexbox.FlexboxLayout>

3、center: 居中

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<com.google.android.flexbox.FlexboxLayout

android:id=“@+id/flexbox_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:justifyContent=“center”>

<TextView

android:layout_width=“80dp”

android:layout_height=“80dp”

android:gravity=“center”

android:padding=“5dp”

android:text=“center: 居中” />

<TextView

android:id=“@+id/textview1”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ff0202”

android:gravity=“center”

android:text=“textview1” />

<TextView

android:id=“@+id/textview2”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ffc402”

android:gravity=“center”

android:text=“textview2” />

</com.google.android.flexbox.FlexboxLayout>

4、space-between:两端对齐,控件之间的间隔相等

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<com.google.android.flexbox.FlexboxLayout

android:id=“@+id/flexbox_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:justifyContent=“space_between”>

<TextView

android:layout_width=“80dp”

android:layout_height=“wrap_content”

android:gravity=“center”

android:padding=“5dp”

android:text=“space-between:两端对齐,控件之间的间隔相等” />

<TextView

android:id=“@+id/textview1”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ff0202”

android:gravity=“center”

android:text=“textview1” />

<TextView

android:id=“@+id/textview2”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ffc402”

android:gravity=“center”

android:text=“textview2” />

</com.google.android.flexbox.FlexboxLayout>

5、space-around:每个控件距离两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<com.google.android.flexbox.FlexboxLayout

android:id=“@+id/flexbox_layout”

android:layout_width=“match_parent”

android:layout_height=“wrap_content”

app:justifyContent=“space_around”>

<TextView

android:layout_width=“80dp”

android:layout_height=“wrap_content”

android:gravity=“center”

android:padding=“5dp”

android:text=“space-around:每个控件距离两侧的间隔相等(项目之间的间隔比项目与边框的间隔大一倍)” />

<TextView

android:id=“@+id/textview1”

android:layout_width=“80dp”

android:layout_height=“wrap_content”

android:background=“#ff0202”

android:gravity=“center”

android:text=“textview1” />

<TextView

android:id=“@+id/textview2”

android:layout_width=“80dp”

android:layout_height=“wrap_content”

android:background=“#ffc402”

android:gravity=“center”

android:text=“textview2” />

</com.google.android.flexbox.FlexboxLayout>

  • Flexboxlayout 5大布局属性之-alignItems

这里写图片描述

1、stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

2、flex-start:左上方开始,并与左上方对齐

3、flex-end:左下方开始,并与左下方对齐

4、center:左控件的中间开始,并与中心线水平对齐

5、baseline: 控件中的文字向上对齐

详细对应的属性如下:

1、stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

这里写图片描述

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android=“http://schemas.android.com/apk/res/android”

xmlns:app=“http://schemas.android.com/apk/res-auto”

android:layout_width=“match_parent”

android:layout_height=“match_parent”>

<com.google.android.flexbox.FlexboxLayout

android:id=“@+id/flexbox_layout”

android:layout_width=“match_parent”

android:layout_height=“match_parent”

app:alignItems=“stretch”>

<TextView

android:layout_width=“80dp”

android:layout_height=“80dp”

android:gravity=“center”

android:padding=“5dp”

android:text=“stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。” />

<TextView

android:id=“@+id/textview1”

android:layout_width=“80dp”

android:layout_height=“80dp”

android:background=“#ff0202”

android:gravity=“center”

android:text=“textvie

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值