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"> <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(); }

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

时间: 2024-08-11 15:31:52

Android仿微信实现首字母导航条的相关文章

Android仿微信实现首字母导航条_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/re

Android仿微信5实现滑动导航条_Android

本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi

Android仿微信5实现滑动导航条

本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi

Android仿微信联系人列表字母侧滑控件

仿微信联系人列表字母侧滑控件, 侧滑控件参考了以下博客: Android实现ListView的A-Z字母排序和过滤搜索功能 首先分析一下字母侧滑控件应该如何实现,根据侧滑控件的高度和字母的数量来平均计算每个字母应该占据的高度. 在View的onDraw()方法下绘制每一个字母 protected void onDraw(Canvas canvas) { super.onDraw(canvas); int height = getHeight();// 获取对应高度 int width = get

Android仿微信联系人按字母排序_Android

App只要涉及到联系人的界面,几乎都是按照字母排序以及导航栏的方式.既然这个需求这么火,于是开始学习相关内容,此篇文章是我通过参考网上资料独立编写和总结的,希望多多少少对大家有所帮助,写的不好,还请各位朋友指教. 效果图如下: 实现这个效果,需要三个知识点 :1:将字符串 进行拼音分类 2:ExpandableListView 二级扩展列表 3:右边字母分类View 我们先一个一个来了解解决方案,再上代码. 实现字母分类: 字母分类又分为三个小要点:一个是将中文转化为拼音,一个是实现按照字母的顺

Android仿微信页面底部导航效果代码实现_Android

大家在参考本地代码的时候要根据需要适当的修改,里面有冗余代码小编没有删除.好了,废话不多说了,一切让代码说话吧! 关键代码如下所示: .java里面的主要代码 public class MainActivity extends BaseActivity implements TabChangeListener { private Fragment[] fragments; private FragZaiXianYuYue fragZaiXianYuYue; private FragDaoLuJi

Android仿微信通讯录列表侧边栏效果

先看Android仿微信通讯录列表侧边栏效果图 这是比较常见的效果了吧 列表根据首字符的拼音字母来排序,且可以通过侧边栏的字母索引来进行定位. 实现这样一个效果并不难,只要自定义一个索引View,然后引入一个可以对汉字进行拼音解析的jar包--pinyin4j-2.5.0即可 首先,先来定义侧边栏控件View,只要直接画出来即可. 字母选中项会变为红色,且滑动时背景会变色,此时SideBar并不包含居中的提示文本 public class SideBar extends View { priva

Android仿微信底部菜单栏功能显示未读消息数量_Android

底部菜单栏很重要,我看了一下很多应用软件都是用了底部菜单栏,这里使用了tabhost做了一种通用的(就是可以像微信那样显示未读消息数量的,虽然之前也做过但是layout下的xml写的太臃肿,这里去掉了很多不必要的层,个人看起来还是不错的,所以贴出来方便以后使用). 先看一下做出来之后的效果: 以后使用的时候就可以换成自己项目的图片和字体了,主框架不用变哈哈, 首先是要布局layout下xml文件 main.xml: <?xml version="1.0" encoding=&qu

Android仿微信主界面设计_Android

先来一张效果图 一.ActionBar的设计 首先是main.xml,先定义这些菜单,界面稍后在调整 <menu xmlns:android="http://schemas.android.com/apk/res/android" tools:context=".MainActivity"> <item android:id="@+id/action_search" android:actionViewClass="a