背景说明 联系人字母导航条已经出来很多年都交互了，其UI组合无非是悬浮字母列表+侧边栏都字母选择（PinnedHeadList+siderBar）。...要画的好看，主要要解决的问题如下： 画字母 计算整个字母导航条的高度； 计算每个字母的位置 合理设置字母的字号大小 处理触摸事件 计算触摸位置...3.1 画字母 3.1.1 静态设置字母的大小 首先，要确定View的大小,一些开源的实现是将View直接布满整个屏幕（match_parent属性），然后在右侧进行绘制，事件处理在字母区域返回...event.getAction(); final float y = event.getY(); final int oldChoose = mChoose; //当前选中字母的索引...） gif.gif 字母垂直居中显示，字母大小为属性设置，默认14sp,根据字体大小计算每个字母高度； 凸显放大效果，根据位置计算上下各4个，计算偏移位置和缩放，根据点击位置然后绘制； 整体代码还比较工整
在上一篇文章中，我和大家一起实现了类似于Android系统联系人的分组导航和挤压动画功能，不过既然文章名叫做《Android系统联系人全特效实现》，那么没有快速滚动功能显然是称不上"全"的。...如果还没有看过我上一篇文章，请抓紧去阅读一下 Android系统联系人全特效实现(上)，分组导航和挤压动画 。...包括以前老版本的Android联系人中都是使用这种方式来进行快速滚动的。效果如下图所示： ?...; /** * 联系人列表适配器 */ private ContactAdapter adapter; /** * 用于进行字母表分组 */ private AlphabetIndexer...当你的手指在右侧字母表上滑动时，联系人的列表也跟着相应的变动，并在屏幕中央显示一个当前的分组。 现在让我们回数一下，分组导航、挤压动画、字母表快速滚动，Android系统联系人全特效都实现了。
前言 因为自己在做的一个小软件里面需要用到从A-Z排序的ListView，所以自然而然的想到了微信的联系人，我想要的就是那样的效果。...，然后在每一个字母所占空间的中间绘制该字母就可以了，代码比较简单，这一部分就不需要详解了。...，如果是接着滑动，滑到某一个字母的时候，对应的字母就要变大和显示出来。 ...这样我们就得到了要显示的汉字字符串的拼音首字母，然后将所有的字符串按照字母进行排序就可以得到一个从A-Z的有序的列表了。...好了,到现在只剩一个问题了，那就是点击了字母之后，ListView设置该字母对应的Item在第一个显示，这个实现也不难，得到了被点中的字母之后，遍历所有的DataBean对象，然后找到和当前字母匹配的第一个字母分隔符对象
效果大概就是这样,右边是字母索引效果 做开发的时候，经常碰到产品经理设计出来的界面是参考IOS控件设计出来的 ，比如上图效果 ios有个控件是UIPickerView 就是可以上下滑动 并有些3d...另外右边是个字母索引条。想必大家都做过，就不一一粘贴代码了。我将这个整理出来一个demo。
开门见山-IndexBar 不管是在QQ上，还是在163的邮箱中，或者自己手机的通讯录中，右侧都会躺着一个这个玩意儿，我姑且不造官方有没有相关的东西，或者大家约定俗成的称呼这个玩意儿叫什么，反正我就叫它索引条...IndexBar从整体样式上（我观察的哈），分为两种，一种就是不管三七二十一，26个字母糊糊的贴上去的那种，还有一种就是根据当前的具体内容，只展示相关的首字母的！...实现思路 这个问题要一分为二来看，首先是怎么把26个字母画出来，然后才是怎么去识别触摸对应的是哪个字母！！...触摸的相关状态添加 首先是触摸到这个索引条，背景加深，这个肯定就是走touch事件了嘛，在ACTION_DOWN的时候修改相关状态，在ACTION_UP的时候，再次刷新相关状态咯。...点击相关回调 用户看到的都是表象，触摸到的肯定是某一个坐标值，这个坐标应该对应这26个字母中的某一个字母的所在的坐标！
概述 本文讲述如何在前端实现城市首字母导航的效果。...map.getView().setZoom(8); }); } } } }) } //汉字拼音首字母列表...19968) return ch; //dealWithOthers(ch); //检查是否是多音字,是按多音字处理,不是就直接在strChineseFirstPY字符串中找对应的首字母
final static class ViewHolder { TextView tvTitle; } /** * 根据ListView的当前位置获取分类的首字母的...Char ascii值获取其第一次出现该首字母的位置 */ public int getPositionForSection(int section) { for (int...{ return i; } } return -1; } /** * 提取英文的首字母...，非英文字母用#代替。...letter) { String sortStr = letter.trim().substring(0, 1).toUpperCase(); // 正则表达式，判断首字母是否是英文字母
主要有两个 indexOf()：在数组中查找给定元素的第一个索引 如果存在返回索引不存在返回-1；该函数只返回第一个满足条件的元素索引 var arr = ['a','b','c','b'] console.log...arr.indexOf('b'))//返回1 console.log(arr.indexOf('d'))//返回-1 lastIndexOf() 与功能一样，不过该函数是从数组后面开始查找的，返回元素的索引是正确的索引...如果存在返回索引不存在返回-1 var arr = ['a','b','c','b'] console.log(arr.indexOf('b'))//返回1 console.log(
这两天需要重新拿来使用，发现效果虽然做出来了，不过思路不太对，就重新参考写了一个，用法也更为简单了 首要的自然是需要继承View绘制出侧边栏，并向外提供一个监听字母索引变化的方法 /** * 作者：叶应是叶...break; } invalidate(); return true; } @Override protected void onDraw(Canvas canvas) { if (hit) { //字母索引条背景色...context.getResources().getDisplayMetrics().density; return (int) (dpValue * scale + 0.5f); } } 在侧边栏时，中间会显示当前滑动指向的字母...tv_hint.setVisibility(View.INVISIBLE); } } } 这里也提供代码下载：LetterIndexView 总结 以上所述是小编给大家介绍的Android 实现带字母索引的侧边栏功能
indexBar 项目开发中经常会使用到indexBar点击索引栏时，会自动跳转到对应的IndexAnchor锚点位置，完成快速检索功能 需要配合该组建使用的是把你的列表数据转换成对应的汉字的首字母完成该功能...------------------- Z -------------------- & 示例代码demo https://github.com/zhangrongwu/indexBar bug 侧边索引无法点击
Unicode编码:小写字母a-z的code为97 - 122，大写字母A-Z的code为65 - 90 统计大写字母的个数 var str ="abcABCadDGSDVBSDVDSVdavver"...str[i].charCodeAt() if(char>=65&&char<=90){ count++ } } console.log(count+'个') //大写字母共...15个 小写字母的个数 var str ="abcABCadDGSDVBSDVDSVdavver" var count=0 for(let i = 0;i<str.length;i++){ var...str[i].charCodeAt() if(char>=97&&char<=122){ count++ } } console.log(count+'个') //小写字母共
/vue.min.js"> {{$key}}=>{{i}}=>{{$index}}... 解释： 键名：{{KaTeX parse error: Expected 'EOF', got '}' at position 4: key}̲} 键值：{{i}} 键索引
//生成大写字母 A的Unicode值为65 function generateBig_1(){ var str = []; for(var i=65;i<91;i++){...str.push(String.fromCharCode(i)); } return str; } //生成大写字母 a的Unicode值为97 function generateSmall
var list = [1, 2, 3, 4, 5, 6, 7, 8] var index = list.map(item => item).index...
英文字符串首字母大写 /** * 方法一：js字符串切割 * @param {*} str */ function firstToUpper1(str...return str.trim().toLowerCase().replace(str[0], str[0].toUpperCase()); } /** * 方法二：js...return $1.toUpperCase() + $2.toLowerCase(); }); } /** * 方法三：js
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置 一:先看效果图 ? 字母索引 ?...*/ char firstChar; /** * 所有字符中的拼音首字母 */ String firstChars; /** * 对应的所有字母拼音 */...tcnPinyin.data.chinese(); return chinese1.compareTo(chinese2); } return compare; } } 2:定义索引栏...; i++) { String pat = cnPinyin.pinyins[i]; if (pat.length() = keyword.length()) {//首个位置索引...) { String pinyin = pinyinGroup[index]; if (pinyin.length() = pattern.length()) {//首个位置索引
function compare(current, latest) { var a = current.split(/./); var b = ...
---- 3.目录 3.1 A-Z的字母索引 3.2 联系人界面ListView的数据填充 3.3 联系人的搜索 3.1 A-Z的字母索引 ?...通过自定义一个View界面，绘制一个A-Z竖向排列的布局，通过触摸事件监听，根据触摸的区域和字母高度的计算出position，再向联系人Listview提供一个方向输出position值！...= -1){ //根据索引更新联系人列表位置 sortListView.setSelection(position);...} } }); Adapter /** * 根据分类的首字母的Char ascii值获取其第一次出现该首字母的位置 */ public...return i; } } return -1; } ---- 3.2 通讯录界面ListView的数据填充（待续） ---- 3.3 联系人的搜索
1 function replaceStr(str){ // 正则法 2 str = str.toLowerCase(); 3 var reg = ...
我们都知道，在foreach binding中，使用$index可以得到基于0的索引序号，但在列表显示中，我们更希望这个索引是从1开始的，怎么处理呢？
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
