通讯录中显示分类字母的首字母是如何实现的

在手机通讯录或者其他APPA软件中,好友联系人名单经常按字母顺序排列,而且按照首字母进行划分,如果有相同首字母的值显示该字母第一联系人的首字母,那么具体该怎么实现呢,此刻简单介绍一下:

首先联系人数据一般是在一个ListView控件中呈现,配置完适配器Adapter后,在Adapter的getView()方法中,数据与属性匹配完成后再设置是否显示分类首字母,初始代码如下:

/**
 * 判断是否显示分类首字母
 *   1.第一条数据(position=0)必须显示
 *   2.与上一条首字母相同,则不显示,反之则显示
 * 
 * /
 if(position==0){
     sortKey.setVisibility(View.VISIBLE);
 }else{
     //判断首字母
     int lastSection=contacts.get(position-1).getName().charAt(0);
     int currentSection=contact.getName().charAt(0);
     if(lastSection==currentSection){
        sortKey.setVisibility(View.GONE); 
     }else{
         sortKey.setVisibility(View.VISIBLE); 
     }
 }
 //返回组装数据后的View对象
 return view;

上述代码可以优化如下:

sortKey.setVisibility(View.VISIBLE);
int currentSection=contact.getName().charAt(0);
if(position!=0&&contacts.get(position-1).getName().charAt(0)==currentSection){
sortKey.setVisibility(View.GONE);
}
//返回组装数据后的view对象
return view;

上述是按照传统方法进行显示,按照上述逻辑,每显示一个条目都要将首字母从头开始按顺序找一遍,一下方法则直接定位该显示条目的位置,在为控件匹配完数据之后,代码如下:
//1.根据当前position获取应该显示的首字母的section
int section=getSectionForPosition(position);
//2.获取该section应该出现的位置
int pos=getPositionForSection(section);
//3.判断当前列表项的position是否和该首字母应该出现的position相等
if(position==pos){
sortKey.setVisibility(View.VISIBLE);
}else{
sortKey.setVisibility(View.GONE);
}

return view;
}

/**
*根据首字母section获取应该出现的位置position
*/
@Override
public int getPositionForSection(int section){
//根据Section(首字母)获取Position(位置):即获取某个瘦子木用该出现的位置

for(int i=0;i<contacts.size();i++){
int ch=contacts.get(i).getName().charAt(0);
if(ch==section){
return i;
}
}
return 0;
}

/**
*根据position获取应该显示 的首字母section
*/

@Override
public int getSectionForPosition(int position){
//根据Position(位置)获取Section(首字母):获取某个位置上应该显示的首字母

return contacts.get(position).getName().charAt(0);
}

这样每次判断是否显示首字母就不用从第一行开始依次比对了,直接定位到显示的位置判断是否显示就行了.


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个完整的 Vue 组件代码实现: ```html <template> <div> <div v-for="(contacts, letter) in groupedContacts" :key="letter"> <h2>{{ letter }}</h2> <ul> <li v-for="contact in contacts" :key="contact.phone">{{ contact.name }}</li> </ul> </div> </div> </template> <script> import pinyin from 'pinyin'; export default { data() { return { contacts: [ { name: '张三', phone: '123456789' }, { name: '李四', phone: '987654321' }, { name: '王五', phone: '111111111' }, { name: '赵六', phone: '222222222' }, { name: '钱七', phone: '333333333' }, { name: '孙八', phone: '444444444' }, { name: '周九', phone: '555555555' }, { name: '吴十', phone: '666666666' }, ], groupedContacts: {}, }; }, mounted() { const pinyinContacts = this.contacts.map(contact => { const pinyinName = pinyin(contact.name, { style: pinyin.STYLE_FIRST_LETTER }).join(''); return { ...contact, pinyinName }; }); const groupedContacts = pinyinContacts.reduce((groups, contact) => { const firstLetter = contact.pinyinName[0].toUpperCase(); if (!groups[firstLetter]) { groups[firstLetter] = []; } groups[firstLetter].push(contact); return groups; }, {}); Object.keys(groupedContacts).forEach(key => { groupedContacts[key].sort((a, b) => a.name.localeCompare(b.name)); }); this.groupedContacts = groupedContacts; }, }; </script> ``` 在这个示例,我们使用了 pinyin 库将联系人名字转换为拼音,然后根据拼音首字母进行分组和排序,并最终在页面上渲染出分组后的通讯录

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值