Android 绘图进阶：Canvas绘制联系人侧滑列表(drawText+监听者模式)

来源：互联网发布：js中控制div隐藏编辑：程序博客网时间：2024/05/29 17:47

这里写图片描述
　　上面展示的是效果图，我们平时使用的通过点击字母就能找到相关字母的联系人，这就是我们想要达到的效果。

思路与步骤

　　根据我们想要实现的效果，我们先要理一理思路，所有的编程都是这样，有了清晰的思路才能确定每一步我们具体要做什么。
　首先我们想要出现手机联系人的效果，就要先绘制右侧的字母，再对屏幕的手势滑动进行监听，使字母在被点击时变色，然后是我们的布局中的TextView内容的改变，这里TextView的改变我们需要用到监听者模式。

1、绘制右侧字母

思路：使用drawtext方法循环从上到下进行绘制。
根据屏幕高度，设置字体大小

//必须写在onMeasure方法中，//如果写在构造器中，由于开始的时候没有及时获得宽高，导致高度默认为0    mpainttext.setTextSize(height/26f);

String数组，用于循环绘制

    private String[] array=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"};

在onDraw方法中进行绘制

   for(int i=0;i<26;i++){   //由于字母大小不一致，选择宽度最大的'm'相减，作为x轴坐标      canvas.drawText(array[i], width-mpainttext.measureText("m"), height/26*(i+1), mpainttext);            }        }

2、覆写onTouchEvent方法，支持手势滑动

  @Overridepublic boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {        //ACTION_MOVE监听手指滑动case MotionEvent.ACTION_MOVE:               //ACTION_DOWN监听手指落下        case MotionEvent.ACTION_DOWN:        //获取手指落下的x坐标与Y坐标            x=event.getX();            y=event.getY();            if(x>=width-mpainttext.measureText("m")&&x<width){            //确定点击的是第几个                index=(int)y/(height/26);                Log.d("touch", "点击的是"+array[index]);                                invalidate();                return true;            }            break;            //ACTION_UP监听手指抬起case MotionEvent.ACTION_UP:    return true;        default:            break;    }    return super.onTouchEvent(event);}

3、实现点击字体颜色改变

使用index作为判断

  private int index=-1;

//设置画笔

//创建新画笔，设置画笔颜色    mpaintcolor=new Paint();        mpaintcolor.setColor(Color.RED);        mpaintcolor.setTextAlign(Align.CENTER);

//onMeasure方法中才会获得高度    mpaintcolor.setTextSize(height/26f);

手势监听事件中进行index设置，用于后面绘制时改变颜色的判断

 @Overridepublic boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {case MotionEvent.ACTION_MOVE:                       case MotionEvent.ACTION_DOWN:            x=event.getX();            y=event.getY();            if(x>=width-mpainttext.measureText("m")&&x<width){                index=(int)y/(height/26);                Log.d("touch", "点击的是"+array[index]);                invalidate();                return true;            }            break;case MotionEvent.ACTION_UP:    if(index!=-1){        index=-1;    }    invalidate();    return true;        default:            break;    }

onDraw方法中根据index改变显示颜色

 for(int i=0;i<26;i++){            if(index!=-1&&i==index){                canvas.drawText(array[index], width-mpainttext.measureText("m"), height/26*(i+1), mpaintcolor);                 index=-1;            }else{                canvas.drawText(array[i], width-mpainttext.measureText("m"), height/26*(i+1), mpainttext);            }        }

4、监听者模式

监听者模式：
（1）在被监听对象中编写接口interface，在接口中编写抽象方法，用于调用。
（2）创建被监听的对象
（3）
被监听者在继承View的class中编写接口

//interface接口    public interface OnItemSelect{    //抽象方法        public void OnItemSelectListener(String indexString);    }    //创建传递对象（）    private  OnItemSelect OnItemSelectlistener;    //监听者将要调用的方法    public void OnItemSelectlistener( OnItemSelect OnItemSelectlistener){        //监听者中调用到该方法，传递进一个OnItemSelectlistener对象        this.OnItemSelectlistener=OnItemSelectlistener;    }

监听者中调用

这里写代码片

5、完整代码

View

public class MySlider extends View{    private int width;    private int height;    private Paint mpainttext;    private Paint mpaintcolor;    private int index=-1;    private String[] array=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"};    public MySlider(Context context) {        super(context);    }    public MySlider(Context context, AttributeSet attrs) {        super(context, attrs);        mpainttext=new Paint();             mpainttext.setTextAlign(Align.CENTER);        mpaintcolor=new Paint();        mpaintcolor.setColor(Color.RED);        mpaintcolor.setTextAlign(Align.CENTER);    }    public interface OnItemSelect{        public void OnItemSelectListener(String indexString);    }    private  OnItemSelect OnItemSelectlistener;    public void OnItemSelectlistener( OnItemSelect OnItemSelectlistener){        this.OnItemSelectlistener=OnItemSelectlistener;    }    private float x;    private float y;   @Overridepublic boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {case MotionEvent.ACTION_MOVE:                       case MotionEvent.ACTION_DOWN:            x=event.getX();            y=event.getY();            if(x>=width-mpainttext.measureText("m")&&x<width){                index=(int)y/(height/26);                Log.d("touch", "点击的是"+array[index]);                OnItemSelectlistener.OnItemSelectListener(array[index]);                invalidate();                return true;            }            break;case MotionEvent.ACTION_UP:    if(index!=-1){        index=-1;    }    invalidate();    return true;        default:            break;    }    return super.onTouchEvent(event);}    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        for(int i=0;i<26;i++){            if(index!=-1&&i==index){                canvas.drawText(array[index], width-mpainttext.measureText("m"), height/26*(i+1), mpaintcolor);                 index=-1;            }else{                canvas.drawText(array[i], width-mpainttext.measureText("m"), height/26*(i+1), mpainttext);            }        }    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);        height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);        setMeasuredDimension(width, height);//告知父布局该View的大小        //测量出来之后使用        mpainttext.setTextSize(height/26f);        mpaintcolor.setTextSize(height/26f);    }}

Activity

public class MainActivity_bitmap extends Activity {    private TextView mtextview;    private MySlider msliderview;    @Override    protected void onCreate(Bundle savedInstanceState) {        // TODO Auto-generated method stub        super.onCreate(savedInstanceState);        setContentView(R.layout.bitmap_view);        mtextview = (TextView) findViewById(R.id.textview);        msliderview = (MySlider) findViewById(R.id.slider);        msliderview.OnItemSelectlistener(new OnItemSelect() {            @Override            public void OnItemSelectListener(String indexString) {                mtextview.setText(indexString);            }        });    }}

1 0