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

最新推荐文章于 2016-11-07 22:30:01 发布

可爱的Coder丶

最新推荐文章于 2016-11-07 22:30:01 发布

阅读量1k

点赞数

分类专栏： android 文章标签： android

android 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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

字母表控件代码

[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);  
     }  
   
 }  

可爱的Coder丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Android】仿微信通讯录中的右侧字母表控件

微信通讯录中的右侧有个字母条，通过它可以快速找到指定联系人，今天我仿照其样子写了一个字母表控件代码[java] view plaincopyimport android.content.Context; import android.graphics.Canvas; import android.graphics.
复制链接

扫一扫