首字母索引侧栏--漂亮且实用!!

如果开发过类似微信好友或联系人的同学们可能都做过这个,首字母索引侧栏使用的是非常普遍的, 这东西确实很方便,效率非常高, 今天做一个非常漂亮且简约的索引栏!


还是先看看效果吧:
这里写图片描述
怎么样?有没有动心?
好了,废话不多说,先分析分析:

其实索引栏界面上很简单,就是一排字母, 你手指按哪儿那块做出相应反应,只是这里的选中区域要突出去,至于这个,可以利用父类的某一个属性:android:clipChildren=”false” 这个应该是ViewGroup的属性,这个属性的意思是要不要裁剪子元素的边框,默认是true,所以默认情况下,如果子元素超过了它自己的边距,就看不到了,
这里完全可以利用这个属性让索引栏突出去而不被父元素给裁剪掉了.

至于索引栏自身的逻辑其实并不难:
只是要考虑将ListView 和索引栏联系起来
我的想法是:
1.索引栏对外暴露一个监听(观察者模式-不知道算不算是),让外部其他关心索引栏滑动的事件得到通知,
2.对应的adapter持有Listview对象,和索引栏对象,并且对索引栏设置监听,在监听事件里面对listview做出相应滑动操作等

好了,逻辑差不多理清了,动手开始做索引栏
新建类:SideBar继承自View:
然后在onDraw方法里均匀绘制A~Z的字母(注意如果手指滑动时,有字母被选中的要做特殊处理)
然后拦截Touch方法,在onTouchEvent里面记录下当前选中了哪一个,并且调用invalidate()方法来让View重绘,还要调用一些观察者的方法告诉别人选中了哪个字母
上代码:

package com.example.indexsidebar.views;

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;

import com.example.indexsidebar.utils.DensityUtils;
/**
 * 联系人 拼音搜索滚动条
 * @author Administrator
 *
 */
public class SideBar extends View {
   
    private static String textColor = "#636363";
    private static String selectTextColor = "#3399ff";
    // 触摸事件
    private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
    // 26个字母
    public static String[] b = { "#", "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"
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
bootstrap-sb是一个基于Bootstrap框架的模板,主要用于创建具有侧边切换功能的管理系统。有两个版本可供选择:startbootstrap-sb-admin和startbootstrap-sb-admin-2。您可以通过npm安装或克隆GitHub仓库来获取这两个版本。对于startbootstrap-sb-admin,您只需下载后在文本编辑器中编辑模板的HTML和CSS即可使用。对于startbootstrap-sb-admin-2,您需要先运行npm install安装所需的库,然后运行npm start来在默认浏览器中查看演示应用程序。如果您使用bower包管理器,您可以将所需的库添加到"startbootstrap-SB-管理-2-侧边切换\资产\凉亭"文件夹中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [startbootstrap-sb-admin:由Start Bootstrap创建的免费,开源Bootstrap管理员主题](https://download.csdn.net/download/weixin_42138139/14958415)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [startbootstrap-sb-admin-2:一个免费的开源Bootstrap管理主题,由Start Bootstrap创建](https://download.csdn.net/download/weixin_42113552/14959202)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [startbootstrap-sb-admin-2-sidebar-toggle:带有sb admin 2切换选项的侧栏](https://download.csdn.net/download/weixin_42160425/19034452)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值