android设置布局高度自适应,Android XML灵活布局之 EditText实现自适应高度同时限制最小和最大高度...

「爱情、让人受尽委屈。」 2022-10-16 00:43 275阅读 0赞

Android中使用XML布局应该是全部安卓开发者最熟悉的操做了，各类布局的特性想必你们也都了如指掌。可是，真正利用好各个布局以达到性能最优，或者配合实现一些单个布局没法实现的特性，在笔者看来是一个很是值得花心思去研究的问题。本文提供的解题思路并不复杂，若是你有其余方案(只经过xml实现)，欢迎在评论中留言。android

效果展现

很少废话，直接一个图看下要达到的效果⬇️api

![2dcf1bea6d04e35a8a0a82f185bfb0e8.gif][]

在这个布局中，EditText实现了高度自适配，但限制于一屏内，文字超过一屏时则在EditText控件内进行滑动。充分利用了EditText的特性，避免了ScrollView的使用。app

实现思路

为了实现图中的效果，分析可知最关键的点有三个：布局

有最低高度。这个最简单，用EditText自带的minLines就能够达成效果性能

高度要设为 android:layout\_height="wrap\_content"测试

EditText所占的空间只有一屏内的空白区域，而且不能超出此区域ui

因而我开始了不断尝试：spa

简单的LinearLayout和FrameLayout都会出现当文字超出一屏高度时，直接就往屏幕外部继续延长了。由于没办法将其限制在某个区域里，若是用LinearLayout的权重效果，那等因而直接占满空白区域了，明显也不是咱们想要的。3d

那么须要一个能够限制其所在范围的布局，是否是一下就想到了用的最多也最方便的ConstrainLayout。惋惜ConstrainLayout也不行，哪怕限制了底边相关联，但若是不设置高度为0dp，wrap\_content的状况仍然会超出屏幕，而高度设为0时等于直接占满了。code

一样还有使用Chains链，不只位置没法固定，并且也解决不了高度越出的问题。最后我甚至还尝试了使用两个EditText，同时输入一样的文字，一个隐藏掉只用来肯定高度，另外一个按它的高度进行适配。结果固然也失败了，至少只用ConstrainLayout我是没有达成效果。

解决方案

在屡次失败后，我一度觉得是否是没法实现这样的效果了，要么妥协将EditText设为固定高度，或者使用ScrollView来配合，或者经过代码动态获取文字高度来设置控件高度。

但总不能那么轻易妥协，而后我想起了RelativeLayout，这个自从有了ConstrainLayout以后就已经被冷落了的布局。原本我觉得后者是前者的"plus版"，大哥都作不到的，小弟怎么能作到呢？

结果我还真被打脸了，测试后发现，EditText在RelativeLayout布局内，高度设为wrap\_content时，既能够自适应高度，并且控件高度会被直接限制在根布局RelativeLayout内，也就是不会越出屏幕！

这下就真的能实现了，下面直接贴上代码：

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

xmlns:tools="http://schemas.android.com/tools"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:background="@color/white\_fff"

android:fitsSystemWindows="true"

android:focusable="true"

android:focusableInTouchMode="true">

android:id="@+id/titlebar"

android:layout\_width="match\_parent"

android:layout\_height="@dimen/dp\_42"

app:leftText="返回"

app:leftTextDrawableLeft="@mipmap/top\_return" />

android:layout\_width="match\_parent"

android:layout\_height="match\_parent"

android:layout\_marginTop="@dimen/dp\_42">

android:id="@+id/et\_notice"

android:layout\_width="match\_parent"

android:layout\_height="wrap\_content"

android:layout\_marginStart="24dp"

android:layout\_marginTop="14dp"

android:layout\_marginEnd="24dp"

android:layout\_marginBottom="@dimen/dp\_62"

android:background="@drawable/guild\_rect\_solid\_f2f2f2\_radius\_3"

android:gravity="start"

android:hint="请输入公会公告"

android:includeFontPadding="false"

android:lineSpacingMultiplier="1.2"

android:maxLength="1000"

android:minLines="8"

android:paddingStart="14dp"

android:paddingTop="12dp"

android:paddingEnd="14dp"

android:paddingBottom="12dp"

android:textAppearance="@style/guild\_TextAppearance.262122\_14"/>

android:id="@+id/tv\_word\_count"

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:layout\_alignStart="@+id/et\_notice"

android:layout\_alignTop="@+id/tv\_push"

android:layout\_alignBottom="@+id/tv\_push"

android:gravity="center"

android:includeFontPadding="false"

android:text="@string/guild\_notice\_tip"

android:textColor="@color/grey\_999"

android:textSize="11sp" />

android:id="@+id/tv\_push"

android:layout\_width="wrap\_content"

android:layout\_height="22dp"

android:layout\_alignEnd="@+id/et\_notice"

android:layout\_alignBottom="@+id/et\_notice"

android:layout\_marginTop="@dimen/dp\_14"

android:layout\_marginBottom="-36dp"

android:background="@drawable/guild\_rect\_solid\_f81a1a\_radius\_11"

android:gravity="center"

android:includeFontPadding="false"

android:paddingStart="9dp"

android:paddingEnd="9dp"

android:text="发布"

android:textColor="@color/white\_fff"

android:textSize="12sp" />

复制代码

最后

一番实验下来我发现虽然ConstrainLayout和RelativeLayout的不少api效果是差很少的，但实际上确实在一些临界状况上仍是有不同的表现。

好比RelativeLayout的layout\_alignBottom="@+id/et\_notice"、layout\_alignParentBottom="true" 的效果就是"底部对齐于其余控件的底部"和"底部对齐于根布局View的底部"。在ConstrainLayout中对应layout\_constraintBottom\_toBottomOf="@+id/et\_notice"和layout\_constraintBottom\_toBottomOf="parent"。

虽然好像效果同样，不过ConstrainLayout中的margin是没法设置负值的，而其余布局能够，这一点是我以为是ConstrainLayout不太灵活的一点，虽然须要设负值的状况不多见。

以上就是我在项目中本身发现的比较有意思的地方，虽然简单，但若是能帮助到别人就挺好的啦。

[2dcf1bea6d04e35a8a0a82f185bfb0e8.gif]: /images/20221014/f13941eb223e4f37975f6ba2a64c23f1.png