Android自定义屏幕侧边字母排序控件

原创 2015年11月18日 11:35:08

看图片右侧字母排序的控件,触摸上面的字母,可迅速跳至指定字母分类,配合上一篇汉字转拼音,可以实现此功能。

侧栏字母排序图

如下代码,新建类,可copy直接使用。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;

/**
 * 根据字母形成的索引栏 测试
 *
 * Created by yangxiix on 2015/11/16.
 */
public class LetterIndexBar extends View {

    private String[] mIndexer = {"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 height;
    private int curChoose = -1; //当前选中

    private OnTouchingLetterChangedListener onTouchingLetterChangedListener;

    private Paint mPaint;

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

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

    public LetterIndexBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        initData(canvas);
    }

    private void initData(Canvas canvas) {
        DisplayMetrics dm = getResources().getDisplayMetrics();
        float density = dm.density; //像素密度
        int width = getWidth();
        height = getHeight();
        int perHeight = height / mIndexer.length;

        canvas.drawColor(Color.parseColor("#FFC0CB"));  //设置背景栏
        mPaint = new Paint();

        for (int i = 0; i < mIndexer.length; i++) {
            if (curChoose != -1 && i == curChoose) {
                mPaint.setTextSize(12 * density);
                mPaint.setColor(Color.parseColor("#FFFFFF"));   //设置选中后的颜色
                mPaint.setAntiAlias(true);  //是否反锯齿
                canvas.drawText(mIndexer[i], width / 2f - mPaint.measureText(mIndexer[i]) / 2f, perHeight + perHeight * i, mPaint);
            } else {
                mPaint.setTextSize(12 * density);
                mPaint.setColor(Color.parseColor("#FF0000"));   //正常的颜色
                mPaint.setAntiAlias(true);  //是否反锯齿
                canvas.drawText(mIndexer[i], width / 2f - mPaint.measureText(mIndexer[i]) / 2f, perHeight + perHeight * i, mPaint); //文字居中显示,宽度的一半 + 文体的一半
            }
            mPaint.reset();
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        float posY = event.getY();
        final int oldChoose = curChoose;
        int curLetterPos = (int) (posY / height * mIndexer.length);
        final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (oldChoose != curLetterPos && listener != null) {
                    if (curLetterPos < mIndexer.length && curLetterPos >= 0) {
                        listener.onTouchingLetterChanged(mIndexer[curLetterPos]);
                        curChoose = curLetterPos;
                        invalidate();
                    }
                }
                break;

            case MotionEvent.ACTION_MOVE:
                if (oldChoose != curLetterPos && listener != null) {
                    if (curLetterPos < mIndexer.length && curLetterPos >= 0) {
                        listener.onTouchingLetterChanged(mIndexer[curLetterPos]);
                        curChoose = curLetterPos;
                        invalidate();
                    }
                }
                break;

            case MotionEvent.ACTION_UP:
                curChoose = -1;
                invalidate();
                break;
        }
        return true;
    }

    public void setOnTouchingLetterChangedListener(
            OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
        this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
    }

    public interface OnTouchingLetterChangedListener {
        public void onTouchingLetterChanged(String s);
    }
}

我这边运行之后的效果是这样子的(颜色,字体都可以根据注释去改动):

运行之后效果

如果你想做成颜色,字体大小由布局去实现你可以做如下小小的改进即可
效果

定义一个attr.xml
里面定义代码:

<declare-styleable name="IndexerBar">
        <attr name="show_common_icon" format="boolean" />
</declare-styleable>

然后在自定义的控件里面初始化时获取相关参数:

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.IndexerBar);
boolean show_common_icon = ta.getBoolean(R.styleable.IndexerBar_show_common_icon, true);

然后就可以用相关定义的参数啦,动动脑,定义字体大小颜色可以用此类似方法。

版权声明:本文为博主原创文章,转载请说明出处。

相关文章推荐

Android ListView侧边字母索引栏SideBar控件的实现

今天记录的是Android SideBar控件的使用,SideBar就是在ListView右边出现的一个竖条,有A到Z字母索引,通过字母索引可以快速定位到ListView的位置,如下图所示: 下面...

绝对实用值得珍藏的自定义侧边索引条控件(类联系人侧边栏)

绝对实用值得珍藏的自定义侧边索引条控件(类联系人侧边栏) 为了代码的可重用性,本人已将自定义侧边索引条控件代码封装在一个Android Library库中,下面是使用文档: IndexView...

快速集成android实现listview的字母A-Z排序,界面侧边字母索引

转载请标明出处 Android手机字母A-Z排序侧边索引是非常常见的功能,在此提供快速集成框架.教你用Android studio工具一分钟搞定这个效果. 实现效果: 以及点击F跳转效果 ...

快速集成android实现listview的字母A-Z排序,界面侧边字母索引

转载请标明出处 Android手机字母A-Z排序侧边索引是非常常见的功能,在此提供快速集成框架.教你用Android studio工具一分钟搞定这个效果. 实现效果: 以及点击F跳转效果...

RecyclerView侧边添加字母排序

首先声明本文参考了http://blog.csdn.net/xiaanming/article/details/12684155 RecyclerView首字母从A到Z排序难点就在于把文字转成拼音并...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android自定义屏幕侧边字母排序控件
举报原因:
原因补充:

(最多只允许输入30个字)