2017-01-04 17 views
4

で崩壊アニメーションを展開します。 enter image description hereが、私はこのような何かをしよう/ CardView

私はcardViewAdapterを行うために管理が、私は私のカードを拡大するブロック。私はこのresponseのコードを再開しました(クラスの名前はCardsAnimationHelperです)。 picture が後を展開します:

前に展開するpicture

私はこの問題を解決する上で、私のcardViewに私が最初に展開する50のリストについては、同時に10個の要素を表示する場合は、番号11 、21,31,41も拡大する。これが起こらないようにするためのトリックがありますか?

私は反映している、それは私には意味がありません。私のOnClickメソッドの直前に、テキストが位置であるテキストビューを表示します。しかし、私がクリックするとidが正しいので、クリックするといくつかのカードのクリックが検出されます。私はOnClickListenerに

マイCardView

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:tools="http://schemas.android.com/tools" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_margin="5dp" 

     app:cardBackgroundColor="@android:color/white" 
     app:cardCornerRadius="2dp" 
     app:cardElevation="2dp"> 

     <!-- Les CardView possèdent des attributs supplémentaires dont 
      - cardBackgroundColor 
      - cardElevation pour l'élévation (donc aussi l'ombre) 
      - cardCornerRadius pour arrondir les angles 
     --> 

     <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      xmlns:tools="http://schemas.android.com/tools" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <!-- Les CardView agissent comme des FrameLayout, 
      pour avoir une organisation verticale nous devons 
      donc rajouter un LinearLayout --> 


      <TextView 
       android:id="@+id/text_cards" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:background="?android:selectableItemBackground" 
       android:padding="20dp" 
       tools:text="Paris" 
       android:fontFamily="sans-serif" 
       android:textColor="#333" 
       android:textSize="18sp" /> 

      <ImageView 
       android:id="@+id/item_description_game_more" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center_vertical|end" 
       android:transitionName="@string/transition_cards_view" 
       app:srcCompat="@drawable/ic_expand_more_black_24dp"/> 

      <include layout="@layout/cards_resume_game_expand"/> 

     </android.support.design.widget.CoordinatorLayout> 

    </android.support.v7.widget.CardView> 

</LinearLayout> 

私の新しいアダプタ

public class CardsViewAdapter extends RecyclerView.Adapter<CardsViewAdapter.ViewHolder> { 
    private Game[] mDataset; 
    private boolean isPopupVisible = false; 
    int rotationAngle = 0; 

    // Provide a reference to the views for each data item 
    // Complex data items may need more than one view per item, and 
    // you provide access to all the views for a data item in a view holder 
    public static class ViewHolder extends RecyclerView.ViewHolder { 
     // each data item is just a string in this case 
     public TextView mTextView; 
     public ImageView imageView; 
     public LinearLayout test2; 

     public ViewHolder(View v) { 
      super(v); 
      mTextView = (TextView) v.findViewById(R.id.text_cards); 
      imageView = (ImageView) v.findViewById(R.id.item_description_game_more); 
      test2 = (LinearLayout) v.findViewById(R.id.popup_layout); 

     } 
    } 

    // Provide a suitable constructor (depends on the kind of dataset) 
    public CardsViewAdapter(Game[] myDataset) { 
     mDataset = myDataset; 
    } 

    // Create new views (invoked by the layout manager) 
    @Override 
    public CardsViewAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, 
                int viewType) { 
     // create a new view 
     View v = LayoutInflater.from(parent.getContext()) 
       .inflate(R.layout.cards_resume_game, parent, false); 
     // set the view's size, margins, paddings and layout parameters 
     //... 

     ViewHolder vh = new ViewHolder(v); 
     return vh; 
    } 

    // Replace the contents of a view (invoked by the layout manager) 
    @Override 
    public void onBindViewHolder(final ViewHolder holder, int position) { 
     // - get element from your dataset at this position 
     // - replace the contents of the view with that element 

     holder.mTextView.setText(String.valueOf(mDataset[position].getId_game())); 
     holder.imageView.setOnClickListener(new View.OnClickListener() { 
      public void onClick(View v) { 
       // Perform action on click 
       if (isPopupVisible) { 
        isPopupVisible = false; 

        ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",rotationAngle, rotationAngle + 180); 
        anim.setDuration(500); 
        anim.start(); 
        rotationAngle += 180; 
        rotationAngle = rotationAngle%360; 

//     CardsAnimationHelper.changeIconAnim((TextView) v, getString(R.string.icon_chevron_up)); 
        CardsAnimationHelper.collapse(holder.test2); 
       } else { 
        isPopupVisible = true; 

        ObjectAnimator anim = ObjectAnimator.ofFloat(v, "rotation",rotationAngle, rotationAngle + 180); 
        anim.setDuration(500); 
        anim.start(); 
        rotationAngle += 180; 
        rotationAngle = rotationAngle%360; 

//     CardsAnimationHelper.changeIconAnim((TextView) v, getString(R.string.icon_chevron_down)); 
        CardsAnimationHelper.expand(holder.test2); 
       } 
      } 
     }); 



    } 

    // Return the size of your dataset (invoked by the layout manager) 
    @Override 
    public int getItemCount() { 
     return mDataset.length; 
    } 
} 
+0

あなたは 'CardsAnimationHelper.collapse(v);'と 'CardsAnimationHelper.expand(v);'を試しましたか? –

+1

ここではあなたのテキストビューのみを送信していますが、カードではありません –

+0

@SurajRao確かに、私の側ではエラーですが、今度は重なっています: 展開前:http://imgur.com/a/8uIsx 展開後:http: /imgur/a/VVz7g – filol

答えて

4

を視野に問題がある可能性がありますが、そのカスタムクラスを作成する必要があると思います拡張CardViewあなたはそれを折りたたむとき、あなたはあなたが崩壊したときにそれになりたい高さに沿って通過する必要がありますことを

public void expand() { 
    int initialHeight = getHeight(); 

    measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT); 
    int targetHeight = getMeasuredHeight(); 

    int distanceToExpand = targetHeight - initialHeight; 

    Animation a = new Animation() { 
     @Override 
     protected void applyTransformation(float interpolatedTime, Transformation t) { 
      if (interpolatedTime == 1){ 
       // Do this after expanded 
      } 

      getLayoutParams().height = (int) (initialHeight + (distanceToExpand * interpolatedTime)); 
      requestLayout(); 
     } 

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

    a.setDuration((long) distanceToExpand); 
    startAnimation(a); 
} 

public void collapse(int collapsedHeight) { 
    int initialHeight = getMeasuredHeight(); 

    int distanceToCollapse = (int) (initialHeight - collapsedHeight); 

    Animation a = new Animation() { 
     @Override 
     protected void applyTransformation(float interpolatedTime, Transformation t) { 
      if (interpolatedTime == 1){ 
       // Do this after collapsed 
      } 


      Log.i(TAG, "Collapse | InterpolatedTime = " + interpolatedTime); 

      getLayoutParams().height = (int) (initialHeight - (distanceToCollapse * interpolatedTime)); 
      requestLayout(); 
     } 

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

    a.setDuration((long) distanceToCollapse); 
    startAnimation(a); 
} 

注:そのクラスの中に、以下の方法を置きます。展開時の高さはWRAP_CONTENTに設定されています。

アニメーションが完了したときに実行されるif/elseステートメントも追加しました。

幸運を祈る!

+0

私はすでにこのクラスを持っています(私の記事の私のリンクを参照してください):http://stackoverflow.com/a/13381228/7355733 – filol

+0

'CardView'のレイアウトは1つだけ必要です拡大する。展開と折りたたみの内部では、展開するか折りたたんだかに応じて、非表示にしたい表示を非表示にして表示できます。すなわち、ヘッダーが折りたたまれているときに表示し、ヘッダーを非表示にして表示します。 – LukeWaggoner

+0

Thx、うまくいきます。解決策は1つのレイアウトを作ることだけでした – filol

6

50のうち10要素を表示することで意味が分かりませんでした。ただし、ビューの表示/非表示とCardViewの子レイアウトにandroid:animateLayoutChanges="true"を提供するだけで、展開/折りたたみを行うことができます。ここでの例は次のとおり

<android.support.v7.widget.CardView 
    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"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:animateLayoutChanges="true" 
     android:padding="16dp" 
     android:orientation="vertical"> 

     <TextView 
      android:id="@+id/hello" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Hello World!"/> 

     <TextView 
      android:id="@+id/hello2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Hello World!" 
      android:visibility="gone"/> 

     <TextView 
      android:id="@+id/hello3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="Hello World!" 
      android:visibility="gone"/> 

    </LinearLayout> 
</android.support.v7.widget.CardView> 

および対応するコントローラ:

TextView t1 = (TextView) findViewById(R.id.hello); 
    final TextView t2 = (TextView) findViewById(R.id.hello2); 
    final TextView t3 = (TextView) findViewById(R.id.hello3); 

    t1.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View view) { 
      if (t2.getVisibility() == View.GONE) { 
       t2.setVisibility(View.VISIBLE); 
       t3.setVisibility(View.VISIBLE); 
      } else { 
       t2.setVisibility(View.GONE); 
       t3.setVisibility(View.GONE); 
      } 
     } 
    }); 

崩壊およびアニメーションと共にCardViewを展開する最初のTextViewをタップ。

+0

崩壊アニメーションがうまくいかない –

関連する問題