Android custom controls to achieve telescope effect

What Android custom controls want to talk about today is telescope effect, so what is telescope effect? We might as well take a look at the moving picture below. After reading it, I believe you will have a certain understanding.

1. Shader

For this effect, it is actually very simple to implement, but we will use the shader in 3D software, which is used to color blank graphics. For those who have used PS, I believe everyone knows that there is a seal tool. The seal style can be image, color, gradient, etc. In Android, the effect of shader is actually similar to him.

public Shader setShader(Shader shader)

The above is the special function of shader and the function in brush paint. We will use bitmapshader today, that is, picture filling. Its basic usage is as follows:

public BitmapShader(Bitmap bitmap,TileMode tileX,TileMode tileY)

Tilex is used to specify the repetition policy used when the x-axis exceeds the size of a single picture

Tile is used to specify the repetition policy used when the y-axis exceeds the size of a single picture

There are three values for these two values, namely:

Tilemode.clamp: fill the excess space with edge color. Clamp is to fill the x-axis edge color with the x-axis, fill the y-axis edge color with the y-axis, and continue to fill the XY non picture intersection area with the y-axis color. (it is estimated that the blogger intentionally fills the right edge of the cat with black and the Y edge with red. The framed place is the original picture)

Tilemode. Repeat: repeat the original image to fill the excess space. In fact, this mode is best understood as copy and paste. The blank area with insufficient x fills the original image, and the blank area with insufficient y also fills the original image.

Tilemode. Mirror: use the image in mirror mode repeatedly to fill the excess space. Some friends may not understand the mirror mode. In fact, the mirror mode is to flip the image like a mirror, as shown in the following figure:

2. Realization of telescope effect

The principle has been analyzed clearly. Then, we will realize the telescope effect at the beginning. First, it is a user-defined control. After all, this column is a user-defined control. Basically, this step is indispensable for each article. The code is as follows:

public class BitmapShaderView extends View {
 private Paint paint;//画笔工具
 private Bitmap bgBitmap,bitmap;//隐藏图像以及原图像
 private int mX=-1,mY=-1;//捕获手指的位置坐标
 public BitmapShaderView(Context context) {
  super(context);
 }

 public BitmapShaderView(Context context,@Nullable AttributeSet attrs) {
  super(context,attrs);
  this.paint=new Paint();//初始化画笔工具
  this.bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.background);//获取原图像
 }

 public BitmapShaderView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
  super(context,attrs,defStyleAttr);
 }
}

It should be understood that there will be no more details here. Next, we need to capture the position of the finger pressing, moving and leaving the screen, that is, rewrite the ontouchevent() function:

public boolean onTouchEvent(MotionEvent event) {
 switch (event.getAction()){
  case MotionEvent.ACTION_DOWN://手指按下事件
   this.mX=(int)event.getX();
   this.mY=(int)event.getY();
   postInvalidate();//重绘
   return true;
  case MotionEvent.ACTION_MOVE://手指移动事件
   this.mX=(int)event.getX();
   this.mY=(int)event.getY();
   break;
  case MotionEvent.ACTION_UP://手指抬起
  case MotionEvent.ACTION_CANCEL://手指离开事件
   this.mX=-1;
   this.mY=-1;
   break;

 }
 postInvalidate();//重绘
 return super.onTouchEvent(event);
}

The coordinates of moving and pressing the finger are captured here, so that the position of the telescope can be located. When the finger is raised, the telescope effect will disappear, so their coordinates must be set to - 1. Finally, the drawing code is implemented by ondraw():

protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if(this.bgBitmap==null){
   this.bgBitmap=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);//创建一个新空白位图
  Canvas canvasBg=new Canvas(this.bgBitmap);
  //然后对背景图拉升后，画到上面的位图中
  canvasBg.drawBitmap(this.bitmap,null,new Rect(0,getWidth(),getHeight()),this.paint);
 }
 if(this.mX!=-1 && this.mY!=-1){
  //填充模式为上面讲的第二种，就是复制粘贴的填充模式，但这里不会执行
  //因为我们上面强制设置了图片的大小为整个屏幕，所以屏幕没有空白区域
  this.paint.setShader(new BitmapShader(this.bgBitmap,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT));
   canvas.drawCircle(this.mX,this.mY,200,this.paint);
 }
}

Here, we first create a blank bitmap, then pull up the original image and draw it into the bitmap. Then, according to the filling mode of the brush, it is useless because we pull up the image and there is no blank area. Finally, we draw the telescope effect into the mobile phone interface according to the finger coordinates, In this way, the custom control of telescope effect is perfectly realized.

GitHub source code download address: click download

The above is the whole content of this article. I hope it will help you in your study, and I hope you will support us a lot.