Android仿美团切换城市_H5之家 - 中国HTML5教程资源分享第一站

最近一直关注一些比较有名的app，像美团、58、赶集网、淘宝等等。主要目的就是学习下目前一些常用的技术，模拟一下它们的比较炫的界面来巩固下知识，我发现美团、58同城、赶集网它们的切换城市界面类似，也挺酷炫，另外一个原因由于前面几篇博客写的自定义控件的一些知识相对来说比较难，也有好多看官反应很难读懂，那么好，今天呢，就和大家一起分享一下这个界面的写法。这个界面的实现并不难牵扯到的知识点还挺多的而且还挺酷炫，所以能够读这篇博客你绝对赚到了，哈哈。。。

如有谬误欢迎批评指正，如有疑问欢迎留言。

通过本篇博客你将学到以下知识点

①BaseAdapter的使用包括BaseAdapter中的getViewTypeCount和getItemViewType方法的使用

②百度地图定位的使用

③自定义控件的相关的知识

④数据库相关的操作

⑤pinyin4j的用法

我们废话不多说先看看效果图这也是今天我们要达到的效果，由于csdn只允许上传图片大小不超过2M的图片，所以这里我录制两张图片如下

它的主要功能有：①展示定位的城市②展示最近访问的城市③展示热门的城市④展示需要展示的城市⑤用EditText进行筛选城市⑥当滑动右边的字母时左边的ListView会跳到相应的位置等。

在这里要提醒大家注意一点不要在模拟器上运行，最好在真机上运行，模拟器上的运行界面效果不好，看到上面两张图是不是感觉还不错，通过这篇博客的学习相信你也可以，咱们废话不多说进入主题

首先来分析下整个界面如下图

从整体上来说包括三大部分第一部分就是最上方的一个EditText，第二部分就是最右边的自定义View，第三部分是EditText下方的ListView，这里EditText的主要作用就是筛选城市，接着我们一点一点的去实现上面的效果。

1、右侧自定义View的实现

实现这样一个效果就是滑动最右边的自定义View然后界面中间的TextView去展示所滑到的字母，这里就要去自定义一个View了，首先来分析下思路，我是这样想的：

①需要用canvas的drawText方法将：“定位”、最近、热门“、全部、A-Z这些数据画出来，怎么去按照上述图片的样子去绘画这些数据呢？首先需要获得每个字符的高度，怎么获得？用View的高度除以字符的个数就可以得到每个字符的高度，然后绘制时通过控制Y坐标不断的增加从而使数据沿着竖直方向去绘制，在自定义的View中它的实现代码如下

for (int i = 0; i < letter.length; i++) { String text = letter[i]; float xPosition = width / 2 - mPaint.measureText(text) / 2; float yPosition = singleHeight * i + singleHeight; //通过不断的改变yPosition将数组中的数据一个一个绘制到自定义的View中 canvas.drawText(text, xPosition, yPosition, mPaint); }

第4行就是让所绘制的文字在X方向上显示在View的中间，而float yPosition = singleHeight * i + singleHeight;就是来改变每个文字的Y坐标使其沿着竖直方向去绘制文字

②在滑动时怎样通知Activity当前滑动到哪儿了？

这里是通过一个监听的方式，在Activity中注册了自定义View的监听，然后在View滑动的时候将数据回调给Activity

我们先看看代码然后运行下看看是不是这样

MyLetterView的代码如下

package com.example.citylistpractice; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.widget.TextView; public class MyLetterView extends View { private Paint mPaint; private boolean isShowBg = false;// 用于区分是否显示view的背景 private OnSlidingListener mOnSlidingListener;// 滑动此View的监听器 private int choose = -1;// 用于标记当前所选中的位置 private TextView mTvDialog;//用于接受从activity中传过来的，中间用于展示字母的textView //需要展示的数据 private String[] letter = { 定位, 最近, 热门, 全部, A, B, C, D, E, F, G, H,J, K, L, M, N,P, Q, R, S, T,W, X, Y, Z }; public MyLetterView(Context context) { super(context); } public MyLetterView(Context context, AttributeSet attrs) { super(context, attrs); initPaint(); } public MyLetterView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setTextSize(26); mPaint.setColor(Color.parseColor(#8c8c8c)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //当此View被按下时所显示的背景颜色 if (isShowBg) { canvas.drawColor(Color.parseColor(#40000000)); } //计算每个字符所占的高度 float singleHeight = getHeight() / letter.length; int width = getWidth(); for (int i = 0; i < letter.length; i++) { String text = letter[i]; float xPosition = width / 2 - mPaint.measureText(text) / 2; float yPosition = singleHeight * i + singleHeight; //通过不断的改变yPosition将数组中的数据一个一个绘制到自定义的View中 canvas.drawText(text, xPosition, yPosition, mPaint); } } @Override public boolean onTouchEvent(MotionEvent event) { int action = event.getAction(); int position = (int) (event.getY() / getHeight() * letter.length); int oldChoose = choose; switch (action) { case MotionEvent.ACTION_DOWN: isShowBg = true; if (oldChoose != position && mOnSlidingListener != null) { if (position > 0 && position < letter.length) { //将滑动到的字母传递到activity中 mOnSlidingListener.sliding(letter[position]); choose=position; if(mTvDialog!=null){ mTvDialog.setVisibility(View.VISIBLE); mTvDialog.setText(letter[position]); } } invalidate(); } break; case MotionEvent.ACTION_MOVE: isShowBg = true; if (oldChoose != position && mOnSlidingListener != null) { if (position >=0 && position < letter.length) { mOnSlidingListener.sliding(letter[position]); choose=position; if(mTvDialog!=null){ mTvDialog.setVisibility(View.VISIBLE); mTvDialog.setText(letter[position]); } } invalidate(); } break; case MotionEvent.ACTION_UP: isShowBg = false; choose=-1; if(mTvDialog!=null){ mTvDialog.setVisibility(View.GONE); } invalidate(); break; } return true; } //MyLetterView的一个滑动的监听 public void setOnSlidingListener(OnSlidingListener mOnSlidingListener) { this.mOnSlidingListener = mOnSlidingListener; } public interface OnSlidingListener { public void sliding(String str); } public void setTextView(TextView tvDialog) { mTvDialog=tvDialog; } }