首页 > 系统 > Android > 正文

Android仿微信实现首字母导航条

2019-12-12 05:49:55
字体:
来源:转载
供稿:网友

本文介绍Android实现首字母导航条,先看张效果图,具体怎么实现看代码吧

具体的步骤

1.整体布局的显示
2. 实现A-Z的分组
3. 自定义A-Z的导航条
4. 中间显示/隐藏触摸到导航条具体的字母

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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" android:background="#fff" android:orientation="vertical" tools:context="com.example.firstnavigation.MainActivity"> <FrameLayout  android:layout_width="match_parent"  android:layout_height="wrap_content">  <!--ListView-->  <ListView   android:id="@+id/friend_listview"   android:layout_width="match_parent"   android:layout_height="wrap_content"   android:layout_gravity="center" />  <!--中间显示的字母-->  <TextView   android:id="@+id/tv_first"   android:layout_width="80dp"   android:layout_height="80dp"   android:layout_gravity="center"   android:text="A"   android:textColor="#ff0000"   android:textSize="30sp"   android:visibility="gone" />   <!--自定义导航条-->  <com.example.firstnavigation.SlidView   android:id="@+id/slidView"   android:layout_width="30dp"   android:layout_height="match_parent"   android:layout_gravity="right|center" /> </FrameLayout></LinearLayout>

 item.xml ―-》ListView对应item

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#fff" android:orientation="vertical"> <!--首字母--> <TextView  android:id="@+id/tv"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:background="#9e9d9d"  android:textColor="#fff"  android:textSize="16sp" /> <!--首字母对应的首个汉字--> <TextView  android:id="@+id/name"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:textColor="#262626"  android:textSize="16sp" /></LinearLayout>

联系人Bean

public class Contact { //姓名 private String name; //姓名的首字母 private String firstWord; public String getName() {  return name; } public void setName(String name) {  this.name = name; } public String getFirstWord() {  return firstWord; } public void setFirstWord(String ch) {  this.firstWord = ch; }}

ContactAdapter.java

public class ContactAdapter extends BaseAdapter { private ArrayList<Contact> arrayList; private Context context; private String pre = "A"; public ContactAdapter(ArrayList<Contact> arrayList, Context context) {  this.arrayList = arrayList;  this.context = context; } @Override public int getCount() {  return arrayList.size(); } @Override public Object getItem(int position) {  return arrayList.get(position); } @Override public long getItemId(int position) {  return position; } @Override public View getView(int position, View convertView, ViewGroup parent) {  ViewHolder viewHolder;  if (convertView == null) {   viewHolder = new ViewHolder();   convertView = LayoutInflater.from(context).inflate(R.layout.item, parent, false);   viewHolder.tv_firstWord = (TextView) convertView.findViewById(R.id.tv);   viewHolder.name = (TextView) convertView.findViewById(R.id.name);   convertView.setTag(viewHolder);  } else {   viewHolder = (ViewHolder) convertView.getTag();  }  viewHolder.tv_firstWord.setText(String.valueOf(arrayList.get(position).getFirstWord()));  viewHolder.name.setText(arrayList.get(position).getName());  /**   * 分组:根据汉字的首字母   */  viewHolder.tv_firstWord.setVisibility(!arrayList.get(position).getFirstWord().equals(pre) ? View.VISIBLE : View.GONE);  pre = arrayList.get(position).getFirstWord();  return convertView; } class ViewHolder {  TextView tv_firstWord;  TextView name; }

MainActivity

public class MainActivity extends AppCompatActivity { private ListView listView; private TextView tv_first; private ArrayList<Contact> contacts; private SlidView slidView; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  initView();  initData(); } private void initView() {  listView = (ListView) findViewById(R.id.friend_listview);  tv_first = (TextView) findViewById(R.id.tv_first);  slidView = (SlidView) findViewById(R.id.slidView);  slidView.setFirstListener(new OnTouchFirstListener() {   @Override   public void onTouch(String str) {    tv_first.setVisibility(View.VISIBLE);    tv_first.setText(str);    for (int i = 0; i < contacts.size(); i++) {     if (str.equals(contacts.get(i).getFirstWord())) {      listView.setSelection(i);     }    }   }   @Override   public void onRelease() {    new Handler().postDelayed(new Runnable() {     @Override     public void run() {      tv_first.setVisibility(View.GONE);     }    }, 300);   }  }); } private void initData() {  contacts = new ArrayList<>();  //获取字符数组资源  String[] attrs = getResources().getStringArray(R.array.myFriend);  Contact contact;  for (int i = 0; i < attrs.length; i++) {   contact = new Contact();   contact.setName(attrs[i]);   contact.setFirstWord(getPinYinHeadChar(attrs[i], 2));   contacts.add(contact);  }  //排序A-Z  Collections.sort(contacts, new Comparator<Contact>() {   @Override   public int compare(Contact lhs, Contact rhs) {    return lhs.getFirstWord().compareTo(rhs.getFirstWord());   }  });  ContactAdapter contactAdapter = new ContactAdapter(contacts, this);  listView.setAdapter(contactAdapter); } /**  * 提取汉字的首字母,如果里面含有费中文字符则忽略之;如果全为非中文则返回""。  *  * @param caseType 当为1时获取的首字母为小写,否则为大写。  */ public static String getPinYinHeadChar(String zn_str, int caseType) {  if (zn_str != null && !zn_str.trim().equalsIgnoreCase("")) {   char[] strChar = zn_str.toCharArray();   // 汉语拼音格式输出类   HanyuPinyinOutputFormat hanYuPinOutputFormat = new HanyuPinyinOutputFormat();   // 输出设置,大小写,音标方式等   if (1 == caseType) {    hanYuPinOutputFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);   } else {    hanYuPinOutputFormat.setCaseType(HanyuPinyinCaseType.UPPERCASE);   }   hanYuPinOutputFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);   hanYuPinOutputFormat.setVCharType(HanyuPinyinVCharType.WITH_V);   StringBuffer pyStringBuffer = new StringBuffer();   char c = strChar[0];   char pyc;   if (String.valueOf(c).matches("[//u4E00-//u9FA5]+")) {//是中文或者a-z或者A-Z转换拼音    try {     String[] pyStirngArray = PinyinHelper.toHanyuPinyinStringArray(strChar[0], hanYuPinOutputFormat);     if (null != pyStirngArray && pyStirngArray[0] != null) {      pyc = pyStirngArray[0].charAt(0);      pyStringBuffer.append(pyc);     }    } catch (BadHanyuPinyinOutputFormatCombination e) {     e.printStackTrace();    }   }   return pyStringBuffer.toString();  }  return null; }

提取首字母需要用到pingyin4j.jar,小编在这不提供,大家可以在网上下载

//自定义字母导航控件public class SlidView extends View { private String[] strs = {"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 Paint paint; private OnTouchFirstListener listener; public SlidView(Context context) {  this(context, null); } public SlidView(Context context, AttributeSet attrs) {  this(context, attrs, 0); } public SlidView(Context context, AttributeSet attrs, int defStyleAttr) {  super(context, attrs, defStyleAttr);  paint = new Paint();  paint.setAntiAlias(true);  paint.setColor(Color.GRAY);  paint.setTypeface(Typeface.DEFAULT_BOLD); } // px---->sp protected int sp2px(int spVal) {  return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics()); } @Override protected void onDraw(Canvas canvas) {  super.onDraw(canvas);  for (int i = 0; i < strs.length; i++) {   paint.setColor(i == index ? Color.RED : Color.BLACK);   paint.setTextSize(i == index ? sp2px(18) : sp2px(16));   int x = (int) (getWidth() - paint.measureText(strs[i])) / 2;   int y = getHeight() / strs.length * (i + 1);   canvas.drawText(strs[i], x, y, paint);  } } int index = -1; //获取触摸到字母索引的位置 //触碰事件 //按下,松开,拖动 @Override public boolean onTouchEvent(MotionEvent event) {  switch (event.getAction()) {   case MotionEvent.ACTION_DOWN:   case MotionEvent.ACTION_MOVE:    float y = event.getY();    this.setBackgroundColor(Color.GRAY);    //获取触摸到字母的位置    index = (int) y * strs.length / getHeight();    listener.onTouch(strs[index]);    break;   case MotionEvent.ACTION_UP:    this.setBackgroundColor(android.R.color.transparent);    index = -1;    listener.onRelease();    break;  }  //重绘  invalidate();  return true; } public void setFirstListener(OnTouchFirstListener listener) {  this.listener = listener; }}/** * OnTouchFirstListener 接口 * onTouch:触摸到了那个字母 * onRelease:up释放时中间显示的字母需要设置为GONE */public interface OnTouchFirstListener { void onTouch(String ch); void onRelease();}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表