用過(guò)UC瀏覽器的相信都不會(huì)對(duì)下圖所示的功能模式:
http://wiki.jikexueyuan.com/project/twenty-four-Scriptures/images/15-1.png" alt="這里寫圖片描述" />
長(zhǎng)按圖標(biāo)時(shí)會(huì)在左上角顯示出一個(gè)刪除的圖片,點(diǎn)擊這個(gè)圖片就可以刪除與之對(duì)應(yīng)的Item,下面我們就要來(lái)研究一下,如何實(shí)現(xiàn)這個(gè)功能。 主布局文件代碼如下:
<?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>
子項(xiàng)目布局文件如下:
<?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,即初始時(shí)不顯示該圖片。
Bean類Animal和上一節(jié)一樣,這里就不再進(jìn)行介紹,下面看一下適配器類:
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;
}
//返回子項(xiàng)的個(gè)數(shù)
@Override
public int getCount() {
return datas.size();
}
//返回子項(xiàng)對(duì)應(yīng)的對(duì)象
@Override
public Object getItem(int position) {
return datas.get(position);
}
//返回子項(xiàng)的下標(biāo)
@Override
public long getItemId(int position) {
return position;
}
//返回子項(xiàng)視圖
@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)聽(tīng),若isShowDelete為真即刪除圖片顯示的情況下,點(diǎn)擊了刪除圖片,則調(diào)用數(shù)據(jù)集datas的remove方法,傳入positon參數(shù),刪除對(duì)應(yīng)的子項(xià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);//實(shí)例化適配器類
gridView.setAdapter(gridAdapter);//設(shè)置適配器類
gridView.setOnItemLongClickListener(new AdapterView.OnItemLongClickListener() {//設(shè)置長(zhǎng)按事件監(jiān)聽(tīng)
@Override
public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
if (isShowDelete) {//刪除圖片顯示時(shí)長(zhǎng)按隱藏
isShowDelete = false;
gridAdapter.setIsShowDelete(isShowDelete);
} else {//刪除圖片隱藏式長(zhǎng)按顯示
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("大國(guó)寶", R.drawable.panda);
datas.add(animal0);
datas.add(animal1);
datas.add(animal2);
datas.add(animal3);
datas.add(animal4);
datas.add(animal5);
}
}
設(shè)置了GridView的長(zhǎng)按事件監(jiān)聽(tīng),在刪除圖片顯示時(shí),將isShowDelete標(biāo)識(shí)位設(shè)置成false,然后調(diào)用GridAdapter適配器類的setIsShowDelete方法隱藏右上角的刪除圖片。反之,當(dāng)刪除圖片隱藏時(shí),則調(diào)用setIsShowDelete方法顯示右上角的刪除圖片。 運(yùn)行實(shí)例如下:
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="這里寫圖片描述" />
長(zhǎng)按任一Item,右上角刪除圖片顯示出來(lái),點(diǎn)擊刪除圖片,則刪除對(duì)應(yīng)項(xiàng)。 下面研究一下,如何實(shí)現(xiàn)動(dòng)態(tài)增加Item,在上面的基礎(chǔ)上添加動(dòng)態(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;
}
//返回子項(xiàng)的個(gè)數(shù)
@Override
public int getCount() {
return (datas.size()+1);
}
//返回子項(xiàng)對(duì)應(yīng)的對(duì)象
@Override
public Object getItem(int position) {
return datas.get(position);
}
//返回子項(xiàng)的下標(biāo)
@Override
public long getItemId(int position) {
return position;
}
//返回子項(xiàng)視圖
@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獲取對(duì)象
}
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ù)標(biāo)識(shí)位isShowDelete決定是否顯示刪除圖片按鈕
if (isShowDelete) {
viewHolder.deleteImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
datas.remove(position);
setIsShowDelete(false);
}
});
}
}else{
viewHolder.animalName.setText("點(diǎn)擊添加");
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) {//刪除圖片顯示時(shí)長(zhǎng)按隱藏
isShowDelete = false;
gridAdapter.setIsShowDelete(isShowDelete);
} else {//刪除圖片隱藏式長(zhǎng)按顯示
isShowDelete = true;
gridAdapter.setIsShowDelete(isShowDelete);
}
}
return false;
}
});
}
private void addDatas() {
Animal animalAdd=new Animal("大國(guó)寶", 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("大國(guó)寶", R.drawable.panda);
datas.add(animal0);
datas.add(animal1);
datas.add(animal2);
datas.add(animal3);
datas.add(animal4);
datas.add(animal5);
}
}
這里添加了子項(xiàng)單擊事件監(jiān)聽(tīng)(OnItemClickListener),判斷當(dāng)position==parent.getChildCount-1的時(shí)候,即單擊最后一個(gè)”添加項(xiàng)“的時(shí)候調(diào)用addDatas方法,這個(gè)addDatas方法僅作為示例添加了一條記錄到datas里面,實(shí)際項(xiàng)目中可以進(jìn)行替換,注意,添加完成數(shù)據(jù)后,要調(diào)用notifyDataSetChanged方法刷新列表。
運(yùn)行項(xiàng)目實(shí)例如下:
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="這里寫圖片描述" />
點(diǎn)擊”點(diǎn)擊添加”子項(xiàng)會(huì)新增一個(gè)item(熊貓)到gridview中,長(zhǎng)按任一子項(xiàng),右上角的刪除按鈕會(huì)顯示出來(lái),點(diǎn)擊要?jiǎng)h除子項(xiàng)對(duì)應(yīng)的刪除按鈕即可刪除該子項(xiàng),這樣我們的GridView動(dòng)態(tài)添加和刪除功能就開發(fā)完畢了。