28自定义View 模仿联系人字母侧栏

这里写图片描述

这里写图片描述

自定义View
LetterView.java

package com.qf.sxy.customview02;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.TextView;

/**
 * Created by sxy on 2016/9/29.
 */
public class LetterView extends View {

    // 索引的字母
    public  static final String[] LETTES ={"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 Paint mTextPaint;
    //指定一个位置  不在索引范围内
    private int pressedPosition = -1;

    //获取展示的View
    private TextView mSelectView;
    public void setSelectTextView(TextView tv){
        this.mSelectView = tv;
    }

    public LetterView(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化画笔
        initPaint();
    }

    private void initPaint() {
        mTextPaint = new Paint();
        mTextPaint.setAntiAlias(true);
        mTextPaint.setColor(Color.RED);
        mTextPaint.setTextSize(30);
    }

    public LetterView(Context context) {
        this(context,null);
    }




    /**
     * 进行绘制
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //获取 宽和高
        int height = getHeight();
        int width = getWidth();
        //字符串序列的长度
        int lettersLength = LETTES.length;
        //获取每个字符的高度
        int singleHeight = height/lettersLength;

        //开始绘制
        for(int i=0;i<lettersLength;i++){
            //获取x的位置
            int xPos = (int)(width/2-mTextPaint.measureText(LETTES[i])/2);
            //获取Y的位置
            int yPos = singleHeight+i*singleHeight;
            //设置文字颜色
            if(pressedPosition == i){
                mTextPaint.setColor(Color.BLUE);

            }else{
                mTextPaint.setColor(Color.BLACK);
            }
            //绘制文本
            canvas.drawText(LETTES[i],xPos,yPos,mTextPaint);
        }
    }

    /**
     * 触摸事件
     *
     * true  消费事件  false 不处理
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN://按下
            case MotionEvent.ACTION_MOVE://移动
                //获取手指的Y位置
                float eventY = event.getY();
                //每个字母单独的高度
                int singleHeight = getMeasuredHeight()/LETTES.length;
                //获取你当前索引位置
                pressedPosition = (int)(eventY/singleHeight);
                //显示提示的VIew  设置内容
                if(mSelectView!=null){
                    if(pressedPosition>=0&&pressedPosition<LETTES.length){
                        mSelectView.setVisibility(View.VISIBLE);
                        mSelectView.setText(LETTES[pressedPosition]);
                    }
                }


                invalidate();//刷新

                break;
            case  MotionEvent.ACTION_UP://抬起
                //还原当前位置
                pressedPosition = -1;
                //隐藏提示的View
                if (mSelectView!=null){
                    mSelectView.setVisibility(View.GONE);
                }


                invalidate();//刷新

                break;
        }


        return true;
    }
}

MainActivity.java

package com.qf.sxy.customview02;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {


    private TextView tv;
    private LetterView letterView;

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

        tv = ((TextView) findViewById(R.id.select_tv));
        letterView = ((LetterView) findViewById(R.id.letterView));

        //传递展示的View
        letterView.setSelectTextView(tv);
    }
}

activity_main.xml

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.qf.sxy.customview02.MainActivity">

    <com.qf.sxy.customview02.LetterView
        android:id="@+id/letterView"
        android:layout_width="40dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
      />

    <TextView
        android:id="@+id/select_tv"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:background="#00ff00"
        android:textSize="30sp"
        android:visibility="gone"
        android:text="A"
        />
</RelativeLayout>

posted on 2016-09-30 11:38  木鱼哥  阅读(119)  评论(0编辑  收藏  举报

导航