在通信目錄中大家經(jīng)?？吹酵ㄟ^字母的滑動，選擇存儲名單中首字母相同的顯示在當(dāng)前，慢慢在學(xué)習(xí)，慢慢在積累，下面就是效果展示圖片：
LetterSlide.gif
實現(xiàn)思路：
1、首先實現(xiàn)最右邊的字母列表自定義控件。
2、在上述自定義控件中重寫onTouchEvent(MotionEvent event)事件，確定點擊或者滑動所選擇的是那個字母？
3、在該自定義控件中書寫選擇字母的回掉接口，在布局中通過圖片中間所示的圓形來顯示？
針對上圖所示的效果圖，我們首先自定義最右邊的列表展示控件：
1、自定義LetterSlide控件：
public class LetterSlide extends View {
private int mHightLightColor= Color.RED;
private int mNormalColor=Color.GRAY;
private int mLetterSize=16;
private Paint mHightLightPaint;
private Paint mNormalPaint;
private String[] letters={"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","#"};
private String mCurrentLetter;
private float letterHeight;
public LetterSlide(Context context) {
this(context,null);
}
public LetterSlide(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public LetterSlide(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.LetterSlide);
mHightLightColor=array.getColor(R.styleable.LetterSlide_highLightColor,mHightLightColor);
mNormalColor=array.getColor(R.styleable.LetterSlide_normalColor,mNormalColor);
mLetterSize= (int) array.getDimension(R.styleable.LetterSlide_letterSize,mLetterSize);
initPaint(context);
}
private void initPaint(Context context) {
mHightLightPaint=new Paint();
mHightLightPaint.setAntiAlias(true);
mHightLightPaint.setTextSize(Densityuitl.dip2px(context,mLetterSize));
mHightLightPaint.setColor(mHightLightColor);
mNormalPaint=new Paint();
mNormalPaint.setAntiAlias(true);
mNormalPaint.setTextSize(Densityuitl.dip2px(context,mLetterSize));
mNormalPaint.setColor(mNormalColor);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
/*計算寬度*/
int textWidth = (int) mHightLightPaint.measureText("A");
int width=getPaddingLeft()+getPaddingRight()+ textWidth;
int height=MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(width,height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/*計算 一個字母的高度*/
letterHeight = ((float)getHeight()/letters.length);
for (int i = 0; i < letters.length; i++) {
String letter = letters[i];
/*字體的寬度*/
float textWidth = mNormalPaint.measureText(letter);
/*內(nèi)容的寬度*/
float contentWidth = getWidth()-getPaddingRight()-getPaddingLeft();
/*計算從View坐標(biāo)系的X軸方向開始畫文字*/
float x=getPaddingLeft()+(contentWidth-textWidth)/2;
/*計算基線*/
Paint.FontMetrics fontMetrics = mNormalPaint.getFontMetrics();
float dy = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
float baseLine = letterHeight / 2 + (letterHeight * i) + dy;
if (!letter.equals(mCurrentLetter)){
canvas.drawText(letter,x,baseLine,mNormalPaint);
}else{
canvas.drawText(letter,x,baseLine,mHightLightPaint);
}
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
/*計算當(dāng)前滑動選中的字母是那個*/
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
float y = event.getY();
int v = (int) (y / letterHeight);
if (v<0){
v=0;
}else if (v>letters.length-1){
v=letters.length-1;
}
if (letters[v].equals(mCurrentLetter)){
return true;
}
mCurrentLetter=letters[v];
if (listener!=null){
listener.onListener(mCurrentLetter,false);
}
break;
case MotionEvent.ACTION_UP:
if (listener!=null){
listener.onListener(mCurrentLetter,true);
}
break;
}
/*進行重繪*/
invalidate();
// return super.onTouchEvent(event);
return true;
}
private OnLetterSlideListener listener;
public interface OnLetterSlideListener{
void onListener(String letter,boolean upFlag);
}
public void setListener(OnLetterSlideListener listener) {
this.listener = listener;
}
}
2、在Activity中畫布局：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.empsun.chenxin.letterslide.MainActivity">
<com.empsun.chenxin.letterslide.LetterSlide
android:id="@+id/letter_slide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:highLightColor="#f00"
app:normalColor="#21e0f9"
app:letterSize="6sp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:background="#00ffffff"
android:layout_alignParentRight="true"
/>
<LinearLayout
android:visibility="gone"
android:id="@+id/chooice_layout"
android:layout_centerInParent="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="@drawable/circle_bg"
android:gravity="center"
>
<TextView
android:id="@+id/chooice_letter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#34e6fa"
android:textSize="20sp"
/>
</LinearLayout>
</RelativeLayout>
3、在Activity中進行代碼處理：設(shè)置監(jiān)聽、設(shè)置選中字幕顯示處理。
public class MainActivity extends AppCompatActivity implements LetterSlide.OnLetterSlideListener {
private LetterSlide letter_slide;
private TextView chooice_letter;
private LinearLayout chooice_layout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
letter_slide = (LetterSlide) findViewById(R.id.letter_slide);
letter_slide.setListener(this);
chooice_letter = (TextView) findViewById(R.id.chooice_letter);
chooice_layout = (LinearLayout) findViewById(R.id.chooice_layout);
}
@Override
public void onListener(String letter, boolean upFlag) {
if (!upFlag){
chooice_layout.setVisibility(View.VISIBLE);
chooice_letter.setText(letter);
}else{
chooice_layout.setVisibility(View.GONE);
}
}
}
綜上代碼就可以實現(xiàn)如圖所示的效果了?。。?/p>
