Android通用索引栏实现代码

偶尔看到之前写过的代码,感觉好多东西几乎在很多项目中都要用到,虽然每个项目的需求和设计都不同,不过实现的效果都是一样的,可能只是数据格式和一些颜色等的细微差距.但是有的时候因为一个小改变,就要去重复的修改代码,麻烦不说,也容易导致新的问题和bug.

就拿忽然想到的索引栏来说,几乎写过的项目中都用到了,比如城市选择、联系人等等.这些地方全都需要用到索引栏,但是用法都是一样的.翻看了几处之前写过的代码,发现每次用到索引栏,都要重新去写方法来处理数据或者对数据的索引进行提取这些,做法也都大同小异.于是乎,尝试着重构一下这部分,也方便之后的使用.

先看一下效果图:

实现

索引栏的实现,网上有很多例子,也比较简单,就不做过多解释.因为在不同项目中可能涉及到索引栏字体颜色、大小不同等问题,所以把之前用到的代码做一下修改,提取出一些自定义属性,方便修改,就不必每次都去代码中修改,也避免影响到其他人的使用.直接看一下代码,在attr中定义一些自定义属性,如下:

attr:

 <?xml version="1.0" encoding="utf-8"?>
<resources>
  <!--sidebar相关-->
  <!--普通时的颜色-->
  <attr name="normalcolor" format="color"/>
  <!--选中时的颜色-->
  <attr name="choosecolor" format="color"/>
  <!--普通时的背景图-->
  <attr name="normalbackground" format="reference"/>
  <!--选中时的背景图-->
  <attr name="choosebackground" format="reference"/>
  <!--索引栏文字大小-->
  <attr name="sidetextsize" format="dimension"/>
  <declare-styleable name="sidebar">
    <attr name="normalcolor"/>
    <attr name="choosecolor"/>
    <attr name="normalbackground"/>
    <attr name="choosebackground"/>
    <attr name="sidetextsize"/>
  </declare-styleable>
</resources>

把颜色文字大小等属性提取出来方便修改.然后看一下sidebar

sidebar:

package com.example.junweiliu.commindexdemo.widget;


import android.annotation.targetapi;
import android.content.context;
import android.content.res.typedarray;
import android.graphics.canvas;
import android.graphics.color;
import android.graphics.paint;
import android.graphics.rect;
import android.graphics.typeface;
import android.graphics.drawable.drawable;
import android.os.build;
import android.util.attributeset;
import android.util.typedvalue;
import android.view.motionevent;
import android.view.view;
import android.widget.textview;

import com.example.junweiliu.commindexdemo.r;


/**
 * created by junweiliu on 16/11/24.
 */
public class sidebar extends view {
  /**
   * 点击回调
   */
  private ontouchingletterchangedlistener ontouchingletterchangedlistener;
  /**
   * 26字母
   */
  public static string[] letterstrs = {"a", "b", "c", "d", "e", "f", "g", "h", "i",
      "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
      "w", "x", "y", "z", "#"};
  /**
   * 当前是否选中
   */
  private int choose = -1;
  /**
   * 字母画笔
   */
  private paint paint = new paint();
  /**
   * 显示的textview
   */
  private textview mtextdialog;
  /**
   * 普通时的颜色
   */
  private int normalcolor;
  /**
   * 选中的颜色
   */
  private int choosecolor;
  /**
   * 普通时的背景
   */
  private drawable normalbackground;
  /**
   * 选中时的背景
   */
  private drawable choosebackground;
  /**
   * 文字大小
   */
  private float textsize;
  /**
   * 边框
   */
  private rect mrect;


  public sidebar(context context, attributeset attrs) {
    this(context, attrs, 0);
  }

  public sidebar(context context, attributeset attrs, int defstyle) {
    super(context, attrs, defstyle);
    // 获取自定义属性
    typedarray ta = context.obtainstyledattributes(attrs, r.styleable.sidebar);
    normalcolor = ta.getcolor(r.styleable.sidebar_normalcolor, color.gray);
    choosecolor = ta.getcolor(r.styleable.sidebar_choosecolor, color.red);
    normalbackground = ta.getdrawable(r.styleable.sidebar_normalbackground);
    choosebackground = ta.getdrawable(r.styleable.sidebar_choosebackground);
    textsize = ta.getdimension(r.styleable.sidebar_sidetextsize, typedvalue
        .applydimension(typedvalue.complex_unit_sp, 13,
            getresources().getdisplaymetrics()));
    ta.recycle();
    init();
  }

  /**
   * 为sidebar设置显示字母的textview
   *
   * @param mtextdialog
   */
  public void settextview(textview mtextdialog) {
    this.mtextdialog = mtextdialog;
  }

  /**
   * 设置
   *
   * @param letter
   */
  public void setletter(string[] letter) {
    this.letterstrs = letter;
    invalidate();
    requestlayout();
  }


  /**
   * 初始化参数
   */
  @targetapi(build.version_codes.jelly_bean)
  private void init() {
    paint.setcolor(normalcolor);
    paint.settypeface(typeface.default_bold);
    paint.setantialias(true);
    paint.settextsize(textsize);
    // 获取单个绘制的rect,用于获取单个绘制项的高度
    mrect = new rect();
    paint.gettextbounds("a", 0, "a".length(), mrect);
  }


  /**
   * 绘制
   *
   * @param canvas
   */
  protected void ondraw(canvas canvas) {
    super.ondraw(canvas);
    // 获取焦点改变背景颜色.
    int height = getheight() - getpaddingtop() - getpaddingbottom();// 获取对应高度
    int width = getwidth(); // 获取对应宽度
    int singleheight = height / letterstrs.length;// 获取每一个字母的高度
    for (int i = 0; i < letterstrs.length; i++) {
      // 选中的状态
      if (i == choose) {
        paint.setcolor(choosecolor);
        paint.setfakeboldtext(true);
      }
      // x坐标等于中间-字符串宽度的一半.
      float xpos = width / 2 - paint.measuretext(letterstrs[i]) / 2;
      float ypos = singleheight * i + singleheight;
      canvas.drawtext(letterstrs[i], xpos, ypos, paint);
      paint.reset();// 重置画笔
      init();
    }
  }

  @targetapi(build.version_codes.jelly_bean)
  @override
  public boolean dispatchtouchevent(motionevent event) {
    final int action = event.getaction();
    // 点击的y坐标
    final float y = event.gety();
    final int oldchoose = choose;
    final ontouchingletterchangedlistener listener = ontouchingletterchangedlistener;
    // 获取当前点击的字母位置,点击位置的y坐标比上总的高度相当于点击的位置比上全部位置(c / b.length = y / getheight())
    final int currchoose = (int) (y / getheight() * letterstrs.length);

    switch (action) {
      case motionevent.action_up:
        // 重置背景色
        if (null != normalbackground) {
          setbackground(normalbackground);
        } else {
          setbackgroundcolor(color.argb(0, 0, 0, 0));
        }
        // 抬起时置为-1
        choose = -1;
        invalidate();
        if (mtextdialog != null) {
          mtextdialog.setvisibility(view.invisible);
        }
        break;
      default:
        // 设置背景色
        if (null != choosebackground) {
          setbackground(choosebackground);
        }
        if (oldchoose != currchoose) {
          if (currchoose >= 0 && currchoose < letterstrs.length) {
            if (null != listener) {
              listener.ontouchingletterchanged(letterstrs[currchoose]);
            }
            if (null != mtextdialog) {
              mtextdialog.settext(letterstrs[currchoose]);
              mtextdialog.setvisibility(view.visible);
            }
            // 设置选中的位置为当前位置
            choose = currchoose;
            invalidate();
          }
        }
        break;
    }
    return true;
  }

  /**
   * 向外公开的方法
   *
   * @param ontouchingletterchangedlistener
   */
  public void setontouchingletterchangedlistener(
      ontouchingletterchangedlistener ontouchingletterchangedlistener) {
    this.ontouchingletterchangedlistener = ontouchingletterchangedlistener;
  }

  /**
   * 回调接口
   *
   * @author coder
   */
  public interface ontouchingletterchangedlistener {
    void ontouchingletterchanged(string s);
  }


  /**
   * 测量
   *
   * @param widthmeasurespec
   * @param heightmeasurespec
   */
  @override
  protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
    super.onmeasure(widthmeasurespec, heightmeasurespec);
    int widthmode = measurespec.getmode(widthmeasurespec);
    int heightmode = measurespec.getmode(heightmeasurespec);
    int sizewidth = measurespec.getsize(widthmeasurespec);
    int sizeheight = measurespec.getsize(heightmeasurespec);
    // 当高度为自适应时,高度为字母高度*字母数量*2 即间隔为单位高度
    int wrapheight = letterstrs.length * (mrect.height() * 2);
    // 当宽度为自适应使,宽度为字母宽度*2
    int warpwidth = mrect.width() * 2;
    setmeasureddimension((widthmode == measurespec.exactly) ? sizewidth : warpwidth
        , (heightmode == measurespec.exactly) ? sizeheight
            //wrap_content时的高度
            : wrapheight);
  }

}

很简单,只是提取出来了一些自定义属性,没什么可说的,接下来分析一下如何让索引栏变得通用,先来想一下索引栏一般的写法.首先拿到一个数据源,然后对这个数据源进行处理,从数据源中提取出首字母当做索引(当然数据源中可能已经含有首字母或者索引等字段),有了索引之后,再在适配器中进行判断来控制是否显示索引标题(我的做法是判断第一次出现当前索引的数据源位置和当前位置是否相同,如果相同则显示索引标题),处理完索引标题的显示和隐藏,最后就是跟索引栏进行绑定(实现索引栏的回调方法并做相关处理).大体步骤就是这样,接下来就是找一下处理不同的地方,比对了一下,发现问题基本都是出现在数据格式不同上,有的数据的索引字段可能叫letter,有的可能叫lettername,这就导致了每次对这些数据进行处理时,都要重新写方法或者修改方法,使得这些方法不共用.那怎么解决一下这个问题呢,最开始想到的是写一个抽象类,然后用一个抽象方法getlettername()来约束索引.每个需要用到索引栏的bean都去继承这个抽象类,重写这个抽象方法,从而达到统一约束索引值的效果,也就解决了索引值字段不同的问题,这样就可以用一个公共的方法来处理不同的数据源.后来又考虑了一下,这个地方其实用接口会更加合适一点,接口灵活性更大,而且也是面向接口编程的一种体现.分析了这么多,来具体代码实现一下,提出一个接口,之后所有需要用到索引的数据bean去实现这个接口中的getlettername()方法并且重写这个方法来返回索引值即可.

接口sidebase:

package com.example.junweiliu.commindexdemo.bean;

/**
 * created by junweiliu on 16/11/21.
 */
public interface sidebase {
  string getlettername();
}

然后数据bean去实现这个接口,例如比较常见的citybean:

package com.example.junweiliu.commindexdemo.bean;

public class citybean implements sidebase {
  /**
   * 城市名
   */
  private string cityname;
  /**
   * 首字母
   */
  private string cityheader;
  /**
   * 城市信息
   */
  private string citymes;


  public citybean(string cityname, string cityheader, string citymes) {
    this.cityname = cityname;
    this.cityheader = cityheader;
    this.citymes = citymes;
  }

  public string getcityname() {
    return cityname;
  }

  public void setcityname(string cityname) {
    this.cityname = cityname;
  }

  public string getcityheader() {
    return cityheader;
  }

  public void setcityheader(string cityheader) {
    this.cityheader = cityheader;
  }

  public string getcitymes() {
    return citymes;
  }

  public void setcitymes(string citymes) {
    this.citymes = citymes;
  }

  /**
   * 获取索引
   *
   * @return
   */
  @override
  public string getlettername() {
    return cityheader;
  }
}

在getlettername()方法中去返回索引值.

接下来就可以去写一些公共的处理方法.比如

  /**
   * 根据当前选中的项获取其第一次出现该项首字母的位置
   *
   * @param position 当前选中的位置
   * @param datas  数据源
   * @return
   */
  public static int getpositionforsection(int position, list<? extends sidebase> datas) {
    // 当前选中的项
    sidebase sidebase = datas.get(position);
    for (int i = 0; i < datas.size(); i++) {
      string firststr = datas.get(i).getlettername().touppercase();
      // 返回第一次出现该项首字母的位置
      if (firststr.equals(sidebase.getlettername())) {
        return i;
      }
    }
    return -1;
  }

因为使用的接口,这里就可以用通配符?的方式来对数据进行处理,只关心和处理getlettername()方法即可.还可以做其他处理:

  /**
   * 获取所选中的索引在列表中的位置
   *
   * @param list
   * @param letter
   * @return
   */
  public static int getletterposition(list<? extends sidebase> list, string letter) {
    int position = -1;

    if (list != null && !list.isempty() && !"".equals(letter)) {
      for (int i = 0; i < list.size(); i++) {
        sidebase bean = list.get(i);
        if (bean.getlettername().equals(letter)) {
          position = i;
          break;
        }
      }
    }
    return position;
  }

  /**
   * 筛选出数据源中所包含的全部索引值
   *
   * @param list
   * @return
   */
  public static string[] getletters(list<? extends sidebase> list) {
    list<string> letters = new arraylist<>();
    if (list != null && !list.isempty()) {
      for (int i = 0; i < list.size(); i++) {
        if (!letters.contains(list.get(i).getlettername())) {
          letters.add(list.get(i).getlettername());
        }
      }
    }
    return (string[]) letters.toarray(new string[letters.size()]);
  }

通过分析和重构之后,这些之前不能公用的方法就变得通用起来,很方便,之后用起来也会特别简单、舒心.

完整代码

公共处理类

commutil:

package com.example.junweiliu.commindexdemo.util;

import com.example.junweiliu.commindexdemo.bean.sidebase;

import java.util.arraylist;
import java.util.list;

/**
 * created by junweiliu on 16/11/24.
 */
public class commutil {

  /**
   * 根据当前选中的项获取其第一次出现该项首字母的位置
   *
   * @param position 当前选中的位置
   * @param datas  数据源
   * @return
   */
  public static int getpositionforsection(int position, list<? extends sidebase> datas) {
    // 当前选中的项
    sidebase sidebase = datas.get(position);
    for (int i = 0; i < datas.size(); i++) {
      string firststr = datas.get(i).getlettername().touppercase();
      // 返回第一次出现该项首字母的位置
      if (firststr.equals(sidebase.getlettername())) {
        return i;
      }
    }
    return -1;
  }

  /**
   * 获取所选中的索引在列表中的位置
   *
   * @param list
   * @param letter
   * @return
   */
  public static int getletterposition(list<? extends sidebase> list, string letter) {
    int position = -1;

    if (list != null && !list.isempty() && !"".equals(letter)) {
      for (int i = 0; i < list.size(); i++) {
        sidebase bean = list.get(i);
        if (bean.getlettername().equals(letter)) {
          position = i;
          break;
        }
      }
    }
    return position;
  }

  /**
   * 筛选出数据源中所包含的全部索引值
   *
   * @param list
   * @return
   */
  public static string[] getletters(list<? extends sidebase> list) {
    list<string> letters = new arraylist<>();
    if (list != null && !list.isempty()) {
      for (int i = 0; i < list.size(); i++) {
        if (!letters.contains(list.get(i).getlettername())) {
          letters.add(list.get(i).getlettername());
        }
      }
    }
    return (string[]) letters.toarray(new string[letters.size()]);
  }
}

适配器cityadapter:

package com.example.junweiliu.commindexdemo.adapter;

import android.content.context;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import android.widget.baseadapter;
import android.widget.textview;

import com.example.junweiliu.commindexdemo.r;
import com.example.junweiliu.commindexdemo.bean.citybean;
import com.example.junweiliu.commindexdemo.util.commutil;

import java.util.list;

/**
 * created by junweiliu on 16/11/24.
 */
public class cityadapter extends baseadapter {
  /**
   * 上下文
   */
  private context context;
  /**
   * 布局加载器
   */
  private layoutinflater minflater;
  /**
   * 数据源
   */
  private list<citybean> citybeanlist;

  /**
   * 构造方法
   *
   * @param context
   * @param citybeanlist
   */
  public cityadapter(context context, list<citybean> citybeanlist) {
    this.context = context;
    this.citybeanlist = citybeanlist;
  }

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

  @override
  public object getitem(int i) {
    return citybeanlist.get(i);
  }

  @override
  public long getitemid(int i) {
    return i;
  }

  @override
  public view getview(int position, view convertview, viewgroup viewgroup) {
    viewholder viewholder = null;
    citybean bean = citybeanlist.get(position);
    if (convertview == null) {
      convertview = minflater.from(context).inflate(r.layout.item_city, null);
      viewholder = new viewholder();
      viewholder.headertv = (textview) convertview.findviewbyid(r.id.tv_item_citys_header);
      viewholder.contenttv = (textview) convertview.findviewbyid(r.id.tv_item_citys_context);
      convertview.settag(viewholder);
    } else {
      viewholder = (viewholder) convertview.gettag();
    }
    // 如果当前位置为第一次出现该类首字母的位置,则显示headertv
    if (position == commutil.getpositionforsection(position, citybeanlist)) {
      viewholder.contenttv.setvisibility(view.visible);
      viewholder.headertv.setvisibility(view.visible);
      viewholder.headertv.settext(bean.getlettername());
    } else {
      viewholder.headertv.setvisibility(view.gone);
      viewholder.contenttv.setvisibility(view.visible);
    }
    viewholder.contenttv.settext(bean.getcityname());
    return convertview;
  }

  /**
   * vh
   */
  class viewholder {
    textview headertv;
    textview contenttv;
  }
}

mainactivity:

package com.example.junweiliu.commindexdemo;

import android.app.activity;
import android.os.bundle;
import android.widget.listview;
import android.widget.textview;

import com.example.junweiliu.commindexdemo.adapter.cityadapter;
import com.example.junweiliu.commindexdemo.bean.citybean;
import com.example.junweiliu.commindexdemo.util.commutil;
import com.example.junweiliu.commindexdemo.widget.sidebar;

import java.util.arraylist;
import java.util.list;

public class mainactivity extends activity {
  /**
   * 城市列表数据
   */
  private list<citybean> citybeanlist = new arraylist<>();
  /**
   * 城市lv
   */
  private listview citylist;
  /**
   * 索引栏
   */
  private sidebar msidebar;
  /**
   * 显示的tv
   */
  private textview mshowtv;
  /**
   * 适配器
   */
  private cityadapter mcityadapter;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);
    initdata();
    initview();
  }


  /**
   * 初始化数据
   */
  private void initdata() {
    citybean bean1 = new citybean("安徽", "a", "安徽故事");
    citybean bean2 = new citybean("安徽1", "a", "安徽1故事");
    citybean bean3 = new citybean("安徽2", "a", "安徽2故事");
    citybean bean4 = new citybean("北京", "b", "北京故事");
    citybean bean5 = new citybean("北京1", "b", "北京1故事");
    citybean bean6 = new citybean("北京2", "b", "北京2故事");
    citybean bean7 = new citybean("重庆", "c", "重庆故事");
    citybean bean8 = new citybean("重庆1", "c", "重庆1故事");
    citybean bean9 = new citybean("重庆2", "c", "重庆2故事");
    citybean bean10 = new citybean("贵州", "g", "贵州故事");
    citybean bean11 = new citybean("贵州1", "g", "贵州2故事");
    citybean bean12 = new citybean("贵州2", "g", "贵州3故事");
    citybean bean13 = new citybean("天津", "t", "天津故事");
    citybean bean14 = new citybean("天津1", "t", "天津1故事");
    citybean bean15 = new citybean("天津2", "t", "天津2故事");

    citybeanlist.add(bean1);
    citybeanlist.add(bean2);
    citybeanlist.add(bean3);
    citybeanlist.add(bean1);
    citybeanlist.add(bean2);
    citybeanlist.add(bean3);
    citybeanlist.add(bean4);
    citybeanlist.add(bean5);
    citybeanlist.add(bean6);
    citybeanlist.add(bean4);
    citybeanlist.add(bean5);
    citybeanlist.add(bean6);
    citybeanlist.add(bean7);
    citybeanlist.add(bean8);
    citybeanlist.add(bean9);
    citybeanlist.add(bean7);
    citybeanlist.add(bean8);
    citybeanlist.add(bean9);
    citybeanlist.add(bean10);
    citybeanlist.add(bean11);
    citybeanlist.add(bean12);
    citybeanlist.add(bean10);
    citybeanlist.add(bean11);
    citybeanlist.add(bean12);
    citybeanlist.add(bean13);
    citybeanlist.add(bean14);
    citybeanlist.add(bean15);
    citybeanlist.add(bean13);
    citybeanlist.add(bean14);
    citybeanlist.add(bean15);
  }

  /**
   * 初始化控件
   */
  private void initview() {
    citylist = (listview) findviewbyid(r.id.lv_city);
    msidebar = (sidebar) findviewbyid(r.id.sb_city);
    mshowtv = (textview) findviewbyid(r.id.tv_city_show);
    mcityadapter = new cityadapter(mainactivity.this, citybeanlist);
    citylist.setadapter(mcityadapter);
    // 设置需要显示的索引栏内容
    msidebar.setletter(commutil.getletters(citybeanlist));
    // 设置需要显示的提示框
    msidebar.settextview(mshowtv);
    msidebar.setontouchingletterchangedlistener(new sidebar.ontouchingletterchangedlistener() {
      @override
      public void ontouchingletterchanged(string s) {
        int position = commutil.getletterposition(citybeanlist, s);
        if (position != -1) {
          citylist.setselection(position);
        }
      }
    });
  }
}

布局文件activity_main:

<?xml version="1.0" encoding="utf-8"?>
<relativelayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.junweiliu.commindexdemo.mainactivity">

  <!--城市列表-->
  <listview
      android:id="@+id/lv_city"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  </listview>
  <!--索引栏-->
  <com.example.junweiliu.commindexdemo.widget.sidebar
      android:id="@+id/sb_city"
      android:layout_width="wrap_content"
      android:layout_height="200dp"
      android:layout_alignparentright="true"
      android:layout_centervertical="true"
      app:sidetextsize="13sp"/>
  <!--显示的字母-->
  <textview
      android:id="@+id/tv_city_show"
      android:layout_width="80dp"
      android:layout_height="80dp"
      android:layout_centerinparent="true"
      android:background="#3f51b5"
      android:gravity="center"
      android:textcolor="#ffffff"
      android:textsize="25sp"
      android:visibility="gone"
  />
</relativelayout>

适配器布局item_city:

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

  <!-- 索引头 -->
  <textview
      android:id="@+id/tv_item_citys_header"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#e3e3e3"
      android:padding="15dp"
      android:text="a"
      android:textcolor="#666666"
      android:textsize="14sp"
      android:visibility="gone"/>

  <!-- 内容 -->
  <textview
      android:id="@+id/tv_item_citys_context"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#ffffff"
      android:padding="15dp"
      android:textcolor="#000000"
      android:textsize="14sp"
      android:visibility="gone"/>

</linearlayout>

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