Android custom controls to achieve edge-bump card effect _android

Objective

Recently did a project when the effect of a card, because I think the use of pictures to do can be a bad adaptation effect, coupled with their own custom view knowledge is relatively weak, so want to try a custom view to achieve. But because of their weak knowledge, at first I thought to use the rectangle to set the edge implementation, the back of a friend to guide me, here to thank him.

Implementation analysis

The picture above is actually the same as the ordinary linearlayout,relativelayout, but the upper and lower sides are more similar to the semicircular sawtooth shape. Then just have to deal with different places. You can make this effect by drawing a small white circle on the top and bottom of the two lines.

If the distance between the semicircle and the semicircle is fixed, then the different size of the screen will definitely draw a different number of semicircle, then we only need to base on the width of the control to get the number of semicircle can be drawn.

We observe the picture, it is easy to find that the number of circles is always the number of circle spacing-1, that is, assuming the number of circles is circlenum, then the circular spacing is circlenum+1.

So we can calculate the circlenum according to this.
circlenum = (int) ((W-GAP)/(2*RADIUS+GAP));
Gap here is the circle, radius is the circle radius, W is the width of view.

Look at the code

public class Coupondisplayview extends LinearLayout {

 private Paint mpaint;
 /**
  * Round spacing * *
 private float gap = 8;
 /**
  * radius
 /private float radius = ten;
 /**
  * Round number
 /private int circlenum;

 private float remain;


 Public Coupondisplayview {
  super (context);
 }

 Public Coupondisplayview (context, AttributeSet attrs) {
  Super (context, attrs);
  Mpaint = new Paint (paint.anti_alias_flag);
  Mpaint.setdither (true);
  Mpaint.setcolor (color.white);
  Mpaint.setstyle (Paint.Style.FILL);
 }

 @Override
 protected void onsizechanged (int w, int h, int oldw, int oldh) {
  super.onsizechanged (W, H, OLDW, OLDH) ;
  if (remain==0) {
   remain = (int) (W-GAP)% (2*RADIUS+GAP);
  }
  Circlenum = (int) ((W-GAP)/(2*RADIUS+GAP));
 }


 Public Coupondisplayview (context, AttributeSet attrs, int defstyleattr) {
  Super (context, attrs, defstyleattr);
 }

The radius of the circle and the circle spacing are defined, and the values are initialized and the number of circles required to draw is obtained.

Next you just need one to draw the circle out.

 @Override
 protected void OnDraw (Canvas Canvas) {
  super.ondraw (Canvas);
  for (int i=0;i<circlenum;i++) {
   float x = gap+radius+remain/2+ ((gap+radius*2) *i);
   Canvas.drawcircle (x,0,radius,mpaint);
   Canvas.drawcircle (X,getheight (), radius,mpaint);
  }
 

It is simple to draw a circle based on the number of circlenum.

The REMAIN/2 here is because, in some cases, the number of calculations that can be drawn is not exactly divisible. The last space on the right will be wider than the rest of the space.

So we add half the rest of the space when we draw the first one, even if it's not divisible. At least you can ensure that the first and last spacing widths are the same.

This is achieved.

Look at the effect

<?xml version= "1.0" encoding= "Utf-8"?> <framelayout xmlns:android= "http://schemas.android.com/apk/res/"
 Android "Android:layout_width=" Match_parent "android:layout_height=" wrap_content "android:paddingleft=" 16DP " android:paddingright= "16DP" android:paddingtop= "20DP" > <com.qiangyu.test.view.coupondisplayview android:o rientation= "Horizontal" android:layout_width= "Match_parent" android:layout_height= "Wrap_content" Android: background= "@color/indicator_color" android:padding= "20DP" > <imageview android:layout_width= "120DP" Androi d:layout_height= "Match_parent" android:src= "@drawable/goods_test" android:scaletype= "Centercrop"/> <LinearL
   Ayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:orientation= "vertical" android:paddingleft= "16DP" > <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_con" Tent "android:textsize=" "18DP" android:text= "Food Securities"/&Gt
    <textview android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:textSize= "12DP" android:padding= "5DP" android:text= "No.: 11223124123213131"/> <textview android:layout_width= "wrap _content "android:layout_height=" wrap_content "android:textsize=" 12DP "android:padding=" 5DP "android:text= "No.: 11223124123213131"/> <textview android:layout_width= "wrap_content" android:layout_height= "Wrap_c" Ontent "android:textsize=" 12DP "android:paddingleft=" 5DP "android:paddingtop=" 5DP "android:text=" Due Date: 2001

 -09-07 "/> </LinearLayout> </com.qiangyu.test.view.CouponDisplayView> </FrameLayout>

Effect Chart:

SOURCE Download: Http://xiazai.jb51.net/201607/yuanma/CouponDisplayView (jb51.net). rar

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.