【Android】仿微信通讯录中的右侧字母表控件

微信通讯录中的右侧有个字母条，通过它可以快速找到指定联系人，今天我仿照其样子写了一个





字母表控件代码

[java] view
plaincopy





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 com.example.learn.R;

/**

*

* Description: 仿微信通讯录中的右侧字母表控件

*

* @author danDingCongRong

* @Version 1.0.0

* @Created at 2014-5-31 22:16:15

* @Modified by [作者] on [修改日期]

*/

public class AlphabetView extends View {

// 字母表中的字符

private String alphabet[] = { "@", "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", "#", };

// 字母的颜色

private int defaultColor = Color.RED;

private int selectColor = Color.BLUE;

// 被选中的字符

private int selectedIndex = 0;

// 画笔--用于绘制右侧字母

Paint paint = new Paint();

// 选中的字母被改变监听器

private OnTouchLetterChangedListener changedListener;

// 选中的字母被释放监听器

private OnTouchLetterReleasedListener releasedListener;

public AlphabetView(Context context) {

super(context);

}

public AlphabetView(Context context, AttributeSet attrs) {

super(context, attrs);

}

public AlphabetView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 获取当前View的宽度和高度

int width = getWidth();

// 计算单个字符所占高度

int singleLetter = getHeight() / (alphabet.length);

// 自上而下逐一绘制字母表中的每个字符

for (int i = 0; i < alphabet.length; i++) {

// 若没有没选中时显示默认颜色，若被选中显示指定的高亮色

if (i != selectedIndex) {

paint.setColor(defaultColor);

paint.setAntiAlias(true);

paint.setTextSize(25);

} else {

paint.setTextSize(25);

paint.setColor(selectColor);

}

// 计算第i个字符在屏幕中的位置(x,y)

float x = width / 2 - paint.measureText(alphabet[i]) / 2;

float y = singleLetter * (i + 1);

// 在指定位置绘制指定字符

canvas.drawText(alphabet[i], x, y, paint);

// 重置画笔的属性

paint.reset();

}

}

@Override

public boolean dispatchTouchEvent(MotionEvent event) {

// 被触摸的是字母表中的第几个字符

int currentIndex = (int) (event.getY() / alphabet.length);

int action = event.getAction();

switch (action) {

case MotionEvent.ACTION_DOWN:

// 监听到按下事件后修改被选中字符位置标识，并显示字母表的背景同时利用接口函数修改被选中字符

if (currentIndex >= 0 && currentIndex < alphabet.length) {

selectedIndex = currentIndex;

changedListener

.onTouchLetterChangedListener(alphabet[currentIndex]);

setBackgroundResource(R.drawable.alpha_bg);

invalidate();

}

break;

case MotionEvent.ACTION_MOVE:

// 监听到正在滑动中的事件后修改被选中字符位置标识，利用接口函数修改被选中字符

if (currentIndex >= 0 && currentIndex < alphabet.length) {

selectedIndex = currentIndex;

changedListener

.onTouchLetterChangedListener(alphabet[currentIndex]);

invalidate();

}

break;

case MotionEvent.ACTION_UP:

// 监听到弹起事件后，调用相应的监听事件并将字母表的背景设置为没有背景

releasedListener.onTouchLetterReleasedListener();

setBackgroundDrawable(null);

invalidate();

break;

default:

break;

}

return true;

}

// 设置字母表中的字符

public void setAlphabet(String[] alphabet) {

this.alphabet = alphabet;

}

// 设置字母默认显示的颜色

public void setDefaultColor(int defaultColor) {

this.defaultColor = defaultColor;

}

// 设置字母被选中时显示的颜色

public void setSelectColor(int selectColor) {

this.selectColor = selectColor;

}

// 设置选中字母已改变监听事件

public void setOnTouchLetterChangedListener(

OnTouchLetterChangedListener changedListener) {

this.changedListener = changedListener;

}

// 设置已释放字母选中监听事件

public void setOnTouchLetterReleasedListener(

OnTouchLetterReleasedListener releasedListener) {

this.releasedListener = releasedListener;

}

public interface OnTouchLetterChangedListener {

public void onTouchLetterChangedListener(String s);

}

public interface OnTouchLetterReleasedListener {

public void onTouchLetterReleasedListener();

}

}

带字幕表的ListView及其中间字母组合控件

[java] view
plaincopy





import java.util.HashMap;

import android.content.Context;

import android.graphics.PixelFormat;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.view.WindowManager;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.BaseAdapter;

import android.widget.ListView;

import android.widget.RelativeLayout;

import android.widget.TextView;

import com.example.learn.R;

import com.example.learn.overall.view.AlphabetView.OnTouchLetterChangedListener;

import com.example.learn.overall.view.AlphabetView.OnTouchLetterReleasedListener;

public class AlphabetListView extends RelativeLayout {

// 字母表中的字母与ListView中各元素位置间的映射关系

private HashMap<String, Integer> alphaIndexMap;

private ListView listView;

private TextView tvCenterLetter;

private AlphabetView alphabetView;

private WindowManager windowManager;

public AlphabetListView(Context context) {

super(context);

initView(context);

}

public AlphabetListView(Context context, AttributeSet attrs) {

super(context, attrs);

initView(context);

}

public AlphabetListView(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

initView(context);

}

private void initView(Context context) {

initCenterLetterHit(context);

LayoutInflater.from(context).inflate(R.layout.alphabet_listview, this,

true);

listView = (ListView) findViewById(R.id.customListView);

alphabetView = (AlphabetView) findViewById(R.id.alphabetView);

alphabetView

.setOnTouchLetterChangedListener(new OnTouchLetterChangedListener() {

@Override

public void onTouchLetterChangedListener(String s) {

tvCenterLetter.setText(s);

tvCenterLetter.setVisibility(View.VISIBLE);

if (null != alphaIndexMap

&& alphaIndexMap.containsKey(s)) {

Integer alphaIndex = alphaIndexMap.get(s);

listView.setSelection(alphaIndex);

}

}

});

alphabetView

.setOnTouchLetterReleasedListener(new OnTouchLetterReleasedListener() {

@Override

public void onTouchLetterReleasedListener() {

tvCenterLetter.setVisibility(View.GONE);

}

});

}

// 初始化位于字母中央的字母提示

private void initCenterLetterHit(Context context) {

View centerLetterView = LayoutInflater.from(context).inflate(

R.layout.center_letter, null);

tvCenterLetter = (TextView) centerLetterView

.findViewById(R.id.tvCenterLetter);

tvCenterLetter.setVisibility(View.INVISIBLE);

final WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams(

LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT,

WindowManager.LayoutParams.TYPE_APPLICATION,

WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE

| WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE,

PixelFormat.TRANSLUCENT);

windowManager = (WindowManager) context

.getSystemService(Context.WINDOW_SERVICE);

windowManager.addView(centerLetterView, layoutParams);

}

public void setAlphaIndexMap(HashMap<String, Integer> alphaIndexMap) {

this.alphaIndexMap = alphaIndexMap;

}

public void setAdapter(BaseAdapter adapter) {

listView.setAdapter(adapter);

}

public void setOnItemClickListener(

final OnItemClickListener onItemClickListener) {

if (null != onItemClickListener) {

listView.setOnItemClickListener(new ListView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent,

View convertView, int position, long id) {

onItemClickListener.onItemClick(parent, convertView,

position, id);

}

});

}

}

public void setOnItemLongClickListenter(

final OnItemLongClickListener onItemLongClickListener) {

if (null != onItemLongClickListener) {

listView.setOnItemLongClickListener(new ListView.OnItemLongClickListener() {

@Override

public boolean onItemLongClick(AdapterView<?> parent,

View convertView, int position, long id) {

onItemLongClickListener.onItemLongClick(parent,

convertView, position, id);

return false;

}

});

}

}

public void setBackgroundDrawable(Drawable background) {

listView.setBackgroundDrawable(background);

}

public void setBackResource(int resourceId) {

listView.setBackgroundResource(resourceId);

}

public void setAlphabetDefaultColor(int defaultColor) {

alphabetView.setDefaultColor(defaultColor);

}

public void setAlphabetSelectedColor(int selectColor) {

alphabetView.setSelectColor(selectColor);

}

public void setDivider(int height) {

listView.setDividerHeight(height);

}

public void setCenterLetterColor(int color) {

tvCenterLetter.setTextColor(color);

}

public void setCenterLetterBackgroundResource(int resourceId) {

tvCenterLetter.setBackgroundResource(resourceId);

}

public void setCenterLetterTextSize(float size) {

tvCenterLetter.setTextSize(size);

}

public interface OnItemClickListenter {

public void onItemClick(AdapterView<?> parent, View convertView,

int position, long id);

}

public interface OnItemLongClickListener {

public boolean onItemLongClick(AdapterView<?> parent, View convertView,

int position, long id);

}

}