1.自定义view实现

public class SlideBar extends View {public static final String TAG = SlideBar.class.getSimpleName();//当前手指滑动到的位置private int choosedPosition = -1;//画文字的画笔private Paint paint;//单个字母的高度private float perTextHeight;//字母的字体大小private float letterSize;//字母的垂直间距private float letterGap;//字母圆形背景半径private float bgRadius;private ArrayList<String> firstLetters = new ArrayList<>();//绘制点击时的蓝色背景private Paint backgroundPaint;private Context context;private OnTouchFirstListener listener;private RecyclerView tiku_recycle_answer;public SlideBar(Context context) {this(context, null);}public SlideBar(Context context, AttributeSet attrs) {this(context, attrs, 0);}public SlideBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);this.context = context;TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SlideBar);//字母的字体大小letterSize = typedArray.getDimension(R.styleable.SlideBar_letter_size, DisplayUtils.sp2px(context, 10.0f));//每个字母的高perTextHeight = typedArray.getDimension(R.styleable.SlideBar_letter_height, DisplayUtils.dp2px(context, 10.0f));//字母垂直间距letterGap = typedArray.getDimension(R.styleable.SlideBar_letter_gap, DisplayUtils.dp2px(context, 6.0f));//字母垂直间距bgRadius = typedArray.getDimension(R.styleable.SlideBar_letter_bg_radius, DisplayUtils.dp2px(context, 8.0f));typedArray.recycle();init();}public void init() {//初始化画笔paint = new Paint();paint.setAntiAlias(true);paint.setTextSize(letterSize);paint.setTypeface(Typeface.DEFAULT_BOLD);//初始化圆形背景画笔backgroundPaint = new Paint();backgroundPaint.setAntiAlias(true);backgroundPaint.setColor(context.getResources().getColor(R.color.color_368FFF));}//设置首字母数据源public void setFirstLetters(ArrayList<String> letters) {firstLetters.clear();firstLetters.addAll(letters);invalidate();}//传入依赖的列表，当高度大于该列表时，重新进行测量，当然你可以自己规定测量规则，不一定跟我这里一样。public void setTiku_recycle_answer(RecyclerView tiku_recycle_answer) {this.tiku_recycle_answer = tiku_recycle_answer;}//测量。注意我这里没有处理padding和margin的情况。@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int widthMode = MeasureSpec.getMode(widthMeasureSpec);   //获取宽的模式int heightMode = MeasureSpec.getMode(heightMeasureSpec); //获取高的模式int widthSize = MeasureSpec.getSize(widthMeasureSpec);   //获取宽的尺寸int heightSize = MeasureSpec.getSize(heightMeasureSpec); //获取高的尺寸int width = 0;int height;if (widthMode == MeasureSpec.EXACTLY) {//如果match_parent或者具体的值，直接赋值width = widthSize;} else {//如果其他模式，则指定一个宽度width = DisplayUtils.dp2px(getContext(), 20.0f);}//高度跟宽度处理方式一样if (heightMode == MeasureSpec.EXACTLY) {height = heightSize;} else {float textHeight = perTextHeight;height = (int) (getPaddingTop() + textHeight * (firstLetters.size() + 1) + letterGap * (firstLetters.size() - 1) + getPaddingBottom());}if (height > tiku_recycle_answer.getMeasuredHeight()) {height = tiku_recycle_answer.getMeasuredHeight();}//保存测量宽度和测量高度setMeasuredDimension(width, height);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);for (int i = 0; i < firstLetters.size(); i++) {paint.setColor(i == choosedPosition ? Color.WHITE : context.getResources().getColor(R.color.color_368FFF));float x = (getWidth() - paint.measureText(firstLetters.get(i))) / 2;float y = (float) getHeight() / firstLetters.size();//每个字母的高度if (i == choosedPosition) {canvas.drawCircle((float) (getWidth() / 2), i * y + y / 2, bgRadius, backgroundPaint);}//垂直位置需要增加一个偏移量,上移两个像素，因为根据计算得到的是baseline，将字母上移，使其居中在圆内canvas.drawText(firstLetters.get(i), x, (perTextHeight + y) / 2 + y * i - 2, paint);}}//触碰事件//按下，松开，拖动@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:case MotionEvent.ACTION_MOVE://你可以在这里设置触摸时的背景this.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));float y = event.getY();//获取触摸到字母的位置, move时会多次触发，此处只响应第一次int newPosition = -1;newPosition = (int) y * firstLetters.size() / getHeight();//上滑超过边界，显示第一个if (newPosition < 0) {newPosition = 0;}//下滑超过边界，显示最后一个if (newPosition >= firstLetters.size()) {newPosition = firstLetters.size() - 1;}float circleY = (float) getHeight() / firstLetters.size();//画圆的圆心Y值if (listener != null && newPosition != choosedPosition) {//滑动A-Z字母联动外层数据choosedPosition = newPosition;Lg.d(TAG, "onTouchEvent circleY：" + (choosedPosition * circleY + circleY / 2) + ",choosedPosition:" + choosedPosition + ",total firstLetters size:" + firstLetters.size());listener.onTouch(firstLetters.get(choosedPosition), choosedPosition * circleY + circleY / 2);}break;case MotionEvent.ACTION_UP://设置松开时的背景
this.setBackgroundColor(context.getResources().getColor(android.R.color.transparent));choosedPosition = -1;if (listener != null) {//滑动A-Z字母联动外层数据listener.onRelease();}break;}//重绘invalidate();return true;}//设置触摸监听器，回传选中的字母和位置，用于提示框的显示public void setFirstListener(OnTouchFirstListener listener) {this.listener = listener;}/*** OnTouchFirstListener 接口* onTouch：触摸到了那个字母* onRelease:up释放时中间显示的字母需要设置为GONE*/public interface OnTouchFirstListener {/*** @param firstLetter 需要显示的首字母* @param dy          需要显示的垂直位置（圆心的垂直位置）*/void onTouch(String firstLetter, float dy);/*** 松开手指时的操作，隐藏提示框*/void onRelease();}
}

2.自定义属性

<declare-styleable name="SlideBar"><attr name="letter_size" format="dimension" /><attr name="letter_height" format="dimension" /><attr name="letter_gap" format="dimension" /><attr name="letter_bg_radius" format="dimension" />
</declare-styleable>

3.xml布局中如何使用？

xml中引入，我的是constraintlayout，具体设置看自己的布局<com.answer.view.SlideBarandroid:id="@+id/slideBar"android:layout_width="@dimen/dp_20"android:layout_height="wrap_content"app:layout_constraintBottom_toBottomOf="@+id/tiku_recycle_answer"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="@+id/guide_answer"app:layout_constraintTop_toTopOf="@+id/tiku_recycle_answer"app:letter_bg_radius="@dimen/dp_8"app:letter_gap="@dimen/dp_6"app:letter_height="@dimen/dp_10"app:letter_size="@dimen/sp_10" />

4.代码中如何调用？

传入首字母数据，及设置监听

     /*** 处理导航栏事件*/private void handleSlideBarEvent() {List<QuesCommentSubjectiveStuBean> datas = subjectiveCommentDetailAdapter.getDatas();//获取处理后的数据，赋值给导航栏ArrayList<String> letters = new ArrayList<>();for (QuesCommentSubjectiveStuBean stuBean : datas) {if (letters.contains(stuBean.getFirstLetter())) {continue;}letters.add(stuBean.getFirstLetter());}slideBar.setFirstLetters(letters);slideBar.setTiku_recycle_answer(tiku_recycle_answer);slideBar.setFirstListener(new SlideBar.OnTouchFirstListener() {@Overridepublic void onTouch(String firstLetter, float dy) {tv_first_letter.setVisibility(VISIBLE);tv_first_letter.setText(firstLetter);ConstraintLayout.LayoutParams layoutParams = (ConstraintLayout.LayoutParams) tv_first_letter.getLayoutParams();//如果是第一个字母，修改提示框显示位置layoutParams.topMargin = (int) dy + slideBar.getTop() - tv_first_letter.getMeasuredHeight() / 2;//异常情况，点击最后一个字符，提示框显示不全的场景,如果显示位置超过屏幕，则靠底部显示if ((int) dy + slideBar.getTop() + tv_first_letter.getMeasuredHeight() / 2 > tiku_recycle_answer.getBottom()) {layoutParams.topMargin = tiku_recycle_answer.getBottom() - tv_first_letter.getMeasuredHeight();}tv_first_letter.setLayoutParams(layoutParams);//滑动后移动到对应的位置,找到第一个匹配到首字母的学生，位移到此处int newPosition = -1;for (QuesCommentSubjectiveStuBean stuBean : datas) {if (firstLetter.equals(stuBean.getFirstLetter())) {newPosition = datas.indexOf(stuBean);break;}}//move时会多次触发，此处只响应第一次if (newPosition != lastPosition) {lastPosition = newPosition;subJectLinearLayoutManager.scrollToPositionWithOffset(lastPosition, 0);}}@Overridepublic void onRelease() {postDelayed(new Runnable() {@Overridepublic void run() {lastPosition = -1;tv_first_letter.setVisibility(GONE);}}, 100);}});}

5.一个小问题。

用于放大显示选中字母的TextView在布局中，请设置为invisible，这样在加载xml布局时，会对这个控件进行测量和布局，只是不显示，这样我们才能获得tv_first_letter.getMeasuredHeight()，如果设置为gone，不会进行测量，获取的高度就为0，这样在第一次显示的时候就会有一个显示位置跳动的异常。设置为invisible就可以解决这个问题，目的就是让系统测量一下TextView的宽高，不想这么搞的话，在第4步之前手动测量一次也是可以的。

<TextViewandroid:id="@+id/tv_first_letter"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginEnd="@dimen/dp_2"android:background="@mipmap/ic_bubble"android:fontFamily="sans-serif"android:gravity="center"android:text="C"android:textColor="@color/color_ffffff"android:textSize="@dimen/sp_18"android:visibility="invisible"app:layout_constraintEnd_toStartOf="@+id/guide_answer"app:layout_constraintTop_toTopOf="parent" />

Android仿微信自定义字母导航栏相关推荐

android高仿微信底部渐变导航栏
最近有很多人问微信底部的变色卡片导航是怎么做的,我在网上看了好几个例子,都是效果接近,都存有一些差异,自己琢磨也做了一个,几乎99%的还原,效果还不错吧仔细观察微信图片,发现他有两部分内容,外面的边 ...
android 通讯录字母排序,Android仿微信联系人字母排序效果
本文实例为大家分享了Android联系人字母排序的具体代码,供大家参考,具体内容如下实现思路:首先说下布局,整个是一个相对布局,最下面是一个listview,listview上面是一个自定义的vie ...
Android自定义View——实现字母导航栏
思路分析 1.自定义View实现字母导航栏 2.ListView实现联系人列表 3.字母导航栏滑动事件处理 4.字母导航栏与中间字母的联动 5.字母导航栏与ListView的联动效果展示实现步骤 ...
android 好友字母分组,Android好友联系人按字母排序分组，自定义通讯录导航栏View...
Android中仿微信实现联系人列表按字母排序分组自定义通讯录导航栏View,下边是效果图: 1. 自定义View public class SideBar extends View { // 触 ...
Android好友联系人按字母排序分组，自定义通讯录导航栏View
Android中仿微信实现联系人列表按字母排序分组自定义通讯录导航栏View,下边是效果图: 1. 自定义View public class SideBar extends View {// 触摸 ...
php仿微信底部菜单,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
android仿微信的activity平滑水平切换动画,Android实现简单底部导航栏 Android仿微信滑动切换效果...
Android实现简单底部导航栏 Android仿微信滑动切换效果发布时间:2020-10-09 19:48:00 来源:脚本之家阅读:96 作者:丶白泽 Android仿微信滑动切换最终实现效果 ...
android滑动菜单图标,Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...
android 底部滑动效果怎么做,Android实现简单底部导航栏 Android仿微信滑动切换效果...
android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义view配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏 ...

Android仿微信自定义字母导航栏