Question

我想像Instagram上的评论布局一样做同样的行为。所以我添加了这个布局：

       <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="@dimen/persistent_buttons_area_height"
            android:orientation="horizontal">

            <com.xxx.ui.widget.mention.AuthorMentionsEditText
                android:id="@+id/comment"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="@dimen/keyline_1"
                android:paddingTop="@dimen/keyline_1"
                android:paddingLeft="@dimen/keyline_1"
                style="@style/ItemNewsFeedEditCommentMessage"
                android:layout_toLeftOf="@+id/send"
                android:inputType="text|textMultiLine|textCapSentences"
                android:scrollbars="vertical"
                android:hint="@string/news_feed_add_comment_hint" />

            <FrameLayout
                android:id="@+id/send"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:background="@color/theme_accent_3"
                android:layout_marginLeft="@dimen/keyline_7"
                android:padding="12dp">

                <com.xxx.ui.widget.IconView
                    android:id="@+id/send_icon"
                    android:layout_width="@dimen/keyline_4"
                    android:layout_height="@dimen/keyline_4"
                    app:iconFillColor="@color/text_2_secondary_color"
                    android:src="@drawable/ic_check" />

            </FrameLayout>

        </RelativeLayout>

结果是：

image 1

蓝色区域与其父级不匹配。正常，我在“发送”布局上设置“wrap_content”约束。所以如果我改变“match_parent”，这就是直接行为（没有文本！）：

image 2

那么我怎样才能拥有像Instagram这样的蓝色区域（“发送”布局）？

Answer 1

试试这个

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/comment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:inputType="text|textMultiLine|textCapSentences"
        android:scrollbars="vertical" />


    <ImageView
        android:id="@+id/send_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitXY"
        android:src="@drawable/ic_launcher_round" />


</LinearLayout>

比以此编程方式设置ImageView的高度

comment= (EditText) findViewById(R.id.comment);
        imageView= (ImageView) findViewById(R.id.send_icon);

        comment.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

            }

            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

                int hight=comment.getHeight();
                LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, hight);
                imageView.setLayoutParams(layoutParams);

            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

<强>输出

的正常

长篇文章

更长的文字

Answer 2

这是布局的屏幕截图

<RelativeLayout
        android:id="@+id/commentAddLay"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_alignParentBottom="true">

        <EditText
            android:id="@+id/addcomment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/send"
            android:background="@android:color/transparent"
            android:gravity="start"
            android:maxLines="4"
            android:padding="@dimen/dp_3"
            android:textSize="14sp"/>

        <ImageView
            android:id="@+id/send"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="#4E8CF5"
            android:padding="@dimen/dp_20"
            android:src="@mipmap/tick"/>

</RelativeLayout>

您可以在XML中使用此布局来制作像Instagram这样的布局。

Answer 3

无需使用外部资料库

只需复制代码段上方的代码：，因为您想要 instagram 评论BOX

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.user31.demosforstack.CommentInstagram">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#00000000"
                android:gravity="start"
                android:hint="comment"
                android:padding="10dp" />

            <LinearLayout
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:background="#2698f8"
                android:gravity="center">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/ic_right_mark" />


            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

<强>输出

简单而不添加任何文字

添加一些文字行后

添加大量行

希望它对你有所帮助:)）

Answer 4

添加对齐发送按钮的顶部和基线与评论框，因此它将填充大小

<FrameLayout
    android:id="@+id/send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignBaseline="@id/comment" //<---
    android:layout_alignTop="@id/comment"      // <----
    android:background="@color/theme_accent_3"
    android:layout_marginLeft="@dimen/keyline_7"
    android:padding="12dp">

<com.xxx.ui.widget.IconView
    android:id="@+id/send_icon"
    android:layout_width="@dimen/keyline_4"
    android:layout_height="@dimen/keyline_4"
    app:iconFillColor="@color/text_2_secondary_color"
    android:src="@drawable/ic_check" />

</FrameLayout>

评论布局就像在Instagram上

4 个答案: