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

之前已经用自定义View做出如下这样一个效果了

这两天需要重新拿来使用,发现效果虽然做出来了,不过思路不太对,就重新参考写了一个,用法也更为简单了

首要的自然是需要继承View绘制出侧边栏,并向外提供一个监听字母索引变化的方法

/**
 * 作者:叶应是叶
 * 时间:2017/8/20 11:38
 * 描述:
 */
public class LetterIndexView extends View {
 public interface OnTouchingLetterChangedListener {
  void onHit(String letter);
  void onCancel();
 }
 private OnTouchingLetterChangedListener touchingLetterChangedListener;
 private Paint paint;
 private boolean hit;
 private final String[] letters = {"↑", "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 final int DEFAULT_WIDTH;
 public LetterIndexView(Context context) {
  this(context, null);
 }
 public LetterIndexView(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }
 public LetterIndexView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  paint = new Paint();
  paint.setAntiAlias(true);
  paint.setTextAlign(Paint.Align.CENTER);
  paint.setColor(Color.parseColor("#565656"));
  DEFAULT_WIDTH = dpToPx(context, 24);
 }
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  setMeasuredDimension(getWidthSize(widthMeasureSpec), getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
 }
 private int getWidthSize(int widthMeasureSpec) {
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int widthSize = MeasureSpec.getSize(widthMeasureSpec);
  switch (widthMode) {
   case MeasureSpec.AT_MOST: {
    if (widthSize >= DEFAULT_WIDTH) {
     return DEFAULT_WIDTH;
    } else {
     return widthSize;
    }
   }
   case MeasureSpec.EXACTLY: {
    return widthSize;
   }
   case MeasureSpec.UNSPECIFIED:
   default:
    return DEFAULT_WIDTH;
  }
 }
 @Override
 public boolean dispatchTouchEvent(MotionEvent event) {
  switch (event.getAction()) {
   case MotionEvent.ACTION_DOWN:
    hit = true;
    onHit(event.getY());
    break;
   case MotionEvent.ACTION_MOVE:
    onHit(event.getY());
    break;
   case MotionEvent.ACTION_UP:
   case MotionEvent.ACTION_CANCEL:
    hit = false;
    if (touchingLetterChangedListener != null) {
     touchingLetterChangedListener.onCancel();
    }
    break;
  }
  invalidate();
  return true;
 }
 @Override
 protected void onDraw(Canvas canvas) {
  if (hit) {
   //字母索引条背景色
   canvas.drawColor(Color.parseColor("#bababa"));
  }
  float letterHeight = ((float) getHeight()) / letters.length;
  float width = getWidth();
  float textSize = letterHeight * 5 / 7;
  paint.setTextSize(textSize);
  for (int i = 0; i < letters.length; i++) {
   canvas.drawText(letters[i], width / 2, letterHeight * i + textSize, paint);
  }
 }
 private void onHit(float offset) {
  if (hit && touchingLetterChangedListener != null) {
   int index = (int) (offset / getHeight() * letters.length);
   index = Math.max(index, 0);
   index = Math.min(index, letters.length - 1);
   touchingLetterChangedListener.onHit(letters[index]);
  }
 }
 public void setOnTouchingLetterChangedListener(OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
  this.touchingLetterChangedListener = onTouchingLetterChangedListener;
 }
 private int dpToPx(Context context, float dpValue) {
  float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dpValue * scale + 0.5f);
 }
}

在侧边栏时,中间会显示当前滑动指向的字母,这其实是一个TextView,在主布局文件中添加,通过IndexControl来控制TextView的可见性,并指示ListView滑动到指定项

/**
 * 作者:叶应是叶
 * 时间:2017/8/20 11:39
 * 描述:
 */
public class IndexControl {
 private final ListView listView;
 private final TextView tv_hint;
 private final Map<String, Integer> letterMap;
 public IndexControl(ListView contactsListView, LetterIndexView letterIndexView,
      TextView tv_hint, Map<String, Integer> letterMap) {
  this.listView = contactsListView;
  this.tv_hint = tv_hint;
  this.letterMap = letterMap;
  letterIndexView.setOnTouchingLetterChangedListener(new LetterChangedListener());
 }
 private class LetterChangedListener implements LetterIndexView.OnTouchingLetterChangedListener {
  @Override
  public void onHit(String letter) {
   tv_hint.setVisibility(View.VISIBLE);
   tv_hint.setText(letter);
   int index = -1;
   if ("↑".equals(letter)) {
    index = 0;
   } else if (letterMap.containsKey(letter)) {
    index = letterMap.get(letter);
   }
   if (index < 0) {
    return;
   }
   index += listView.getHeaderViewsCount();
   if (index >= 0 && index < listView.getCount()) {
    listView.setSelectionFromTop(index, 0);
   }
  }
  @Override
  public void onCancel() {
   tv_hint.setVisibility(View.INVISIBLE);
  }
 }
}

这里也提供代码下载:LetterIndexView

总结

以上所述是小编给大家介绍的Android 实现带字母索引的侧边栏功能,希望对大家有所帮助,如果大家有任何疑问,欢迎给我留言,小编会及时回复大家的!

时间: 2017-08-17

android 左右滑动+索引图标实现方法与代码

使用Gallery和ImageView实现android左右滑动+索引图标效果. 首先自定义Gallery实现一次只能滑动一个页面 复制代码 代码如下: public class MGalleryView extends Gallery{ public MGalleryView(Context context, AttributeSet attrs) { super(context, attrs); } //一次只能滑动一张图片注:一张图充满全屏 @Override public boolean

Android手机联系人带字母索引的快速查找

喜欢另辟蹊径的我,在这里废话不多说了,直接上代码和图片了. 效果图如下: 第一步:MainActivity的代码如下: package net.loonggg.test; import java.util.ArrayList; import java.util.Arrays; import java.util.HashMap; import java.util.List; import java.util.TreeSet; import android.os.Bundle; import and

Android通用索引栏实现代码

偶尔看到之前写过的代码,感觉好多东西几乎在很多项目中都要用到,虽然每个项目的需求和设计都不同,不过实现的效果都是一样的,可能只是数据格式和一些颜色等的细微差距.但是有的时候因为一个小改变,就要去重复的修改代码,麻烦不说,也容易导致新的问题和BUG. 就拿忽然想到的索引栏来说,几乎写过的项目中都用到了,比如城市选择.联系人等等.这些地方全都需要用到索引栏,但是用法都是一样的.翻看了几处之前写过的代码,发现每次用到索引栏,都要重新去写方法来处理数据或者对数据的索引进行提取这些,做法也都大同小异.于是

Android自定义View实现通讯录字母索引(仿微信通讯录)

一.效果:我们看到很多软件的通讯录在右侧都有一个字母索引功能,像微信,小米通讯录,QQ,还有美团选择地区等等.这里我截了一张美团选择城市的图片来看看: 我们今天就来实现图片中右侧模块的索引功能,包括触摸显示以选中的索引字母.这里我的UI界面主要是参照微信的界面来实现,所以各位也可以对照微信来看看效果,什么都不说了,只有效果图最具有说服力! 二.分析: 我们看到这样的效果我们心理都回去琢磨,他是如何实现的: 首先,它肯定是通过自定义 View 来实现的,因为 Android 没有提供类似这样的控件

android将搜索引擎设置为中国雅虎无法搜索问题解决方法

该问题是由于yahoo的搜索接口改变导致,请修改 Donottranslate-all_search_engines.xml (x:\6575gb2\v2.12\alps\mediatek\source\frameworks\banyan\res\res\values)41753 8/11/2011 中的<string-array name="yahoo_cn" translatable="false">的定义为 复制代码 代码如下: <strin

Android手机联系人快速索引(手机通讯录)

最近需要实现一个手机通讯录的快速索引功能.根据姓名首字母快速索引功能.下面是一个手机联系人快速索引的效果,总体来说代码不算难,拼音转换的地方略有复杂.下面上源码:源码中有注释. 下面是效果图: MainActivity: import java.util.ArrayList; import java.util.Collections; import java.util.List; import android.app.Activity; import android.os.Bundle; imp

android仿微信通讯录搜索示例(匹配拼音,字母,索引位置)

前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置 一:先看效果图 字母索引 搜索匹配 二:功能分析 1:汉字转拼音 通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现在转换拼音常见的有pinyin4j和tinypinyin, pinyin4j的功能强大,包含声调多音字,tinypinyin执行快占用内存少, 如果只是简单匹配通讯录,建议使用tinypinyin,用法也很简单这里不详细介绍 拼音类 public class CNPinyin <T extends

Android ItemDecoration 实现分组索引列表的示例代码

本文介绍了Android ItemDecoration 实现分组索引列表的示例代码,分享给大家.具体如下: 先来看看效果: 我们要实现的效果主要涉及三个部分: 分组 GroupHeader 分割线 SideBar 前两个部分涉及到一个ItemDecoration类,也是我们接下来的重点,该类是RecyclerView的一个抽象静态内部类,主要作用就是给RecyclerView的ItemView绘制额外的装饰效果,例如给RecyclerView添加分割线. 使用ItemDecoration时需要继

Android 实现无网络传输文件的示例代码

最近的项目需要实现一个 Android 手机之间无网络传输文件的功能,就发现了 Wifi P2P(Wifi点对点)这么一个功能,最后也实现了通过 Wifi 隔空传输文件 的功能,这里我也来整理下代码,分享给大家. Wifi P2P 是在 Android 4.0 以及更高版本系统中加入的功能,通过 Wifi P2P 可以在不连接网络的情况下,直接与配对的设备进行数据交换.相对于蓝牙,Wifi P2P 的搜索速度和传输速度更快,传输距离更远 实现的效果如下所示: 客户端.png 服务器端.png 一

Android串口通信封装之OkUSB的示例代码

本文介绍了Android串口通信封装之OkUSB的示例代码,分享给大家.具体如下: Github传送门:OkUSB OkUSB 一个简洁的Android串口通信框架. 功能简介 支持设置波特率 支持设置数据位 支持设置停止位 支持设置校验位 支持DTS和RTS 支持串口连接状态监听 用法简介 Gradle allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { compile '

Android 实现无网络页面切换的示例代码

本文介绍了Android 实现无网络页面切换的示例代码,分享给大家,具体如下: 实现思路 需求是在无网络的时候显示特定的页面,想到要替换页面的地方,大多都是recyclerview或者第三方recyclerview这种需要显示数据的地方,因此决定替换掉页面中所有的recyclerview为无网络页面 实现过程 1 在BaseActivity中,当加载布局成功以后,通过id找到要替换的view,通过indexOfChild()方法,找到要替换的view的位置,再通过remove和add view来

Android中js和原生交互的示例代码

本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

Android中TabLayout添加小红点的示例代码

本文介绍了Android中TabLayout添加小红点的示例代码,分享给大家,具体如下 安卓原生的android.support.design.widget.TabLayout,配合ViewPager已经很好用了,但是有时我们会在内容更新时,在tab标题右上方加上一个红点等标记此tab内容有更新时,就需要给原生的TabLayout设置你定义的布局,用法和原生的一样,只是在代码中设置一下TabLayout的布局. 1.主布局文件 <?xml version="1.0" encodi

Android 快速实现状态栏透明样式的示例代码

在手机 app 开发过程中,经常会遇到一种需求,需要将 内容区域 顶到 状态栏 中去.这个时候,下面一段代码,就能很轻松解决问题了. 上代码之前先上效果图: 下面上一段代码: getWindow().requestFeature(Window.FEATURE_NO_TITLE); if(VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) { Window window = getWindow(); window.clearFlags(WindowManager.

Android监听手机短信的示例代码

本文介绍了Android监听手机短信的示例代码,分享给大家,具体如下: 以下情况可能会导致短信拦截失败: 小米,360等品牌手机拦截短信,短信的优先级给了系统 用户禁用短信权限 手机连接电脑,被电脑端的手机助手类软件截获 手机内装有QQ通讯录之类的管理联系人,短信的应用,被截获. 前提--权限: <uses-permission android:name="android.permission.RECEIVE_SMS" > </uses-permission>

Android 带箭头的指引tipLayout实现示例代码

本文介绍了Android 带箭头的指引tipLayout实现示例代码,分享给大家,具体如下: 如上是从UI接过来的设计图,要求三角形指示器需要动态对齐上面的文本,需要动态的实现对其三角形. 引用方式 compile 'com.xiaowei:TriangleTipLayout:1.0.0' 实现思路 准备一个三角形指引的图片即可. 先上代码 final TextPaint textPaint = mTextView.getPaint(); final int textHeight = (int)

Android PC投屏功能实现的示例代码

本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 代码地址 :https://github.com/deepsadness/MediaProjectionDemo 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过WebSocket进行链接.将图片传递给网页 想法来源 看到vysor,觉得特别好玩,于是就想着自己能不能试着做一个类似的功能出来.搜索了相关实现.发现网上已经有网友针对vysor做了分析.于