自定义控件三角绕圆圈

来源：互联网发布：ps模板知乎海报编辑：程序博客网时间：2024/06/06 02:47

1.创建类继承View

public class MyCustomCircleArrowView extends View {    //创建画笔    private Paint paint;    //从xml中获取的颜色    private int circleBoundColor;    private float circleBoundWidth;    //当前画笔画圆的颜色    private int CurrenCircleBoundColor;    public MyCustomCircleArrowView(Context context) {        super(context);    }    public MyCustomCircleArrowView(Context context, @Nullable AttributeSet attrs) {        super(context, attrs);        initVeiw(context);        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyCustomCircleArrowView);        for (int i = 0; i < typedArray.getIndexCount(); i++) {            //就是我们自定义的属性的资源id            int attr = typedArray.getIndex(i);            switch (attr) {                case R.styleable.MyCustomCircleArrowView_circlr_bound_color:                    circleBoundColor = typedArray.getColor(attr, Color.RED);                    CurrenCircleBoundColor = circleBoundColor;                    break;                case R.styleable.MyCustomCircleArrowView_circlr_bound_width:                    circleBoundWidth = typedArray.getDimension(attr, 3);                    break;            }        }    }    private void initVeiw(Context context) {        paint = new Paint();    }    public void setColor(int color) {        if (CurrenCircleBoundColor != color) {            CurrenCircleBoundColor = color;        } else {            CurrenCircleBoundColor = circleBoundColor;        }    }    //设置圆心位置    private int pivotX;    private int pivotY;    private float currentDegree = 0;//旋转的度数    private float radius=130;//半径    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        paint.setAntiAlias(true);        paint.setColor(CurrenCircleBoundColor);//给画笔设置颜色        paint.setStrokeWidth(circleBoundWidth);//获取圆的宽度        pivotX = getWidth()/2;//获取屏幕的宽        pivotY = getHeight()/2;//获取屏幕的高        canvas.drawCircle(pivotX,pivotY,radius,paint);//画圆        //创建        canvas.save();        //旋转画布 , 如果旋转的的度数大的话,视觉上看着是旋转快的        canvas.rotate(currentDegree, pivotX, pivotY);        //提供了一些api可以用来画线(画路径)        Path path = new Path();        //从哪开始画 从A开始画        path.moveTo(pivotX + radius, pivotY);        //从A点画一个直线到D点        path.lineTo(pivotX + radius - 20, pivotY - 20);        //从D点画一个直线到B点        path.lineTo(pivotX + radius, pivotY + 20);        //从B点画一个直线到C点        path.lineTo(pivotX + radius + 20, pivotY - 20);        //闭合  --  从C点画一个直线到A点        path.close();        paint.setStyle(Paint.Style.FILL);//图的样式        paint.setColor(Color.BLACK);//图的背景色        canvas.drawPath(path, paint);//使用画笔画圆        canvas.restore();        //旋转的度数一个一个度数增加,  如果乘以一个速度的话,按一个速度速度增加        currentDegree += 1 * currentSpeed;        if (!isPause) {            invalidate();//重置        }    }    private int currentSpeed = 1;    private boolean isPause = false;    public void speed() {        ++currentSpeed;        if (currentSpeed >= 10) {            currentSpeed = 10;            Toast.makeText(getContext(), "我比闪电还快", Toast.LENGTH_SHORT).show();        }    }    public void slowDown() {        --currentSpeed;        if (currentSpeed <=1) {            currentSpeed = 1;        }    }    public void pauseOrStart() {        //如果是开始状态的话去重新绘制        if (isPause) {            isPause = !isPause;            invalidate();        } else {            isPause = !isPause;        }    }}

2.通过xml来创建给自定义控件添加颜色和宽度
在values中添加attrs.xml

<?xml version="1.0" encoding="utf-8"?><resources>    <declare-styleable name="MyCustomCircleArrowView">        <attr name="circlr_bound_width" format="dimension"></attr>        <attr name="circlr_bound_color" format="color"></attr>    </declare-styleable></resources>

3.创建自定义控件之后在布局当中直接调用自定义的控件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:app="http://schemas.android.com/apk/res-auto">    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="加速"        android:id="@+id/button" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="减速"        android:layout_below="@+id/button"        android:layout_alignParentRight="true"        android:layout_alignParentEnd="true"        android:id="@+id/button2" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="改变背景颜色"        android:layout_below="@+id/button2"        android:layout_alignParentRight="true"        android:layout_alignParentEnd="true"        android:id="@+id/button3" />    <Button        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="开始/停止"        android:layout_below="@+id/button3"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true"        android:id="@+id/button4" />    <zss.bwie.com.zidinyiview.MyCustomCircleArrowView        android:id="@+id/my_view"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:circlr_bound_color="@color/colorAccent"        app:circlr_bound_width="3dp"        android:layout_below="@+id/button4"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true" /></RelativeLayout>

4.在Activity中获取进行展示

public class MainActivity extends AppCompatActivity implements View.OnClickListener {    private Button jiasu;//加速    private Button jiansu;//减速    private Button bianse;//变色    private MyCustomCircleArrowView myCustomCircleArrowView;    private Button tingzhi;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //初始化布局控件        isitView();    }    //获取布局控件    private void isitView() {        jiasu = (Button) findViewById(R.id.button);        jiansu = (Button) findViewById(R.id.button2);        bianse = (Button) findViewById(R.id.button3);        myCustomCircleArrowView = (MyCustomCircleArrowView) findViewById(R.id.my_view);        tingzhi = (Button) findViewById(R.id.button4);        jiasu.setOnClickListener(this);        jiansu.setOnClickListener(this);        bianse.setOnClickListener(this);        tingzhi.setOnClickListener(this);    }    @Override    public void onClick(View view) {        switch (view.getId()){            case R.id.button:                myCustomCircleArrowView.speed();                break;            case R.id.button2:                myCustomCircleArrowView.slowDown();                break;            case R.id.button3:                myCustomCircleArrowView.setColor(Color.BLUE);                break;            case R.id.button4:                myCustomCircleArrowView.pauseOrStart();//停止        }    }}

就会展示一个三角在圆上转动可加速减速停止开始

阅读全文

0 0