通讯录侧滑索引菜单

• 先看效果图
  

• 整体思路分为两部分，左边的listView和右边的侧滑菜单，

• listView获取手机联系人信息，并且实现 SectionIndexer接口，实现数据的分组

• 侧滑菜单实现和listView的联动的效果

• 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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:id="@+id/show_letter"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@color/colorPrimary"
        android:textSize="20sp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/userface"
            android:layout_width="72dp"
            android:layout_height="72dp"
            android:padding="12dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="36dp"
            android:layout_toRightOf="@id/userface"
            android:gravity="center"
            android:text="username" />

        <TextView
            android:id="@+id/usernum"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="36dp"
            android:layout_toRightOf="@id/username"
            android:gravity="center"
            android:text="username" />


    </RelativeLayout>
</LinearLayout>

• 自定义的Adapter代码

public class MyAdapter extends BaseAdapter implements SectionIndexer {
    private List<Person> dataList;
    private Context context;

    public MyAdapter(Context context, List<Person> list) {
        this.context = context;
        this.dataList = list;
    }

    @Override
    public int getCount() {
        return dataList.size();
    }

    @Override
    public Object getItem(int position) {
        return dataList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.layout_item, null);
            holder = new ViewHolder();
            holder.showLetter = (TextView) convertView.findViewById(R.id.show_letter);
            holder.username = (TextView) convertView.findViewById(R.id.username);
            holder.usernum= (TextView) convertView.findViewById(R.id.usernum);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        Person person = dataList.get(position);
        holder.username.setText(person.getUsername());
        holder.usernum.setText(person.getNum());
        //获得当前position是属于哪个分组，同时返回对应的字母
        int sectionForPosition = getSectionForPosition(position);
        //获得该分组对应字母第一个的position，
        int positionForSection = getPositionForSection(sectionForPosition);
        //查看当前position是不是当前item所在分组的第一个item
        //如果是，则显示showLetter，否则隐藏
        if (position == positionForSection) {
            holder.showLetter.setVisibility(View.VISIBLE);
            holder.showLetter.setText(person.getFirstLetter()+"");
        } else {
            holder.showLetter.setVisibility(View.GONE);
        }
        return convertView;
    }
    //传入一个分组值[A....Z],获得该分组的第一项的position
    //通过该项的位置，获得所在分类组的索引号
    public int getPositionForSection(int sectionIndex) {
        for (int i = 0; i < dataList.size(); i++) {
            if (dataList.get(i).getFirstLetter() == sectionIndex) {
                return i;
            }
        }
        return -1;
    }

    //传入一个position，获得该position所在的分组
    //根据分类列的索引号获得该序列的首个位置
    public int getSectionForPosition(int position) {
        return dataList.get(position).getFirstLetter();
    }

    class ViewHolder {
        TextView username, showLetter,usernum;
    }

    public Object[] getSections() {
        return new Object[0];
    }
}

• 我们的侧滑索引菜单

public class SlideBar extends View {

    //当前手指滑动到的位置
    private int choosedPosition = -1;
    //画文字的画笔
    private Paint paint;
    //右边的所有文字
    private String[] letters = new String[]{"#", "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"};
    //页面正中央的TextView，用来显示手指当前滑动到的位置的文本
    private TextView textViewDialog;
    //接口变量，该接口主要用来实现当手指在右边的滑动控件上滑动时ListView能够跟着滚动
    private UpdateListView updateListView;

    public SlideBar(Context context) {
        this(context, null);
    }

    public SlideBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public SlideBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        //设置抗锯齿
        paint.setAntiAlias(true);
        //设置画笔的文字大小
        paint.setTextSize(40);
    }

    public void setTextViewDialog(TextView textViewDialog) {
        this.textViewDialog = textViewDialog;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //每一个侧滑栏字母的高度
        int perTextHeight = getHeight() / letters.length;
        for (int i = 0; i < letters.length; i++) {
            //如果当前字母被选中，那么久将其颜色改变为红色
            if (i == choosedPosition) {
                paint.setColor(Color.RED);
            } else {
                paint.setColor(Color.BLACK);
            }
            //开始将侧滑栏字母绘制在上面
            canvas.drawText(letters[i], (getWidth() - paint.measureText(letters[i])) / 2, (i + 1) * perTextHeight, paint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //通过获取当前的滑动事件的y坐标，计算当前手指在那个字母上面
        int perTextHeight = getHeight() / letters.length;
        float y = event.getY();
        int currentPosition = (int) (y / perTextHeight);
        String letter = letters[currentPosition];
        switch (event.getAction()) {
            case MotionEvent.ACTION_UP:
                //当手指停止滑动，离开时，将自定义控件的背景的阴影效果取消显示，设置为透明的颜色
                setBackgroundColor(Color.TRANSPARENT);
                if (textViewDialog != null) {
                    textViewDialog.setVisibility(View.GONE);
                }
                break;
            default:
                //当手指在自定义控件上的时候，就将背景颜色设置为当前颜色，就是浅灰色
                setBackgroundColor(Color.parseColor("#cccccc"));
                if (currentPosition > -1 && currentPosition < letters.length) {
                    if (textViewDialog != null) {
                        textViewDialog.setVisibility(View.VISIBLE);
                        textViewDialog.setText(letter);
                    }
                    if (updateListView != null) {
                        updateListView.updateListView(letter);
                    }
                    choosedPosition = currentPosition;
                }
                break;
        }
        //更新我们自定义控件的UI显示
        invalidate();
        return true;
    }

    public void setUpdateListView(UpdateListView updateListView) {
        this.updateListView = updateListView;
    }

    //通过接口的回调，实现我们在主代码中的listView一起联动
    public interface UpdateListView {
        public void updateListView(String currentChar);
    }

    public void updateSlideBar(int currentChar) {
        for (int i = 0; i < letters.length; i++) {
            if (currentChar == letters[i].charAt(0)) {
                choosedPosition = i;
                //更新我们自定义控件的UI显示
                invalidate();
                break;
            }
        }
    }
}

• 主布局文件
• 就是放置了一个listView和一个自定义的侧滑菜单，同时在中间放置了一个TextView，并且设置为不可见，是因为当我们点击侧滑菜单时才会让其显示出来

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:orientation="horizontal"
    tools:context="com.lingzhuo.testslidebar01.MainActivity">


    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />

    <com.lingzhuo.testslidebar01.view.SlideBar
        android:id="@+id/slideBar"
        android:layout_width="20dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true" />


    <TextView
        android:id="@+id/show_letter_in_center"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:textSize="60sp"
        android:background="@color/colorGray"
        android:visibility="gone" />

</RelativeLayout>

• 主活动的代码如下

public class MainActivity extends AppCompatActivity {

    private ListView listView;
    private MyAdapter adapter;
    private List<Person> dataList;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
        getContacts();
        for (Person person : dataList) {
            Log.d("MainActivity", person.getUsername() + person.getFirstLetter() + "");
        }
        adapter=new MyAdapter(getApplicationContext(),dataList);
        listView.setAdapter(adapter);

        //设置侧滑菜单的一系列参数，以及设置监听事件
        initSlideBar();
    }

    private void initSlideBar() {
        //主布局文件中的那个侧滑菜单被滑动才显示的TextView
        TextView textView = (TextView) findViewById(R.id.show_letter_in_center);
        final SlideBar slideBar = (SlideBar) findViewById(R.id.slideBar);
        slideBar.setTextViewDialog(textView);
        slideBar.setUpdateListView(new SlideBar.UpdateListView() {
            @Override
            public void updateListView(String currentChar) {
                int positionForSection = adapter.getPositionForSection(currentChar.charAt(0));
                listView.setSelection(positionForSection);
            }
        });
        //设置listView滑动的时候，同时更新侧滑索引菜单的显示
        listView.setOnScrollListener(new AbsListView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {}

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
                int sectionForPosition = adapter.getSectionForPosition(firstVisibleItem);
                slideBar.updateSlideBar(sectionForPosition);
            }
        });
    }

    private void init() {
        listView = (ListView) findViewById(R.id.listView);
        dataList = new ArrayList<>();
    }

    public void getContacts() {
        //通过内容提供器，获取联系人的信息
        Cursor cursor = getContentResolver().query(ContactsContract.CommonDataKinds.Phone.CONTENT_URI, null, null, null, null);
        List<Person> dataTemp = new ArrayList<>();
        while (cursor.moveToNext()) {
            String name = cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME));
            String num = cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER));
            //导入的第三方的工具包，用于将汉子转为拼音
            String[] pinyin = PinyinHelper.toHanyuPinyinStringArray(name.charAt(0));
            Person person;
            if (pinyin != null) {
                person = new Person(name, pinyin[0].toUpperCase().charAt(0), num);
            } else {
                person = new Person(name, '#' , num);
            }
            dataTemp.add(person);
        }

        //对联系人的list数据进行排序，按字母顺序排序
        for (int i = 35; i <= 90; i++) {
            for (Person person : dataTemp) {
                if (person.getFirstLetter() == ((char) i)) {
                    dataList.add(person);
                }
            }
        }

    }
}