如何使用 ConstraintLayout 管理带有布局的自定义视图的宽度？

Question

我有一个片段，我在其中使用了手风琴视图，我从 GitHub - https://github.com/riyagayasen/Android_accordion_view 下载了它，在它的正文中（这是一个 RelativeLayout）我需要一个自定义名为 AccordionItem 的视图就像图片上的第二个视图，我只是在片段的 xml 中制作的： https://pp.userapi.com/c846123/v846123865/1d925d/CaEhr8uSLFA.jpg
但是出于某种原因，我的自定义视图（第一个）具有 wrap_content 宽度行为。

代码如下：

这是我的片段 xml

中 AccordionView 的主体

<android.support.constraint.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

<!-- This is my custom view -->
<!-- Notice that the width is set to match_constraint -->

                <com.app.myapp.views.AccordionItem
                    android:id="@+id/item"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    app:isStarred="true"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:title="Another title" />

<!-- This is an example of how my view should look like -->

                <android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="8dp"
                    android:layout_marginTop="8dp"
                    android:background="@drawable/accordion_item"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/item">

                    <CheckBox
                        android:id="@+id/favourite_checkBox"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginEnd="8dp"
                        android:button="@drawable/star_checkbox"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <ImageView
                        android:id="@+id/imageView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="8dp"
                        android:layout_marginTop="8dp"
                        android:layout_marginBottom="8dp"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:srcCompat="@drawable/ic_t" />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="8dp"
                        android:text="Title"
                        android:textSize="18sp"
                        app:layout_constraintBottom_toBottomOf="@+id/imageView2"
                        app:layout_constraintStart_toEndOf="@+id/imageView2"
                        app:layout_constraintTop_toTopOf="@+id/imageView2" />

                </android.support.constraint.ConstraintLayout>
            </android.support.constraint.ConstraintLayout>

自定义视图xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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="wrap_content"
    android:background="@drawable/accordion_item">

    <CheckBox
        android:id="@+id/favourite_checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:button="@drawable/star_checkbox"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@+id/title"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/item_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_t" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Title"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="@+id/item_icon"
        app:layout_constraintStart_toEndOf="@+id/item_icon"
        app:layout_constraintTop_toTopOf="@+id/item_icon" />

</android.support.constraint.ConstraintLayout>

自定义视图的

Javaclass:

public class AccordionItem extends ConstraintLayout {

    private String titleString;
    private TextView title;
    private boolean isStarred;

    public AccordionItem(Context context) {
        super(context);
        initView();
    }

    public AccordionItem(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.getTheme().obtainStyledAttributes(
                attrs,
                R.styleable.AccordionItem,
                0, 0);

        try {
            titleString = a.getString(R.styleable.AccordionItem_title);
            isStarred = a.getBoolean(R.styleable.AccordionItem_isStarred, false);
        } finally {
            a.recycle();
        }
        initView();
    }

    private void initView() {
        View view = inflate(getContext(), R.layout.accordion_item, null);
        addView(view);
    }

    public void setTitleString(String titleString) {
        this.titleString = titleString;
        invalidate();
        requestLayout();
    }

    public String getTitleString() {
        return titleString;
    }

    public void setStarred(boolean starred) {
        this.isStarred = starred;
        invalidate();
        requestLayout();
    }

    public boolean isStarred() {
        return isStarred;
    }
}

最后是我的观点的属性：

<declare-styleable name="AccordionItem">
    <attr name="title" format="string"/>
    <attr name="isStarred" format="boolean"/>
    <attr name="background_drawable" format="reference"/>
</declare-styleable>

我希望我的视图能够占据给定的整个宽度，但它反而缩小了。我是在使用错误的方式创建视图，还是我的视图扩展了错误的布局？谢谢。

Answer 1

没有父级的 inflate 方法将丢失 layoutParams(height,width)

private void initView() {
    inflate(getContext(), R.layout.accordion_item, this);
    // or
    // View view = LayoutInflater.from(getContext()).inflate(R.layout.accordion_item, this, false);
    // addView(view);
}

Answer 2

对于这个简单的布局，你真的不需要库，看看这个例子：

<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".Fragments.CheckoutScreen">


<!-- This is an example of how my view should look like -->

<CheckBox
    android:id="@+id/favourite_checkBox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/textView4"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textView4" />

<TextView
    android:id="@+id/textView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="T"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="@+id/textView4"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/textView4" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="Title"
    android:textSize="18sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView5"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.383" />

如何使用 ConstraintLayout 管理带有布局的自定义视图的宽度？

How to manage width of a custom view with layout using ConstraintLayout?

java

android

android-layout

android-view