使用自定义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));

                }

            }
        });

iOS 自定义导航栏背景,左侧按钮,右侧按钮,及标题

一:导航栏的背景颜色如何设置 控制器是UINavigationController[self.navigationBar setBackgroundImage:[UIImage imageNamed...

android自定义View—顶部导航栏

  • 2015年03月19日 15:18
  • 1.39MB
  • 下载

自定义View之仿今日头条颜色渐变指示器导航栏

自定义View之仿今日头条颜色渐变指示器导航栏前言本文是自定义view的练习,默认读者掌握了自定义view的知识 本文是对本人上一篇写的控件《自定义view之歌词渐变文本控件》lyricTextVi...
  • ccy0122
  • ccy0122
  • 2017年06月07日 19:05
  • 527

ViewPager_自定义view_底部导航栏

  • 2016年08月16日 19:59
  • 7.43MB
  • 下载

初学自定义view实现viewpager导航栏

导航栏随着viewpager滑动,当页数不是前半数或后半数时,导航栏固定在中间,标题栏滑动。 自定义view代码如下 public class MyViewPa...

Android自定义View——实现字母导航栏

实现字母导航栏 思路分析: 1、自定义View实现字母导航栏 2、ListView实现联系人列表 3、字母导航栏滑动事件处理 4、字母导航栏与中间字母的联动 5、字母导航栏与...

android自定义View----通讯录导航栏(快速查找索引)

先上效果界面 如图右侧竖排字母即为导航栏,通过自定义View实现。 实现导航思路:当用户点击这个控件时我们需要知道用户点击的哪个字母,并根据字母设置listview的从哪里开始显示,并在中心显...
  • Ceryool
  • Ceryool
  • 2016年04月08日 18:09
  • 598
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用自定义View绘制右侧导航栏
举报原因:
原因补充:

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