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

本博客介绍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"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><!--ListView--><ListViewandroid:id="@+id/friend_listview"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center" /><!--中间显示的字母--><TextViewandroid: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.SlidViewandroid: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"><!--首字母--><TextViewandroid:id="@+id/tv"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#9e9d9d"android:textColor="#fff"android:textSize="16sp" /><!--首字母对应的首个汉字--><TextViewandroid: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;}@Overridepublic int getCount() {return arrayList.size();}@Overridepublic Object getItem(int position) {return arrayList.get(position);}@Overridepublic long getItemId(int position) {return position;}@Overridepublic 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;@Overrideprotected 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() {@Overridepublic 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);}}}@Overridepublic void onRelease() {new Handler().postDelayed(new Runnable() {@Overridepublic 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-ZCollections.sort(contacts, new Comparator<Contact>() {@Overridepublic 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---->spprotected int sp2px(int spVal) {return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, spVal, getResources().getDisplayMetrics());}@Overrideprotected 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;  //获取触摸到字母索引的位置//触碰事件//按下，松开，拖动@Overridepublic 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();
}

github地址：https://github.com/StevenYan88/QuickIndex

Android实现首字母导航条(仿微信)相关推荐

js实现城市首字母导航
概述本文讲述如何在前端实现城市首字母导航的效果. 效果实现 1.数据格式 2.实现代码 var map, pyList; function init() {var wms = new ol.lay ...
android 通讯录首字母索引,android仿微信通讯录搜索(匹配拼音,字母,索引位置标记颜色)...
前言: 仿微信通讯录搜索功能,通过汉字或拼音首字母找到匹配的联系人并显示匹配的位置一:先看效果图字母索引搜索匹配二:功能分析 1:汉字转拼音通讯录汉字转拼音(首个字符当考虑姓氏多音字), 现 ...
Android 字母导航条实现
在Activity中进行功能的实现,需要用到第三方jar包:pinyin4j.jar,此jar包用于将汉字转换为汉语拼音. 首先,设置右侧边栏索引列表(A-Z),并且设置列表点击,Touch事件,点击 ...
Android 天气APP（十三）仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
上一篇:Android 天气APP(十二)空气质量.UI优化调整天气预报详情,逐小时预报详情新版------------------- 一.适配器点击监听二.页面实现三.天气预报详情弹窗四. ...
Android ActionBar应用实战，高仿微信主界面的设计
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/26365683 经过前面两篇文章的学习,我想大家对ActionBar都已经有一个相对 ...
android studio 首字母提示设置大小写敏感
在使用Android studo 编写程序时, 刚开始,关键字提示首字母设置了大小写敏感,小写字母只能提示小写字母开头的,大写字母只能提示大写字母开始的,比较麻烦,在网上搜了下,解决办法如下: ...
android顶部导航高度,Android特效——————底部/顶部导航条（Fragment+ViewPaper+XTabLayout）...
初次使用xtablayout和viewpaper2.所以就弄了最基础的导航条一.效果二.代码配置环境[在bulid.gradle中添加以下代码] implementation 'androidx ...
android 判断首字母,Android 汉字转拼音首字母【原创】
最近在做项目时,遇到需要对数据库的数据进行排序,但是sqlite是不支持中文排序的,所有必须要先将中文转换成拼音,这里列了一种将每个汉字转换成首字母的方法.贴出了,大家需要的可以看看. public ...
【Android App】实战项目之仿微信的私信和群聊App（附源码和演示视频超详细必看）
需要全部代码请点赞关注收藏后评论区留言私信~~~ 手机最开始用于通话,后来增加了短信功能,初步满足了人与人之间的沟通需求.然而短信只能发文字,于是出现了能够发图片的彩信,但不管短信还是彩信,资费都太贵 ...

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

Android实现首字母导航条(仿微信)相关推荐

最新文章

热门文章