根据输入框的值生成圆环效果

先看布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圆环的半径:"
            />
        <EditText 
            android:id="@+id/et_rediu"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圆环的宽度:"
            />
        <EditText 
            android:id="@+id/et_width"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="圆环的颜色:"
            />
        <EditText 
            android:id="@+id/et_color"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />
    </LinearLayout>
    <Button 
        android:id="@+id/bt_shengcheng"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="生成的圆环展示"
        />
    
    <com.bwie.test.CircleImageView
        android:id="@+id/img"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center_horizontal"
        ></com.bwie.test.CircleImageView>
    

</LinearLayout>

再看自定义View上的代码:

package com.bwie.test;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;

public class CircleImageView extends ImageView{
	private final  Paint paint;
	private final Context context;
	
	private int banjing = 100;
	private int width = 30;
	private String color = "#ff0000";
	
	public CircleImageView(Context context) {
		
		// TODO Auto-generated constructor stub
		this(context, null);
	}

	public CircleImageView(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		this.context = context;
		this.paint = new Paint();
		this.paint.setAntiAlias(true); //消除锯齿
		this.paint.setStyle(Paint.Style.STROKE); //绘制空心圆 
	}

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		int center = getWidth()/2;
		int innerCircle = dip2px(context, banjing); //设置内圆半径
		int ringWidth = dip2px(context, width); //设置圆环宽度
		
		//绘制内圆
		this.paint.setARGB(255, 212 ,225, 233);
		this.paint.setStrokeWidth(2);
		canvas.drawCircle(center,center, innerCircle, this.paint);
		
		//绘制圆环
		
		this.paint.setColor(Color.parseColor(color));
		this.paint.setStrokeWidth(ringWidth);
		canvas.drawCircle(center,center, innerCircle+1+ringWidth/2, this.paint);
		
		//绘制外圆
		this.paint.setARGB(155, 167, 190, 206);
		this.paint.setStrokeWidth(2);
		canvas.drawCircle(center,center, innerCircle+ringWidth, this.paint);

		
		super.onDraw(canvas);
	}
	
	public void circleChange(int banjing,int width,String color){
	
		this.banjing = banjing;
		this.color = color;
		this.width = width;
		postInvalidate();//重新绘制
	}
	
	/**
	 * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
	 */
	public static int dip2px(Context context, float dpValue) {
		final float scale = context.getResources().getDisplayMetrics().density;
		return (int) (dpValue * scale + 0.5f);
	}
}

再就是Fragment上的代码:

package com.bwie.fragments;

import com.bwie.test.CircleImageView;
import com.bwie.test.R;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;

public class ZidingyiFragment extends Fragment {
    
	private EditText rediu;
	private EditText width;
	private EditText color;
	private CircleImageView img;
	private Button shengcheng;

	@Override
	public View onCreateView(LayoutInflater inflater,
			@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
		
		View view=inflater.inflate(R.layout.fra1_zidingyi, null);
		
		rediu=(EditText)view.findViewById(R.id.et_rediu);
		width=(EditText)view.findViewById(R.id.et_width);
		color=(EditText)view.findViewById(R.id.et_color);
		img=(CircleImageView)view.findViewById(R.id.img);
		shengcheng=(Button)view.findViewById(R.id.bt_shengcheng);
		
		shengcheng.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				String redius=rediu.getText().toString();
				String widths=width.getText().toString();
				String colors=color.getText().toString();
				img.circleChange(Integer.parseInt(redius),
						Integer.parseInt(widths),
						colors);
				
			}
		});
		
		return view;
	}
	

}