美文网首页高级UI
Android XML灵活布局之 EditText实现自适应高度

Android XML灵活布局之 EditText实现自适应高度

作者: 酸菜多余丶 | 来源:发表于2019-07-02 16:03 被阅读5次

效果图

image

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

实现思路

为了实现图中的效果,分析可知最关键的点有三个:

  • 有最低高度。这个最简单,用EditText自带的minLines就可以达成效果
  • 高度要设为 android:layout_height="wrap_content"
  • EditText所占的空间只有一屏内的空白区域,并且不能超出此区域

测试阶段:

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

ConstrainLayout也不行,哪怕限制了底边相关联,但如果不设置高度为0dp,wrap_content的情况仍然会超出屏幕,而高度设为0时等于直接占满了。

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

解决方案

RelativeLayout,这个自从有了ConstrainLayout之后就已经被冷落了的布局。本来我以为后者是前者的"plus版",大哥都做不到的,小弟怎么能做到呢?
结果我还真被打脸了,测试后发现,EditText在RelativeLayout布局内,高度设为wrap_content时,既可以自适应高度,而且控件高度会被直接限制在根布局RelativeLayout内,也就是不会越出屏幕!

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="#FFFFFF"
    android:fitsSystemWindows="true"
    android:focusable="true"
    android:focusableInTouchMode="true">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="42dp"
        app:navigationIcon="@drawable/ic_navigate_black_24dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="公会公告"
            android:textSize="18dp" />
    </androidx.appcompat.widget.Toolbar>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="42dp">

        <EditText
            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="62dp"
            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" />

        <TextView
            android:id="@+id/tv_word_count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/et_notice"
            android:layout_alignLeft="@+id/et_notice"
            android:layout_alignTop="@+id/tv_push"
            android:layout_alignBottom="@+id/tv_push"
            android:gravity="center"
            android:includeFontPadding="false"
            android:text="建议输入在150字以内"
            android:textSize="11sp" />

        <TextView
            android:id="@+id/tv_push"
            android:layout_width="wrap_content"
            android:layout_height="22dp"
            android:layout_alignEnd="@+id/et_notice"
            android:layout_alignRight="@+id/et_notice"
            android:layout_alignBottom="@+id/et_notice"
            android:layout_marginTop="14dp"
            android:layout_marginBottom="-36dp"
            android:background="@color/colorAccent"
            android:gravity="center"
            android:includeFontPadding="false"
            android:paddingStart="9dp"
            android:paddingEnd="9dp"
            android:text="发布"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

    </RelativeLayout>
</FrameLayout>

相关文章

网友评论

    本文标题:Android XML灵活布局之 EditText实现自适应高度

    本文链接:https://www.haomeiwen.com/subject/qzxthctx.html