自定义控件,实现正方形套圆环内套圆形图片
自定义控件,实现正方形套圆环内套圆形图片
说到自定义View有的时候,属实让人头疼,今天得到一位大神的指点,自己实现了一定的效果。
接下来我们一起看一下效果图:
效果图也就是这样的,可是具体代码是如何实现的呢,接下来看代码。
1.首先,自定义View吗,那就要创建一个自己的类来继承View,实现构造方法,进行一些计算。
public class Custom_View extends View{ private SetOnWhat sow; private int one; private int two; private int three; private int RX; private int RY; private float width; private int rect; public Custom_View(Context context) { super(context); } public Custom_View(Context context, AttributeSet attrs) { super(context, attrs); } public Custom_View(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int x = getWidth(); int y = getHeight(); rect = x*3/4; int R = rect*8/25; width = R*3/8; RX = x/2; RY = y/2; int r = rect/2 - (int) (width*2); one = r; two = (int) (r+width); three = (int)(r+width*2); int left = (x - rect)/2; int right = left + rect; int top = (y - rect)/2; int bottom = top + rect; Paint paint = new Paint(); paint.setColor(Color.GREEN); paint.setStrokeWidth(width); paint.setAntiAlias(true); canvas.drawRect(left, top, right, bottom, paint); paint.setColor(Color.WHITE); canvas.drawCircle(RX, RY, r, paint); paint.setStyle(Paint.Style.STROKE); paint.setColor(Color.RED); canvas.drawCircle(RX, RY, R, paint); paint.setColor(Color.BLUE); canvas.drawCircle(RX, RY, R+width, paint); } @Override public boolean onTouchEvent(MotionEvent event) { int x = (int) event.getX(); int y = (int) event.getY(); float rawX = event.getRawX(); float rawY = event.getRawY(); int action = event.getAction(); if(action==MotionEvent.ACTION_DOWN||action==MotionEvent.ACTION_MOVE){ if (x + getLeft() < getRight() && y + getTop() < getBottom()) { int type = 0; int distance = getDistance(x, y); if(distance<=one*one){ type = 0; }else if(distance>one&&distance<=two*two){ type = 1; }else if(distance>two&&distance<=three*three){ type = 2; }else if(x>=(RX - rect/2)&&x<=(RX + rect/2)&&y>=(RY - rect/2)&&y<=(RY+rect/2)){ type = 3; }else { type = 4; } if(sow!=null){ sow.onWhat(type); } } } return true; } private int getDistance(int x, int y){ return (x-RX)*(x-RX) + (y-RY)*(y-RY); } public interface SetOnWhat{ void onWhat(int type); } public void getOnWhat(SetOnWhat sow){ this.sow = sow; } }2.写布局文件,布局文件如下:
<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" tools:context=".activity.TestActivity"> <com.nababy.yuekaolianxi.view.Custom_View android:id="@+id/cv" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/tv_color" android:textSize="20sp" android:layout_centerInParent="true" android:text="ewrfewt" android:layout_marginTop="10dp"/> </RelativeLayout>3.Activity中代码如下:
public class TestActivity extends AppCompatActivity { private TextView tv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_test); tv = (TextView) findViewById(R.id.tv_color); setText("一家人"); Custom_View cv = (Custom_View) findViewById(R.id.cv); cv.getOnWhat(new Custom_View.SetOnWhat() { @Override public void onWhat(int type) { switch (type) { case 0: Toast.makeText(TestActivity.this, "这里是白色", Toast.LENGTH_SHORT).show(); break; case 1: Toast.makeText(TestActivity.this, "这里是红色", Toast.LENGTH_SHORT).show(); break; case 2: Toast.makeText(TestActivity.this, "这里是蓝色", Toast.LENGTH_SHORT).show(); break; case 3: Toast.makeText(TestActivity.this, "这里是绿色", Toast.LENGTH_SHORT).show(); break; case 4: Toast.makeText(TestActivity.this, "这..这里是哪里?", Toast.LENGTH_SHORT).show(); break; default: break; } } }); } private void setText(String message){ tv.setText(message); } }
好了,可以去运行一下demo试一下嘛!!!