自定义圆环类CircleView(小小控件类，做个背景还是可以的嘛)

来源：互联网发布：windows nc命令工具编辑：程序博客网时间：2024/05/21 07:46

在项目第三方登陆布局中，要给微信、qq、微博图标添加一个圆环背景，动手写了一个自定义圆环类，先看看效果吧

第一个圆环颜色配置有问题，应该跟里面的图标一个颜色，看起来更加协调，当然，这些都是可以任意更改的，还有圆环的粗细，都是自行设置的

下面我们来看源代码（eclispe开发工具）

1、自定义类，首先在values文件下面的attr中定义属性，定义了两个属性，第一个圆环的颜色，第二个圆环的粗细

 <declare-styleable name="circleView">        <attr name="border_color" format="color" />        <attr name="border_stroke" format="dimension" />    </declare-styleable>

2、自定义类CircleView源代码

package com.suowei.appsuowei.myview;import com.example.appsuowei.R;import com.suowei.appsuowei.util.DensityUtil;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;public class CircleView extends View{private Context context;private int borderColor;private int borderStroke;private int defaultColor = Color.BLACK; private int mWidth,mHeight;private Paint paint;private int radius;public CircleView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);this.context=context;initAttr(attrs, context);initPaint();}public CircleView(Context context, AttributeSet attrs) {super(context, attrs);this.context=context;initAttr(attrs, context);initPaint();}public CircleView(Context context) {super(context);this.context=context;initPaint();}private void initAttr(AttributeSet attrs,Context context){TypedArray typedArray=context.obtainStyledAttributes(attrs, R.styleable.circleView);borderColor=typedArray.getColor(R.styleable.circleView_border_color, defaultColor);borderStroke=typedArray.getDimensionPixelSize(R.styleable.circleView_border_stroke, 1);typedArray.recycle();}private void initPaint(){paint=new Paint(Paint.ANTI_ALIAS_FLAG);paint.setDither(true);paint.setStyle(Paint.Style.STROKE);paint.setColor(borderColor);}@Overrideprotected void onDraw(Canvas canvas) {radius=getMeasuredWidth()/2-borderStroke;canvas.save();drawCircle(canvas);canvas.restore();super.onDraw(canvas);}private void drawCircle(Canvas canvas){//画圆canvas.save();paint.setStrokeWidth(borderStroke);canvas.drawCircle(mWidth/2, mHeight/2, radius, paint);canvas.restore();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int wSize=MeasureSpec.getSize(widthMeasureSpec);int wMode=MeasureSpec.getMode(widthMeasureSpec);int hSize=MeasureSpec.getSize(heightMeasureSpec);int hMode=MeasureSpec.getMode(heightMeasureSpec);if(wMode==MeasureSpec.EXACTLY){mWidth=wSize;}else {mWidth=DensityUtil.dip2px(context, 60);}if(hMode==MeasureSpec.EXACTLY){mHeight=hSize;}else {mHeight=DensityUtil.dip2px(context, 60);}System.out.println("mWidth....."+mWidth+"mHeight>>>>>"+mHeight);setMeasuredDimension(mWidth, mHeight);}}

在onMeasure中,对测量大小进行了重写，如果用户在布局属性中设置了精确的宽高，就按照设置的宽高，如没有，默认宽高为60dip

3，项目中的第三方登陆布局的源代码

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:android_customs="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginEnd="@dimen/activity_left_padding"    android:layout_marginStart="@dimen/activity_left_padding"    android:layout_marginTop="10dip"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:orientation="horizontal"        android:weightSum="3" >        <View            android:layout_width="match_parent"            android:layout_height="0.1dip"            android:layout_weight="0.9"            android:background="@color/red" />        <TextView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_weight="1.2"            android:gravity="center"            android:paddingEnd="5dip"            android:paddingStart="5dip"            android:text="第三方登陆"            android:textSize="10dip" />        <View            android:layout_width="match_parent"            android:layout_height="0.1dip"            android:layout_weight="0.9"            android:background="@color/red" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dip"        android:gravity="center"        android:orientation="horizontal" >        <FrameLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center" >            <com.suowei.appsuowei.myview.CircleView                android:layout_width="60dip"                android:layout_height="60dip"                android:layout_gravity="center"                android_customs:border_color="@color/green"                android_customs:border_stroke="@dimen/circleView_border_width" />            <ImageView                android:id="@+id/thirdlogin_weixin"                android:layout_width="@dimen/share_popWindow_imageSize"                android:layout_height="@dimen/share_popWindow_imageSize"                android:layout_gravity="center"                android:contentDescription="@string/app_name"                android:src="@drawable/ic_weixin" />        </FrameLayout>        <FrameLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_marginStart="20dip" >            <com.suowei.appsuowei.myview.CircleView                android:layout_width="60dip"                android:layout_height="60dip"                android:layout_gravity="center"                android_customs:border_color="@color/tint_blue"                android_customs:border_stroke="@dimen/circleView_border_width" />            <ImageView                android:id="@+id/thirdlogin_qq"                android:layout_width="@dimen/share_popWindow_imageSize"                android:layout_height="@dimen/share_popWindow_imageSize"                android:layout_gravity="center"                android:contentDescription="@string/app_name"                android:src="@drawable/ic_qq" />        </FrameLayout>        <FrameLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:layout_marginStart="20dip" >            <com.suowei.appsuowei.myview.CircleView                android:layout_width="60dip"                android:layout_height="60dip"                android:layout_gravity="center"                android_customs:border_color="@color/RED"                android_customs:border_stroke="@dimen/circleView_border_width" />            <ImageView                android:id="@+id/thirdlogin_sina_weibo"                android:layout_width="@dimen/share_popWindow_imageSize"                android:layout_height="@dimen/share_popWindow_imageSize"                android:layout_gravity="center"                android:contentDescription="@string/app_name"                android:src="@drawable/ic_sina_weibo" />        </FrameLayout>    </LinearLayout></LinearLayout>

附，顺便讲解下命名空间，XML命名空间属性放置于元素的开始标签之中

下面这是自定义属性命名空间

xmlns:android_customs="http://schemas.android.com/apk/res-auto"

命名空间重要的是后面的URL，跟前面的前缀（android_customs）没关系，替换成什么都可以

看看系统自带的属性命名空间，默认为android

xmlns:android="http://schemas.android.com/apk/res/android"

看看实际应用

  <com.suowei.appsuowei.myview.CircleView                android:layout_width="60dip"                android:layout_height="60dip"                android:layout_gravity="center"                android_customs:border_color="@color/green"                android_customs:border_stroke="@dimen/circleView_border_width" />

在这个自定义CircleView中，有五个属性，前三个前缀为android的是系统自带的，后面两个是前缀是android_customs,是我们自定义的

1 0