Android 城市选择器

立即下载用AI写一个

发布时间：2021-02-21

3人 | 浏览：5408次 | 收藏 |

技术：Android,Java

概述

在Android开发中，城市(地区)选择是一个很常用的功能，今天花时间做一个，以便在以后的开发中用到。

详细

###一、运行效果：
![](/contentImages/image/20210209/kwYDLf2GvXeo9jKbI9E.png)
###二、实现过程：
####1.界面布局设计
  ###### 根据上面的界面我们需要一个列表和一个侧边栏控件和中间一个提示当前区域字符的TextView，所以我们的布局文件activity_main.xml设计如下:
```xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.cjq.citypicker.MainActivity">
    <ListView
        android:id="@+id/id_lv_citys"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <com.cjq.citypicker.LetterSideBar
        android:id="@+id/id_sidebar"
        android:layout_width="26dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:background="#dddddd" />
    <TextView
        android:id="@+id/id_tv_mask"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:layout_gravity="center"
        android:background="#dddddd"
        android:gravity="center"
        android:text="A"
        android:textSize="25sp"
        android:visibility="gone" />
</RelativeLayout>
```
####2.主要功能实现
a.侧边栏自定义控件，实现点击，滑动手势，对26个字母的选择。
```java
package com.cjq.citypicker;

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

import java.util.ArrayList;
import java.util.List;

/**
 * 城市选择列表侧边栏
 */
public class LetterSideBar extends View {

// 字母列表
    private List<String> mLetters = new ArrayList<>();
    private OnTouchLetterListener mOnTouchLetterListener;
    private TextView mOverLayTextView; // 显示的字母

private int mWidth;
    private int mHeight;
    private int mEachLetterHeight;
    private int mEachLetterWidth;

private Paint mPaint;

private boolean maskShown; // 是否显示背景
    private int mSelectedIndex = -1; // 已选择的字母

public LetterSideBar(Context context) {
        this(context, null);
    }

public LetterSideBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

public LetterSideBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPaint = new Paint();

for (int i = 0; i < 26; i++) {
            char letter = (char) ('A' + i);
            mLetters.add(String.valueOf(letter));
        }
    }

/**
     * 绘制所有的大写字母
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mWidth = getWidth();
        mHeight = getHeight();
        mPaint.setAntiAlias(true);
        mPaint.setTextSize(getResources().getDimension(R.dimen.side_bar_letter));
        if (mLetters.size() > 0) {
            mEachLetterHeight = mHeight / mLetters.size();
        } else {
            mEachLetterHeight = mHeight;
        }
        // 绘制所有显示的字母
        mEachLetterWidth = (int) (mWidth / 2 - mPaint.measureText(mLetters.get(0)) / 2);
        for (int i = 0; i < mLetters.size(); i++) {
            mPaint.setColor(Color.BLACK);
            if (mSelectedIndex == i && mSelectedIndex != -1) {
                mPaint.setColor(Color.CYAN); // 设置选中时的颜色
            }
            canvas.drawText(mLetters.get(i), mEachLetterWidth, i * mEachLetterHeight + mEachLetterHeight, mPaint);
        }
    }
    /**
     * 处理触摸事件
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float y = event.getY();
        // 获取点击的字母
        int letterIndex = (int) ((y / mHeight) * mLetters.size());
        switch (action) {
            // 选中字母高亮
            case MotionEvent.ACTION_DOWN:
                L.d("Letter is : " + mLetters.get(letterIndex));
                selectedLetter(letterIndex);
                break;
            // 在字母范围内,仍视为选中字母
            case MotionEvent.ACTION_MOVE:
                selectedLetter(letterIndex);
                break;
            case MotionEvent.ACTION_UP:
                mSelectedIndex = -1;
                invalidate();
                hideOverLayText();
                break;
        }
        return true;
    }

public void setLetterList(List<String> list) {
        this.mLetters = list;
    }

public void setOnTouchLetterListener(OnTouchLetterListener onTouchLetterListener) {
        this.mOnTouchLetterListener = onTouchLetterListener;
    }

/**
     * 通过此接口设置ListView的position
     */
    public interface OnTouchLetterListener {
        void onLetterSelected(String letter);
    }

/**
     * 高亮显示选中的字母,并显示mask
     */
    private void selectedLetter(int letterIndex) {
        if (letterIndex >= 0 && letterIndex < mLetters.size()) {
            // 显示遮罩
            maskShown = true;
            if (mOnTouchLetterListener != null) {
                mOnTouchLetterListener.onLetterSelected(mLetters.get(letterIndex));
            }
            mSelectedIndex = letterIndex;
            // 通知重绘
            invalidate();
            // 显示字母
            showOverLayText();
        }
    }

/**
     * 显示选择的字母
     */
    public void showOverLayText() {
        if (mOverLayTextView != null) {
            mOverLayTextView.setVisibility(View.VISIBLE);
            mOverLayTextView.setText(mLetters.get(mSelectedIndex));
        }
    }

public void hideOverLayText() {
        postDelayed(()->{
            try{
                if (mOverLayTextView != null) {
                    mOverLayTextView.setVisibility(View.GONE);
                }
            }catch (Exception ex){
                Log.e("LetterSiderBar","hideOverLayText error");
            }

},1000);

}

public TextView getOverLayTextView() {
        return mOverLayTextView;
    }

public void setOverLayTextView(TextView overLayTextView) {
        this.mOverLayTextView = overLayTextView;
    }
}
```
b.城市(地区)控制器实现,这里实现侧边栏的接口，达到列表和侧边栏的联动功能。
```java
package com.cjq.citypicker;

import android.content.Context;
import android.text.Editable;
import android.text.TextUtils;
import android.text.TextWatcher;
import android.view.View;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.blankj.utilcode.util.ToastUtils;

import java.util.ArrayList;
import java.util.List;

public class CityPickController implements LetterSideBar.OnTouchLetterListener,OnViewClickListener<String>,TextWatcher {

private View mRootView;
    private TextView mTvMask;
    private LetterSideBar mLsSidebar;
    private ListView mLvCityList;
    private Context mContext;

private CityAdapter mAdapter;

private List<CityBean> mCities = new ArrayList<>();

public CityPickController(Context context, View root) {
        mRootView = root;
        mContext = context;
        initView();
        mCities = DBManager.getInstance(mContext).getAllCities();
        mAdapter = new CityAdapter(mContext, mCities,this::onClickView,this);
        mLvCityList.setAdapter(mAdapter);
    }

private void initView() {
        mTvMask = (TextView) mRootView.findViewById(R.id.id_tv_mask);
        mLsSidebar = (LetterSideBar) mRootView.findViewById(R.id.id_sidebar);
        mLvCityList = (ListView) mRootView.findViewById(R.id.id_lv_citys);
        mLsSidebar.setOverLayTextView(mTvMask);
        mLsSidebar.setOnTouchLetterListener(this);
    }

/**
     * 处理选择字母时的回调
     * @param letter
     */
    @Override
    public void onLetterSelected(String letter) {
        int position = mAdapter.getPosition(letter);
        if (position != -1) {
            mLvCityList.setSelection(position);
        }
    }

@Override
    public void onClickView(String a, int pos) {
        ToastUtils.showShort(a);
    }

@Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

@Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {

}

@Override
    public void afterTextChanged(Editable s) {
        if(TextUtils.isEmpty(s.toString())){
            return;
        }
        int position = mAdapter.getPosition(s.toString());
        if (position != -1) {
            mLvCityList.setSelection(position);
        }
    }
}

```
c.主界面MainActivity
  因为功能在侧边栏控件LetterSideBar和城市(地区)控制器CityPickController都实现了，所以主界面MainActivity的代码非常简单，只要把布局文件传给城市(地区)控制器CityPickController就可以了。
```java
package com.cjq.citypicker;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

private CityPickController mController;

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mController = new CityPickController(this, findViewById(android.R.id.content));
    }

}
```
d.城市数据
对于城市数据已经事先放在sqlite数据库文件里面了，app初始化，可以直接拿来用。

##三、项目结构图
![](/contentImages/image/20210209/xxMS9D4OtpftoX9bQx7.png)

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

Android 城市选择器

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子