用過UC瀏覽器的相信都不會對下圖所示的功能模式:
http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/15-1.png" alt="這里寫圖片描述" />
長按圖標時會在左上角顯示出一個刪除的圖片,點擊這個圖片就可以刪除與之對應(yīng)的Item,下面我們就要來研究一下,如何實現(xiàn)這個功能。 主布局文件代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="@+id/gv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="5dp"
android:numColumns="3"
android:stretchMode="columnWidth"
android:verticalSpacing="5dp" />
</RelativeLayout>
子項目布局文件如下:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginRight="4dip"
android:layout_marginTop="4dip"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="@+id/iv"
android:layout_width="60dip"
android:layout_height="55dip" />
<TextView
android:id="@+id/tv"
android:layout_width="70dip"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:gravity="center"
android:textColor="@android:color/black"
android:textSize="15sp"
android:textStyle="bold" />
</LinearLayout>
<ImageView
android:id="@+id/delete_markView"
android:layout_width="20dip"
android:layout_height="20dip"
android:layout_gravity="right|top"
android:adjustViewBounds="true"
android:src="@drawable/delete"
android:visibility="gone" />
</FrameLayout>
主布局采用FrameLayout幀布局模式,設(shè)置刪除圖片的layout_gravity屬性為right|top,即布局在右上角,并設(shè)置其visibility屬性為gone,即初始時不顯示該圖片。
Bean類Animal和上一節(jié)一樣,這里就不再進行介紹,下面看一下適配器類:
public class GridAdapter extends BaseAdapter {
private Context context;
private List<Animal> datas;
final int position = 0;
private boolean isShowDelete;
public GridAdapter(Context context,List<Animal> datas){
this.context=context;
this.datas=datas;
}
//返回子項的個數(shù)
@Override
public int getCount() {
return datas.size();
}
//返回子項對應(yīng)的對象
@Override
public Object getItem(int position) {
return datas.get(position);
}
//返回子項的下標
@Override
public long getItemId(int position) {
return position;
}
//返回子項視圖
@Override
public View getView(final int position, View convertView, final ViewGroup parent) {
Animal animal= (Animal) getItem(position);
View view;
ViewHolder viewHolder;
if(convertView==null){
view = LayoutInflater.from(context).inflate(R.layout.item_layout,null);
viewHolder=new ViewHolder();
viewHolder.animalImage=(ImageView)view.findViewById(R.id.iv);
viewHolder.animalName=(TextView)view.findViewById(R.id.tv);
viewHolder.deleteImage=(ImageView)view.findViewById(R.id.delete_markView);
view.setTag(viewHolder);
}else{
view=convertView;
viewHolder= (ViewHolder) view.getTag();
}
viewHolder.animalName.setText(animal.getAnimal());
viewHolder.animalImage.setImageResource(animal.getImgId());
viewHolder.deleteImage.setVisibility(isShowDelete ? View.VISIBLE : View.GONE);
if(isShowDelete) {
viewHolder.deleteImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
datas.remove(position);
setIsShowDelete(false);
}
});
}
return view;
}
//創(chuàng)建ViewHolder類
class ViewHolder{
ImageView animalImage,deleteImage;
TextView animalName;
}
public void setIsShowDelete(boolean isShowDelete) {
this.isShowDelete = isShowDelete;
notifyDataSetChanged();
}
}
在getView方法中為刪除圖片deleteImage設(shè)置了單擊事件監(jiān)聽,若isShowDelete為真即刪除圖片顯示的情況下,點擊了刪除圖片,則調(diào)用數(shù)據(jù)集datas的remove方法,傳入positon參數(shù),刪除對應(yīng)的子項,并調(diào)用setIsShowDelete(修改isShowDelete為false,即隱藏刪除圖片,然后調(diào)用notifyDataSetChanged方法刷新控件)。 MainActivity.java:
public class MainActivity extends Activity {
private GridView gridView;
private GridAdapter gridAdapter;
private boolean isShowDelete;
private List<Animal> datas = new ArrayList<Animal>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView=(GridView)findViewById(R.id.gv);
initDatas();//初始化數(shù)據(jù)
gridAdapter=new GridAdapter(this,datas);//實例化適配器類
gridView.setAdapter(gridAdapter);//設(shè)置適配器類
gridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {//設(shè)置長按事件監(jiān)聽
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
if (isShowDelete) {//刪除圖片顯示時長按隱藏
isShowDelete = false;
gridAdapter.setIsShowDelete(isShowDelete);
} else {//刪除圖片隱藏式長按顯示
isShowDelete = true;
gridAdapter.setIsShowDelete(isShowDelete);
}
return false;
}
});
}
private void initDatas() {
Animal animal0 = new Animal("兔八哥", R.drawable.rabbit);
Animal animal1 = new Animal("眼鏡蛇", R.drawable.snack);
Animal animal2 = new Animal("小金魚", R.drawable.fish);
Animal animal3 = new Animal("千里馬", R.drawable.horse);
Animal animal4 = new Animal("米老鼠", R.drawable.mouse);
Animal animal5 = new Animal("大國寶", R.drawable.panda);
datas.add(animal0);
datas.add(animal1);
datas.add(animal2);
datas.add(animal3);
datas.add(animal4);
datas.add(animal5);
}
}
設(shè)置了GridView的長按事件監(jiān)聽,在刪除圖片顯示時,將isShowDelete標識位設(shè)置成false,然后調(diào)用GridAdapter適配器類的setIsShowDelete方法隱藏右上角的刪除圖片。反之,當刪除圖片隱藏時,則調(diào)用setIsShowDelete方法顯示右上角的刪除圖片。 運行實例如下:
http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/15-2.png" alt="這里寫圖片描述" /> http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/15-3.png" alt="這里寫圖片描述" />
長按任一Item,右上角刪除圖片顯示出來,點擊刪除圖片,則刪除對應(yīng)項。 下面研究一下,如何實現(xiàn)動態(tài)增加Item,在上面的基礎(chǔ)上添加動態(tài)增加Item的功能。
布局文件不做調(diào)整,因此,這里就不再貼出代碼,在GridAdapter適配器類中添加了一些功能,貼出代碼,并做相關(guān)講解。
public class GridAdapter extends BaseAdapter {
private Context context;
private List<Animal> datas;
private boolean isShowDelete;
public GridAdapter(Context context,List<Animal> datas){
this.context=context;
this.datas=datas;
}
//返回子項的個數(shù)
@Override
public int getCount() {
return (datas.size()+1);
}
//返回子項對應(yīng)的對象
@Override
public Object getItem(int position) {
return datas.get(position);
}
//返回子項的下標
@Override
public long getItemId(int position) {
return position;
}
//返回子項視圖
@Override
public View getView(final int position, View convertView, final ViewGroup parent) {
View view;
ViewHolder viewHolder;
if(convertView==null){
view = LayoutInflater.from(context).inflate(R.layout.item_layout,null);
viewHolder=new ViewHolder();
viewHolder.animalImage=(ImageView)view.findViewById(R.id.iv);
viewHolder.animalName=(TextView)view.findViewById(R.id.tv);
viewHolder.deleteImage=(ImageView)view.findViewById(R.id.delete_markView);
view.setTag(viewHolder);//設(shè)置tag
}else{
view=convertView;
viewHolder= (ViewHolder) view.getTag();//由tag獲取對象
}
if(position<datas.size()) {
Animal animal= (Animal) getItem(position);
viewHolder.animalName.setText(animal.getAnimal());
viewHolder.animalImage.setImageResource(animal.getImgId());
viewHolder.deleteImage.setVisibility(isShowDelete ? View.VISIBLE : View.GONE);//根據(jù)標識位isShowDelete決定是否顯示刪除圖片按鈕
if (isShowDelete) {
viewHolder.deleteImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
datas.remove(position);
setIsShowDelete(false);
}
});
}
}else{
viewHolder.animalName.setText("點擊添加");
viewHolder.animalImage.setImageResource(R.drawable.add);
viewHolder.deleteImage.setVisibility(View.GONE);
}
return view;
}
//創(chuàng)建ViewHolder類
class ViewHolder{
ImageView animalImage,deleteImage;
TextView animalName;
}
public void setIsShowDelete(boolean isShowDelete) {
this.isShowDelete = isShowDelete;
notifyDataSetChanged();
}
}
MainActivity中也做了一些調(diào)整,如下:
public class MainActivity extends Activity {
private GridView gridView;
private GridAdapter gridAdapter;
private boolean isShowDelete;
private List<Animal> datas = new ArrayList<Animal>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
gridView=(GridView)findViewById(R.id.gv);
initDatas();
gridAdapter=new GridAdapter(this,datas);
gridView.setAdapter(gridAdapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
if(position==parent.getChildCount()-1){
addDatas();
}
}
});
gridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
if(position<datas.size()) {
if (isShowDelete) {//刪除圖片顯示時長按隱藏
isShowDelete = false;
gridAdapter.setIsShowDelete(isShowDelete);
} else {//刪除圖片隱藏式長按顯示
isShowDelete = true;
gridAdapter.setIsShowDelete(isShowDelete);
}
}
return false;
}
});
}
private void addDatas() {
Animal animalAdd=new Animal("大國寶", R.drawable.panda);
datas.add(animalAdd);
gridAdapter.notifyDataSetChanged();
}
private void initDatas() {
Animal animal0 = new Animal("兔八哥", R.drawable.rabbit);
Animal animal1 = new Animal("眼鏡蛇", R.drawable.snack);
Animal animal2 = new Animal("小金魚", R.drawable.fish);
Animal animal3 = new Animal("千里馬", R.drawable.horse);
Animal animal4 = new Animal("米老鼠", R.drawable.mouse);
Animal animal5 = new Animal("大國寶", R.drawable.panda);
datas.add(animal0);
datas.add(animal1);
datas.add(animal2);
datas.add(animal3);
datas.add(animal4);
datas.add(animal5);
}
}
這里添加了子項單擊事件監(jiān)聽(OnItemClickListener),判斷當position==parent.getChildCount-1的時候,即單擊最后一個”添加項“的時候調(diào)用addDatas方法,這個addDatas方法僅作為示例添加了一條記錄到datas里面,實際項目中可以進行替換,注意,添加完成數(shù)據(jù)后,要調(diào)用notifyDataSetChanged方法刷新列表。
運行項目實例如下:
http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/15-4.png" alt="這里寫圖片描述" /> http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/15-5.png" alt="這里寫圖片描述" />
點擊”點擊添加”子項會新增一個item(熊貓)到gridview中,長按任一子項,右上角的刪除按鈕會顯示出來,點擊要刪除子項對應(yīng)的刪除按鈕即可刪除該子項,這樣我們的GridView動態(tài)添加和刪除功能就開發(fā)完畢了。