欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android仿QQ个人标签添加与删除功能

程序员文章站 2022-04-30 22:49:02
最近在公司项目开发中,有一个类似于qq个人标签的需求要完成,具体包括个人标签的添加,删除,添加过程中重复的标签会提示用户,不能够进行添加。先给大家看一下效果图。 点击...

最近在公司项目开发中,有一个类似于qq个人标签的需求要完成,具体包括个人标签的添加,删除,添加过程中重复的标签会提示用户,不能够进行添加。先给大家看一下效果图。

Android仿QQ个人标签添加与删除功能

点击标签按钮,弹出标签选择的页面,显示所有的标签;点击全部标签里面的item,选择的标签会显示在上方;再次点击相同的标签进行添加,会提示用户“标签已存在,请重新添加”;点击上方已经选择好的标签,进行删除操作

业务逻辑就是这样,下面是具体实现过程:

一、界面布局:

<linearlayout
  android:layout_width="fill_parent"
  android:layout_height="@dimen/label_hei" >

  <gridview
   android:id="@+id/label_check_gv"
   style="@style/w_h_full"
   android:layout_margin="@dimen/margin"
   android:horizontalspacing="@dimen/margin"
   android:numcolumns="4"
   android:scrollbars="none"
   android:stretchmode="columnwidth"
   android:verticalspacing="@dimen/margin" >
  </gridview>
 </linearlayout>

 <linearlayout
  android:layout_width="fill_parent"
  android:layout_height="@dimen/activity_bar"
  android:background="@color/gray_bg" >

  <textview
   style="@style/w_wrap_h_wrap"
   android:layout_gravity="center_vertical"
   android:layout_marginleft="@dimen/margin"
   android:text="@string/all_label" />
 </linearlayout>

 <gridview
  android:id="@+id/label_gv"
  style="@style/w_h_full"
  android:layout_margin="@dimen/margin"
  android:horizontalspacing="@dimen/margin"
  android:numcolumns="4"
  android:scrollbars="none"
  android:stretchmode="columnwidth"
  android:verticalspacing="@dimen/margin" >
</gridview>

关键布局就是两个gridview,其中属性依次设置的是id,高宽,边距,水平边距,列数,隐藏滚动条,缩放与列宽大小同步,垂直边距。item里面的布局就是textview,背景是一个自定义的边框。

二、gridview的适配器:

public class fraglabelgridviewadapter extends baseadapter {

 class viewholder {
  @viewinject(r.id.gv_label_txt)
  public textview label;
 }

 private context context;
 private layoutinflater inflater;
 private list<string> labels;

 public fraglabelgridviewadapter(list<string> labels, context context) {
  this.context = context;
  inflater = layoutinflater.from(context);
  this.labels = labels;

 }

 @override
 public int getcount() {
  return labels.size();
 }

 @override
 public object getitem(int position) {
  return (position);
 }

 @override
 public long getitemid(int id) {
  // todo auto-generated method stub
  return id;
 }

 @override
 public view getview(int position, view convertview, viewgroup parent) {
  viewholder viewholder;
  if (convertview == null) {
   convertview = inflater.inflate(r.layout.gv_item_label, null);
   viewholder = new viewholder();
   viewutils.inject(viewholder, convertview);
   convertview.settag(viewholder);
  } else {
   viewholder = (viewholder) convertview.gettag();
  }
  viewholder.label.settext(labels.get(position));
  return convertview;
 }

}

核心就是使用viewholder来优化gridview,原理就是convertview的复用:当第一次创建convertview对象时,便把item的子view控件对象实例化出来并保存到viewholder对象中(这里使用了xutils的注解)。然后用convertview的settag将viewholder对象设置到tag中, 当以后再次加载listview的item时便可以直接从tag中取出viewholder对象,不需要每次都去获取item的子控件对象。这样达到复用的目的,大大提高了性能。

三、主界面的代码:

public class fragmentlabel extends fragment {

 @viewinject(r.id.label_gv)
 gridview labelgridview;
 @viewinject(r.id.label_check_gv)
 gridview labelcheckgridview;
 private context context;
 private fraglabelgridviewadapter adapter;
 private fraglabelcheckgridviewadapter checkadapter;
 // 所有标签
 private list<string> labels = new arraylist<string>();
 // 已选标签
 private list<string> checklabels = new arraylist<string>();

 public view oncreateview(layoutinflater inflater, viewgroup container,
   bundle savedinstancestate) {

  view view = inflater.inflate(r.layout.fragment_label, container, false);
  viewutils.inject(this, view);
  context = getactivity().getapplicationcontext();
  return view;

 }

 @override
 public void onactivitycreated(bundle savedinstancestate) {
  // todo auto-generated method stub
  super.onactivitycreated(savedinstancestate);
  initviews();
 }

首先是通过注解来进行组件的声明,效果与findviewbyid()一样。然后就是两个gridview的适配器的声明,接下来就是模拟gridview里面的数据进行操作

private void initviews() {
  labels.add("高血压");
  labels.add("糖尿病");
  labels.add("肺炎");
  labels.add("肝炎");
  labels.add("高血脂");
  labels.add("心脏病");
  labels.add("中暑");
  labels.add("肺炎");
  labels.add("感冒");
  labels.add("高血脂");
  labels.add("胃病");
  labels.add("糖尿病");
  labels.add("肺炎");
  labels.add("肝炎");
  labels.add("高血脂");
  labels.add("高血压");
  labels.add("糖尿病");
  labels.add("肺炎");
  labels.add("肝炎");
  labels.add("高血脂");
  labels.add("高血压");
  labels.add("糖尿病");
  labels.add("肺炎");

  adapter = new fraglabelgridviewadapter(labels, context);
  labelgridview.setadapter(adapter);
  labelgridview.setonitemclicklistener(new onitemclicklistener() {

   @override
   public void onitemclick(adapterview<?> arg0, view arg1,
     int position, long arg3) {
    for (int i = 0; i < checklabels.size(); i++) {
     if (labels.get(position) == checklabels.get(i)) {
      uiutil.showtoast(context,
        getresources().getstring(r.string.label_toast));
      return;
     }

    }
    checklabels.add(labels.get(position));

    refresh();
   }

  });
  checkadapter = new fraglabelcheckgridviewadapter(checklabels, context);
  labelcheckgridview.setadapter(checkadapter);
  labelcheckgridview.setonitemclicklistener(new onitemclicklistener() {

   @override
   public void onitemclick(adapterview<?> arg0, view arg1,
     int position, long arg3) {
    checklabels.remove(position);
    refresh();
   }
  });

 }

 private void refresh() {
  checkadapter.setlabels(checklabels);
  checkadapter.notifydatasetchanged();
 }
}

首先往list集合添加数据,这里都是模拟的数据,实际情况数据都会从服务器获取。通过构造方法传递了两个参数来实例化适配器,并给gridview绑定适配器。

给下面gridview的item绑定监听器,处理点击添加操作。点击事件里面,首先要进行标签唯一性的判断,遍历上面gridview的list集合,如果与点击item的值一样,会提示用户“标签存在”,如果标签不存在,则会将数据添加在上面的gridview的list中。最后执行refresh方法,将数据传递给adapter,然后调用notifydatasetchanged()方法,这样选择的标签会自动出现在上面,无需刷新操作。

给上面gridview的item绑定监听器,处理点击删除操作,调用的是list的remove(position)方法,删除方法执行以后,再调用一下刷新方法。最后运行的效果和刚开始的图片一样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。