Android中的翻轉動畫Listview項目

Question

我試圖用Flip animation顯示我的每個listview項目的正面和背面。動畫效果很好，但動畫的結果也被應用於其他項目。而且，當我上下滾動時，我的物品的位置會改變。我的代碼如下：

public View getView(final int position, final View convertView, ViewGroup parent) { 
    ArtItemHolder holder; 
    View view = convertView; 

    if (view == null) { 
     LayoutInflater inflater = ((Activity) this.context).getLayoutInflater(); 
     holder = new ArtItemHolder(); 
     view = inflater.inflate(R.layout.feed_list_item, parent, false); 

     holder.image = (ImageView) view.findViewById(R.id.img_Image); 
     holder.pubDate = (TextView) view.findViewById(R.id.txt_puslishDate); 
     holder.arTitle = (TextView) view.findViewById(R.id.txt_arTitle); 
     holder.commentCount = (TextView) view.findViewById(R.id.txt_commentCount); 
     holder.rotator = (ImageView) view.findViewById(R.id.card_roretor); 
     holder.cardFace = view.findViewById(R.id.card_face);// first of 2 child parent layout of feed_list_item.xml 
     holder.cardBack = view.findViewById(R.id.card_back);// second of 2 child parent layout of feed_list_item.xml 
     view.setTag(holder); 
    } else { 
     holder = (AdvItemHolder) view.getTag(); 
    } 

    holder.rotator.setOnClickListener(new MyFlipperListener(view, holder.cardFace, holder.cardBack)); 

    return view; 
} 


private class MyFlipperListener implements OnClickListener{ 
    View parent, frontFace, backFace; 

    public MyFlipperListener(View parent, View frontFace, View backFace) { 
     this.parent = parent; 
     this.frontFace = frontFace; 
     this.backFace = backFace; 
    } 

    public void onClick(View v) { 
     FlipAnimation flipAnimation = new FlipAnimation(frontFace, backFace); 
     if (frontFace.getVisibility() == View.GONE) 
     { 
      flipAnimation.reverse(); 
     } 

     parent.startAnimation(flipAnimation); 
    } 

} 

private static class ArtItemHolder{ 
    ImageView image; 
    TextView pubDate; 
    TextView arTitle; 
    TextView commentCount; 
    ImageView rotator; 
    View cardFace, cardBack; 
} 

我在列表視圖項目佈局XML

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:gravity="center"> 

    <LinearLayout 
     android:id="@+id/card_face" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:background="@drawable/feed_item_selector" 
     android:layout_margin="8dip" 
     android:padding="2dip"> 

    ########## MAIN CONTENT HERE ########### 

    </LinearLayout> 
    <LinearLayout 
     android:id="@+id/card_back" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="vertical" 
     android:background="@drawable/feed_item_selector" 
     android:layout_margin="8dip" 
     android:padding="2dip" 
     android:visibility="gone"> 

    ########## SOME INFO ABOUT MAIN CONTENT HERE ########### 

    </LinearLayout> 
</LinearLayout> 

UPDATE

FlipAnimation flipAnimation = new FlipAnimation(holder.cardFace, holder.cardBack); 
holder.rotator.setOnClickListener(new MyFlipperListener(view, holder.cardFace, flipAnimation)); 

private class MyFlipperListener implements OnClickListener{ 
     View parent, frontFace; 
     FlipAnimation flipAnimation; 
     public MyFlipperListener(View parent, View frontFace, FlipAnimation flip) { 
      this.parent = parent; 
      this.frontFace = frontFace; 
      this.flipAnimation = flip; 
     } 

     public void onClick(View v) { 
      if (frontFace.getVisibility() == View.GONE){ 
       flipAnimation.reverse(); 
      } 
      parent.startAnimation(flipAnimation); 
     } 
    } 

Answer 1

你的問題是這些線路：

FlipAnimation flipAnimation = new 
FlipAnimation(holder.cardFace, holder.cardBack); 
holder.rotator.setOnClickListener(new MyFlipperListener(view, holder.cardFace, flipAnimation)); 

您r動畫也適用於其他項目，因爲適配器重新使用視圖！您也可以通過在getView中設置onClickListener來解決問題。更好的方法是將其設置在例如yourListView.setOnItemClickListener之外。希望它能幫助:)

Answer 2

AYT檢查我的解決方案...

public View getView(final int position, final View convertView, ViewGroup parent) { 
ArtItemHolder holder; 
View view = convertView; 

if (view == null) { 
    LayoutInflater inflater = ((Activity)context).getLayoutInflater(); 
    holder = new ArtItemHolder(); 
    view = inflater.inflate(R.layout.feed_list_item, parent, false); 

    holder.image = (ImageView) view.findViewById(R.id.img_Image); 
    holder.pubDate = (TextView) view.findViewById(R.id.txt_puslishDate); 
    holder.arTitle = (TextView) view.findViewById(R.id.txt_arTitle); 
    holder.commentCount = (TextView) view.findViewById(R.id.txt_commentCount); 
    holder.rotator = (ImageView) view.findViewById(R.id.card_roretor); 
    holder.rotator.setTag(false); // put a boolean here.. 
    holder.cardFace = view.findViewById(R.id.card_face);// first of 2 child parent layout of feed_list_item.xml 
    holder.cardBack = view.findViewById(R.id.card_back);// second of 2 child parent layout of feed_list_item.xml 
    holder.flipAnimation = new FlipAnimation(holder.cardFace, holder.cardBack); 
    view.setTag(holder); 
} else { 
    holder = (AdvItemHolder) view.getTag(); 
} 

holder.rotator.setOnClickListener(new OnClickListener() { 

    @Override 
    public void onClick(View v) { 
    // TODO Auto-generated method stub 
    if (!((Boolean) v.getTag()).booleanValue()){ 
    v.setTag(true); // switch boolean 
    // you can either call notifydatasetchanged to show changes by the change function or put the change function here 
    }else{v.setTag(false); // switch boolean again if it has already been clicked} 
     } 
})); 
// i am putting the changes here-(change function) so intend i call notifydatasetchanged in the onclick 
// but it depends on your preference 
// check the boolean instead of view being visible.. 
     if (((Boolean) view.findViewById(R.id.card_roretor).getTag()).booleanValue()){ 
      flipAnimation.reverse(); 
      view.findViewById(R.id.card_roretor).startAnimation(holder.flipAnimation); 
     } 
// end of the change function 
return view; 
} 

........................... ....

private static class ArtItemHolder{ 
ImageView image; 
TextView pubDate; 
TextView arTitle; 
TextView commentCount; 
ImageView rotator; 
View cardFace, cardBack; 
FlipAnimation flipAnimation; 
}