• 8.快速索引、listview

    实现这样的效果

    布局：
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2.     xmlns:tools="http://schemas.android.com/tools"
    3.     android:layout_width="match_parent"
    4.     android:layout_height="match_parent"
    5.     tools:context=".MainActivity" >
    7.     <ListView
    8.         android:id="@+id/lv_main"
    9.         android:layout_width="match_parent"
    10.         android:layout_height="match_parent" >
    11.     </ListView>
    13.     <com.itheima.quickindex.ui.QuickIndexBar
    14.         android:id="@+id/bar"
    15.         android:layout_width="30dp"
    16.         android:layout_height="match_parent"
    17.         android:layout_alignParentRight="true"
    18.         android:background="#ff0000" />
    20.     <TextView
    21.         android:id="@+id/tv_center"
    22.         android:layout_width="160dp"
    23.         android:layout_height="100dp"
    24.         android:background="@drawable/bg_index"
    25.         android:gravity="center"
    26.         android:textSize="32sp"
    27.         android:visibility="gone"
    28.         android:textColor="#ffffff"
    29.         android:layout_centerInParent="true"
    30.         android:text="A" />
    32. </RelativeLayout>
    字的shape：
    1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
    2.     android:shape="rectangle" >
    4.     <solid android:color="#66000000"/>
    5.     
    6.     <corners android:radius="20dp"/>
    7. </shape>
    QuickIndexBar

    1. /**
    2.  * 快速索引
    3.  * 
    4.  * 用于根据字母快速定位联系人
    5.  * @author poplar
    6.  *
    7.  */
    8. public class QuickIndexBar extends View {
    9. 	
    10. 	private static final String[] LETTERS = new String[]{
    11. 		"A", "B", "C", "D", "E", "F",
    12. 		"G", "H", "I", "J", "K", "L",
    13. 		"M", "N", "O", "P", "Q", "R",
    14. 		"S", "T", "U", "V", "W", "X",
    15. 		"Y", "Z"};
    17. 	private static final String TAG = "TAG";
    18. 	
    19. 	private Paint mPaint;
    21. 	private int cellWidth;
    23. 	private float cellHeight;
    24. 	
    25. 	/**
    26. 	 * 暴露一个字母的监听，交给main执行
    27. 	 */
    28. 	public interface OnLetterUpdateListener{
    29. 		void onLetterUpdate(String letter);
    30. 	}
    31. 	private OnLetterUpdateListener listener;
    32. 	
    33. 	public OnLetterUpdateListener getListener() {
    34. 		return listener;
    35. 	}
    36. 	/**
    37. 	 * 设置字母更新监听
    38. 	 * @param listener
    39. 	 */
    40. 	public void setListener(OnLetterUpdateListener listener) {
    41. 		this.listener = listener;
    42. 	}
    44. 	public QuickIndexBar(Context context) {
    45. 		this(context, null);
    46. 	}
    48. 	public QuickIndexBar(Context context, AttributeSet attrs) {
    49. 		this(context, attrs, 0);//这样写，只需要在三个参数的构造函数初始化就可以了
    50. 	}
    52. 	public QuickIndexBar(Context context, AttributeSet attrs, int defStyle) {
    53. 		super(context, attrs, defStyle);
    54. 		
    55. 		mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    56. 		mPaint.setColor(Color.WHITE);
    57. 		mPaint.setTypeface(Typeface.DEFAULT_BOLD);//当点中的时候变粗
    58. 	}
    59. 	
    60. 	@Override
    61. 	protected void onDraw(Canvas canvas) {
    62. 		
    63. 		for (int i = 0; i < LETTERS.length; i++) {
    64. 			String text = LETTERS[i];
    65. 			// 计算坐标
    66. 			int x = (int) (cellWidth / 2.0f - mPaint.measureText(text) / 2.0f);//先转成float再转成int，因为有可能丢失精度
    67. 			// 获取文本的高度
    68. 			Rect bounds = new Rect();// 矩形
    69. 			mPaint.getTextBounds(text, 0, text.length(), bounds);//字是矩形，通过矩形获得高
    70. 			int textHeight = bounds.height();
    71. 			int y = (int) (cellHeight / 2.0f + textHeight / 2.0f + i * cellHeight);
    72. 			
    73. 			// 根据按下的字母, 设置画笔颜色
    74. 			mPaint.setColor(touchIndex == i ? Color.GRAY : Color.WHITE);
    75. 			
    76. 			// 绘制文本A-Z
    77. 			canvas.drawText(text, x, y, mPaint);
    78. 		}
    79. 	}
    80. 	
    81. 	int touchIndex = -1;
    82. 	@Override
    83. 	public boolean onTouchEvent(MotionEvent event) {
    84. 		int index = -1;
    85. 		switch (MotionEventCompat.getActionMasked(event)) {
    86. 			case MotionEvent.ACTION_DOWN:
    87. 				// 获取当前触摸到的字母索引
    88. 				index = (int) (event.getY() / cellHeight);
    89. 				if(index >= 0 && index < LETTERS.length){
    90. 					// 判断是否跟上一次触摸到的一样
    91. 					if(index != touchIndex) {
    92. 						if(listener != null){
    93. 							listener.onLetterUpdate(LETTERS[index]);
    94. 						}
    95. 						Log.d(TAG, "onTouchEvent: " + LETTERS[index]);
    96. 						
    97. 						touchIndex = index;
    98. 					}
    99. 				}
    100. 				
    101. 				break;
    102. 			case MotionEvent.ACTION_MOVE:
    103. 				index = (int) (event.getY() / cellHeight);
    104. 				if(index >= 0 && index < LETTERS.length){
    105. 					// 判断是否跟上一次触摸到的一样
    106. 					if(index != touchIndex){
    107. 						
    108. 						if(listener != null){
    109. 							listener.onLetterUpdate(LETTERS[index]);
    110. 						}
    111. 						Log.d(TAG, "onTouchEvent: " + LETTERS[index]);
    112. 						
    113. 						touchIndex = index;
    114. 					}
    115. 				}
    116. 				break;
    117. 			case MotionEvent.ACTION_UP:
    118. 				touchIndex = -1;
    119. 				break;
    120. 	
    121. 			default:
    122. 				break;
    123. 		}
    124. 		invalidate();
    125. 		
    126. 		return true;
    127. 	}
    128. 	
    129. 	@Override
    130. 	protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    131. 		super.onSizeChanged(w, h, oldw, oldh);
    132. 		// 获取单元格的宽和高
    133. 		
    134. 		cellWidth = getMeasuredWidth();
    135. 		
    136. 		int mHeight = getMeasuredHeight();
    137. 		cellHeight = mHeight * 1.0f / LETTERS.length;
    138. 		
    139. 	}
    140. 	
    141. 	
    142. }
    PinyinUtils
    1. public class PinyinUtils {
    3. 	/**
    4. 	 * 根据传入的字符串(包含汉字),得到拼音
    5. 	 * 黑马 -> HEIMA
    6. 	 * 黑  马*& -> HEIMA
    7. 	 * 黑马f5 -> HEIMA
    8. 	 * @param str 字符串
    9. 	 * @return
    10. 	 */
    11. 	public static String getPinyin(String str) {
    12. 		
    13. 		HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
    14. 		format.setCaseType(HanyuPinyinCaseType.UPPERCASE);
    15. 		format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
    16. 		
    17. 		StringBuilder sb = new StringBuilder();
    18. 		
    19. 		char[] charArray = str.toCharArray();
    20. 		for (int i = 0; i < charArray.length; i++) {
    21. 			char c = charArray[i];
    22. 			// 如果是空格, 跳过
    23. 			if(Character.isWhitespace(c)){
    24. 				continue;
    25. 			}
    26. 			if(c >= -127 && c < 128){
    27. 				// 肯定不是汉字
    28. 				sb.append(c);
    29. 			}else {
    30. 				String s = "";
    31. 				try {
    32. 					// 通过char得到拼音集合. 单 -> dan, shan 
    33. 					s = PinyinHelper.toHanyuPinyinStringArray(c, format)[0];
    34. 					sb.append(s);
    35. 				} catch (BadHanyuPinyinOutputFormatCombination e) {
    36. 					e.printStackTrace();
    37. 					sb.append(s);
    38. 				}
    39. 			}
    40. 		}
    41. 		
    42. 		return sb.toString();
    43. 	}
    45. }
    Person
    1. public class Person implements Comparable<Person>{//实现比较功能
    3. 	private String name;
    4. 	private String pinyin;
    6. 	public Person(String name) {
    7. 		super();
    8. 		this.name = name;
    9. 		this.pinyin = PinyinUtils.getPinyin(name);
    10. 	}
    11. 	
    12. 	public String getName() {
    13. 		return name;
    14. 	}
    15. 	public void setName(String name) {
    16. 		this.name = name;
    17. 	}
    18. 	public String getPinyin() {
    19. 		return pinyin;
    20. 	}
    21. 	public void setPinyin(String pinyin) {
    22. 		this.pinyin = pinyin;
    23. 	}
    25. 	@Override
    26. 	public int compareTo(Person another) {
    27. 		return this.pinyin.compareTo(another.getPinyin());
    28. 	}
    29. 	
    30. 	
    31. 	
    32. }
    adapter布局
    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2.     android:layout_width="match_parent"
    3.     android:layout_height="match_parent"
    4.     android:orientation="vertical" >
    6.     <TextView
    7.         android:id="@+id/tv_index"
    8.         android:layout_width="match_parent"
    9.         android:layout_height="40dp"
    10.         android:background="#888888"
    11.         android:gravity="center_vertical"
    12.         android:paddingLeft="20dp"
    13.         android:text="A"
    14.         android:textColor="#ffffff"
    15.         android:textSize="20sp" />
    17.     <TextView
    18.         android:id="@+id/tv_name"
    19.         android:layout_width="match_parent"
    20.         android:layout_height="50dp"
    21.         android:gravity="center_vertical"
    22.         android:paddingLeft="20dp"
    23.         android:text="宋江"
    24.         android:textSize="24sp" />
    26. </LinearLayout>
    HaoHanAdapter
    1. public class HaoHanAdapter extends BaseAdapter {
    3. 	private Context mContext;
    4. 	private ArrayList<Person> persons;
    6. 	public HaoHanAdapter(Context mContext, ArrayList<Person> persons) {
    7. 		this.mContext = mContext;
    8. 		this.persons = persons;
    9. 	}
    11. 	@Override
    12. 	public int getCount() {
    13. 		// TODO Auto-generated method stub
    14. 		return persons.size();
    15. 	}
    17. 	@Override
    18. 	public Object getItem(int position) {
    19. 		return persons.get(position);
    20. 	}
    22. 	@Override
    23. 	public long getItemId(int position) {
    24. 		return position;
    25. 	}
    27. 	@Override
    28. 	public View getView(int position, View convertView, ViewGroup parent) {
    29. 		
    30. 		View view = convertView;
    31. 		if(convertView == null){
    32. 			view = view.inflate(mContext, R.layout.item_list, null);
    33. 		}
    34. 		ViewHolder mViewHolder = ViewHolder.getHolder(view);
    35. 		
    36. 		Person p = persons.get(position);
    37. 		
    38. 		String str = null;
    39. 		String currentLetter = p.getPinyin().charAt(0) + "";
    40. 		// 根据上一个首字母,决定当前是否显示字母
    41. 		if(position == 0){
    42. 			str = currentLetter;
    43. 		}else {
    44. 			// 上一个人的拼音的首字母
    45. 			String preLetter = persons.get(position - 1).getPinyin().charAt(0) + "";
    46. 			if(!TextUtils.equals(preLetter, currentLetter)){
    47. 				str = currentLetter;
    48. 			}
    49. 		}
    50. 		
    51. 		// 根据str是否为空,决定是否显示索引栏
    52. 		mViewHolder.mIndex.setVisibility(str == null ? View.GONE : View.VISIBLE);
    53. 		mViewHolder.mIndex.setText(currentLetter);
    54. 		mViewHolder.mName.setText(p.getName());
    55. 		
    56. 		return view;
    57. 	}
    58. 	
    59. 	static class ViewHolder {
    60. 		TextView mIndex;
    61. 		TextView mName;
    63. 		public static ViewHolder getHolder(View view) {//了解这种写法
    64. 			Object tag = view.getTag();
    65. 			if(tag != null){
    66. 				return (ViewHolder)tag;
    67. 			}else {
    68. 				ViewHolder viewHolder = new ViewHolder();
    69. 				viewHolder.mIndex = (TextView) view.findViewById(R.id.tv_index);
    70. 				viewHolder.mName = (TextView) view.findViewById(R.id.tv_name);
    71. 				view.setTag(viewHolder);
    72. 				return viewHolder;
    73. 			}
    74. 		}
    75. 		
    76. 	}
    78. }
    MainActivity
    1. public class MainActivity extends Activity {
    3. 	private ListView mMainList;
    4. 	private ArrayList<Person> persons;
    5. 	private TextView tv_center;
    7. 	@Override
    8. 	protected void onCreate(Bundle savedInstanceState) {
    9. 		super.onCreate(savedInstanceState);
    10. 		setContentView(R.layout.activity_main);
    11. 		
    12. 		QuickIndexBar bar = (QuickIndexBar) findViewById(R.id.bar);
    13. 		// 设置监听，和回调一个意思
    14. 		bar.setListener(new OnLetterUpdateListener() {
    15. 			@Override
    16. 			public void onLetterUpdate(String letter) {
    17. //				Utils.showToast(getApplicationContext(), letter);
    18. 				
    19. 				showLetter(letter);
    20. 				// 根据字母定位ListView, 找到集合中第一个以letter为拼音首字母的对象,得到索引
    21. 				for (int i = 0; i < persons.size(); i++) {
    22. 					Person person = persons.get(i);
    23. 					String l = person.getPinyin().charAt(0) + "";
    24. 					if(TextUtils.equals(letter, l)){
    25. 						// 匹配成功
    26. 						mMainList.setSelection(i);
    27. 						break;
    28. 					}
    29. 				}
    30. 			}
    31. 		});
    32. 		
    33. 		mMainList = (ListView) findViewById(R.id.lv_main);
    34. 		
    35. 		persons = new ArrayList<Person>();
    36. 		
    37. 		// 填充数据 , 排序
    38. 		fillAndSortData(persons);
    39. 		
    40. 		mMainList.setAdapter(new HaoHanAdapter(MainActivity.this , persons));
    41. 		
    42. 		tv_center = (TextView) findViewById(R.id.tv_center);
    43. 		
    44. 		
    45. 	}
    47. 	private Handler mHandler = new Handler();
    48. 	
    49. 	/**
    50. 	 * 显示字母
    51. 	 * @param letter
    52. 	 */
    53. 	protected void showLetter(String letter) {
    54. 		tv_center.setVisibility(View.VISIBLE);
    55. 		tv_center.setText(letter);
    56. 		
    57. 		mHandler.removeCallbacksAndMessages(null);
    58. 		mHandler.postDelayed(new Runnable() {
    59. 			@Override
    60. 			public void run() {
    61. 				tv_center.setVisibility(View.GONE);				
    62. 			}
    63. 		}, 2000);
    64. 		
    65. 	}
    67. 	private void fillAndSortData(ArrayList<Person> persons) {
    68. 		// 填充数据
    69. 		for (int i = 0; i < Cheeses.NAMES.length; i++) {
    70. 			String name = Cheeses.NAMES[i];
    71. 			persons.add(new Person(name));
    72. 		}
    73. 		
    74. 		// 进行排序
    75. 		Collections.sort(persons);
    76. 	}
    77. }








    附件列表
    • 相关阅读:
      制作你的第一个HTML 5游戏
      拒绝臆想，让我们脚踏实地做设计！
      HTML 5或者Silverlight?
      如何替换掉回车键
      杀死团队的武器与修复团队的方法
      Google趋势中显示jQuery是最流行的JavaScript框架
      关于脚本载入器的思考
      简化Web开发的12个HTML5CSS框架
      线框图（demo草图）制作的总结
      江苏南通周边经纬度
    • 原文地址：https://www.cnblogs.com/sixrain/p/5041941.html
    Copyright © 2020-2023  润新知