自定义View,实现侧边索引

侧边索引的实现思路:

侧拉索引:音乐APP,即时通讯,电商选择城市,短信验证选择城市都有这个类型自定义控件
实现步骤:
1.绘制A-Z的字母列表(自绘式自定义控件)
2.响应触摸事件
3.提供监听回调
4.获取汉字的拼音,首字母(pinyin4J通过汉字得到她的拼音,只能一个字符一个字符去转换成拼音)
5.根据拼音排序
6.根据首字母分组
7.把监听回调和ListView结合起来
掌握解决问题的思路:把复杂的东西简单化,把复杂的东西分成尽可能小的模块把握住模块的关键点,一步一个脚印的去做,最终就可以实现复杂的效果

首先创建XML布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mylist"></ListView>

    <com.example.customview.ui.QuickIndexBar
        android:id="@+id/action_bar"
        android:layout_width="30dp"
        android:layout_height="match_parent"
        android:layout_alignParentEnd="true"
        android:background="#ff0000" />

</RelativeLayout>

新建一个item_person.xml

<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_index"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#666666"
        android:gravity="center_vertical"
        android:paddingLeft="15dp"
        android:text="A"
        android:textColor="#FFFFFF"
        android:textSize="18sp" />

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:paddingLeft="15dp"
        android:text="宋江"
        android:textSize="22sp" />

</LinearLayout>

创建工具类,根据汉字拿到拼音

public class HaoHan implements  Comparable<HaoHan>{
    private String name;
    private String pinyin;

    public HaoHan(String name) {
        this.name = name;
        //使用工具类,根据汉字拿到拼音
        this.pinyin= PinyinUtil.getPingyin(name);
    }

    public String getName() {
        return name;
    }

    public String getPinyin() {
        return pinyin;
    }

    @Override
    public int compareTo(HaoHan haoHan) {
        return this.pinyin.compareTo(haoHan.pinyin);
    }
}

快速索引栏实现思路
* 1.继承VIew,复写构造方法,初始化画笔
* 2.在onDrawer方法里绘制字符
* 3.在onMeasure方法里测量高度
* 4.在onTouchEvent事件知道用户具体按住了那个字母
* 5.定义抽象方法,实现监听回调

新建一个自定义类,继承VIew,实现快速索引栏

public class QuickIndexBar extends View {

    private Paint paint;
    //A.要绘制的内容
    private static final String[] LETTERS = new String[]{
            "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 cellWidth;
    private float cellHeight;
    private float y;
    private int currentIndex;


    public QuickIndexBar(Context context) {
        this(context, null);
    }

    public QuickIndexBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public QuickIndexBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //初始化画笔
        initPaint();
    }

    private void initPaint() {
        //创建一个抗锯齿的画笔
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //画笔文本加粗
        paint.setTypeface(Typeface.DEFAULT_BOLD);
        //颜色
        paint.setColor(Color.WHITE);

    }

    //完成侧拉索引
    @Override
    protected void onDraw(Canvas canvas) {
        //遍历了26个字母,进行坐标计算,进行绘制
        for (int i = 0; i < LETTERS.length; i++) {
            //从数组,根据i取出字母
            String letter = LETTERS[i];
            //计算x坐标
            float x = cellWidth * 0.5f - paint.measureText(letter) * 0.5f;

            //计算y坐标
            float y = cellHeight * 0.5f + paint.measureText(letter) * 0.5f + i * cellHeight;
            canvas.drawText(letter, x, y, paint);
        }
    }

    //完成侧拉索引的测量,得到单元格的宽高
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取控件的宽高
        int mHeight = getMeasuredHeight();
        cellWidth = getMeasuredWidth();
        //获取单元格的高度,由自定义控件总高度,除以所有字母所占用的高度
        cellHeight = mHeight * 1.0f / LETTERS.length;//为了精确,避免四舍五入,我们把数转换为小数

    }
    //重写触摸事件,返回值为True,方起效果

    //记录用户上一次按下的位置,以便进行判断这一次所按住的位置是否还是上一次的位置,如果是的话,不做任何处理
    private int lastIndex=-1;
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            //计算用户按到哪个字母的范围,主要是Y轴
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                //获取被点击到的字母索引
                y = event.getY();
                currentIndex = (int) (y / cellHeight);
                //为了防止一个字母按下,不停地重复调用,将进行判断,判断是否还是按着上一个字母,是的话就不做任何处理提供程序的性能
                if (currentIndex!=lastIndex){
                    //为了防止角标越界,我们只在用户按住的Y轴值大于0,小于数组长度方执行
                    if (currentIndex>=0&&currentIndex<LETTERS.length){
                        String letter = LETTERS[currentIndex];
                        //设置回调的监听
                        if (mOnLetterUpdateListener!=null){
                            mOnLetterUpdateListener.onLetterUpdate(letter);
                        }

                        lastIndex=currentIndex;
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }
    //c.定义接口
    public interface OnLetterUpdateListener {


        void onLetterUpdate(String string);
    }
//定义接口对象
    private OnLetterUpdateListener mOnLetterUpdateListener;

//暴露方法,让外界传过来一个实现接口的类对象
    public void setmOnLetterUpdateListener(OnLetterUpdateListener onLetterUpdateListener) {
        mOnLetterUpdateListener = onLetterUpdateListener;

    }
}

工具类实现拼音

public class PinyinUtil {
public static String getPingyin(String string){
    HanyuPinyinOutputFormat format=new HanyuPinyinOutputFormat();
    //不要音标
    format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);

    //设置转换出大写字母
    format.setCaseType(HanyuPinyinCaseType.UPPERCASE);
    //我把得到的字符串,改为了字符数组,pinying4j只能一个字符一个字符去传唤拼音
    char[] chars = string.toCharArray();
    //创建了一个装字符的容器,stringBuilder()
    StringBuffer sb = new StringBuffer();

    for (int x=0;x<chars.length;x++){
        char c = chars[x];
        //如果时空格,跳过当前循环
        if (Character.isWhitespace(c)){
            continue;
        }
        //是不是汉字,如果不是汉字,直接拼写
        if (c>-128&&c<127){
            sb.append(c);
        }//是汉字,那么我们就获取拼音
        else{
            try {
                //获取某个字符对应的拼音,可以获取到多音字,
                String s = PinyinHelper.toHanyuPinyinStringArray(c, format)[0];
                sb.append(s);
            } catch (BadHanyuPinyinOutputFormatCombination badHanyuPinyinOutputFormatCombination) {
                badHanyuPinyinOutputFormatCombination.printStackTrace();
            }
        }
    }
    return sb.toString();
}
}

创建吐司的工具类,防止好久没有更新文字的问题

public class toastUtil {
    private static Toast toast;
    public static void showToast(Context context,String msg){
        if (toast==null){
            toast=Toast.makeText(context,"",Toast.LENGTH_SHORT);
        }
        toast.setText(msg);
        toast.show();
    }
}

创建文本类

public class cheeses {
    public static final String[] NAMES = new String[]{"宋江", "卢俊义", "吴用",
            "公孙胜", "关胜", "林冲", "秦明", "呼延灼", "花荣", "柴进", "李应", "朱仝", "鲁智深",
            "武松", "董平", "张清", "杨志", "徐宁", "索超", "戴宗", "刘唐", "李逵", "史进", "穆弘",
            "雷横", "李俊", "阮小二", "张横", "阮小五", " 张顺", "阮小七", "杨雄", "石秀", "解珍",
            " 解宝", "燕青", "朱武", "黄信", "孙立", "宣赞", "郝思文", "韩滔", "彭玘", "单廷珪",
            "魏定国", "萧让", "裴宣", "欧鹏", "邓飞", " 燕顺", "杨林", "凌振", "蒋敬", "吕方",
            "郭 盛", "安道全", "皇甫端", "王英", "扈三娘", "鲍旭", "樊瑞", "孔明", "孔亮", "项充",
            "李衮", "金大坚", "马麟", "童威", "童猛", "孟康", "侯健", "陈达", "杨春", "郑天寿",
            "陶宗旺", "宋清", "乐和", "龚旺", "丁得孙", "穆春", "曹正", "宋万", "杜迁", "薛永", "施恩",
            "周通", "李忠", "杜兴", "汤隆", "邹渊", "邹润", "朱富", "朱贵", "蔡福", "蔡庆", "李立",
            "李云", "焦挺", "石勇", "孙新", "顾大嫂", "张青", "孙二娘", " 王定六", "郁保四", "白胜",
            "时迁", "段景柱", "易宸锋"};
}

判断当前首字母和上一个条目首字母是否一致,不一致时,就显示全部的界面,一致时,就隐藏第一个界面

public class HaoHanAdapter extends BaseAdapter {
    private ArrayList<HaoHan> persons = new ArrayList<>();
    private final Context context;

    public HaoHanAdapter(ArrayList<HaoHan> persons, Context context) {
        this.persons = persons;
        this.context = context;
    }

    @Override
    public int getCount() {
        return persons.size();
    }

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        View view;
        if (convertView == null) {
            view = View.inflate(context, R.layout.item_person, null);
        } else {
            view = convertView;
        }
        TextView tv_index = (TextView) view.findViewById(R.id.tv_index);
        TextView tv_name = (TextView) view.findViewById(R.id.tv_name);
        HaoHan haoHan = persons.get(position);
        //当前的首字母
        String currentStr = haoHan.getPinyin().charAt(0) + "";
        String indexStr=null;
        //如果是第一个名字,直接显示
        if (position == 0) {
            indexStr = currentStr;
        } else {
            //判断当前首字母和上一个条目的首字母是否一致,不一致显示完整的item界面
            String lastStr = persons.get(position - 1).getPinyin().charAt(0) + "";
            //判断两个参数是否一致,不一致就执行赋值的逻辑
            if (!TextUtils.equals(lastStr,currentStr)){
                //不一致时候赋值indexStr
                indexStr=currentStr;
            }
        }
        tv_index.setVisibility(indexStr!=null?View.VISIBLE:View.GONE);
        tv_index.setText(currentStr);
        tv_name.setText(haoHan.getName());
        return view;
    }
}

最后再MainActivity中实现

public class MainActivity extends AppCompatActivity {

    private ListView lv;
    private ArrayList<HaoHan> persons;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        QuickIndexBar bar= (QuickIndexBar) findViewById(R.id.action_bar);
        bar.setmOnLetterUpdateListener(new QuickIndexBar.OnLetterUpdateListener() {
            @Override
            public void onLetterUpdate(String string) {
                toastUtil.showToast(MainActivity.this,string);
            }
        });
        //view层
        lv = (ListView) findViewById(R.id.mylist);
        //d.model层,创建集合
        persons = new ArrayList<>();
        //d.填充并排列数据
        fillAndSortData(persons);
        //d.Controller层,设置适配器
        lv.setAdapter(new HaoHanAdapter(persons,this));
        //根据用户按住的字符,自动跳到对应的listveiw条目上
        bar.setmOnLetterUpdateListener(new QuickIndexBar.OnLetterUpdateListener() {
            @Override
            public void onLetterUpdate(String letter) {
                for (int x=0;x<persons.size();x++){
                    String l = persons.get(x).getPinyin().charAt(0) + "";

                    if (TextUtils.equals(letter,l)){
                        //找到第一个首字母是letter条目
                        lv.setSelection(x);
                        break;
                    }
                }
            }
        });
    }

    /**
     * 填充数据并进行排序
     * @param persons
     */
    private void fillAndSortData(ArrayList<HaoHan> persons) {
        //填充
        for (int x=0;x<cheeses.NAMES.length;x++){
            String name = cheeses.NAMES[x];
            persons.add(new HaoHan(name));
        }
        //排序
        Collections.sort(persons);
    }
}

好了,这就可以实现一个自定义VIew的侧边索引了!

大家可以做一下!