Android自定义字母选择侧边栏

本文实例为大家分享了Android自定义字母选择侧边栏的具体代码,供大家参考,具体内容如下

LetterSideBar.java

package com.zb.customview.widgets;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.text.TextUtils;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

import com.zb.customview.R;

public class LetterSideBar extends View {

    private Paint mPaint;
    private int color, selectedColor;
    private float textSize, spacing;
    private String mChoosing = "Z";
    private OnLetterSelectedListener listener;
    private int width, height;

    private 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"};

    public interface OnLetterSelectedListener {
        //空表示取消选中
        void onSelected(String letter);
    }

    public void setOnLetterSelectedListener(OnLetterSelectedListener listener) {
        this.listener = listener;
    }

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

    public LetterSideBar(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        if(null != attrs) {
            TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.LetterSideBar);
            color = ta.getColor(R.styleable.LetterSideBar_LetterSideBar_textColor, Color.BLACK);
            selectedColor = ta.getColor(R.styleable.LetterSideBar_LetterSideBar_textSelectedColor, Color.RED);
            textSize = ta.getDimensionPixelSize(R.styleable.LetterSideBar_LetterSideBar_textSize, sp2px(12));
            spacing = ta.getDimensionPixelSize(R.styleable.LetterSideBar_LetterSideBar_spacing, dp2px(5));
            ta.recycle();
        }
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(color);
        mPaint.setTextSize(textSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        drawText(canvas);
        drawSelectedText(canvas, mChoosing);
    }

    private void drawText(Canvas canvas) {
        mPaint.setColor(color);
        for (int i=0; i<LETTERS.length; i++) {
            drawLetterAt(canvas, i, LETTERS[i]);
        }
    }

    private void drawSelectedText(Canvas canvas, String selected) {
        if(TextUtils.isEmpty(selected))
            return;
        mPaint.setColor(selectedColor);
        int position = -1;
        for(int i=0; i<LETTERS.length; i++) {
            if(selected.equals(LETTERS[i])) {
                position = i;
                break;
            }
        }
        if(position < 0 || position >= LETTERS.length)
            return;
        drawLetterAt(canvas, position, selected);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                float x = event.getX();
                float y = event.getY();
                if(isTouchInsideView(x, y)) {
                    //触摸在控件内
                    int position = caculatePosition(y);
                    if(position >= 0 && position < LETTERS.length) {
                        //合规位置
                        String letter = LETTERS[position];
                        if(!letter.equals(mChoosing)) { //与选中的不符 去刷新控件
                            mChoosing = letter;
                            performListener(mChoosing);
                            invalidate();
                        }
                    } else {
                        //不合规位置
                        if(null != mChoosing) {
                            mChoosing = null;
                            performListener(mChoosing);
                            invalidate();
                        }
                    }
                } else if(null != mChoosing) { //点击事件不在view内部
                    mChoosing = null;
                    performListener(mChoosing);
                    invalidate();//触摸在view之外 取消选中
                }
                return true;
            default:
                if(mChoosing != null) {
                    mChoosing = null;
                    performListener(mChoosing);
                    invalidate();
                }
                break;
        }
        return super.onTouchEvent(event);
    }

    private void performListener(String letter) {
        if(null != listener)
            listener.onSelected(letter);
    }

    private boolean isTouchInsideView(float x, float y) {
        //左右可以适当判断在控件内
        if(x >= 0 && x <= width && y >= getPaddingTop() && y < height)
            return true;
        return false;
    }

    /**
     * 计算触摸的位置
     * @param y
     * @return
     */
    private int caculatePosition(float y) {
        float heightWithOutPadding = height - getPaddingTop() - getPaddingBottom();
        float eachElementHeight = heightWithOutPadding / LETTERS.length;
        y -= getPaddingTop();
        int position = (int) (y / eachElementHeight);
        return position;
    }

    private void drawLetterAt(Canvas canvas, int position, String letter) {

        float heightForEach = ((height * 1f - getPaddingTop() - getPaddingBottom())
                - (LETTERS.length - 1) * spacing) / LETTERS.length;
        float spacingInUp = spacing * (position - 1);
        if(spacingInUp < 0)
            spacingInUp = 0;
        float currentTop = getPaddingTop() + (heightForEach * position) + spacingInUp;
        float currentBottom = currentTop + heightForEach;
        Paint.FontMetrics fmi = mPaint.getFontMetrics();
        float x = (width - getPaddingLeft() - getPaddingRight() - mPaint.measureText(letter)) / 2f + getPaddingLeft();
        float baseLine = (fmi.descent + Math.abs(fmi.ascent)) / 2f - fmi.descent;
        float y = (currentBottom + currentTop) / 2f + baseLine;
        canvas.drawText(letter, 0, 1, x, y, mPaint);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if(changed) {
            width = getWidth();
            height = getHeight();
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int textWidth = (int) (getPaddingLeft() + getPaddingRight() + mPaint.measureText("A"));
        Rect textBounds = new Rect();
        mPaint.getTextBounds("A", 0, 1, textBounds);
        int singleTextHeight = textBounds.height();
        int totalHeight = (int) (27f * singleTextHeight + 26f * spacing) + getPaddingBottom() + getPaddingTop();//26个字母+1个#

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(widthMeasureSpec);
        int specWidth = MeasureSpec.getSize(widthMeasureSpec);
        int specHeight = MeasureSpec.getSize(widthMeasureSpec);
        int realWidth, realHeight;
        if(widthMode == MeasureSpec.EXACTLY) {
            realWidth = specWidth;
        } else {
            realWidth = textWidth;
        }
        if(heightMode == MeasureSpec.EXACTLY) {
            realHeight = specHeight;
        } else {
            realHeight = totalHeight;
        }
        setMeasuredDimension(realWidth, realHeight);
    }

    protected int dp2px(int dp) {
        return (int) (getContext().getResources().getDisplayMetrics().density * dp + 0.5);
    }
    protected int sp2px(int sp) {
        return (int) (getContext().getResources().getDisplayMetrics().scaledDensity * sp + 0.5);
    }
}

attrs.xml

<declare-styleable name="LetterSideBar">
<attr name="LetterSideBar_textColor" format="color"/>
<attr name="LetterSideBar_textSelectedColor" format="color"/>
<attr name="LetterSideBar_textSize" format="dimension"/>
<attr name="LetterSideBar_spacing" format="dimension"/>
</declare-styleable>

layout.xml

<com.zb.customview.widgets.LetterSideBar
        android:id="@+id/letterSideBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:LetterSideBar_textSize="14sp"
        app:LetterSideBar_textColor="#FFFFFF"
        android:padding="10dp"
        app:LetterSideBar_textSelectedColor="#FF0000"
        app:LetterSideBar_spacing="2dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="#A4A4A4"/>

代码中使用

sideBar.setOnLetterSelectedListener(new LetterSideBar.OnLetterSelectedListener() {
            @Override
            public void onSelected(String letter) {
                if(TextUtils.isEmpty(letter)) {
                    P.p("取消选中");
                    letterTxt.setVisibility(View.GONE);
                } else {
                    P.p("选中" + letter);
                    letterTxt.setText(letter);
                    letterTxt.setVisibility(View.VISIBLE);
                }
            }
        });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿微信通讯录列表侧边栏效果

    先看Android仿微信通讯录列表侧边栏效果图 这是比较常见的效果了吧 列表根据首字符的拼音字母来排序,且可以通过侧边栏的字母索引来进行定位. 实现这样一个效果并不难,只要自定义一个索引View,然后引入一个可以对汉字进行拼音解析的jar包--pinyin4j-2.5.0即可 首先,先来定义侧边栏控件View,只要直接画出来即可. 字母选中项会变为红色,且滑动时背景会变色,此时SideBar并不包含居中的提示文本 public class SideBar extends View { priva

  • Android仿人人网滑动侧边栏效果

    很多应用为了节省空间而又使界面能够充足的显示信息,大多数应用都采用了侧边栏的方式,如下图: 来说说它的思路,底下是两个或多个视图,分别通过控制它们的宽度.左边距来控制它们的显示,来看看代码 activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"

  • Android 实现带字母索引的侧边栏功能

    之前已经用自定义View做出如下这样一个效果了 这两天需要重新拿来使用,发现效果虽然做出来了,不过思路不太对,就重新参考写了一个,用法也更为简单了 首要的自然是需要继承View绘制出侧边栏,并向外提供一个监听字母索引变化的方法 /** * 作者:叶应是叶 * 时间:2017/8/20 11:38 * 描述: */ public class LetterIndexView extends View { public interface OnTouchingLetterChangedListener

  • Android侧边栏滑动切换的view效果

    废话不多说了,直接给大家贴代码了,具体代码如下所示: import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.drawable.BitmapDrawable; import android.util.AttributeSet; import android.view.MotionEvent; import andro

  • Android 开源项目侧边栏菜单(SlidingMenu)使用详解

    项目下载地址:https://github.com/jfeinstein10/SlidingMenu 注意: SlidingMenu依赖于另一个开源项目ActionBarSherlock,所以需要将ActionBarSherlock添加作为SlidingMenu的库工程,否则会报资源找不到错误. 然后再将SlidingMenu添加到自己的工程中去. SlidingMenu集成常见错误: Jar mismatch! Fix your dependencies :引用的工程和自身工程以来的jar包版

  • Android实现仿通讯录侧边栏滑动SiderBar效果代码

    本文实例讲述了Android实现仿通讯录侧边栏滑动SiderBar效果代码.分享给大家供大家参考,具体如下: 之前看到某些应用的侧边栏做得不错,想想自己也弄一个出来,现在分享出来,当然里面还有不足的地方,请大家多多包涵. 先上图: 具体实现的代码如下: package com.freesonfish.listview_index; import android.content.Context; import android.graphics.Canvas; import android.grap

  • Android实现滑动侧边栏

    在Android应用开发中,滑动侧边栏经常使用,今天我也试着自己进行了一个简单的实践,虽然功能还不是很强大,但是可以保留下来为以后的开发使用,有需要时在进行简单的修改.实现一个滑动侧边栏思路也很简单: 1.重写一个SlidingMenu类继承ViewGroup,病危该ViewGroup添加两个子布局,分别为菜单和主界面显示: 2.为了得到一个滑动的效果,选择Scroller帮助我们实现,配合ViewGroup下的computeScroll方法实现界面的更新: 3.利用一个boolean来记录菜单

  • Android自定义字母选择侧边栏

    本文实例为大家分享了Android自定义字母选择侧边栏的具体代码,供大家参考,具体内容如下 LetterSideBar.java package com.zb.customview.widgets; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.g

  • Android自定义字母导航栏

    本文实例为大家分享了Android字母导航栏的具体代码,供大家参考,具体内容如下 效果 实现逻辑 明确需求 字母导航栏在实际开发中还是比较多见的,城市选择.名称选择等等可能需要到. 现在要做到的就是在滑动控件过程中可以有内容以及 下标的回调,方便处理其他逻辑! 整理思路 1.确定控件的尺寸,防止内容显示不全.相关的逻辑在onMeasure()方法中处理: 2.绘制显示的内容,在按下和抬起不同状态下文字.背景的颜色.相关逻辑在onDraw()方法中: 3.滑动事件的处理以及事件回调.相关逻辑在on

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

    很多的Android入门程序猿来说对于Android自定义View,可能都是比较恐惧的,但是这又是高手进阶的必经之路,所有准备在自定义View上面花一些功夫,多写一些文章. 思路分析: 1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动 效果图: 首先,我们先甩出主布局文件,方便后面代码的说明 <!--?xml version="1.0" encoding=&qu

  • Android自定义View实现字母导航栏的代码

    思路分析: 1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动 效果图: 首先,我们先甩出主布局文件,方便后面代码的说明 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/re

  • 可支持快速搜索筛选的Android自定义选择控件

    Android 自定义支持快速搜索筛选的选择控件使用方法,具体如下 项目中遇到选择控件选项过多,需要快速查找匹配的情况. 做了简单的Demo,效果图如下: 源码地址:https://github.com/whieenz/SearchSelect 这个控件是由Dialog+SearchView+ListView实现的.Dialog用来承载选择控件,SearchView实现输入,ListView展示结果.设计概要图如下: 一.自定义Dialog Dialog布局文件 <?xml version=&quo

  • Android自定义dialog可选择展示年月日时间选择栏

    自定义dialog package com.poptest; import android.app.DatePickerDialog; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.DatePicker; //dialog类 public class YearPickerDialog extends DatePickerD

  • Android自定义View实现左右滑动选择出生年份

    自定义view的第三篇,模仿的是微博运动界面的个人出生日期设置view,先看看我的效果图: 支持设置初始年份,左右滑动选择出生年份,对应的TextView的值也会改变.这个动画效果弄了好久,感觉还是比较生硬,与微博那个还是有点区别.大家有改进的方案,欢迎一起交流. 自定义View四部曲,这里依旧是这个套路,看看怎么实现的. 1.自定义view的属性: 在res/values/ 下建立一个attrs.xml , 在里面定义我们的属性以及声明我们的整个样式. <?xml version="1.

  • Android 自定义日期段选择控件功能(开始时间-结束时间)

    开发中碰到个需求,需要在一个空间中选择完成开始和结束时间.实现的过程走的是程序员开发的老路子,找到轮子后自己改吧改吧就成了. 当时做的时候有几个需求:1.当天为最大的结束日期,2.最大选择范围1年,3.开始时间和结束时间可以为同一天.如有其他需求实现,可以参考代码改进一下.先上效果图: 视频点击后的虚影是屏幕录制的原因.实现步骤:(如有缺失什么资源,请告知.开始时间和结束时间显示自己布局内添加就可以) 1.自定义控件属性 <declare-styleable name="MyCalenda

  • Android自定义view实现滚动选择控件详解

    目录 前言 需求 编写代码 主要问题 前言 上篇文章通过一个有header和footer的滚动控件(Viewgroup)学了下MeasureSpec.onMeasure以及onLayout,接下来就用一个滚动选择的控件(View)来学一下onDraw的使用,并且了解下在XML自定义控件参数. 需求 这里就是一个滚动选择文字的控件,还是挺常见的,之前用别人的,现在选择手撕一个,核心思想如下: 1.有三层不同大小及透明度的选项,选中项放在中间 2.接受一个列表的数据,静态时显示三个值,滚动时显示四个

  • Android自定义View实现照片裁剪框与照片裁剪功能

    本文所需要实现的就是这样一种有逼格的效果: 右上角加了个图片框,按下确定可以裁剪正方形区域里的图片并显示在右上角. 实现思路: 1:首先需要自定义一个ZoomImageView来显示我们需要的图片,这个View需要让图片能够以合适的位置展现在当前布局的图片展示区域内(合适的位置值的是:如果图片长度大于屏幕,则压缩图片长度至屏幕宽度,高度等比压缩并居中显示,如果图片高度大于屏幕,则压缩图片高度至屏幕高度,长度等比压缩并居中显示.): 2:然后需要实现这个拖动的框框,该框框实现的功能有四点:拖动.扩

随机推荐