按钮单击展开和折叠Relativelayout

时间:2017-09-28 22:02:01

标签: java android android-layout expand

我有这个RelativeLayout,它会在按钮点击时展开和折叠 它在一个按钮上工作正常。 我想在更多两个RelativeLayout上重用相同的方法 在相同的布局 并使用其他两个按钮进行扩展。

此代码运行正常。只是想要更多的布局来做同样的动作。

布局: enter image description here

这是我的代码:

<?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;


        }
    }

2 个答案:

答案 0 :(得分:3)

要继续您的方法,您必须将代码应用于您已经布置的所有三个部分。为此,您需要更改几个方法以接受v3I6Io9H8OoZcp4ATyszhAepdQAEp617mmXZfoJQVKXwDcq7ewVzyu4f3AGk27D6 作为参数。

首先,在您的RelativeLayout侦听器中,填写案例块,以便每个块调用onClick并使用目标expand()和最大高度。使用目标RelativeLayout致电collapse()。然后,您需要修改RelativeLayoutexpand()来处理新参数:

您将在以下代码中注意到我已更改动画制作者的创建方式和位置。动画师需要使用每个collapse()

因此,RelativeLayout调用onClick(),调用expand()。对于每个调用,受影响的slideAnimator()将作为参数传递。通过这种方式,您可以概括代码以使用多个RelativeLayout

预绘制侦听器还需要测量每个可展开的RelativeLayout

这一切都放在一起:

<强> MainActivity.xml

RelativeLayout

答案 1 :(得分:0)

您还可以创建自己的自定义expandable,扩展android相对布局。在该自定义视图上,您​​可以存储展开或折叠状态。除了可以创建自定义属性以定义视图默认状态(如展开或折叠)。因此,您无需比较视图状态,只需调用切换功能即可将视图切换为折叠,反之亦然

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