Android studio 组件自适应屏幕宽度的布局写法(match_parent)

Posted 2023-04-06 可达同学

目录

概览适配屏幕宽度的效果！

1.为何需要自适应屏幕宽度

2.固定数值的情况

3.自适应宽度的写法

---

概览适配屏幕宽度的效果！

 

 

1.为何需要自适应屏幕宽度

我们在开发android app的时候，布局通常是要一次开发，所以比例的屏幕全部适配的。

以下是Android studio 里的xml布局文件固定数值的情况！

2.固定数值的情况

这是宽度固定数值布局文件：

可以看到  android:layout_width="188dp"也就是说，无论您屏幕怎么改变，这个宽度都不变！

<View
        android:id="@+id/view"
        android:layout_width="188dp"
        android:layout_height="93dp"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:background="#CACACA"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

这个具体体现在手机可能是正常的布局，到了平板那里，布局就变得混乱起来了。所以，width怎么不写固定呢？

3.自适应宽度的写法

请看代码

不写固定的宽度代码：

android:layout_width="match_parent"

可以看到，width后面改成了“match_parent”

同时，可以打开design模式下使用constraint Widget 功能：

使用框选住的两个数值来调整该组件的左右边距。

如果想要该组件居正中，需要将左右两边数值相同。

这种写法可以自适应几乎所有的设备。

 

Echarts图表自适应布局

flexbox结构下echarts图表如何实现自适应布局？

已知echarts图表需要放在页面中心，宽度为屏幕宽度1/2，高度为距顶部80px，距底部60px，怎么放这个echarts图表比较好。

在扩大、减小屏幕宽度时，echarts图表可以自动跟着屏幕变化。

问题在于第一次布局成功后，图表宽度就会固定，会撑起父级容器的宽度，反过来又导致图表组件本身收不到resize事件。

解决方法有两个：

1、父级容器设置overflow：hidden，监测到resize后，动态设置图表新的宽度、高度

2、设置echarts图表为绝对定位，图表与容器完全脱离并不会再撑起容器，不会再干扰容器自适应变化。图表设置宽度：100%，高度：100%，不需要在resize中修改图表的宽度、高度了。