通过按钮单击展开和折叠Relativelayout答案

【问题标题】：Expand and collapse Relativelayout by button click通过按钮单击展开和折叠Relativelayout
【发布时间】：2018-03-10 18:37:43
【问题描述】：

我有这个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;


        }
    }

【问题讨论】：

标签： java android android-layout expand

【解决方案1】：

要继续您的方法，您必须使代码适用于您已布局的所有三个部分。为此，您需要更改几个方法以接受 RelativeLayout 作为参数。

首先，在您的onClick 侦听器中，填写案例块，以便每个块调用expand()，并使用目标RelativeLayout 和最大高度。使用目标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;
        }
    }
}

【讨论】：

嘿兄弟谢谢它的工作。但是如何设置可见性（View.GONE）以使其第一次隐藏。
@feltonjk 我的最后一条评论（已删除）是错误的。在 XML 集合中 android:visibility="gone"
但在我设置 set android:visibility="gone" 后它无法正常工作并且没有任何可见的东西。我也尝试过 relativeLayout.setVisibility(View.GONE) 也不起作用。你能告诉我任何其他的解决方案吗？
@feltonjk 你在RelativeLayouts可扩展、可扩展1和可扩展2上设置“消失”了吗？如果是这样，请在此处发布您的 XML。
我在我的问题中更新了我的 xml。只有当使用 relativeLayout.setVisibility(View.GONE) 有一个 relativelayout 时，第一个代码才能正常工作。但现在有三种布局。那么如何将其设置为所有三种布局？

【解决方案2】：

您还可以创建自己的自定义可扩展，以扩展 android 相对布局。在该自定义视图上，您可以存储展开或折叠状态。您还可以创建自定义属性来定义视图默认状态，例如展开或折叠。因此，您无需比较视图状态，只需调用切换函数即可将视图展开为折叠，反之亦然

如果您想将折叠视图显示为默认视图，则不应在 onMeasure 函数之前更改视图可见性并存储视图测量的高度。如果您更改视图构造函数 onMeasure 函数的可见性，则跳过该视图的计算。您应该切换 onPreDraw 函数的可见性。

【讨论】：