TextView【练习】之自定义九键与全键盘

效果图

全键盘： 六排LinearLayout+每排6个TextView则完成布局。
九键： 三排LinearLayout+每排3个自定义的NineKeyboardLayout
自定义NineKeyboardLayout:
一个有两个TextView的Layout，称为NineTextViewLayout，一行显示数字，一行显示字母。
一个显示点击上下左右的包含ImageView的Layout作为PopWindow显示，称为MultiKeySelectPop.
主要思路：
NineTextViewLayout用于显示九键内容。
MultiKeySelectPop显示用户按下上下左右键的选择字母。
主要技术点：
在MutilKeySelectPop的字母位置显示上，主要测量内圆与外圆的大小，并确定其余字母的位置。

全键盘：

    <LinearLayout
        android:id="@+id/keyboard_layout"
        android:layout_width="@dimen/dp_200"
        android:layout_height="@dimen/dp_200"
        android:layout_marginTop="@dimen/dp_91"
        android:orientation="vertical"
        app:layout_constraintTop_toTopOf="parent">

        <include
            layout="@layout/include_search_keyboard"/>

        <include
            layout="@layout/include_search_keyboard"/>

        <include
            layout="@layout/include_search_keyboard"/>

        <include
            layout="@layout/include_search_keyboard"/>

        <include
            layout="@layout/include_search_keyboard"/>

        <include
            layout="@layout/include_search_keyboard"/>

    </LinearLayout>

include_search_keyboard.xml

<?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="@dimen/dp_29"
    android:gravity="center"
    android:orientation="horizontal"
   >

    <TextView
        android:layout_width="88px"
        android:layout_height="88px"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:text="A"
        android:textColor="@drawable/def_tv_color_selector"
        android:textSize="36px"

        />

    <TextView
        android:layout_width="88px"
        android:layout_height="88px"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:text="B"
        android:textColor="@drawable/def_tv_color_selector"
        android:textSize="36px"
        />

    <TextView
        android:layout_width="88px"
        android:layout_height="88px"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:textColor="@drawable/def_tv_color_selector"
        android:gravity="center"
        android:text="C"
        android:textSize="36px"
        />

    <TextView
        android:layout_width="88px"
        android:layout_height="88px"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:text="D"
        android:textColor="@drawable/def_tv_color_selector"
        android:textSize="36px"
        />

    <TextView
        android:layout_width="88px"
        android:layout_height="88px"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:text="E"
        android:textColor="@drawable/def_tv_color_selector"
        android:textSize="36px"
        />

    <TextView
        android:layout_width="88px"
        android:layout_height="88px"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:text="F"
        android:textColor="@drawable/def_tv_color_selector"
        android:textSize="36px"
        />
</LinearLayout>

九键：nine_keybord_button.xml

<LinearLayout
        android:id="@+id/nine_keyboard_layout"
        android:layout_width="@dimen/dp_200"
        android:layout_height="@dimen/dp_200"
        android:layout_marginTop="@dimen/dp_91"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone"
        app:layout_constraintTop_toTopOf="parent">

        <include
            layout="@layout/include_search_nine_keyboard"
            />

        <include
            layout="@layout/include_search_nine_keyboard"
            />

        <include
            layout="@layout/include_search_nine_keyboard"
            />

    </LinearLayout>

include_search_nine_keyboard.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:id="@+id/nine_tab"
    android:gravity="center">


    <com.yoostar.huayuVOD.widget.NineKeyboardButton
        android:layout_width="@dimen/dp_46"
        android:layout_height="@dimen/dp_46"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:orientation="vertical"
        />


    <com.yoostar.huayuVOD.widget.NineKeyboardButton
        android:layout_width="@dimen/dp_46"
        android:layout_height="@dimen/dp_46"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:orientation="vertical"
        />

    <com.yoostar.huayuVOD.widget.NineKeyboardButton
        android:layout_width="@dimen/dp_46"
        android:layout_height="@dimen/dp_46"
        android:background="@drawable/search_keyboard_selector"
        android:focusable="true"
        android:gravity="center"
        android:orientation="vertical"
        />
</LinearLayout>

NineKeyboardButton.java

package com.yoostar.huayuVOD.widget;


import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Typeface;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.Gravity;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.yoostar.huayuVOD.R;


public class NineKeyboardButton extends LinearLayout {
    private TextView mNumText;
    private TextView mCharText;
    private Context mContext;
    private PopupWindow mPopWindow;
    private String VALUE_ENTER;
    private String VALUE_UP;
    private String VALUE_LEFT;
    private String VALUE_RIGHT;
    private String VALUE_DOWN;
    private final int ONLY_ONE_TEXT_VIEW = -99;
    private ImageView imageView;
    private static final String TAG = "NineKeyboardButton";
    private String onKeyResult = "";

    public void setNumText(String text) {
        mNumText.setText(text);
        mNumText.setVisibility(View.VISIBLE);
    }

    public void setCharText(String text) {
        mCharText.setText(text);
        mCharText.setVisibility(View.VISIBLE);
        if (text ==" "){
            mCharText.setVisibility(GONE);
            mNumText.setGravity(Gravity.CENTER);
        }
    }

    public NineKeyboardButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        LayoutInflater.from(context).inflate(R.layout.nine_keybord_button, this, true);
        mCharText = findViewById(R.id.chartv);
        mNumText = findViewById(R.id.numtv);
    }

    private void setFocused() {
        Log.i(TAG, "setFocused: ");
        mNumText.setTextColor(getResources().getColor(R.color.color_black));
        mCharText.setTextColor(getResources().getColor(R.color.color_black));
    }

    private void setUnfocused() {
        Log.i(TAG, "setUnfocused: ");
        mNumText.setTextColor(Color.parseColor("#82A2C7"));
        mCharText.setTextColor(getResources().getColor(R.color.color_white));
    }


    public void onFocusChange(boolean hasFocus) {
        if (hasFocus) {
            setFocused();
        } else {
            setUnfocused();
        }
    }


    public void showMultiSelectPop() {
        if (mCharText.getText().toString() == " ") {
            onKeyDown(ONLY_ONE_TEXT_VIEW);
            return;
        }
        else {
            showPopupWindow();
        }
    }

    private onKeyListener mOnKeyListener;

    public interface onKeyListener {
        void selectKey(String key);
    }

    public void setMultiKeySelectListener(onKeyListener listener) {
        mOnKeyListener = listener;
    }

    private char[] letter;

    private void showPopupWindow() {
        String text = mNumText.getText().toString() + mCharText.getText();
        letter = text.toCharArray();

        View contentView = LayoutInflater.from(mContext).inflate(R.layout.pop_prompt, null);
        LinearLayout selectPopupLv = contentView.findViewById(R.id.select_popup_ll);
        selectPopupLv.setFocusable(true);
        selectPopupLv.requestFocus();
        selectPopupLv.setFocusableInTouchMode(true);
        mPopWindow = new PopupWindow(contentView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, true);

        selectPopupLv.setOnKeyListener(new OnKeyListener() {
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if (event.getAction() == KeyEvent.ACTION_DOWN) {
                    onKeyDown(keyCode);
                }
                return false;
            }
        });
        imageView = contentView.findViewById(R.id.image_view);
        mPopWindow.showAsDropDown(this, 0, -getHeight());
        drawImage(imageView, R.mipmap.disc, letter);
    }

    private void onKeyDown(int keyCode) {
        switch (keyCode) {
            case KeyEvent.KEYCODE_DPAD_CENTER: {
                onKeyResult = VALUE_ENTER;
                Log.i(TAG, "onKeyDown: " + VALUE_ENTER);
                drawImage(imageView, R.mipmap.disc_middle, letter);
                break;
            }
            case KeyEvent.KEYCODE_DPAD_LEFT: {
                onKeyResult = VALUE_LEFT;
                drawImage(imageView, R.mipmap.disc_left, letter);
                break;
            }
            case KeyEvent.KEYCODE_DPAD_UP: {
                onKeyResult = VALUE_UP;
                drawImage(imageView, R.mipmap.disc_up, letter);
                break;
            }
            case KeyEvent.KEYCODE_DPAD_RIGHT: {
                onKeyResult = VALUE_RIGHT;
                drawImage(imageView, R.mipmap.disc_right, letter);
                break;
            }
            case KeyEvent.KEYCODE_DPAD_DOWN: {
                onKeyResult = VALUE_DOWN;
                drawImage(imageView, R.mipmap.disc_down, letter);
                break;
            }
            case ONLY_ONE_TEXT_VIEW: {
                onKeyResult = mNumText.getText().toString();
                break;
            }
        }
        mOnKeyListener.selectKey(onKeyResult);
    }

    public void closePopupWindow() {
        if (mPopWindow != null) {
            mPopWindow.dismiss();
            mPopWindow = null;
        }
    }

    private void drawImage(ImageView imageView, int srcImageId, char[] letter) {
        imageView.setBackgroundDrawable(createDrawable(srcImageId, letter));
    }


    private Drawable createDrawable(int scrImageId, char[] letter) {
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), scrImageId);
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        Bitmap imgTemp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(imgTemp);
        Paint paint = new Paint(); // 建立画笔
        paint.setDither(true);
        paint.setFilterBitmap(true);
        Rect src = new Rect(0, 0, width, height);
        Rect dst = new Rect(0, 0, width, height);
        Rect rect = new Rect();
        canvas.drawBitmap(bitmap, src, dst, paint);

        paint.getTextBounds(String.valueOf(letter[0]), 0, String.valueOf(letter[0]).length(), rect);//将内容的长和宽。添加到rect矩形中
        float letterWidth = rect.width();//获取字体宽
        float letterHeight = rect.height();

        Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DEV_KERN_TEXT_FLAG);
        Log.i(TAG, "createDrawable: " + textPaint.getTextSize());
        textPaint.setTextSize(50.0f);
        textPaint.setTypeface(Typeface.DEFAULT_BOLD); // 采用默认的宽度
        textPaint.setColor(Color.WHITE);

        switch (letter.length) {
            case 2: {
                canvas.drawText(String.valueOf(letter[0]), width / 2 - letterWidth * 2, height / 2 + letterHeight, textPaint);//中间
                canvas.drawText(String.valueOf(letter[1]), width / 6 - letterWidth * 2, height / 2 + letterHeight, textPaint);//左
                VALUE_ENTER = String.valueOf(letter[0]);
                VALUE_LEFT = String.valueOf(letter[1]);
                break;
            }
            case 3: {
                canvas.drawText(String.valueOf(letter[0]), width / 2 - letterWidth * 2, height / 2 + letterHeight, textPaint);//中间
                canvas.drawText(String.valueOf(letter[1]), width / 6 - letterWidth * 2, height / 2 + letterHeight, textPaint);//左
                canvas.drawText(String.valueOf(letter[2]), width / 2 - letterWidth * 2, height / 6 + letterHeight, textPaint);//上
                VALUE_ENTER = String.valueOf(letter[0]);
                VALUE_LEFT = String.valueOf(letter[1]);
                VALUE_UP = String.valueOf(letter[2]);
                break;
            }
            case 4: {
                canvas.drawText(String.valueOf(letter[0]), width / 2 - letterWidth * 2, height / 2 + letterHeight, textPaint);//中间
                canvas.drawText(String.valueOf(letter[1]), width / 6 - letterWidth * 2, height / 2 + letterHeight, textPaint);//左
                canvas.drawText(String.valueOf(letter[2]), width / 2 - letterWidth * 2, height / 6 + letterHeight, textPaint);//上
                canvas.drawText(String.valueOf(letter[3]), width * 5 / 6 - letterWidth * 2, height / 2 + letterHeight, textPaint);//右
                VALUE_ENTER = String.valueOf(letter[0]);
                VALUE_LEFT = String.valueOf(letter[1]);
                VALUE_UP = String.valueOf(letter[2]);
                VALUE_RIGHT = String.valueOf(letter[3]);
                break;
            }
            case 5: {
                canvas.drawText(String.valueOf(letter[0]), width / 2 - letterWidth * 2, height / 2 + letterHeight, textPaint);//中间
                canvas.drawText(String.valueOf(letter[1]), width / 6 - letterWidth * 2, height / 2 + letterHeight, textPaint);//左
                canvas.drawText(String.valueOf(letter[2]), width / 2 - letterWidth * 2, height / 6 + letterHeight, textPaint);//上
                canvas.drawText(String.valueOf(letter[3]), width * 5 / 6 - letterWidth * 2, height / 2 + letterHeight, textPaint);//右
                canvas.drawText(String.valueOf(letter[4]), width / 2 - letterWidth * 2, height * 5 / 6 + letterHeight, textPaint);//下
                VALUE_ENTER = String.valueOf(letter[0]);
                VALUE_LEFT = String.valueOf(letter[1]);
                VALUE_UP = String.valueOf(letter[2]);
                VALUE_RIGHT = String.valueOf(letter[3]);
                VALUE_DOWN = String.valueOf(letter[4]);
                break;
            }
        }
        canvas.save();
        canvas.restore();
        return new BitmapDrawable(getResources(), imgTemp);
    }
}

MainActivity.java

   package com.example.keyboarddraw;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
import widget.NineKeyboardButton;

public class MainActivity extends AppCompatActivity {
    @BindView(R.id.keyboard_layout)
    LinearLayout mKeyboardLayout;
    @BindView(R.id.nine_tab)
    LinearLayout mNineTab;
    @BindView(R.id.nine_keyboard_layout)
    LinearLayout mNineKeyboardLayout;
    private final static int KEY_BOARD_LEN = 6;

    private final static String[] KEY_BOARD = {
            "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", "0", "1", "2", "3",
            "4", "5", "6", "7", "8", "9"
    };
    private final static String[] NINE_KEY_BOARD = {
            " ", "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXY"
    };
    private final static String[] NINE_NUM = {
            "1", "2", "3", "4", "5", "6", "7", "8", "9"
    };
    @BindView(R.id.btn_turn)
    Button mBtnTurn;
    private boolean isSwitch;
    private static final String TAG = "MainActivity";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        isSwitch = true;
        initKeyboard();
        initNineKeyBoard();
    }

    private View.OnClickListener mKeyOnClick = new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    };

    private void initKeyboard() {
        LinearLayout rootKeyBoardLayout = findViewById(R.id.keyboard_layout);
        for (int i = 0; i < KEY_BOARD_LEN; i++) {
            LinearLayout childKeyBoardLayout = (LinearLayout) rootKeyBoardLayout.getChildAt(i);
            for (int j = 0; j < KEY_BOARD_LEN; j++) {
                TextView keyTextView = (TextView) childKeyBoardLayout.getChildAt(j);
                keyTextView.setText(KEY_BOARD[i * KEY_BOARD_LEN + j]);
                keyTextView.setOnClickListener(mKeyOnClick);
            }
        }
    }

    private void initNineKeyBoard() {
        for (int i = 0; i < mNineKeyboardLayout.getChildCount(); i++) {
            LinearLayout row = (LinearLayout) mNineKeyboardLayout.getChildAt(i);
            for (int j = 0; j < row.getChildCount(); j++) {
                final NineKeyboardButton nineKeyboardButton = (NineKeyboardButton) row.getChildAt(j);
                nineKeyboardButton.setNumText(NINE_NUM[i * row.getChildCount() + j]);
                nineKeyboardButton.setCharText(NINE_KEY_BOARD[i * row.getChildCount() + j]);
                nineKeyboardButton.setSingleKeyListener(new NineKeyboardButton.onKeyListener() {
                    @Override
                    public void setKey(String key) {
                        if (key != "" && key != null) {
                        }
                    }
                });
                nineKeyboardButton.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        nineKeyboardButton.showMultiPop();
                    }
                });
                nineKeyboardButton.setOnFocusChangeListener(new View.OnFocusChangeListener() {
                    @Override
                    public void onFocusChange(View v, boolean hasFocus) {
                        nineKeyboardButton.onFocusChange(hasFocus);
                    }
                });
            }
        }
    }

    @OnClick(R.id.btn_turn)
    public void onViewClicked(View view) {
        switch (view.getId()) {
            case R.id.btn_turn:
                Log.i(TAG, "onViewClicked: isSwitch: " + isSwitch);
                if (isSwitch) {
                    mKeyboardLayout.setVisibility(View.GONE);
                    mNineKeyboardLayout.setVisibility(View.VISIBLE);
                    mBtnTurn.setText("点击切换全键");
                } else {
                    mKeyboardLayout.setVisibility(View.VISIBLE);
                    mNineKeyboardLayout.setVisibility(View.GONE);
                    mBtnTurn.setText("点击切换九键");
                }
                isSwitch = !isSwitch;
                break;
            default:
                break;
        }
    }
}

tv_focus_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_black" android:state_pressed="true"/>
    <item android:color="@color/color_black" android:state_focused="false" android:state_selected="true"/>
    <item android:color="@color/color_black" android:state_focused="true"/>
    <item android:color="@color/color_write"/>
</selector>

nine_keyboard_tv_focus_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_black" android:state_pressed="true"/>
    <item android:color="@color/color_black" android:state_focused="false" android:state_selected="true"/>
    <item android:color="@color/color_black" android:state_focused="true"/>
    <item android:color="#82A2C7"/>

</selector>

keyboard_bg_select.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/keyboard_bg_sel" android:state_pressed="true" />
    <item android:drawable="@drawable/keyboard_bg_sel" android:state_focused="true" />
    <item android:drawable="@drawable/keyboard_bg_sel" android:state_focused="false" android:state_selected="true" />
    <item android:drawable="@drawable/keyboard_bg" />
</selector>

keyboard_bg_sel.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="@color/color_write"/>
    <size
        android:width="@dimen/d80"
        android:height="@dimen/d80"/>
</shape>

keyboard_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="@color/full_transparent"/>
    <size
        android:width="@dimen/d80"
        android:height="@dimen/d80"/>
</shape>

ic_launcher_background.xml

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="108dp"
    android:height="108dp"
    android:viewportHeight="108"
    android:viewportWidth="108">
    <path
        android:fillColor="#26A69A"
        android:pathData="M0,0h108v108h-108z"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M9,0L9,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,0L19,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M29,0L29,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M39,0L39,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M49,0L49,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M59,0L59,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M69,0L69,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M79,0L79,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M89,0L89,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M99,0L99,108"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,9L108,9"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,19L108,19"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,29L108,29"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,39L108,39"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,49L108,49"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,59L108,59"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,69L108,69"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,79L108,79"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,89L108,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M0,99L108,99"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,29L89,29"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,39L89,39"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,49L89,49"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,59L89,59"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,69L89,69"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M19,79L89,79"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M29,19L29,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M39,19L39,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M49,19L49,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M59,19L59,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M69,19L69,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
    <path
        android:fillColor="#00000000"
        android:pathData="M79,19L79,89"
        android:strokeColor="#33FFFFFF"
        android:strokeWidth="0.8"/>
</vector>

color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="color_write">#FFFFFF</color>
    <color name="color_black">#000000</color>
    <color name="full_transparent">#00FFFFFF</color>

</resources>

图片就是这种，点击出现阴影的交替图片。