In Android development, we often encounter the UI layout with pictures in the top left and bottom right of TextView, and each picture needs to do corresponding logical operations after clicking. In this case, we first think of using linear layout or relative layout to layout, then setting the id for each picture, then getting the corresponding control in the code, and finally setting the corresponding click event. This is the most common and common practice, and is relatively simple and easy to understand. But the disadvantage of this writing is that the code in the XML layout file is bulky and has poor readability.

Recently, I am doing a similar project with Jingdong Mall, which has many similar layout. Because I have strong obsessive-compulsive disorder, I search on the Internet, plus my understanding of TextView control. Decide to customize a simple UI layout and a more powerful TextView.

Everyone knows that there are four attributes in TextView: drawableLeft=","drawableTop=","drawableRight=","drawableBottom=". That is to say, we can add pictures to the top left and bottom right of TextView. Then the idea of Drawable TextView is to accurately calculate the click area occupied by the top left and bottom right four pictures in the layout. If the click area is clicked, the corresponding logical operation is done through interface callback. Okay, go straight to the code:

1: Customize Drawable TextView

/**
* Created by salmonzhang on 2017/7/11
* Customize a TextView to implement left-right click monitoring
*/
public class DrawableTextView extends android.support.v7.widget.AppCompatTextView {
private DrawableRightClickListener mDrawableRightClickListener;
private DrawableLeftClickListener mDrawableLeftClickListener;
final int DRAWABLE_LEFT = 0;//Left picture
final int DRAWABLE_TOP = 1;//Picture above
final int DRAWABLE_RIGHT = 2;//Right picture
final int DRAWABLE_BOTTOM = 3;//The following picture
public DrawableTextView(Context context) {
    this(context,null);
}
public DrawableTextView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs,0);
}
public DrawableTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}
//Define an interface to listen on the right
public interface DrawableRightClickListener{
    void onDrawableRightClickListener(View view);
}
//Define an interface to listen on the left
public interface DrawableLeftClickListener{
    void onDrawableLeftClickListener(View view);
}
//Define a set method for right listening
public void setDrawableRightClickListener(DrawableRightClickListener listener) {
    this.mDrawableRightClickListener = listener;
}
//Define a set method for left listening
public void setDrawableLeftClickListener(DrawableLeftClickListener listener) {
    this.mDrawableLeftClickListener = listener;
}
//Define a right-hand back listening method
public DrawableRightClickListener getDrawableRightClick() {
    return mDrawableRightClickListener;
}
//Define a method to return to listening on the left
public DrawableLeftClickListener getDrawableLeftClick() {
    return mDrawableLeftClickListener;
}

//Rewriting onTouchEvent Method
@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            if (mDrawableRightClickListener != null) {
                Drawable drawableRight = getCompoundDrawables()[DRAWABLE_RIGHT] ;
                //The judgment is based on obtaining that the x value of the click area relative to the screen is greater than the rightmost boundary of the control minus the width of the right control.
                if (drawableRight != null && event.getRawX() >= (getRight() - drawableRight.getBounds().width())) {
                    mDrawableRightClickListener.onDrawableRightClickListener(this);
                    return true ;//The return value must be true, otherwise it cannot respond.
                }
            }
            if (mDrawableLeftClickListener != null) {
                Drawable drawableLeft = getCompoundDrawables()[DRAWABLE_LEFT] ;
                //The judgment is based on the fact that the x value of the click area relative to the screen is less than the leftmost boundary of the control plus the width of the left control.
                if (drawableLeft != null && event.getRawX() <= (getLeft() + drawableLeft.getBounds().width())) {
                    mDrawableLeftClickListener.onDrawableLeftClickListener(this) ;
                    return true ;
                }
            }
            break;
    }
    return super.onTouchEvent(event);
    }
}

2: Use in XML

<com.example.jdstore.view.DrawableTextView
    android:id="@+id/dtv"
    android:drawableLeft="@mipmap/back"
    android:drawableRight="@mipmap/next"
    android:text="TextView text"
    />

3: Use in java code

    //Response to Click Events on the Right Picture
    mDtv.setDrawableRightClickListener(new DrawableTextView.DrawableRightClickListener() {
        @Override
        public void onDrawableRightClickListener(View view) {
            //Here execute the corresponding logic executed after the right control clicks
        }
    });
    //Response to Click Events on the Left Picture
    mDtv.setDrawableLeftClickListener(new DrawableTextView.DrawableLeftClickListener() {
        @Override
        public void onDrawableLeftClickListener(View view) {
            //Here execute the corresponding logic executed after the left control clicks
        }
    });

This article has written the listening code on the left and right sides, because these two situations are relatively common, but also used more, you can learn from the left and right two cases to try to write up and down the listening code. All right, that's all for this article. If there are any shortcomings, please give us some advice.