Android 自定义列表指示器

在联系人界面 可以看到这种界面 手指快速滑动右边滑动条时 可以显示相应的字母图标

android里提供了android.widget.SectionIndexer这个接口去实现该效果 可是只能显示字母提示

但我们想实现右图这种效果时 则只能自定义去实现了

先上代码

MainActivity

public class MainActivity extends Activity {

  /*
   *
   * 1 ListView BaseAdapter DataSource 列表 适配器 数据源
   * 巨坑 外面只有包上线性布局才会显示
   *
   */

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

    ListView listView = (ListView) findViewById(R.id.list);

    List<Model> models = new ArrayList<Model>();

    for (int i = 0; i < 400; i++) {

      Model model = new Model("key" + i, "2012" + i);
      models.add(model);
    }

    MyAdapter1 adapter = new MyAdapter1(getApplicationContext(), models);

    listView.setAdapter(adapter);

  }

}

activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:demoapp="http://schemas.android.com/apk/res/com.example.mylistview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

        <com.example.mylistview.CustomFastScrollView
        android:id="@+id/fast_scroll_view"
        android:layout_width="wrap_content"
        android:layout_height="0px"
        android:background="#FFFFFF"
        android:layout_weight="1"
        demoapp:overlayHeight="40dp"
        demoapp:overlayScrollThumbWidth="40dp"
        demoapp:overlayTextSize="18dp"
        demoapp:overlayWidth="100dp" >

        <ListView
            android:id="@+id/list"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent" />

    </com.example.mylistview.CustomFastScrollView>

</LinearLayout>

Model

public class Model {

  private String key; // 列表中显示
  private String value; // 提示中显示
  private String other;

  public Model(String key, String value) {
    super();
    this.key = key;
    this.value = value;
  }

  /**
   * @return the key
   */
  public String getKey() {
    return this.key;
  }

  /**
   * @param key
   *          the key to set
   */
  public void setKey(String key) {
    this.key = key;
  }

  /**
   * @return the value
   */
  public String getValue() {
    return this.value;
  }

  /**
   * @param value
   *          the value to set
   */
  public void setValue(String value) {
    this.value = value;
  }

}

MyAdapter1

public class MyAdapter1 extends BaseAdapter implements SectionIndexer{
  private static final String TAG = "MyAdapter";

  private List<Model> countries;
  private Context context;
  private SectionIndexer sectionIndexer;

  public MyAdapter1(Context context, List<Model> countries) {

    this.context = context;
    this.countries = countries;

  }

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

  @Override
  public Object getItem(int position) {
    return null;
  }

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

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {

    // 创建一个LinearLayout，并向其中添加2个组件
    LinearLayout line = new LinearLayout(context);
    line.setOrientation(0);
    ImageView image = new ImageView(context);
    image.setImageResource(R.drawable.ic_launcher);
    TextView text = new TextView(context);
    text.setText(countries.get(position).getKey());
    text.setTextSize(20);
    text.setTextColor(Color.RED);
    line.addView(image);
    line.addView(text);
    // 返回LinearLayout实例
    return line;

  }

  @Override
  public Object[] getSections() {
    return getSectionIndexer().getSections();
  }

  @Override
  public int getPositionForSection(int section) {
    return getSectionIndexer().getPositionForSection(section);
  }

  @Override
  public int getSectionForPosition(int position) {
    return getSectionIndexer().getSectionForPosition(position);
  }

  private SectionIndexer getSectionIndexer() {
    if (sectionIndexer == null) {
      sectionIndexer = createSectionIndexer(countries);
    }
    return sectionIndexer;
  }

  private SectionIndexer createSectionIndexer(List<Model> countries) {

    return createSectionIndexer(countries, new Function<Model, String>() {
      @Override
      public String apply(Model input) {
        // show just the first letter in the title
        //return input.getName().substring(0, 1);

        return input.getValue();
      }
    });
  }

  private SectionIndexer createSectionIndexer(List<Model> countries, Function<Model, String> sectionFunction) {

    List<String> sections = new ArrayList<String>();
    final List<Integer> sectionsToPositions = new ArrayList<Integer>();
    final List<Integer> positionsToSections = new ArrayList<Integer>();

    for (int i = 0; i < countries.size(); i++) {
      Model country = countries.get(i);
      String section = sectionFunction.apply(country);

      Log.i("TAG1", "section----" + section);

      if (sections.isEmpty() || !sections.get(sections.size() - 1).equals(section)) {
        sections.add(section);
        sectionsToPositions.add(i);
      }

      positionsToSections.add(sections.size() - 1);
    }

    final String[] sectionsArray = sections.toArray(new String[sections.size()]);

    return new SectionIndexer() {

      @Override
      public Object[] getSections() {
        return sectionsArray;
      }

      @Override
      public int getSectionForPosition(int position) {
        return positionsToSections.get(position);
      }

      @Override
      public int getPositionForSection(int section) {
        return sectionsToPositions.get(section);
      }
    };
  }

}

Function

public interface Function<E,T> {

    public T apply(E input);

}

最后最关键的类

CustomFastScrollView

public class CustomFastScrollView extends FrameLayout
        implements OnScrollListener, OnHierarchyChangeListener {

    // how much transparency to use for the fast scroll thumb
    private static final int ALPHA_MAX = 255;

    // how long before the fast scroll thumb disappears
    private static final long FADE_DURATION = 200;

    private Drawable mCurrentThumb; //滑动条
    private Drawable mOverlayDrawable; //提示文字背景框

    private int mThumbH;
    private int mThumbW;
    private int mThumbY;

    private RectF mOverlayPos;

    // custom values I defined
    private int mOverlayWidth;
    private int mOverlayHeight;
    private float mOverlayTextSize;
    private int mOverlayScrollThumbWidth;

    private boolean mDragging;
    private ListView mList;
    private boolean mScrollCompleted;
    private boolean mThumbVisible;
    private int mVisibleItem;
    private Paint mPaint;
    private int mListOffset;

    private Object [] mSections;
    private String mSectionText;
    private boolean mDrawOverlay;
    private ScrollFade mScrollFade;

    private Handler mHandler = new Handler();

    private BaseAdapter mListAdapter;

    private boolean mChangedBounds;

    public static interface SectionIndexer {
        Object[] getSections();

        int getPositionForSection(int section);

        int getSectionForPosition(int position);
    }

    public CustomFastScrollView(Context context) {
        super(context);

        init(context, null);
    }

    public CustomFastScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);

        init(context, attrs);
    }

    public CustomFastScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        init(context, attrs);
    }

    private void useThumbDrawable(Drawable drawable) {
        mCurrentThumb = drawable;
        mThumbW = mOverlayScrollThumbWidth;//mCurrentThumb.getIntrinsicWidth();
        mThumbH = mCurrentThumb.getIntrinsicHeight();
        mChangedBounds = true;
    }

    private void init(Context context, AttributeSet attrs) {

        // set all attributes from xml
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs,
                    R.styleable.CustomFastScrollView);
            mOverlayHeight = typedArray.getDimensionPixelSize(
                    R.styleable.CustomFastScrollView_overlayHeight, 0);
            mOverlayWidth = typedArray.getDimensionPixelSize(
                    R.styleable.CustomFastScrollView_overlayWidth, 0);
            mOverlayTextSize = typedArray.getDimensionPixelSize(
                    R.styleable.CustomFastScrollView_overlayTextSize, 0);
            mOverlayScrollThumbWidth = typedArray.getDimensionPixelSize(
                    R.styleable.CustomFastScrollView_overlayScrollThumbWidth, 0);

        }

        // Get both the scrollbar states drawables
        final Resources res = context.getResources();
        //Drawable thumbDrawable = res.getDrawable(R.drawable.scrollbar_handle_accelerated_anim2);
        Drawable thumbDrawable = res.getDrawable(R.drawable.bar1);
        useThumbDrawable(thumbDrawable);

        //mOverlayDrawable = res.getDrawable(android.R.drawable.alert_dark_frame);
        mOverlayDrawable = res.getDrawable(R.drawable.bar2);

        mScrollCompleted = true;
        setWillNotDraw(false);

        // Need to know when the ListView is added
        setOnHierarchyChangeListener(this);

        mOverlayPos = new RectF();
        mScrollFade = new ScrollFade();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setTextSize(mOverlayTextSize);
        mPaint.setColor(0xFFFFFFFF);
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

    private void removeThumb() {
        mThumbVisible = false;
        // Draw one last time to remove thumb
        invalidate();
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if (!mThumbVisible) {
            // No need to draw the rest
            return;
        }

        final int y = mThumbY;
        final int viewWidth = getWidth();
        final CustomFastScrollView.ScrollFade scrollFade = mScrollFade;

        int alpha = -1;
        if (scrollFade.mStarted) {
            alpha = scrollFade.getAlpha();
            if (alpha < ALPHA_MAX / 2) {
                mCurrentThumb.setAlpha(alpha * 2);
            }
            int left = viewWidth - (mThumbW * alpha) / ALPHA_MAX;
            mCurrentThumb.setBounds(left, 0, viewWidth, mThumbH);

            mChangedBounds = true;
        }

        canvas.translate(0, y);
        Log.i("TAG", "left y上的变化 draw" + y);
        mCurrentThumb.draw(canvas);

        //canvas.translate(0, -y);
        Log.i("TAG", "left y上的变化 draw" + y);

        // If user is dragging the scroll bar, draw the alphabet overlay
        if (mDragging && mDrawOverlay) {
            mOverlayDrawable.draw(canvas);
            final Paint paint = mPaint;
            float descent = paint.descent();
            final RectF rectF = mOverlayPos;
            canvas.drawText(mSectionText + "美丽" , (int) (rectF.left + rectF.right) / 2, (int) (rectF.bottom + rectF.top) / 2 + descent, paint);
        } else if (alpha == 0) {
            scrollFade.mStarted = false;
            removeThumb();
        } else {
            invalidate(viewWidth - mThumbW, y, viewWidth, y + mThumbH);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (mCurrentThumb != null) {
            mCurrentThumb.setBounds(w - mThumbW, 0, w, mThumbH);
        }
        final RectF pos = mOverlayPos;
        //pos.left = (w - mOverlayWidth) / 2;
        pos.left = w-mOverlayWidth-mThumbW;
        pos.right = pos.left + mOverlayWidth;
        //pos.top = h / 10; // 10% from top
        pos.top = 0 - mOverlayHeight/2 + mThumbH/2;
        pos.bottom = pos.top + mOverlayHeight;
        mOverlayDrawable.setBounds((int) pos.left, (int) pos.top,
                (int) pos.right, (int) pos.bottom);
    }

    public void onScrollStateChanged(AbsListView view, int scrollState) {
    }

    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount,
            int totalItemCount) {

        if (totalItemCount - visibleItemCount > 0 && !mDragging) {
            mThumbY = ((getHeight() - mThumbH) * firstVisibleItem) / (totalItemCount - visibleItemCount);
            if (mChangedBounds) {
                final int viewWidth = getWidth();
                mCurrentThumb.setBounds(viewWidth - mThumbW, 0, viewWidth, mThumbH);
                mChangedBounds = false;
            }
        }
        mScrollCompleted = true;
        if (firstVisibleItem == mVisibleItem) {
            return;
        }
        mVisibleItem = firstVisibleItem;
        if (!mThumbVisible || mScrollFade.mStarted) {
            mThumbVisible = true;
            mCurrentThumb.setAlpha(ALPHA_MAX);
        }
        mHandler.removeCallbacks(mScrollFade);
        mScrollFade.mStarted = false;
        if (!mDragging) {
            mHandler.postDelayed(mScrollFade, 1500);
        }
    }

    private void getSections() {
        Adapter adapter = mList.getAdapter();
        if (adapter instanceof HeaderViewListAdapter) {
            mListOffset = ((HeaderViewListAdapter)adapter).getHeadersCount();
            adapter = ((HeaderViewListAdapter)adapter).getWrappedAdapter();
        }
        if (adapter instanceof SectionIndexer) {
            mListAdapter = (BaseAdapter) adapter;
            mSections = ((SectionIndexer) mListAdapter).getSections();
        }
    }

    public void onChildViewAdded(View parent, View child) {
        if (child instanceof ListView) {
            mList = (ListView)child;

            mList.setOnScrollListener(this);
            getSections();
        }
    }

    public void onChildViewRemoved(View parent, View child) {
        if (child == mList) {
            mList = null;
            mListAdapter = null;
            mSections = null;
        }
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (mThumbVisible && ev.getAction() == MotionEvent.ACTION_DOWN) {
            if (ev.getX() > getWidth() - mThumbW && ev.getY() >= mThumbY &&
                    ev.getY() <= mThumbY + mThumbH) {
                mDragging = true;
                return true;
            }
        }
        return false;
    }

    private void scrollTo(float position) {
        int count = mList.getCount();
        mScrollCompleted = false;
        final Object[] sections = mSections;
        int sectionIndex;
        if (sections != null && sections.length > 1) {
            final int nSections = sections.length;

            int section = (int) (position * nSections);
            if (section >= nSections) {
                section = nSections - 1;
            }
            sectionIndex = section;
            final SectionIndexer baseAdapter = (SectionIndexer) mListAdapter;
            int index = baseAdapter.getPositionForSection(section);

            // Given the expected section and index, the following code will
            // try to account for missing sections (no names starting with..)
            // It will compute the scroll space of surrounding empty sections
            // and interpolate the currently visible letter's range across the
            // available space, so that there is always some list movement while
            // the user moves the thumb.
            int nextIndex = count;
            int prevIndex = index;
            int prevSection = section;
            int nextSection = section + 1;
            // Assume the next section is unique
            if (section < nSections - 1) {
                nextIndex = baseAdapter.getPositionForSection(section + 1);
            }

            // Find the previous index if we're slicing the previous section
            if (nextIndex == index) {
                // Non-existent letter
                while (section > 0) {
                    section--;
                     prevIndex = baseAdapter.getPositionForSection(section);
                     if (prevIndex != index) {
                         prevSection = section;
                         sectionIndex = section;
                         break;
                     }
                }
            }
            // Find the next index, in case the assumed next index is not
            // unique. For instance, if there is no P, then request for P's
            // position actually returns Q's. So we need to look ahead to make
            // sure that there is really a Q at Q's position. If not, move
            // further down...
            int nextNextSection = nextSection + 1;
            while (nextNextSection < nSections &&
                    baseAdapter.getPositionForSection(nextNextSection) == nextIndex) {
                nextNextSection++;
                nextSection++;
            }
            // Compute the beginning and ending scroll range percentage of the
            // currently visible letter. This could be equal to or greater than
            // (1 / nSections).
            float fPrev = (float) prevSection / nSections;
            float fNext = (float) nextSection / nSections;
            index = prevIndex + (int) ((nextIndex - prevIndex) * (position - fPrev)
                    / (fNext - fPrev));
            // Don't overflow
            if (index > count - 1) index = count - 1;

            mList.setSelectionFromTop(index + mListOffset, 0);
        } else {
            int index = (int) (position * count);
            mList.setSelectionFromTop(index + mListOffset, 0);
            sectionIndex = -1;
        }

        if (sectionIndex >= 0) {
            String text = mSectionText = sections[sectionIndex].toString();
            mDrawOverlay = (text.length() != 1 || text.charAt(0) != ' ') &&
                    sectionIndex < sections.length;
        } else {
            mDrawOverlay = false;
        }
    }

    private void cancelFling() {
        // Cancel the list fling
        MotionEvent cancelFling = MotionEvent.obtain(0, 0, MotionEvent.ACTION_CANCEL, 0, 0, 0);
        mList.onTouchEvent(cancelFling);
        cancelFling.recycle();
    }

    @Override
    public boolean onTouchEvent(MotionEvent me) {
        if (me.getAction() == MotionEvent.ACTION_DOWN) {
            if (me.getX() > getWidth() - mThumbW
                    && me.getY() >= mThumbY
                    && me.getY() <= mThumbY + mThumbH) {

                mDragging = true;
                if (mListAdapter == null && mList != null) {
                    getSections();
                }

                cancelFling();
                return true;
            }
        } else if (me.getAction() == MotionEvent.ACTION_UP) {
            if (mDragging) {
                mDragging = false;
                final Handler handler = mHandler;
                handler.removeCallbacks(mScrollFade);
                handler.postDelayed(mScrollFade, 1000);
                return true;
            }
        } else if (me.getAction() == MotionEvent.ACTION_MOVE) {
            if (mDragging) {
                final int viewHeight = getHeight();
                mThumbY = (int) me.getY() - mThumbH + 10;
                if (mThumbY < 0) {
                    mThumbY = 0;
                } else if (mThumbY + mThumbH > viewHeight) {
                    mThumbY = viewHeight - mThumbH;
                }
                // If the previous scrollTo is still pending
                if (mScrollCompleted) {
                    scrollTo((float) mThumbY / (viewHeight - mThumbH));
                }
                return true;
            }
        }

        return super.onTouchEvent(me);
    }

    public class ScrollFade implements Runnable {

        long mStartTime;
        long mFadeDuration;
        boolean mStarted;

        void startFade() {
            mFadeDuration = FADE_DURATION;
            mStartTime = SystemClock.uptimeMillis();
            mStarted = true;
        }

        int getAlpha() {
            if (!mStarted) {
                return ALPHA_MAX;
            }
            int alpha;
            long now = SystemClock.uptimeMillis();
            if (now > mStartTime + mFadeDuration) {
                alpha = 0;
            } else {
                alpha = (int) (ALPHA_MAX - ((now - mStartTime) * ALPHA_MAX) / mFadeDuration);
            }
            return alpha;
        }

        public void run() {
            if (!mStarted) {
                startFade();
                invalidate();
            }

            if (getAlpha() > 0) {
                final int y = mThumbY;
                final int viewWidth = getWidth();
                invalidate(viewWidth - mThumbW, y, viewWidth, y + mThumbH);
            } else {
                mStarted = false;
                removeThumb();
            }
        }
    }

    /**
     * Call when the list's items have changed
     */
    public void listItemsChanged() {
        getSections();
    }
}

Demo实现的效果如下 下面来分析下代码实现的原理

Demo见

https://github.com/huanyi0723/MyListView/