<?xml version="1.0" encoding="utf-8"?>
<resources>
  <!--SideBar相關(guān)-->
  <!--普通時(shí)的顏色-->
  <attr name="normalColor" format="color"/>
  <!--選中時(shí)的顏色-->
  <attr name="chooseColor" format="color"/>
  <!--普通時(shí)的背景圖-->
  <attr name="normalBackground" format="reference"/>
  <!--選中時(shí)的背景圖-->
  <attr name="chooseBackground" format="reference"/>
  <!--索引欄文字大小-->
  <attr name="sideTextSize" format="dimension"/>
  <declare-styleable name="SideBar">
    <attr name="normalColor"/>
    <attr name="chooseColor"/>
    <attr name="normalBackground"/>
    <attr name="chooseBackground"/>
    <attr name="sideTextSize"/>
  </declare-styleable>
</resources>

package com.example.junweiliu.commindexdemo.widget;


import android.annotation.TargetApi;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;

import com.example.junweiliu.commindexdemo.R;


/**
 * Created by junweiliu on 16/11/24.
 */
public class SideBar extends View {
  /**
   * 點(diǎn)擊回調(diào)
   */
  private OnTouchingLetterChangedListener onTouchingLetterChangedListener;
  /**
   * 26字母
   */
  public static String[] letterStrs = {"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", "#"};
  /**
   * 當(dāng)前是否選中
   */
  private int choose = -1;
  /**
   * 字母畫(huà)筆
   */
  private Paint paint = new Paint();
  /**
   * 顯示的TextView
   */
  private TextView mTextDialog;
  /**
   * 普通時(shí)的顏色
   */
  private int normalColor;
  /**
   * 選中的顏色
   */
  private int chooseColor;
  /**
   * 普通時(shí)的背景
   */
  private Drawable normalBackground;
  /**
   * 選中時(shí)的背景
   */
  private Drawable chooseBackground;
  /**
   * 文字大小
   */
  private float textSize;
  /**
   * 邊框
   */
  private Rect mRect;


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

  public SideBar(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
    // 獲取自定義屬性
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SideBar);
    normalColor = ta.getColor(R.styleable.SideBar_normalColor, Color.GRAY);
    chooseColor = ta.getColor(R.styleable.SideBar_chooseColor, Color.RED);
    normalBackground = ta.getDrawable(R.styleable.SideBar_normalBackground);
    chooseBackground = ta.getDrawable(R.styleable.SideBar_chooseBackground);
    textSize = ta.getDimension(R.styleable.SideBar_sideTextSize, TypedValue
        .applyDimension(TypedValue.COMPLEX_UNIT_SP, 13,
            getResources().getDisplayMetrics()));
    ta.recycle();
    init();
  }

  /**
   * 為SideBar設(shè)置顯示字母的TextView
   *
   * @param mTextDialog
   */
  public void setTextView(TextView mTextDialog) {
    this.mTextDialog = mTextDialog;
  }

  /**
   * 設(shè)置
   *
   * @param letter
   */
  public void setLetter(String[] letter) {
    this.letterStrs = letter;
    invalidate();
    requestLayout();
  }


  /**
   * 初始化參數(shù)
   */
  @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
  private void init() {
    paint.setColor(normalColor);
    paint.setTypeface(Typeface.DEFAULT_BOLD);
    paint.setAntiAlias(true);
    paint.setTextSize(textSize);
    // 獲取單個(gè)繪制的rect,用于獲取單個(gè)繪制項(xiàng)的高度
    mRect = new Rect();
    paint.getTextBounds("A", 0, "A".length(), mRect);
  }


  /**
   * 繪制
   *
   * @param canvas
   */
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // 獲取焦點(diǎn)改變背景顏色.
    int height = getHeight() - getPaddingTop() - getPaddingBottom();// 獲取對(duì)應(yīng)高度
    int width = getWidth(); // 獲取對(duì)應(yīng)寬度
    int singleHeight = height / letterStrs.length;// 獲取每一個(gè)字母的高度
    for (int i = 0; i < letterStrs.length; i++) {
      // 選中的狀態(tài)
      if (i == choose) {
        paint.setColor(chooseColor);
        paint.setFakeBoldText(true);
      }
      // x坐標(biāo)等于中間-字符串寬度的一半.
      float xPos = width / 2 - paint.measureText(letterStrs[i]) / 2;
      float yPos = singleHeight * i + singleHeight;
      canvas.drawText(letterStrs[i], xPos, yPos, paint);
      paint.reset();// 重置畫(huà)筆
      init();
    }
  }

  @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
  @Override
  public boolean dispatchTouchEvent(MotionEvent event) {
    final int action = event.getAction();
    // 點(diǎn)擊的y坐標(biāo)
    final float y = event.getY();
    final int oldChoose = choose;
    final OnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
    // 獲取當(dāng)前點(diǎn)擊的字母位置,點(diǎn)擊位置的y坐標(biāo)比上總的高度相當(dāng)于點(diǎn)擊的位置比上全部位置(c / b.length = y / getHeight())
    final int currChoose = (int) (y / getHeight() * letterStrs.length);

    switch (action) {
      case MotionEvent.ACTION_UP:
        // 重置背景色
        if (null != normalBackground) {
          setBackground(normalBackground);
        } else {
          setBackgroundColor(Color.argb(0, 0, 0, 0));
        }
        // 抬起時(shí)置為-1
        choose = -1;
        invalidate();
        if (mTextDialog != null) {
          mTextDialog.setVisibility(View.INVISIBLE);
        }
        break;
      default:
        // 設(shè)置背景色
        if (null != chooseBackground) {
          setBackground(chooseBackground);
        }
        if (oldChoose != currChoose) {
          if (currChoose >= 0 && currChoose < letterStrs.length) {
            if (null != listener) {
              listener.onTouchingLetterChanged(letterStrs[currChoose]);
            }
            if (null != mTextDialog) {
              mTextDialog.setText(letterStrs[currChoose]);
              mTextDialog.setVisibility(View.VISIBLE);
            }
            // 設(shè)置選中的位置為當(dāng)前位置
            choose = currChoose;
            invalidate();
          }
        }
        break;
    }
    return true;
  }

  /**
   * 向外公開(kāi)的方法
   *
   * @param onTouchingLetterChangedListener
   */
  public void setOnTouchingLetterChangedListener(
      OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
    this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
  }

  /**
   * 回調(diào)接口
   *
   * @author coder
   */
  public interface OnTouchingLetterChangedListener {
    void onTouchingLetterChanged(String s);
  }


  /**
   * 測(cè)量
   *
   * @param widthMeasureSpec
   * @param heightMeasureSpec
   */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
    // 當(dāng)高度為自適應(yīng)時(shí),高度為字母高度*字母數(shù)量*2 即間隔為單位高度
    int wrapHeight = letterStrs.length * (mRect.height() * 2);
    // 當(dāng)寬度為自適應(yīng)使,寬度為字母寬度*2
    int warpWidth = mRect.width() * 2;
    setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth : warpWidth
        , (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
            //wrap_content時(shí)的高度
            : wrapHeight);
  }

}

package com.example.junweiliu.commindexdemo.bean;

/**
 * Created by junweiliu on 16/11/21.
 */
public interface SideBase {
  String getLetterName();
}

package com.example.junweiliu.commindexdemo.bean;

public class CityBean implements SideBase {
  /**
   * 城市名
   */
  private String cityName;
  /**
   * 首字母
   */
  private String cityHeader;
  /**
   * 城市信息
   */
  private String cityMes;


  public CityBean(String cityName, String cityHeader, String cityMes) {
    this.cityName = cityName;
    this.cityHeader = cityHeader;
    this.cityMes = cityMes;
  }

  public String getCityName() {
    return cityName;
  }

  public void setCityName(String cityName) {
    this.cityName = cityName;
  }

  public String getCityHeader() {
    return cityHeader;
  }

  public void setCityHeader(String cityHeader) {
    this.cityHeader = cityHeader;
  }

  public String getCityMes() {
    return cityMes;
  }

  public void setCityMes(String cityMes) {
    this.cityMes = cityMes;
  }

  /**
   * 獲取索引
   *
   * @return
   */
  @Override
  public String getLetterName() {
    return cityHeader;
  }
}

  /**
   * 根據(jù)當(dāng)前選中的項(xiàng)獲取其第一次出現(xiàn)該項(xiàng)首字母的位置
   *
   * @param position 當(dāng)前選中的位置
   * @param datas  數(shù)據(jù)源
   * @return
   */
  public static int getPositionForSection(int position, List<? extends SideBase> datas) {
    // 當(dāng)前選中的項(xiàng)
    SideBase sideBase = datas.get(position);
    for (int i = 0; i < datas.size(); i++) {
      String firstStr = datas.get(i).getLetterName().toUpperCase();
      // 返回第一次出現(xiàn)該項(xiàng)首字母的位置
      if (firstStr.equals(sideBase.getLetterName())) {
        return i;
      }
    }
    return -1;
  }

  /**
   * 獲取所選中的索引在列表中的位置
   *
   * @param list
   * @param letter
   * @return
   */
  public static int getLetterPosition(List<? extends SideBase> list, String letter) {
    int position = -1;

    if (list != null && !list.isEmpty() && !"".equals(letter)) {
      for (int i = 0; i < list.size(); i++) {
        SideBase bean = list.get(i);
        if (bean.getLetterName().equals(letter)) {
          position = i;
          break;
        }
      }
    }
    return position;
  }

  /**
   * 篩選出數(shù)據(jù)源中所包含的全部索引值
   *
   * @param list
   * @return
   */
  public static String[] getLetters(List<? extends SideBase> list) {
    List<String> letters = new ArrayList<>();
    if (list != null && !list.isEmpty()) {
      for (int i = 0; i < list.size(); i++) {
        if (!letters.contains(list.get(i).getLetterName())) {
          letters.add(list.get(i).getLetterName());
        }
      }
    }
    return (String[]) letters.toArray(new String[letters.size()]);
  }

package com.example.junweiliu.commindexdemo.util;

import com.example.junweiliu.commindexdemo.bean.SideBase;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by junweiliu on 16/11/24.
 */
public class CommUtil {

  /**
   * 根據(jù)當(dāng)前選中的項(xiàng)獲取其第一次出現(xiàn)該項(xiàng)首字母的位置
   *
   * @param position 當(dāng)前選中的位置
   * @param datas  數(shù)據(jù)源
   * @return
   */
  public static int getPositionForSection(int position, List<? extends SideBase> datas) {
    // 當(dāng)前選中的項(xiàng)
    SideBase sideBase = datas.get(position);
    for (int i = 0; i < datas.size(); i++) {
      String firstStr = datas.get(i).getLetterName().toUpperCase();
      // 返回第一次出現(xiàn)該項(xiàng)首字母的位置
      if (firstStr.equals(sideBase.getLetterName())) {
        return i;
      }
    }
    return -1;
  }

  /**
   * 獲取所選中的索引在列表中的位置
   *
   * @param list
   * @param letter
   * @return
   */
  public static int getLetterPosition(List<? extends SideBase> list, String letter) {
    int position = -1;

    if (list != null && !list.isEmpty() && !"".equals(letter)) {
      for (int i = 0; i < list.size(); i++) {
        SideBase bean = list.get(i);
        if (bean.getLetterName().equals(letter)) {
          position = i;
          break;
        }
      }
    }
    return position;
  }

  /**
   * 篩選出數(shù)據(jù)源中所包含的全部索引值
   *
   * @param list
   * @return
   */
  public static String[] getLetters(List<? extends SideBase> list) {
    List<String> letters = new ArrayList<>();
    if (list != null && !list.isEmpty()) {
      for (int i = 0; i < list.size(); i++) {
        if (!letters.contains(list.get(i).getLetterName())) {
          letters.add(list.get(i).getLetterName());
        }
      }
    }
    return (String[]) letters.toArray(new String[letters.size()]);
  }
}

package com.example.junweiliu.commindexdemo.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.example.junweiliu.commindexdemo.R;
import com.example.junweiliu.commindexdemo.bean.CityBean;
import com.example.junweiliu.commindexdemo.util.CommUtil;

import java.util.List;

/**
 * Created by junweiliu on 16/11/24.
 */
public class CityAdapter extends BaseAdapter {
  /**
   * 上下文
   */
  private Context context;
  /**
   * 布局加載器
   */
  private LayoutInflater mInflater;
  /**
   * 數(shù)據(jù)源
   */
  private List<CityBean> cityBeanList;

  /**
   * 構(gòu)造方法
   *
   * @param context
   * @param cityBeanList
   */
  public CityAdapter(Context context, List<CityBean> cityBeanList) {
    this.context = context;
    this.cityBeanList = cityBeanList;
  }

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

  @Override
  public Object getItem(int i) {
    return cityBeanList.get(i);
  }

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

  @Override
  public View getView(int position, View convertView, ViewGroup viewGroup) {
    ViewHolder viewHolder = null;
    CityBean bean = cityBeanList.get(position);
    if (convertView == null) {
      convertView = mInflater.from(context).inflate(R.layout.item_city, null);
      viewHolder = new ViewHolder();
      viewHolder.headerTv = (TextView) convertView.findViewById(R.id.tv_item_citys_header);
      viewHolder.contentTv = (TextView) convertView.findViewById(R.id.tv_item_citys_context);
      convertView.setTag(viewHolder);
    } else {
      viewHolder = (ViewHolder) convertView.getTag();
    }
    // 如果當(dāng)前位置為第一次出現(xiàn)該類首字母的位置,則顯示headerTv
    if (position == CommUtil.getPositionForSection(position, cityBeanList)) {
      viewHolder.contentTv.setVisibility(View.VISIBLE);
      viewHolder.headerTv.setVisibility(View.VISIBLE);
      viewHolder.headerTv.setText(bean.getLetterName());
    } else {
      viewHolder.headerTv.setVisibility(View.GONE);
      viewHolder.contentTv.setVisibility(View.VISIBLE);
    }
    viewHolder.contentTv.setText(bean.getCityName());
    return convertView;
  }

  /**
   * vh
   */
  class ViewHolder {
    TextView headerTv;
    TextView contentTv;
  }
}

package com.example.junweiliu.commindexdemo;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.TextView;

import com.example.junweiliu.commindexdemo.adapter.CityAdapter;
import com.example.junweiliu.commindexdemo.bean.CityBean;
import com.example.junweiliu.commindexdemo.util.CommUtil;
import com.example.junweiliu.commindexdemo.widget.SideBar;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends Activity {
  /**
   * 城市列表數(shù)據(jù)
   */
  private List<CityBean> cityBeanList = new ArrayList<>();
  /**
   * 城市l(wèi)v
   */
  private ListView cityList;
  /**
   * 索引欄
   */
  private SideBar mSideBar;
  /**
   * 顯示的tv
   */
  private TextView mShowTv;
  /**
   * 適配器
   */
  private CityAdapter mCityAdapter;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    initData();
    initView();
  }


  /**
   * 初始化數(shù)據(jù)
   */
  private void initData() {
    CityBean bean1 = new CityBean("安徽", "A", "安徽故事");
    CityBean bean2 = new CityBean("安徽1", "A", "安徽1故事");
    CityBean bean3 = new CityBean("安徽2", "A", "安徽2故事");
    CityBean bean4 = new CityBean("北京", "B", "北京故事");
    CityBean bean5 = new CityBean("北京1", "B", "北京1故事");
    CityBean bean6 = new CityBean("北京2", "B", "北京2故事");
    CityBean bean7 = new CityBean("重慶", "C", "重慶故事");
    CityBean bean8 = new CityBean("重慶1", "C", "重慶1故事");
    CityBean bean9 = new CityBean("重慶2", "C", "重慶2故事");
    CityBean bean10 = new CityBean("貴州", "G", "貴州故事");
    CityBean bean11 = new CityBean("貴州1", "G", "貴州2故事");
    CityBean bean12 = new CityBean("貴州2", "G", "貴州3故事");
    CityBean bean13 = new CityBean("天津", "T", "天津故事");
    CityBean bean14 = new CityBean("天津1", "T", "天津1故事");
    CityBean bean15 = new CityBean("天津2", "T", "天津2故事");

    cityBeanList.add(bean1);
    cityBeanList.add(bean2);
    cityBeanList.add(bean3);
    cityBeanList.add(bean1);
    cityBeanList.add(bean2);
    cityBeanList.add(bean3);
    cityBeanList.add(bean4);
    cityBeanList.add(bean5);
    cityBeanList.add(bean6);
    cityBeanList.add(bean4);
    cityBeanList.add(bean5);
    cityBeanList.add(bean6);
    cityBeanList.add(bean7);
    cityBeanList.add(bean8);
    cityBeanList.add(bean9);
    cityBeanList.add(bean7);
    cityBeanList.add(bean8);
    cityBeanList.add(bean9);
    cityBeanList.add(bean10);
    cityBeanList.add(bean11);
    cityBeanList.add(bean12);
    cityBeanList.add(bean10);
    cityBeanList.add(bean11);
    cityBeanList.add(bean12);
    cityBeanList.add(bean13);
    cityBeanList.add(bean14);
    cityBeanList.add(bean15);
    cityBeanList.add(bean13);
    cityBeanList.add(bean14);
    cityBeanList.add(bean15);
  }

  /**
   * 初始化控件
   */
  private void initView() {
    cityList = (ListView) findViewById(R.id.lv_city);
    mSideBar = (SideBar) findViewById(R.id.sb_city);
    mShowTv = (TextView) findViewById(R.id.tv_city_show);
    mCityAdapter = new CityAdapter(MainActivity.this, cityBeanList);
    cityList.setAdapter(mCityAdapter);
    // 設(shè)置需要顯示的索引欄內(nèi)容
    mSideBar.setLetter(CommUtil.getLetters(cityBeanList));
    // 設(shè)置需要顯示的提示框
    mSideBar.setTextView(mShowTv);
    mSideBar.setOnTouchingLetterChangedListener(new SideBar.OnTouchingLetterChangedListener() {
      @Override
      public void onTouchingLetterChanged(String s) {
        int position = CommUtil.getLetterPosition(cityBeanList, s);
        if (position != -1) {
          cityList.setSelection(position);
        }
      }
    });
  }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.junweiliu.commindexdemo.MainActivity">

  <!--城市列表-->
  <ListView
      android:id="@+id/lv_city"
      android:layout_width="match_parent"
      android:layout_height="match_parent">
  </ListView>
  <!--索引欄-->
  <com.example.junweiliu.commindexdemo.widget.SideBar
      android:id="@+id/sb_city"
      android:layout_width="wrap_content"
      android:layout_height="200dp"
      android:layout_alignParentRight="true"
      android:layout_centerVertical="true"
      app:sideTextSize="13sp"/>
  <!--顯示的字母-->
  <TextView
      android:id="@+id/tv_city_show"
      android:layout_width="80dp"
      android:layout_height="80dp"
      android:layout_centerInParent="true"
      android:background="#3F51B5"
      android:gravity="center"
      android:textColor="#ffffff"
      android:textSize="25sp"
      android:visibility="gone"
  />
</RelativeLayout>

<?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:orientation="vertical">

  <!-- 索引頭 -->
  <TextView
      android:id="@+id/tv_item_citys_header"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#E3E3E3"
      android:padding="15dp"
      android:text="A"
      android:textColor="#666666"
      android:textSize="14sp"
      android:visibility="gone"/>

  <!-- 內(nèi)容 -->
  <TextView
      android:id="@+id/tv_item_citys_context"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="#ffffff"
      android:padding="15dp"
      android:textColor="#000000"
      android:textSize="14sp"
      android:visibility="gone"/>

</LinearLayout>