android - 使 fragment 增长并显示更多信息

Question

我的应用程序有 2 个 fragment :

1 - 有几个字段可以为查询插入信息，最初它只显示一个用于输入名称的字段和一个使其增长的按钮；

2 - 显示查询结果的 ListView 。

我正在使用 Visibility.GONE 来解决这个问题(不显示其他字段，当用户按下按钮时，它们就会出现):

我有几个

   <android.support.v7.widget.LinearLayoutCompat
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.tcgapp.myrium.fowhelper.MainActivity"
tools:showIn="@layout/activity_main"
android:orientation="vertical"
android:id="@+id/fragment_search_area"
>
<!--android:background="#c94040" -->
<!-- Name of Card and button to expand the view-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentTop="true"
    android:id="@+id/layout_name_search"
    android:background="@android:color/darker_gray">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/label_name"
        android:text="@string/name_label"
        android:textSize="20sp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textStyle="bold"
        />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_name"
        android:hint="@string/name_hint"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:singleLine="true"
        android:layout_weight="0.90" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_expand"
        android:src="@drawable/ic_arrow_downward_black_24dp" />
</LinearLayout>

<!-- Type Set and Format-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/search_tags_area"
    android:orientation="horizontal"
    android:background="@android:color/holo_blue_dark">

    <Spinner
        android:id="@+id/spinner_type"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>

    <util.MultiSpinner
        android:id="@+id/spinner_rarity"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>

    <util.MultiSpinner
        android:id="@+id/spinner_set"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>

    <Spinner
        android:id="@+id/spinner_format"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>
</LinearLayout>

<!-- Card Text Field-->
<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/edit_card_text"
    android:hint="@string/field_text"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"/>

<!-- Spinners-->
<!-- Attribute and choices-->
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentTop="true"
    android:id="@+id/layout_attribute"
    android:background="@android:color/darker_gray"
    android:visibility="gone">

    <util.MultiSpinner
        android:id="@+id/multi_spinner_attribute"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>

    <Spinner
        android:id="@+id/spinner_choices_to_query_attribute"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"/>

</LinearLayout>

<!-- Now the query fields-->
<!-- Atk Def-->
<LinearLayout
    android:id="@+id/layout_atkdef"
    android:visibility="gone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#75b194"
    >

    <TextView
        android:id="@+id/text_atk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/field_atk"
        android:gravity="left"
        android:textStyle="bold"
        android:layout_weight="2"
        android:textSize="15sp"
        android:paddingLeft="10dp"/>

    <Spinner
        android:id="@+id/spinner_atk"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:inputType="numberSigned"/>

    <!-- Atk field-->
    <TextView
        android:id="@+id/text_def"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/field_def"
        android:gravity="left"
        android:textStyle="bold"
        android:layout_weight="2"
        android:textSize="15sp"
        android:paddingLeft="10dp"
        />
    <Spinner
        android:id="@+id/spinner_def"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:inputType="numberSigned"/>

</LinearLayout>

<!-- SubType and CMC-->
<LinearLayout
    android:id="@+id/layout_subtype_cmc"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:background="#75b194"
    android:orientation="horizontal">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/field_subtype"
        android:layout_weight="2"
        android:textSize="15sp"
        android:paddingLeft="10dp"
        android:textStyle="bold"/>

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:singleLine="true"
        android:layout_weight="2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/field_cmc"
        android:layout_weight="1"
        android:textSize="15sp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:textStyle="bold"/>

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/spinner_cmc"/>
</LinearLayout>

<!-- Card Flavor e Code-->
<LinearLayout
    android:id="@+id/layout_flavor_code"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
    android:background="#75b194"
    android:orientation="horizontal">


    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/edit_card_flavor"
        android:hint="@string/field_flavor"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_weight="1"
        android:singleLine="true"/>

    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/edit_card_code"
        android:hint="@string/field_code"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_weight="1"
        android:singleLine="true"/>

</LinearLayout>

在 Java 代码上，我有一个动画对象，这是它的 AnimationEnd():

    @Override
    public void onClick(View v) {
        int newWeight = isExpanded ? 0 : 60;

        ViewWeightAnimationWrapper animationWrapper = new ViewWeightAnimationWrapper(getView());
        ObjectAnimator anim = ObjectAnimator.ofFloat(animationWrapper,
                "weight",
                animationWrapper.getWeight(),
                newWeight);
        anim.setDuration(500);
        anim.addListener(new AnimatorListenerAdapter() {
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
//                if (!isExpanded){
//                    getView().findViewById(R.id.layout_atkdef).setVisibility(View.INVISIBLE);
//                    getView().findViewById(R.id.layout_subtype_cmc).setVisibility(View.INVISIBLE);
//                    getView().findViewById(R.id.layout_attribute).setVisibility(View.INVISIBLE);
//                    getView().findViewById(R.id.layout_flavor_code).setVisibility(View.INVISIBLE);
//                }
            }

                @Override
                public void onAnimationEnd (Animator animation){
                    super.onAnimationEnd(animation);
                    if (isExpanded) {
                        imageButtonToggle.setImageResource(R.drawable.ic_arrow_downward_black_24dp);
                        getView().findViewById(R.id.layout_atkdef).setVisibility(View.GONE);
                        getView().findViewById(R.id.layout_subtype_cmc).setVisibility(View.GONE);
                        getView().findViewById(R.id.layout_attribute).setVisibility(View.GONE);
                        getView().findViewById(R.id.layout_flavor_code).setVisibility(View.GONE);
                    } else {
                        imageButtonToggle.setImageResource(R.drawable.ic_arrow_upward_black_24dp);
                        getView().findViewById(R.id.layout_atkdef).setVisibility(View.VISIBLE);
                        getView().findViewById(R.id.layout_subtype_cmc).setVisibility(View.VISIBLE);
                        getView().findViewById(R.id.layout_attribute).setVisibility(View.VISIBLE);
                        getView().findViewById(R.id.layout_flavor_code).setVisibility(View.VISIBLE);
                    }

                    isExpanded = !isExpanded;
                }
            }
            );
            anim.start();
        }
    }

这是隐藏字段并仅在用户按下展开按钮时显示的方法，还是更好的方法？

更新:提供完整代码。

Answer 1

假设您问是否有更好的方法来扩展/隐藏带有输入的区域，我将尽可能使用您的变量分享我的实现。我也会做一些必要的笔记。

//consider changing imageButtonToggle to a container view with an image in it
//in this example I'll use carrotImage as the image contained within imageButtonToggle
//formContainer contains all the views you're toggling from GONE to VISIBLE.
imageButtonToggle.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
                if (!isExpanded) {
                    ViewAnimationHelper
                            .expand(formContainer, 300, false);
                } else {
                    ViewAnimationHelper.collapse(formContainer, 300);
                }

                carrotImage.animate().rotation(ROTATION_COUNT);

                ROTATION_COUNT += 180f;
                //Silly check.. but better safe than sorry.
                if (ROTATION_COUNT >= Float.MAX_VALUE)
                    ROTATION_COUNT = 0f;

                isExpanded= !isExpanded;
            }
    });


public class ViewAnimationHelper {

/**
 * Easy way to expand a given view after measuring with
 * v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
 * 
 * @param v
 * @param duration
 */
public static void expand(final View v, int duration,
        boolean bStartFromZeroHeight) {
    v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    final int targetHeight = v.getMeasuredHeight();

    if (bStartFromZeroHeight)
        v.getLayoutParams().height = 0;

    v.setVisibility(View.VISIBLE);
    Animation a = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {
            v.getLayoutParams().height = interpolatedTime == 1 ? LayoutParams.WRAP_CONTENT
                    : (int) (targetHeight * interpolatedTime);
            v.requestLayout();
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    a.setDuration(duration);
    v.startAnimation(a);
}

/**
 * Easy way to just collapse any given view and any given speed
 * 
 * @param v
 * @param duration
 */
public static void collapse(final View v, int duration) {
    final int initialHeight = v.getMeasuredHeight();

    Animation a = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {
            if (interpolatedTime == 1) {
                v.setVisibility(View.GONE);
            } else {
                v.getLayoutParams().height = initialHeight
                        - (int) (initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    // 1dp/ms
    a.setDuration(duration);
    v.startAnimation(a);
}
}