如何使用 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>

自定義視圖的 Java 類：

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

沒有父級的膨脹方法將丟失 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" />