web-dev-qa-db-ja.com

CardViewの展開と折りたたみ

CardViewを展開する適切な方法は何ですか？

example

androidandroid-cardview
27
Robert Vangor

Cardviewで展開可能なリストビューを使用する

または偶数

wrap content as height of cardviewを使用し、その中にタイトルの下にtextviewを使用できます。 textview 可視および逆。

しかし、それは悪いデザインではありませんか？

いいえ、トランジションやアニメーションを展開したり折りたたんだりすると

デフォルトの遷移を表示したい場合は、Android：animateLayoutChanges = "true" in parent layoutと書くだけです。

25
Madhur

ListViewまたはRecyclerView内でCardViewsを使用している場合、推奨される方法については私の答えを参照してください： RecyclerView展開/折りたたみ項目

CardViewを使用している場合は、cardViewのonClickListenerでこれを実行します。

TransitionManager.beginDelayedTransition(cardview);
detailsView.setVisibility(View.VISIBLE);

デフォルトでは、xmlでdetailsViewの可視性を保持します。

17
Heisenberg

Cardviewでcardviewとexpandセクションitem_descriptionを使用しました。展開部分については、ヘッダーセクションの下にTextViewを作成し（LinearLayout/item_description_layout）、ユーザーがヘッダーレイアウトをクリックすると、展開/折りたたみメソッドが呼び出されます。カードビューのコードは次のとおりです。

<LinearLayout
  Android:id="@+id/item_description_layout"
  Android:layout_width="match_parent"
  Android:layout_height="wrap_content"
  Android:gravity="center"
  Android:minHeight="48dp"
  Android:paddingStart="16dp"
  Android:paddingEnd="16dp"
  Android:orientation="horizontal">

  <TextView
      Android:id="@+id/item_description_title"
      Android:layout_width="0dp"
      Android:layout_height="match_parent"
      Android:layout_weight="0.9"
      Android:gravity="center_vertical"
      Android:text="@string/description"/>

  <ImageView
      Android:id="@+id/item_description_img"
      Android:layout_width="0dp"
      Android:layout_height="wrap_content"
      Android:layout_weight="0.1"
      Android:layout_gravity="center_vertical|end"
      app:srcCompat="@drawable/ic_expand_more_black_24dp"/>

</LinearLayout>

<TextView
  Android:id="@+id/item_description"
  Android:layout_width="match_parent"
  Android:layout_height="wrap_content"
  Android:paddingStart="16dp"
  Android:paddingEnd="16dp"
  Android:paddingBottom="16dp"
  Android:gravity="center_vertical"
  Android:visibility="gone"
  tools:text="description goes here"/>

呼び出されるメソッドは次のとおりです。また、ブロックの展開/折りたたみアニメーションを処理するObjectAnimatorを追加しました。これは、説明テキストの長さを使用する単純なアニメーションです。

void collapseExpandTextView() {
    if (mItemDescription.getVisibility() == View.GONE) {
        // it's collapsed - expand it
        mItemDescription.setVisibility(View.VISIBLE);
        mDescriptionImg.setImageResource(R.drawable.ic_expand_less_black_24dp);
    } else {
        // it's expanded - collapse it
        mItemDescription.setVisibility(View.GONE);
        mDescriptionImg.setImageResource(R.drawable.ic_expand_more_black_24dp);
    }

    ObjectAnimator animation = ObjectAnimator.ofInt(mItemDescription, "maxLines", mItemDescription.getMaxLines());
    animation.setDuration(200).start();
}
14
Ray Hunter

gONE/VISIBLEで可視性を設定する前に、次のコードを実行するだけです。

TransitionManager.beginDelayedTransition([the rootView containing the cardView], new AutoTransition());

xMLでanimateLayoutChanges = trueを使用する必要はありません（この方法も単純ですが、折りたたみ動作は悪いです）

3
Amos
mView.Click +=(sender, e) =>{
    LinearLayout temp = mView.FindViewById<LinearLayout>(Resource.Id.LinerCart);
    if (vs == false) {
        temp.Visibility = ViewStates.Gone;
        vs = true;
    } else {
        temp.Visibility = ViewStates.Visible;
        vs = false;
    }
};
0
user7740865

私は解決策を得ました（単一のカードビュー展開可能なリストビュー）このリンクを確認してください http://www.devexchanges.info/2016/08/expandingcollapsing-recyclerview-row_18.html

下矢印アイコンを追加する場合は、私のコードを使用します

xMLを作成

    <RelativeLayout
                Android:id="@+id/layout_expand"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:paddingTop="10dp"
                Android:paddingBottom="10dp"
                Android:paddingLeft="10dp"
                Android:orientation="vertical">


                <TextView
                    Android:id="@+id/item_description_title"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:background="@color/white"
                    Android:clickable="true"
                    Android:onClick="toggle_contents"
                    Android:padding="10dp"
                    Android:text="Guest Conditions"
                    Android:textColor="@color/hint_txt_color"
                    Android:fontFamily="sans-serif-medium"
                    Android:textStyle="normal"
                    Android:paddingBottom="15dp"
                    Android:textSize="16dp"/>

                 <ImageView
                     Android:layout_alignParentRight="true"
                     Android:paddingTop="4dp"
                     Android:paddingRight="10dp"
                     Android:layout_width="wrap_content"
                     Android:layout_height="wrap_content"
                     Android:src="@drawable/ic_keyboard_arrow_down"/>

                <!--content to hide/show -->
                <TextView
                    Android:id="@+id/item_description"
                    Android:layout_below="@+id/item_description_title"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:background="@color/white"
                    Android:padding="10dp"
                    Android:text="@string/about_txt2"
                    Android:textColor="@color/hint_txt_color"
                    Android:fontFamily="sans-serif-medium"
                    Android:textStyle="normal"
                    Android:paddingBottom="15dp"
                    Android:visibility="gone"
                    Android:textSize="12dp" />

            </RelativeLayout>
        </Android.support.v7.widget.CardView>
    ///////////////////////////////////////////////
    Mainactivity.Java

     RelativeLayout layout_expand = (RelativeLayoutfindViewById(R.id.layout_expand);
     item_description = (TextView) findViewById(R.id.item_description);
     TextView item_description_title; 
    item_description_title = (TextView) findViewById(R.id.item_description_title);
    item_description.setVisibility(View.GONE);
    ///////////////////////////////////////////////////////////////////

            animationUp = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_up);
            animationDown = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide_down);

            layout_expand.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    if(item_description.isShown()){
                        item_description.setVisibility(View.GONE);
                        item_description.startAnimation(animationUp);
                    }
                    else{
                        item_description.setVisibility(View.VISIBLE);
                        item_description.startAnimation(animationDown);
                    }
                }
            });

item_description_title.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(item_description.isShown()){
                    item_description.setVisibility(View.GONE);
                    item_description.startAnimation(animationUp);
                }
                else{
                    item_description.setVisibility(View.VISIBLE);
                    item_description.startAnimation(animationDown);
                }
            }
        });
0
Bob Galy