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

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