每個單元格上的Android GridView翻轉動畫？

我對android開發相當陌生，我爲自己創建了一些簡單的應用程序。我遇到了一個與動畫有關的問題，特別是當單擊單元格時GridView的每個單獨單元格上的翻轉動畫。每個單元格上的Android GridView翻轉動畫？

到目前爲止，我的應用程序所做的是從手機中檢索聯繫人，並使用陣列適配器在gridview中顯示聯繫人照片和名稱。

我想要發生的是當用戶點擊聯繫人的網格單元格時，它將執行翻轉動畫並在背面顯示聯繫人電話號碼。當用戶再次單擊該單元時，它將翻回到名稱和照片的上一個視圖。

我已經搜索了互聯網，並嘗試了一些教程，但沒有任何幫助很大，他們必定會混淆我，所以如果有人能幫到那將是很棒的。

我會在下面發佈我的當前代碼！

在此先感謝。

此代碼用於檢索聯繫人的信息！

package content; 

import android.provider.MediaStore.Images; 

public class ContactBean { 
private String name; 
private String phoneNo; 
private String proPic; 

public String getName() { 
    return name; 
} 
public void setName(String name) { 
    this.name = name; 
} 
public String getPhoneNo() { 
    return phoneNo; 
} 
public void setPhoneNo(String phoneNo) { 
    this.phoneNo = phoneNo; 
} 

public String getProPic() { 
    return proPic; 
} 

public void setProPic(String proPic) { 
    this.proPic = proPic; 
} 

}

ViewContatcsActivity

package viewContacts; 

import com.example.contactflipper.R; 

import content.ContactBean; 

import android.app.Activity; 
import android.app.AlertDialog; 
import android.content.DialogInterface; 
import android.database.Cursor; 
import android.graphics.Bitmap; 
import android.os.Bundle; 

import android.provider.ContactsContract; 
import android.view.View; 
import android.widget.AdapterView; 
import android.widget.GridView; 
import android.widget.Toast; 
import android.widget.AdapterView.OnItemClickListener; 

import java.util.ArrayList; 
import java.util.Collections; 
import java.util.Comparator; 
import java.util.List; 


public class ViewContactsActivity extends Activity implements 
OnItemClickListener { 

private GridView listView; 
private List<ContactBean> list = new ArrayList<ContactBean>(); 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.menu_viewcon_grid); 

    listView = (GridView) findViewById(R.id.gridview); 
    listView.setOnItemClickListener(this); 
    String image_uri = ""; 
    Bitmap bitmap = null; 

    Cursor phones = getContentResolver().query(
      ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, 
      null, null); 
    while (phones.moveToNext()) { 

     String name = phones 
       .getString(phones 
         .getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)); 

     String phoneNumber = phones 
       .getString(phones 
         .getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)); 

     image_uri = phones 
        .getString(phones 
         .getColumnIndex(ContactsContract.CommonDataKinds.Phone.PHOTO_URI)); 

     ContactBean objContact = new ContactBean(); 
     objContact.setName(name); 

     objContact.setPhoneNo(phoneNumber); 
     list.add(objContact); 



    } 
    phones.close(); 

    GridAdapter objAdapter = new GridAdapter(
      ViewContactsActivity.this, R.layout.card_front, list); 
    listView.setAdapter(objAdapter); 

    if (null != list && list.size() != 0) { 
     Collections.sort(list, new Comparator<ContactBean>() { 

      @Override 
      public int compare(ContactBean lhs, ContactBean rhs) { 
       return lhs.getName().compareTo(rhs.getName()); 
      } 
     }); 
     AlertDialog alert = new AlertDialog.Builder(
       ViewContactsActivity.this).create(); 
     alert.setTitle(""); 

     alert.setMessage(list.size() + " Contact Found!!!"); 

     alert.setButton("OK", new DialogInterface.OnClickListener() { 

      @Override 
      public void onClick(DialogInterface dialog, int which) { 
       dialog.dismiss(); 
      } 
     }); 
     alert.show(); 

    } else { 
     showToast("No Contact Found!!!"); 
    } 
} 

private void showToast(String msg) { 
    Toast.makeText(this, msg, Toast.LENGTH_SHORT).show(); 
} 

@Override 
public void onItemClick(AdapterView<?> listview, View v, int position, 
     long id) { 
    ContactBean bean = (ContactBean) listview.getItemAtPosition(position); 
    //implement something on the click of each listed item - bean 
} 

}

GridAdapter

package viewContacts; 

import java.util.List; 

import com.example.contactflipper.R; 
import com.example.contactflipper.R.id; 

import content.ContactBean; 


import android.app.Activity; 
import android.content.Context; 
import android.graphics.Bitmap; 
import android.graphics.drawable.Drawable; 
import android.text.Html; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.ArrayAdapter; 
import android.widget.BaseAdapter; 
import android.widget.ImageView; 
import android.widget.TextView; 

public class GridAdapter extends ArrayAdapter<ContactBean> { 

    private Activity activity; 
    private List<ContactBean> items; 
    private int row; 
    private ContactBean objBean; 


    public GridAdapter(Activity act, int row, List<ContactBean> items) { 
     super(act, row, items); 

     this.activity = act; 
     this.row = row; 
     this.items = items; 


    } 

    @Override 
    public View getView(final int position, View convertView, ViewGroup parent) { 
     View view = convertView; 
     ViewHolder holder; 
     if (view == null) { 
      LayoutInflater inflater = (LayoutInflater) activity 
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 
      view = inflater.inflate(row, null); 

      holder = new ViewHolder(); 
      view.setTag(holder); 
     } else { 
      holder = (ViewHolder) view.getTag(); 
     } 

     if ((items == null) || ((position + 1) > items.size())) 
      return view; 

     objBean = items.get(position); 

     holder.tvname = (TextView) view.findViewById(R.id.profileName); 
     //holder.tvPhoneNo = (TextView) view.findViewById(R.id.tvphone); 

     if (holder.tvname != null && null != objBean.getName() 
       && objBean.getName().trim().length() > 0) { 
      holder.tvname.setText(Html.fromHtml(objBean.getName())); 
     } 
     if (holder.tvPhoneNo != null && null != objBean.getPhoneNo() 
       && objBean.getPhoneNo().trim().length() > 0) { 
      holder.tvPhoneNo.setText(Html.fromHtml(objBean.getPhoneNo())); 
     } 
     if (holder.ivPic != null && null != objBean.getProPic() 
       && objBean.getProPic().trim().length() > 0) { 
      holder.ivPic.setBackground((Drawable) Html.fromHtml(objBean.getProPic())); 
     } 
     return view; 
    } 

    public class ViewHolder { 
     public TextView tvname, tvPhoneNo; 
     public ImageView ivPic; 
    } 

}

ViewContactsFragment

package viewContacts; 

import com.example.contactflipper.R; 
import com.example.contactflipper.R.id; 
import com.example.contactflipper.R.layout; 

import content.AppDetails; 
import android.app.Activity; 
import android.app.Fragment; 
import android.content.res.Configuration; 
import android.os.Bundle; 
import android.util.Log; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.GridView; 

public class VCGridFragment extends Fragment { 


    public static GridView mGridview; 

    @Override 
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ 

      View view = inflater.inflate(R.layout.menu_viewcon_grid, container, false); 
      Log.d("Called", "on Create View"); 
      return view; 
     } 

    //super.onCreateView(inflater, container, savedInstanceState); 
    @Override 
    public void onViewCreated(View view, Bundle savedInstanceState){ 
     super.onViewCreated(view, savedInstanceState); 
     Log.d("Called", "created Grid"); 
     mGridview = (GridView) view.findViewById(R.id.gridview); 


     Configuration config = getResources().getConfiguration(); 

     if(AppDetails.isTablet){ 

      if(config.orientation == Configuration.ORIENTATION_LANDSCAPE){ 
       mGridview.setNumColumns(4); 
      }else{ 
       mGridview.setNumColumns(3); 
      } 

     }else{ 
      if(config.orientation == Configuration.ORIENTATION_LANDSCAPE){ 
       mGridview.setNumColumns(3); 
      }else{ 
       mGridview.setNumColumns(2); 
      } 
     } 

     /* 
     mGridview.setOnItemClickListener(new onItemClickLitener(){ 

      @Override 
      public void onItemClick(AdapterView<?> parent, View view, int position, long id){ 
       onGridItemClick((GridView) parent, view, position, id); 
      } 

     }); 
    } 

    public void onGridItemClick(GridView g, View v, int position, long id){ 
     Activity activity = getActivity(); 
    } 
    */ 
} 
}

GridView的XML -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/contact_grid" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_gravity="center" 
    android:background="#ffffff" 
    android:scrollbars="none" 
    tools:context=".MainActivity" > 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_gravity="center" 
     android:background="@drawable/gradient" 
     android:padding="10dp" > 

     <GridView 
      android:id="@+id/gridview" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_marginTop="50dp" 
      android:numColumns="2" 
      android:horizontalSpacing="8dp" 
      android:scrollbars="none" 
      android:verticalSpacing="8dp" > 

     </GridView> 

     <Button 
      android:id="@+id/backButton" 
      android:layout_width="100dp" 
      android:layout_height="wrap_content" 
      android:layout_gravity="top|right" 
      android:background="#8043BFC7" 
      android:text="@string/edit_contacts" 
      android:textColor="#ffffff" 
      android:textStyle="bold" /> 

    </FrameLayout> 

</RelativeLayout>

CARD XML面前 - 卡XML的

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

    <ImageView 
     android:id="@+id/profileThumb" 
     android:layout_width="match_parent" 
     android:layout_height="140dp" 
     ></ImageView> 

    <TextView 
     android:id="@+id/profileName" 
     android:layout_width="match_parent" 
     android:layout_height="40dp" 
     android:layout_gravity="bottom" 
     android:background="#40000000" 
     android:textColor="#ffffff" 
     android:textSize="22sp"> 
     </TextView> 


</LinearLayout>

BACK -

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="180dp" 
    android:layout_height="180dp" 
    android:orientation="vertical" 
    android:background="#a6c" 
    android:padding="10dp" 
    android:gravity="bottom" 
    > 
    <TextView 
     android:id="@+id/infoName" 
     style="?android:textAppearanceLarge" 
     android:textStyle="bold" 
     android:textColor="#fff" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="HCKDAHOIW" 
     ></TextView> 

    <TextView 
     android:id="@+id/infoLocality" 
     style="?android:textAppearanceSmall" 
     android:textAllCaps="true" 
     android:textStyle="bold" 
     android:textColor="#80ffffff" 
     android:lineSpacingMultiplier="1.2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="convoy" 
     ></TextView> 

    <TextView 
     android:id="@+id/infoEmail" 
     style="?android:textAppearanceSmall" 
     android:textColor="#80ffffff" 
     android:lineSpacingMultiplier="1.2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="[email protected]" 
     ></TextView> 

    <TextView 
     android:id="@+id/infoNumber" 
     style="?android:textAppearanceSmall" 
     android:textColor="#80ffffff" 
     android:lineSpacingMultiplier="1.2" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:text="(086) 123 4567" 
     ></TextView> 

</LinearLayout>

來源

2013-08-27 Harry117

用一個ViewFlipper和2個孩子（正面，背面）膨脹gridview中的佈局不是一件簡單的事情，然後爲ViewFlipper設置動畫，當用戶單擊時簡單地將顯示的圖片設置爲正面或背面它？ –

是的，實際上聽起來很簡單，因爲我說我對android相當陌生，所以我可能過度思考一切。是否有任何在線教程或樣本可以幫助我朝正確的方向發展？ @Reid – Harry117

我會去做這樣的事情。

假設這是您在gridview中膨脹的佈局，它的名稱爲view_flipper_layout。當然，你必須將所有的textview組件等添加到前面或後面的linearlayout。

<?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" > 

    <ViewFlipper 
     android:id="@+id/my_view_flipper" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" > 

     <LinearLayout 
      android:id="@+id/front" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" > 

      <TextView 
       android:id="@+id/name" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Large Text" 
       android:textAppearance="?android:attr/textAppearanceLarge" /> 

     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/back" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" > 

      <ImageView 
       android:id="@+id/picture" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 

     </LinearLayout> 

    </ViewFlipper> 

</LinearLayout>

現在讓我們說這是適配器

public GridAdapter(Activity act, int row, List<ContactBean> items) { 
    super(act, row, items); 

    this.activity = act; 
    this.row = row; 
    this.items = items; 


} 


@Override 
public View getView(final int position, View convertView, ViewGroup parent) { 

    View view = convertView; 
    ViewHolder holder; 
    if (view == null) { 
     LayoutInflater inflater = (LayoutInflater) activity 
       .getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

     //here is where you inflate your layout containing your viewflipper 
     view = inflater.inflate(R.layout.view_flipper_layout, null); 

    } else { 
     holder = (ViewHolder) view.getTag(); 
    } 

    //reference the viewFlipper 
    ViewFlipper flipper = (viewFlipper) holder.findViewById(R.id.my_view_flipper); 
    //your front layout should be set to displayed be default 


    //now you can get get references to your textview or ImageViews contained within the layout 
    TextView name = (TextView) holder.findViewById(R.id.name); 
    name.setText("your text"); 

    ImageView picture = (ImageView) holder.findViewById(R.id.picture); 

    //now you set your onclick and pass it the current viewflipper to control the displayed child 
    flipper.setOnClickListener(new OnClickListener(){ 
     @Override 
     public void onClick(View click) { 

      flipViewFlipper(flipper); 

     } 

    }); 


    return view; 
} 


private void flipViewFlipper(ViewFlipper flipper){ 

    if(flipper.getDisplayedChild() == 0){ 
     flipper.setDisplayedChild(1); 
    } 
    else{ 
    flipper.setDisplayeChild(0); 
    } 

}

}

我是從我的頭打字，所以只是把它作爲一個指南，如果你嘗試走這條路。

來源

2013-08-27 10:44:07

好的非常感謝你，我會試試這個，讓你知道我是怎麼回事，再次感謝。@ Reid – Harry117

謝謝...我用它來做一個簡單的翻轉卡片遊戲..好的工作 – CoDe

每個單元格上的Android GridView翻轉動畫？

回答

相關問題