城市选择器
2019-06-25 本文已影响7人
飞奔吧牛牛
网上的城市选择器很多，但还是亲自动手实现一下，效果如下图所示
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。
https://blog.csdn.net/darlingxian/article/details/80325742
二：获取汉字拼音的首字
https://www.cnblogs.com/pxblog/p/10604003.html
三：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<String> 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<String> 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<RecyclerView.ViewHolder> {
public static final int TYPE_HOT_CITY = 1;
public static final int TYPE_CITY_ITEM = 2;
private final LayoutInflater inflater;
Context context;
//热门城市
List<CityBean> hotCitys;
//全部城市
List<CityBean> allCitys;
public CityAdapter(Context context) {
this.context = context;
inflater = LayoutInflater.from(context);
}
public void setHotCitys(List<CityBean> hotCitys) {
this.hotCitys = hotCitys;
}
public void setAllCitys(List<CityBean> 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<CityBean> 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<CityBean> hotCity;
private List<CityBean> 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<CityBean> hotCity) {
this.hotCity = hotCity;
}
public void setAllCity(List<CityBean> 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);
}
}
}
每个知识点都不难，整合到一起就是个大功能了。
