网上的城市选择器很多，但还是亲自动手实现一下，效果如下图所示
Screenshot_2019-06-25-15-27-44.png
思路：使用RecyclerView的吸附式ItemDecoration（覆写onDrawOver方法），将分好组的城市的拼音首字母绘制到上面。触摸右侧的字母指示器IndicatorView控制RecyclerView滚动到哪个位置。
所以我们要解决的问题有：
1.RecyclerView吸附式ItemDdecoration
2.获取汉字拼音的首字母
3.根据触摸到的字母，指定Recycler View滚动到对应的位置
4.自定义View绘制“热门、A、B······Z”，重写绘制方法、测量方法，和触摸方法。
一：吸附式ItemDecoration。
在滑动的时候会依次调用onDraw和onDrawOver，其中onDraw是在ItemView的下层绘制，onDrawOver是在ItemView的上层绘制。可以在onDraw中给每一个ItemView绘制分割线，绘制区域是一个矩形，即ItemView的底边距顶部的高度，以及底边的offset。在DrawOver中绘制每一组的标题，标题的高度会在getItemOffsets中设置，为rect.top。标题位置分为三种情况，1.跟随Group第一个View移动。2.在顶部不动。3.顶部的标题被下一组的标题顶上去，即跟随该组最后一个View的底部移动。具体情况具体分析。
public class StickyItemDecoration extends RecyclerView.ItemDecoration {
private final Paint mPaint;
private final Paint mDividerPaint;
private OnDrawOverListener mSticky;
private int mGroupTitleHeight;
public StickyItemDecoration(Context context, OnDrawOverListener sticky) {
mSticky = sticky;
mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.BLUE);
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setTextSize(dp2px(context, 16));
mGroupTitleHeight = dp2px(context, 20);
mDividerPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
}
@Override
public void onDraw(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDraw(c, parent, state);
int childCount=parent.getChildCount();
RecyclerView.LayoutManager manager = parent.getLayoutManager();
for (int i = 0; i < childCount; i++) {
View child=parent.getChildAt(i);
int left=parent.getPaddingLeft() + manager.getLeftDecorationWidth(child);
int right=parent.getWidth()-parent.getPaddingRight() - manager.getRightDecorationWidth(child);
int top=child.getTop()-1;
int bottom=child.getTop();
//Item分割线
c.drawRect(left,top,right,bottom,mDividerPaint);
}
}
@Override
public void onDrawOver(@NonNull Canvas c, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.onDrawOver(c, parent, state);
RecyclerView.LayoutManager manager = parent.getLayoutManager();
int childCount = parent.getChildCount();
String preGroupName;
String groupName = "";
for (int i = 0; i < childCount; i++) {
View child = parent.getChildAt(i);
int childAdapterPosition = parent.getChildAdapterPosition(child);
preGroupName = groupName;
groupName = mSticky.getGroupName(childAdapterPosition);
//和上一个标题做对比，不一样就需要绘制
if (preGroupName == groupName) {
continue;
}
int startX = parent.getPaddingLeft() + (manager != null ? manager.getLeftDecorationWidth(child) : 0);
Paint.FontMetricsInt fontMetrics = mPaint.getFontMetricsInt();
//标题跟随整个Group滑动
if (child.getTop() > mGroupTitleHeight) {
int startY = child.getTop() - (mGroupTitleHeight + fontMetrics.descent + fontMetrics.ascent) / 2;
c.drawText(groupName, startX, startY, mPaint);
} else {
//位于顶部的GroupTitle，在顶部不用动，除非下边的标题顶上来了
Log.e("TAG", "....." + childAdapterPosition);
if (childAdapterPosition + 1 <= state.getItemCount()) {
//child后面的View的是下一组的第一个，并且这个child底部露出的高度已经小于标题高度了，这时候标题会被顶上去
if (mSticky.isGroupFirst(childAdapterPosition + 1) && child.getBottom() < mGroupTitleHeight) {
int startY = (child.getBottom() - (mGroupTitleHeight + fontMetrics.descent + fontMetrics.ascent) / 2);
c.drawText(groupName, startX, startY, mPaint);
} else {
//在顶部不用动
int startY = (mGroupTitleHeight - fontMetrics.descent - fontMetrics.ascent) / 2;
c.drawText(groupName, startX, startY, mPaint);
}
}
}
}
}
@Override
public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
Log.e("TAG", "getItemOffsets");
int childAdapterPosition = parent.getChildAdapterPosition(view);
if (mSticky.isGroupFirst(childAdapterPosition)) outRect.top = mGroupTitleHeight;
outRect.bottom = 1;
}
public interface OnDrawOverListener {
String getGroupName(int position);
boolean isGroupFirst(int position);
}
public static int dp2px(Context context, int dp) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, context.getResources().getDisplayMetrics());
}
}
二：获取汉字拼音的首字
https://www.cnblogs.com/pxblog/p/10604003.html
import java.io.UnsupportedEncodingException;
/**
* 取得给定汉字串的首字母串,即声母串
* Title: ChineseCharToEn
*
* @date 注：只支持GB2312字符集中的汉字
*/
public final class ChineseCharToEn {
private final static int[] li_SecPosValue = {1601, 1637, 1833, 2078, 2274,
2302, 2433, 2594, 2787, 3106, 3212, 3472, 3635, 3722, 3730, 3858,
4027, 4086, 4390, 4558, 4684, 4925, 5249, 5590};
private final static String[] lc_FirstLetter = {"a", "b", "c", "d", "e",
"f", "g", "h", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s",
"t", "w", "x", "y", "z"};
/**
* 取得给定汉字串的首字母串,即声母串
*
* @param str 给定汉字串
* @return 声母串
*/
public static String getAllFirstLetter(String str) {
if (str == null || str.trim().length() == 0) {
return "";
}
String _str = "";
for (int i = 0; i < str.length(); i++) {
_str = _str + getFirstLetter(str.substring(i, i + 1));
}
return _str;
}
/**
* 取得给定汉字的首字母,即声母
*
* @param chinese 给定的汉字
* @return 给定汉字的声母
*/
public static String getFirstLetter(String chinese) {
if (chinese == null || chinese.trim().length() == 0) {
return "";
}
chinese = conversionStr(chinese, "GB2312", "ISO8859-1");
if (chinese.length() > 1) // 判断是不是汉字
{
int li_SectorCode = (int) chinese.charAt(0); // 汉字区码
int li_PositionCode = (int) chinese.charAt(1); // 汉字位码
li_SectorCode = li_SectorCode - 160;
li_PositionCode = li_PositionCode - 160;
int li_SecPosCode = li_SectorCode * 100 + li_PositionCode; // 汉字区位码
if (li_SecPosCode > 1600 && li_SecPosCode < 5590) {
for (int i = 0; i < 23; i++) {
if (li_SecPosCode >= li_SecPosValue[i]
&& li_SecPosCode < li_SecPosValue[i + 1]) {
chinese = lc_FirstLetter[i];
break;
}
}
} else // 非汉字字符,如图形符号或ASCII码
{
chinese = conversionStr(chinese, "ISO8859-1", "GB2312");
chinese = chinese.substring(0, 1);
}
}
return chinese;
}
/**
* 字符串编码转换
*
* @param str 要转换编码的字符串
* @param charsetName 原来的编码
* @param toCharsetName 转换后的编码
* @return 经过编码转换后的字符串
*/
private static String conversionStr(String str, String charsetName, String toCharsetName) {
try {
str = new String(str.getBytes(charsetName), toCharsetName);
} catch (UnsupportedEncodingException ex) {
System.out.println("字符串编码转换异常：" + ex.getMessage());
}
return str;
}
public static void main(String[] args) {
System.out.println("获取拼音首字母：" + getAllFirstLetter("大中国南昌中大china"));
}
}
三：RecyclerView滚动到指定位置pos
https://www.jianshu.com/p/6d5ecfdbb615
四：自定义字母指示器IndicatorView
1.绘制data中的字符串：热门、A、B、C······Z
2.测量大小onMeasure
3.重写onTouch方法，通过触摸的位置的坐标，计算出触摸的是哪个字母，并传入回调接口中
package com.app.cityselector.view;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
import java.util.List;
public class IndicatorView extends View {
private Context context;
private List data;
private Paint paint;
private float ascent;
private float descent;
private float textHeight;
private float textGap;
private float charWidth;
private int paddingLeft;
private int paddingRight;
public IndicatorView(Context context) {
this(context, null);
}
public IndicatorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public IndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
initView();
}
private void initView() {
paint = new Paint();
DisplayMetrics metrics = context.getResources().getDisplayMetrics();
paint.setTextSize(9 * metrics.density);
ascent = paint.getFontMetrics().ascent;
descent = paint.getFontMetrics().descent;
textHeight = Math.abs(ascent - descent);
charWidth = paint.measureText("A");
}
public void setData(List data) {
this.data = data;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
float y = 0;
y = -ascent + textGap / 2;
float x = (getWidth() - paddingLeft - paddingRight - charWidth) / 2;
for (int i = 0; i < data.size(); i++) {
canvas.drawText(data.get(i), i == 0 ? 0 : x, y, paint);
y += textHeight + textGap;
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int width = widthSize;
int height = heightSize;
paddingLeft = getPaddingLeft();
paddingRight = getPaddingRight();
//wrap_content:计算得出最小的宽高，
//match_content或具体值:撑满父容器，空出来的地方作为item间隔平均分布到item之间
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
width = (int) paint.measureText("热门") + paddingLeft + paddingRight;
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
textGap = (height - textHeight * data.size()) / data.size();
} else {
height = (int) (Math.abs(paint.getFontMetrics().ascent - paint.getFontMetrics().descent) * data.size());
}
setMeasuredDimension(width, height);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float y = event.getY();
int index = (int) (y / (textGap + textHeight));
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
if (onItemTouched != null) {
onItemTouched.onTouched(data.get(index), index);
}
break;
case MotionEvent.ACTION_UP:
if (onItemTouched != null) {
onItemTouched.onTouchedUp(data.get(index), index);
}
break;
}
return true;
}
OnItemTouched onItemTouched;
public void setOnItemTouched(OnItemTouched onItemTouched) {
this.onItemTouched = onItemTouched;
}
public interface OnItemTouched {
void onTouched(String s, int pos);
void onTouchedUp(String s, int pos);
}
}
以上三步做好后，就完成了准备工作。
CitySelectorView中使用RecyclerView展示数据，根据右侧的字母指示器指定RecyclerView滚动到指定pos。
实体类：
public class CityBean {
private int id;
private String code;
private String name;
//getter and setter
......
}
CityAdapter:展示的数据有热门城市和普通城市Item，所以要区分两类itemType
package com.app.cityselector.view.adapter;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import com.app.cityselector.R;
import com.app.cityselector.bean.CityBean;
import java.util.List;
public class CityAdapter extends RecyclerView.Adapter {
public static final int TYPE_HOT_CITY = 1;
public static final int TYPE_CITY_ITEM = 2;
private final LayoutInflater inflater;
Context context;
//热门城市
List hotCitys;
//全部城市
List allCitys;
public CityAdapter(Context context) {
this.context = context;
inflater = LayoutInflater.from(context);
}
public void setHotCitys(List hotCitys) {
this.hotCitys = hotCitys;
}
public void setAllCitys(List allCitys) {
this.allCitys = allCitys;
}
@Override
public int getItemViewType(int position) {
if (hotCitys != null && position == 0) {
return TYPE_HOT_CITY;
} else {
return TYPE_CITY_ITEM;
}
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int type) {
if (type == TYPE_HOT_CITY) {
return new HotCityViewHolder(inflater.inflate(R.layout.item_hot_city, viewGroup, false));
} else if (type == TYPE_CITY_ITEM) {
return new CityItemViewHolder(inflater.inflate(R.layout.item_city, viewGroup, false));
}
return null;
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
if (viewHolder instanceof HotCityViewHolder) {
HotCityViewHolder hotCityViewHolder = (HotCityViewHolder) viewHolder;
hotCityViewHolder.bindData(hotCitys);
} else if (viewHolder instanceof CityItemViewHolder) {
CityItemViewHolder cityItemViewHolder = (CityItemViewHolder) viewHolder;
CityBean cityBean = allCitys.get(hotCitys != null ? i - 1 : i);
cityItemViewHolder.bindData(cityBean);
}
}
@Override
public int getItemCount() {
int count = 0;
if (hotCitys != null) {
count++;
}
if (allCitys != null) {
count += allCitys.size();
}
return count;
}
static class CityItemViewHolder extends RecyclerView.ViewHolder {
private TextView tvCityName;
public CityItemViewHolder(@NonNull View itemView) {
super(itemView);
tvCityName = itemView.findViewById(R.id.tv_city_name);
}
public void bindData(CityBean cityBean) {
tvCityName.setText(cityBean.getName());
}
}
static class HotCityViewHolder extends RecyclerView.ViewHolder {
private LinearLayout llHotCityContainer;
//热门城市的列数
int hotColumn = 3;
public void setHotColumn(int hotColumn) {
this.hotColumn = hotColumn;
}
public HotCityViewHolder(@NonNull View itemView) {
super(itemView);
llHotCityContainer = itemView.findViewById(R.id.gl_hot_city_container);
}
//展示热门城市
public void bindData(List cityBeans) {
llHotCityContainer.removeAllViews();
Context context = itemView.getContext();
int halfMargin = context.getResources().getDimensionPixelSize(R.dimen.base_margin_half);
int paddingVertical = context.getResources().getDimensionPixelSize(R.dimen.padding_vertical);
int row = cityBeans.size() / hotColumn;
for (int i = 0; i < row + 1; i++) {
LinearLayout llRow = new LinearLayout(context);
llRow.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
llRow.setPadding(halfMargin, halfMargin, halfMargin, halfMargin);
for (int j = 0; j < hotColumn; j++) {
int index = row * i + j;
if (index < cityBeans.size()) {
CityBean cityBean = cityBeans.get(index);
TextView textView = new TextView(context);
textView.setText(cityBean.getName());
textView.setBackgroundResource(R.drawable.bg_hot_city);
textView.setClickable(true);
textView.setPadding(0, paddingVertical, 0, paddingVertical);
textView.setGravity(Gravity.CENTER);
textView.setTextColor(context.getResources().getColor(R.color.colorText));
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14);
//setLayoutParams
LinearLayout.LayoutParams textLayoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
textLayoutParams.weight = 1;
textLayoutParams.leftMargin = halfMargin;
textLayoutParams.rightMargin = halfMargin;
textView.setLayoutParams(textLayoutParams);
llRow.addView(textView);
}
}
llHotCityContainer.addView(llRow);
}
}
}
}
重点来了，当触摸右边的字母指示器时，根据字母获取RecyclerView中的城市名称的拼音的出现该字母的第一个位置，如果找不到，就定位到上一个字母出现的位置。
/**
* 根据ABC...Z获取第一次出现的pos
*
* @param s
* @return
*/
private int getFirstPos(String s) {
if ("热门".equals(s)) {
return 0;
}
int pos = 0;
if (hotCity != null) {
pos++;
}
int firstPos = 0;
for (int i = 0; i < allCity.size(); i++) {
//相等
String firstLetter = ChinessToEn.getFirstLetter(allCity.get(i).getName()).toUpperCase();
int compare = firstLetter.compareToIgnoreCase(s);
if (compare == 0) {
firstPos = i;
break;
} else if (compare < 0) {
if (i > 1 && !allCity.get(i).getName().equals(allCity.get(i - 1).getName())) {
firstPos = i;
}
} else {
break;
}
}
pos += firstPos;
return pos;
}
获取到位置后，就可以混动RecyclerView了
public static void moveToPosition(LinearLayoutManager manager, RecyclerView mRecyclerView, int n) {
int firstItem = manager.findFirstVisibleItemPosition();
int lastItem = manager.findLastVisibleItemPosition();
if (n <= firstItem) {
mRecyclerView.scrollToPosition(n);
} else if (n <= lastItem) {
int top = mRecyclerView.getChildAt(n - firstItem).getTop();
mRecyclerView.scrollBy(0, top);
} else {
mRecyclerView.scrollToPosition(n);
}
}
CitySelectorView完成代码：
public class CitySelectorView extends FrameLayout implements View.OnClickListener {
private Context context;
private RecyclerView recyclerView;
private IndicatorView indicatorView;
private TextView tvCenter;
private LinearLayoutManager layoutManager;
private CityAdapter adapter;
private List hotCity;
private List allCity;
private String[] indecatorData = new String[]{"热门", "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"};
public void setHotCity(List hotCity) {
this.hotCity = hotCity;
}
public void setAllCity(List allCity) {
this.allCity = allCity;
}
public void notifyDataSetChanged() {
adapter.setHotCitys(hotCity);
adapter.setAllCitys(allCity);
adapter.notifyDataSetChanged();
}
public CitySelectorView(@NonNull Context context) {
this(context, null);
}
public CitySelectorView(@NonNull Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CitySelectorView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
init();
}
private void init() {
LayoutInflater.from(context).inflate(R.layout.view_city_selector, this, true);
recyclerView = findViewById(R.id.recycler_city);
tvCenter = findViewById(R.id.tv_center);
indicatorView = findViewById(R.id.indicator);
//set RecyclerView
layoutManager = new LinearLayoutManager(context);
recyclerView.setLayoutManager(layoutManager);
//吸附式
recyclerView.addItemDecoration(new StickyItemDecoration(context, new ISticky() {
@Override
public boolean isGroupFirst(int pos) {
if (hotCity != null) {
if (pos == 0) return true;
if (allCity != null && allCity.size() != 0) {
if (pos == 1) {
return true;
} else {
return !ChinessToEn.getFirstLetter(allCity.get(pos - 1).getName()).equals(ChinessToEn.getFirstLetter(allCity.get(pos - 2).getName()));
}
}
return false;
} else {
if (pos == 0) return true;
if (allCity != null && allCity.size() != 0) {
return !ChinessToEn.getFirstLetter(allCity.get(pos).getName()).equals(ChinessToEn.getFirstLetter(allCity.get(pos - 1).getName()));
}
return false;
}
}
@Override
public String getGroupTitle(int pos) {
if (hotCity != null) {
if (pos == 0) return "热门";
if (allCity != null && allCity.size() != 0) {
return ChinessToEn.getFirstLetter(allCity.get(pos - 1).getName()).toUpperCase();
}
} else {
if (allCity != null && allCity.size() != 0) {
return ChinessToEn.getFirstLetter(allCity.get(pos).getName()).toUpperCase();
}
}
return null;
}
}));
adapter = new CityAdapter(context);
recyclerView.setAdapter(adapter);
indicatorView.setData(Arrays.asList(indecatorData));
indicatorView.setOnItemTouched(new IndicatorView.OnItemTouched() {
@Override
public void onTouched(String s, int pos) {
tvCenter.setVisibility(VISIBLE);
tvCenter.setText(s);
int firstPos = getFirstPos(s);
L.e(firstPos);
moveToPosition(layoutManager, recyclerView, firstPos);
}
@Override
public void onTouchedUp(String s, int pos) {
tvCenter.setVisibility(INVISIBLE);
}
});
}
@Override
public void onClick(View v) {
}
/**
* 根据ABC...Z获取第一次出现的pos
*
* @param s
* @return
*/
private int getFirstPos(String s) {
if ("热门".equals(s)) {
return 0;
}
int pos = 0;
if (hotCity != null) {
pos++;
}
int firstPos = 0;
for (int i = 0; i < allCity.size(); i++) {
//相等
String firstLetter = ChinessToEn.getFirstLetter(allCity.get(i).getName()).toUpperCase();
int compare = firstLetter.compareToIgnoreCase(s);
if (compare == 0) {
firstPos = i;
break;
} else if (compare < 0) {
if (i > 1 && !allCity.get(i).getName().equals(allCity.get(i - 1).getName())) {
firstPos = i;
}
} else {
break;
}
}
pos += firstPos;
return pos;
}
/**
* RecyclerView 移动到当前位置，
*
* @param manager 设置RecyclerView对应的manager
* @param mRecyclerView 当前的RecyclerView
* @param n 要跳转的位置
*/
public static void moveToPosition(LinearLayoutManager manager, RecyclerView mRecyclerView, int n) {
int firstItem = manager.findFirstVisibleItemPosition();
int lastItem = manager.findLastVisibleItemPosition();
if (n <= firstItem) {
mRecyclerView.scrollToPosition(n);
} else if (n <= lastItem) {
int top = mRecyclerView.getChildAt(n - firstItem).getTop();
mRecyclerView.scrollBy(0, top);
} else {
mRecyclerView.scrollToPosition(n);
}
}
}