按鈕單擊展開和折疊Relativelayout

Question

我有這個RelativeLayout，它在按鈕上展開和折疊點擊它在一個按鈕上工作正常。 我想在相同的布局中在更多的兩個RelativeLayout上重用相同的方法，並使用其他兩個按鈕進行擴展。

這段代碼運行正常。 只是想要更多的布局來做同樣的動作。

布局：

這是我的代碼：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none">

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

        <RelativeLayout

            android:layout_width="fill_parent"
            android:layout_height="64dp"
            android:background="#FFF"
            android:orientation="vertical">

            <TextView

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title"
                android:textSize="20sp" />

            <Button
                android:id="@+id/viewmore"
                android:layout_width="80dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="280dp"
                android:background="@null"
                android:text="viewmore" />


        </RelativeLayout>


        <RelativeLayout

            android:visibility="gone"
            android:id="@+id/expandable"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:animateLayoutChanges="true"
            android:background="@color/colorAccent"
            android:orientation="vertical">


            <TextView

                android:layout_width="match_parent"
                android:layout_height="133dp"
                android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
                android:textSize="20sp" />


        </RelativeLayout>


        <RelativeLayout


            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title 2"
                android:textSize="20sp" />

            <Button
                android:id="@+id/viewmore1"
                android:layout_width="80dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="280dp"
                android:background="@null"
                android:text="viewmore" />


        </RelativeLayout>

        <RelativeLayout
            android:visibility="gone"
            android:animateLayoutChanges="true"
            android:id="@+id/expandable1"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:background="@color/colorPrimary">

            <TextView

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
                android:textSize="20sp" />


        </RelativeLayout>

        <RelativeLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title 3"
                android:textSize="20sp" />

            <Button
                android:id="@+id/viewmore2"
                android:layout_width="80dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="280dp"
                android:background="@null"
                android:text="viewmore" />


        </RelativeLayout>

        <RelativeLayout
            android:visibility="gone"
            android:animateLayoutChanges="true"
            android:id="@+id/expandable2"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:background="@color/colorPrimary">

            <TextView

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Text messaging, or texting, is the act of composing and sending electronic messages, typically consisting of alphabetic and numeric characters"
                android:textSize="20sp" />


        </RelativeLayout>


    </LinearLayout>
</ScrollView>

源代碼：

RelativeLayout relativeLayout, relativeLayout1, relativeLayout2;
    Button viewmore, viewmore1, viewmore2;
    ValueAnimator mAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewmore);


        relativeLayout = (RelativeLayout) findViewById(R.id.expandable);
        relativeLayout1 = (RelativeLayout) findViewById(R.id.expandable1);
        relativeLayout2 = (RelativeLayout) findViewById(R.id.expandable2);


        viewmore = (Button) findViewById(R.id.viewmore);
        viewmore1 = (Button) findViewById(R.id.viewmore1);
        viewmore2 = (Button) findViewById(R.id.viewmore2);

        viewmore.setOnClickListener(this);
        viewmore1.setOnClickListener(this);
        viewmore2.setOnClickListener(this);


        relativeLayout.getViewTreeObserver().addOnPreDrawListener(
                new ViewTreeObserver.OnPreDrawListener() {

                    @Override
                    public boolean onPreDraw() {
                        relativeLayout.getViewTreeObserver().removeOnPreDrawListener(this);
                        relativeLayout.setVisibility(View.GONE);

                        final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                        final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                        relativeLayout.measure(widthSpec, heightSpec);

                        mAnimator = slideAnimator(0, relativeLayout.getMeasuredHeight());
                        return true;
                    }
                });


    }


    private void expand() {

        relativeLayout.setVisibility(View.VISIBLE);
        mAnimator.start();
    }

    private void collapse() {
        int finalHeight = relativeLayout.getHeight();

        ValueAnimator mAnimator = slideAnimator(finalHeight, 0);

        mAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationEnd(Animator animator) {
                //Height=0, but it set visibility to GONE
                relativeLayout.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationStart(Animator animator) {
            }

            @Override
            public void onAnimationCancel(Animator animator) {
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        });
        mAnimator.start();
    }


    private ValueAnimator slideAnimator(int start, int end) {

        ValueAnimator animator = ValueAnimator.ofInt(start, end);


        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                //Update Height
                int value = (Integer) valueAnimator.getAnimatedValue();

                ViewGroup.LayoutParams layoutParams = relativeLayout.getLayoutParams();
                layoutParams.height = value;
                relativeLayout.setLayoutParams(layoutParams);
            }
        });
        return animator;
    }


    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.viewmore:

                if (relativeLayout.getVisibility() == View.GONE) {
                    expand();
                } else {
                    collapse();
                }

                break;


            case R.id.viewmore1:


                break;

            case R.id.viewmore2:


                break;


        }
    }

Answer 1

要繼續您的方法，您必須使代碼適用於您已經布置的所有三個部分。 為此，您需要更改幾個方法以接受RelativeLayout作為參數。

首先，在onClick偵聽器中，填寫大小寫塊，以便每個塊使用目標RelativeLayout和最大高度調用expand() 。 使用目標RelativeLayout調用collapse() 。 然后，您需要修改expand()和collapse()來處理新參數：

您將在以下代碼中注意到我已更改動畫制作者的創建方式和位置。 動畫師需要使用每個RelativeLayout 。

因此， onClick()調用expand()調用slideAnimator() 。 對於每個調用，受影響的RelativeLayout作為參數傳遞。 通過這種方式，您可以概括代碼以使用多個RelativeLayout 。

預繪制偵聽器還需要測量每個可擴展的RelativeLayout 。

這一切都放在一起：

MainActivity.xml

public class MainActivity extends AppCompatActivity
    implements View.OnClickListener {

    RelativeLayout relativeLayout, relativeLayout1, relativeLayout2;
    Button viewmore, viewmore1, viewmore2;
    int height, height1, height2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.viewmore);

        relativeLayout = (RelativeLayout) findViewById(R.id.expandable);
        relativeLayout1 = (RelativeLayout) findViewById(R.id.expandable1);
        relativeLayout2 = (RelativeLayout) findViewById(R.id.expandable2);

        viewmore = (Button) findViewById(R.id.viewmore);
        viewmore1 = (Button) findViewById(R.id.viewmore1);
        viewmore2 = (Button) findViewById(R.id.viewmore2);

        viewmore.setOnClickListener(this);
        viewmore1.setOnClickListener(this);
        viewmore2.setOnClickListener(this);


        relativeLayout.getViewTreeObserver().addOnPreDrawListener(
            new ViewTreeObserver.OnPreDrawListener() {

                @Override
                public boolean onPreDraw() {
                    relativeLayout.getViewTreeObserver().removeOnPreDrawListener(this);
                    relativeLayout.setVisibility(View.GONE);
                    relativeLayout1.setVisibility(View.GONE);
                    relativeLayout2.setVisibility(View.GONE);

                    final int widthSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                    final int heightSpec = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);
                    relativeLayout.measure(widthSpec, heightSpec);
                    height = relativeLayout.getMeasuredHeight();
                    relativeLayout1.measure(widthSpec, heightSpec);
                    height1 = relativeLayout.getMeasuredHeight();
                    relativeLayout2.measure(widthSpec, heightSpec);
                    height2 = relativeLayout.getMeasuredHeight();
                    return true;
                }
            });
    }


    private void expand(RelativeLayout layout, int layoutHeight) {
        layout.setVisibility(View.VISIBLE);
        ValueAnimator animator = slideAnimator(layout, 0, layoutHeight);
        animator.start();
    }

    private void collapse(final RelativeLayout layout) {
        int finalHeight = layout.getHeight();
        ValueAnimator mAnimator = slideAnimator(layout, finalHeight, 0);

        mAnimator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationEnd(Animator animator) {
                //Height=0, but it set visibility to GONE
                layout.setVisibility(View.GONE);
            }

            @Override
            public void onAnimationStart(Animator animator) {
            }

            @Override
            public void onAnimationCancel(Animator animator) {
            }

            @Override
            public void onAnimationRepeat(Animator animator) {
            }
        });
        mAnimator.start();
    }


    private ValueAnimator slideAnimator(final RelativeLayout layout, int start, int end) {
        ValueAnimator animator = ValueAnimator.ofInt(start, end);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                //Update Height
                int value = (Integer) valueAnimator.getAnimatedValue();

                ViewGroup.LayoutParams layoutParams = layout.getLayoutParams();
                layoutParams.height = value;
                layout.setLayoutParams(layoutParams);
            }
        });
        return animator;
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.viewmore:
                if (relativeLayout.getVisibility() == View.GONE) {
                    expand(relativeLayout, height);
                } else {
                    collapse(relativeLayout);
                }
                break;

            case R.id.viewmore1:
                if (relativeLayout1.getVisibility() == View.GONE) {
                    expand(relativeLayout1, height1);
                } else {
                    collapse(relativeLayout1);
                }
                break;

            case R.id.viewmore2:
                if (relativeLayout2.getVisibility() == View.GONE) {
                    expand(relativeLayout2, height2);
                } else {
                    collapse(relativeLayout2);
                }
                break;
        }
    }
}

Answer 2

您還可以創建自己的自定義expandable，擴展android相對布局。 在該自定義視圖上，您​​可以存儲展開或折疊狀態。 除了可以創建自定義屬性以定義視圖默認狀態（如展開或折疊）。 因此，您不需要比較視圖狀態，您只需調用切換功能即可將視圖展開為折疊，反之亦然

如果要將折疊視圖顯示為默認視圖，則不應在onMeasure函數之前更改視圖可見性並存儲視圖測量高度。 如果更改視圖構造函數onMeasure函數的可見性，則跳過該視圖的跳過計算。 您應該切換onPreDraw函數的可見性。