先看下效果圖

Gif_20180425_103334.gif

在這里我們先分析下效果，左邊是一個按照字母排序的并有子列表，右邊是直接一個字母的排列，屏幕中間有一個顯示你點擊了右邊的那個字母的顯示。

在這里我們先去處理右邊的字母列表。我們先去自定義一個view，把26個字母和“#”放到一個數(shù)組里面，再用畫筆在ondraw()里面畫出來。

@Override

protected void onDraw(Canvas canvas) {

// 畫26個字母

int itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / mLetters.length;

for (int i = 0; i < mLetters.length; i++) {

// 知道每個字母的中心位置 1 字母的高度一半 2 字母高度一般+前面字符的高度

int letterCenterY = i * itemHeight + itemHeight / 2 + getPaddingTop();

// 基線，基于中心位置, 知道中心位置還不會基線，看一下之前的視頻

Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();

int dy = (int) ((fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom);

int baseLine = letterCenterY + dy;

// x 繪制在最中間 = 寬度/2 - 文字/2

int textWidth = (int) mPaint.measureText(mLetters[i]);

int x = getWidth() / 2 - textWidth / 2;

if (!isUp){

// 當(dāng)前字母 高亮 用兩個畫筆(最好) 改變顏色

if (mLetters[i].equals(mCurrentTouchLetter)) {

mPaint.setColor(Color.RED);

canvas.drawText(mLetters[i], x, baseLine, mPaint);

} else {

mPaint.setColor(Color.BLUE);

canvas.drawText(mLetters[i], x, baseLine, mPaint);

}

}else {

mPaint.setColor(Color.BLUE);

canvas.drawText(mLetters[i], x, baseLine, mPaint);

}

}

}

當(dāng)我們在這個字母列表上面滑動的時候，被點擊到的字母會變色，這就需要有兩個顏色的畫筆去分別畫不同的字母。

我們可以在onTouchEvent方法里面拿到按下和滑動的事件，在MotionEvent.ACTION_DOWN和MotionEvent.ACTION_MOVE的時候處理字母的變色。我們首先得那個我們點擊的是哪個字母，我們可以拿到當(dāng)前點擊位置的y方向的距離去除以每個字母的高度，然后取整就知道那個字母被點擊了，這時候調(diào)用invalidate方法去重新繪制字母列表，這樣就可以實現(xiàn)當(dāng)那個字母被點擊或者是滑動時被覆蓋的字母變色的效果。然后在這里我們寫一個回調(diào)，去讓頁面中間的那個textview知道如何去顯示那個字母被點擊了。

@Override

public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_DOWN:

case MotionEvent.ACTION_MOVE:

// 計算出當(dāng)前觸摸字母 獲取當(dāng)前的位置

float currentMoveY = event.getY();

// 位置 = currentMoveY / 字母高度 ， 通過位置獲取字母 優(yōu)化？

int itemHeight = (getHeight() - getPaddingTop() - getPaddingBottom()) / mLetters.length;

currentPosition = (int) (currentMoveY / itemHeight);

if (currentPosition < 0)

currentPosition = 0;

if (currentPosition > mLetters.length - 1)

currentPosition = mLetters.length - 1;

// 要判斷 ？

mCurrentTouchLetter = mLetters[currentPosition];

if (mListener != null) {

mListener.touch(mCurrentTouchLetter, true, currentPosition);

}

isUp = false;

// 重新繪制

invalidate();

break;

case MotionEvent.ACTION_UP:

if (mListener != null) {

mListener.touch(mCurrentTouchLetter, false, currentPosition);

}

isUp = true;

// 重新繪制

invalidate();

break;

}

return true;

}

private LetterTouchListener mListener;

public void setOnLetterTouchListener(LetterTouchListener listener) {

this.mListener = listener;

}

// 接口回掉其他View會不會使用？

public interface LetterTouchListener {

void touch(CharSequence letter, boolean isTouch,int currentPosition);

}

我們ManActivity的布局文件是這樣的

android:layout_width="match_parent"

android:layout_height="match_parent"

>

android:id="@+id/rv_letter"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/letter_tv"

android:layout_width="wrap_content"

android:layout_centerInParent="true"

android:text="A"

android:visibility="gone"

android:textSize="16sp"

android:textColor="#FF0000"

android:layout_height="wrap_content" />

android:id="@+id/letter_side_bar"

android:layout_width="wrap_content"

android:layout_alignParentRight="true"

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:layout_height="match_parent" />

在ManActivity里面我們給RecyclerView添加數(shù)據(jù)，先給RecyclerView添加字母列表，在RecyclerView的布局文件在添加一個子RecyclerView。

android:orientation="vertical"

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="wrap_content">

android:id="@+id/tv_text"

android:textSize="15sp"

android:background="#9999"

android:textColor="#fff"

android:layout_width="match_parent"

android:layout_height="50dp" />

android:id="@+id/rv_child"

android:layout_width="match_parent"

android:layout_height="wrap_content"/>

給子RecyclerView添加數(shù)據(jù)之后，在會掉里面，當(dāng)右邊的列表那個被惦記了，就將父RecyclerView的那個對應(yīng)位置的條目滾動到頂部，這樣效果就實現(xiàn)了

@Override

public void touch(CharSequence letter,boolean isTouch,int current) {

if(isTouch) {

mLetterTv.setVisibility(View.VISIBLE);

mLetterTv.setText(letter);

rvLetter.scrollToPosition(current);

//讓RecyclerView滾動到頂部

if (current != -1) {

rvLetter.scrollToPosition(current);

LinearLayoutManager mLayoutManager =

(LinearLayoutManager) rvLetter.getLayoutManager();

mLayoutManager.scrollToPositionWithOffset(current, 0);

}

}else{

mLetterTv.setVisibility(View.GONE);

}

}

總結(jié)

以上是生活随笔為你收集整理的html 字母列表通讯录,仿微信通讯录字母排序列表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。