Card Flip in Android List View

问题

I need to make a View which is a list view. This is supposed to e a custom list as I want each item of the list to be an image view whioch when touched flips to show details.

I am looking into Card Filp view (using fragments) per the android reference but I feel I am missing something very crucial as this doesn't feel right. below is the code of my custom adapter that will display the front side. I have another doubt regarding how would I flip the view. Unfortunately the andrdoid tutorials are not very helpful

public class CustomCardAdapter extends ArrayAdapter<String> {

    private int textViewResourceId;
    private Context mContext;
    private List<String> list;
    private FragmentManager fm;

    public CustomCardAdapter(FragmentManager fm, Context context, int textViewResourceId,
            List<String> list) {
        super(context, textViewResourceId, list);
        mContext = context;
        this.textViewResourceId = textViewResourceId;
        this.list = list;
        this.fm = fm;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        LayoutInflater mInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View rowView = mInflater.inflate(textViewResourceId, parent);

        fm.beginTransaction()
          .add(R.id.rowItem, new CardFrontFragment())
          .commit();

        String frontText = list.get(position);
        String bsckText = frontText+"...back side";

        TextView tvFront = (TextView)rowView.findViewById(R.id.frontSide);


        tvFront.setText(frontText);

        return rowView;
    }



}

/this will only show, if this work ever, the front card fragment.How do i "flip" the view? is this going to be via attaching an onClickListner.

Has anyone come across this prblem? any help will be great!

Please advise?

回答1:

To understand what to do I would make a simple example to flip the views without any fragments and FragmentManager. Then your getView method in your adapter would look like this:

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    LayoutInflater mInflater = (LayoutInflater)mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View rowView = mInflater.inflate(textViewResourceId, parent);

    String frontText = list.get(position);
    String backText = frontText+"...back side";

    TextView tvFront = (TextView)rowView.findViewById(R.id.frontSide);
    tvFront.setText(frontText);
    // set View visible
    tvFront.setVisibility(View.VISIBLE);

    TextView tvBack = (TextView)rowView.findViewById(R.id.backSide);
    tvBack.setText(backText);
    // disable visiblity of view
    tvBack.setVisibility(View.GONE);

    // add both textViews to your row:
    rowView.removeAllViews();
    rowView.addView(tvFront);
    rowView.addView(tvBack);

    // now set a clickListener to your row
    rowView.setOnClickListener(new MyFlipListener(tvFront, tvBack));
    return rowView;
}

class MyFlipListener implements OnClickListener{

    TextView mTvFront;
    TextView mTvBack;

    public MyFlipListener(TextView tvFront, TextView tvBack){
        mTvFront = tvFront;
        mTvBack = tvBack;
    }

    @Override
    public void onClick(){
         // check which text is actually shown and make your changes
         if(mTvFront.isVisible){
              mTvFront.setVisibility(View.GONE);
              mTvBack.setVisibility(View.VISIBLE);
         }else{
              mTvFront.setVisibility(View.VISIBLE);
              mTvBack.setVisibility(View.GONE);
         }
    }

}

To use your Fragments I would use the same way:

• first add to each rowItem your CardFrontFragment
• then add to your rowItem a clickListener that calls flipCard()

The problem I see here is that you need a unique id for each listItem otherwise your FragmentManager doesn't know which CardFrontFragment has to be flipped (the example shows just one CardFrontFragment and CardBacktFragment - however you have multiple CardFrontFragment and CardBackFragment). A few weeks ago I tried something similar with a GridView. But it didn't work for me, so I take the other solution with the views.

I hope this will help you :)

来源：https://stackoverflow.com/questions/17688446/card-flip-in-android-list-view