使用自定义View绘制右侧导航栏

原创 2016年05月31日 15:47:59

像很多的应用程序里面都有个管理联系人的导航栏,即:26个大写字母竖排显示在右侧,然后点击一个字母,listview会自动筛选分组;下面是一个自定义的view,绘制的右侧导航,即:把右侧的导航作为一个单独的View来使用,可以作为一个工具的View,随时随地的使用!

 `/**
 * 利用自定义View 绘制右侧导航
 * @author fz
 *
 */
public class MyView extends View {
   public static String[] letter={"热门","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"};
   Paint paint;
   OnTouchLetterListener listener;
   // 调用这个方法来进行回调
   public void setOnTouchListener(OnTouchLetterListener listener){
       this.listener=listener;
   }
   // 构造器
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }
    //画笔
    private void initPaint() {
        paint=new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿效果
        paint.setTextSize(TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP,
                11, // 设置字体大小
                getResources().getDisplayMetrics()));
    }
    // 重写绘制方法
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //自定义view分配给每个字符串的高度
        int height=getHeight()/letter.length;
        //自定义view分配给每个字符串的宽度
        int width=getWidth();
        //利用循环全部绘制出来
        for(int i=0;i<letter.length;i++){

            Rect bounds=new Rect();
            paint.getTextBounds(letter[i], 0, letter[i].length(), bounds);
            //横坐标
            float x=width/2-bounds.width()/2;
            //纵坐标
            float y=height/2+bounds.height()/2+height*i;
            // 绘制字体
            canvas.drawText(letter[i], x, y, paint);

        }
    }
       // 重写,触摸事件这个方法
        @Override
        public boolean onTouchEvent(MotionEvent event) {
           int action=event.getAction();
           // 四个触摸事件:落下,移动,抬起,取消
        switch (action) {
        //这里只写了按下和移动
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
            //添加灰色背景
            setBackgroundColor(Color.LTGRAY);
            //根据手指当前位置换算出当前手指所在的字符
            float ypos=event.getY();
            int idx=(int) ((ypos*letter.length)/getHeight());
            //设置监听器,利用回调方法,把字符传过去
            if(idx>=0&&idx<letter.length){
                if(listener!=null){
                    listener.onTouchsetLetter(letter[idx]);
                }
            }
            break;

        default:
            setBackgroundColor(Color.TRANSPARENT);//透明色
            break;
        }
            return true;
        }
    // 内部接口,监听器,
    public interface OnTouchLetterListener{
        void onTouchsetLetter(String letter);
    }
}`

回调方法的使用:即在listview显示的分组界面进行调用

myview.setOnTouchListener(new OnTouchLetterListener() {

            @Override
            public void onTouchsetLetter(String letter) {
                if(letter.equals("热门")){
                    listview.setSelection(0);
                }else{
                    char section=letter.charAt(0);
                    listview.setSelection(adapter.getPositionForSection(section));

                }

            }
        });

android自定义View的绘制原理

每天我们都会使用很多的应用程序,尽管他们有不同的约定,但大多数应用的设计是非常相似的。这就是为什么许多客户要求使用一些其他应用程序没有的设计,使得应用程序显得独特和不同。如果功能布局要求非常定制化,已...
  • zhangcanyan
  • zhangcanyan
  • 2016年12月25日 11:47
  • 440

一步一步教你学会自定义View并了解其绘制原理(一)

自定义view的绘制过程,看了很多关于自定义view的帖子、博客,写的也都不错,但我想通过图片+代码+注释的方式写一篇因为图片带给人的记忆效果远比长篇大论的文字好的多,再加上代码的辅助说明,那就更容易...
  • z1035075390
  • z1035075390
  • 2017年02月24日 14:01
  • 494

Android应用自定义View绘制方法手册

这篇迟迟难产的文章算是对2015前半年的一个交代吧,那时候有一哥们要求来一发Android Canvas相关总结,这哥们还打赏了,实在不好意思,可是这事一放就给放忘了,最近群里小伙伴催着说没更新博客,...
  • yanbober
  • yanbober
  • 2016年04月04日 13:09
  • 22213

Android View 绘制流程 及 自定义View

View绘制流程调用链图 记清楚函数调用的顺序才能准确地进行调用。 根据调用链,可将整个绘制过程分为三部分:Measure - Layout - Draw Measu...
  • asdf717
  • asdf717
  • 2016年09月19日 14:29
  • 628

Android自定义View(一)View绘制流程以及invalidate()等相关方法分析

转自:http://blog.csdn.net/yanbober/article/details/46128379/      【工匠若水 http://blog.csdn.net/yanbober】...
  • TokgoLiang
  • TokgoLiang
  • 2016年01月08日 10:18
  • 1446

Android 通讯录(2)-----自定义View实现右侧导航栏

前言前一篇介绍了怎么通过自定义ItemDecoration来实现通讯录的分类标题,那么本篇文章中,我们将继续通过自定义View来实现右侧导航栏。如果你还没有看过我的上一篇文章,可以先去阅读 Andro...
  • xiaozhang1993
  • xiaozhang1993
  • 2017年07月03日 17:32
  • 380

Android实现自定义view---绘制图片

主要原理是:extends view重载onDrow(),需要一bitmap,重载view,在 canvas上画临时bmp,当按下确定的时候按下    画到real_bmp上,其他的跟前面的基本上没...
  • a11123939
  • a11123939
  • 2014年05月04日 18:21
  • 1371

安卓开发之自定义View通过Drawable绘制图标

//主要通过Drawable对象来绘制图标public class MyView extends View{ private float mCircleRadius; private i...
  • cxmscb
  • cxmscb
  • 2016年06月26日 15:44
  • 695

自定义View之绘图篇(一):基础图形的绘制

生活是一面镜子,你对它笑,它就对你笑;你对它哭,它也对你哭。——萨克雷在正文开始之前,我先抛一个脑洞大开的题目给大家:商人以45元一双进购了2双鞋子,然后亏本30一双出售。某个顾客给了他100买了2双...
  • u012551350
  • u012551350
  • 2016年05月06日 00:29
  • 9207

底部导航栏(自定义View+ViewPager实现) android项目详解

主要实现底部导航栏和viewpager以及顶部导航栏的标题联动改变
  • q849340003
  • q849340003
  • 2015年05月06日 11:09
  • 1138
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用自定义View绘制右侧导航栏
举报原因:
原因补充:

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