通訊錄側滑索引菜單

• 先看效果圖
  

• 整體思路分爲兩部分，左邊的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);
                }
            }
        }

    }
}