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

最新推荐文章于 2024-06-06 09:39:19 发布
最新推荐文章于 2024-06-06 09:39:19 发布
阅读量456 收藏
点赞数
分类专栏： 安卓开发 文章标签： CircleView 自定义 圆环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33342248/article/details/53809432
版权

在项目第三方登陆布局中，要给微信、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);
	}
	
	@Override
	protected 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();
	}
	@Override
	protected 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,是我们自定义的

所谓简爱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CircleView：在android中创建圆形视图（更改颜色，边框和阴影）:black_circle:
02-03
CircleView：在android中创建圆形视图（更改颜色，边框和阴影）:black_circle:
轻量级显示圆形图片 CircleView-Android
qq_28845393的博客
09-15 632
CircleView-Android详细介绍 CircleView，可以将图片圆形显示的View，实现方式很简单，做这个控件就是为了可以直接方便的显示圆形图片，在显示的时候，提供了更多的选择，比如下面讲到的偏移显示。 使用方法 在build.gradle文件中加上这句： compile'com.github.youngkaaa:circleview:0.1.0''com.github...
圆形视图：CircleView — 简单而强大的Android UI组件
最新发布
gitblog_00065的博客
06-06 280
圆形视图：CircleView — 简单而强大的Android UI组件 项目地址:https://gitcode.com/lopspower/CircleView 项目介绍 在Android应用开发中，独特的UI元素总是能够提升用户体验并使你的应用脱颖而出。CircleView是一个专门的Android库，它为开发者提供了一个简单易用的方式，来创建出美观的圆形视图。这个项目由Lopez Mikh...
自定义View之实现一个简单的圆
xiaokang666的博客
11-19 935
自定义View之实现一个简单的圆
Android 用自定义view画圆详解
路宇的博客
03-20 4209
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Android自定义圆环倒计时控件
08-25
通过这个自定义控件，我们可以方便地在Android应用中实现具有倒计时功能的圆环进度条。用户可以自定义颜色、文字大小等参数，以适应不同的设计需求。在实际应用中，你可以将这个控件添加到布局文件中，通过调用`...
Android自定义圆环CircleView
08-08
本篇文章将深入探讨如何创建一个名为"CirclrView"的自定义圆环视图。首先，我们需要理解`CircleView`的基本概念，它是一种特殊的视图，形状表现为一个圆形，而非Android系统默认的矩形。 ### 1. 自定义视图的步骤 ...
自定义控件之百分比圆环
11-01
通过这种方式，我们就创建了一个可以根据数据大小以不同颜色和百分比显示的自定义百分比圆环控件。这个控件可以轻松地集成到任何Android项目中，为用户提供直观的数据展示。在实际应用中，你还可以进一步扩展它的...
Android自定义控件之可拖动控制的圆环控制条实例代码
08-26
"Android自定义控件之可拖动控制的圆环控制条实例代码" 在 Android 开发中，自定义控件是非常重要的一部分，特别是在实现复杂的用户界面时。今天，我们将讨论如何实现一个可拖动控制的圆环控制条实例代码。 首先，...
Android自定义CIrcleView
lm78ax的博客
07-02 596
public class CircleView extends View {     private int viewW,viewH;     private DrawBackground  mBackground;     private boolean isInitView = false;//是否初始化过此view里面的所有资源     private Activity mConte
Android代码-CircleView
08-06
CircleView A Circle View containing Title and Subtitle Attributes to choose from: cv_titleText - The text in the first row. cv_subtitleText - The text in the second row. cv_titleSize - The size of the first row text. cv_subtitleSize - The size of the second row text. cv_strokeWidthSize - The size of the outter line surrounding the view. cv_fillRadius - The radius of the inner circle. cv_titleColor - The color of the first row text. cv_subtitleColor - The color of the second row text. cv_fi
Android自定义View之CircleView
weixin_30588729的博客
10-26 98
Android自定义View之CircleView 版权声明：本文为博主原创文章，未经博主允许不得转载。 转载请表明出处：http://www.cnblogs.com/cavalier-/p/5999037.html 前言 大家好，我是Cavalier,这次和大家分享一下《Android自定义View之CircleView》,不废话,下面上效果图。 分析 需求 1：随机换颜色的一个view ...
推荐开源项目：CircleView - 炫酷的圆形进度视图
gitblog_00003的博客
05-14 417
推荐开源项目：CircleView - 炫酷的圆形进度视图 项目地址:https://gitcode.com/jakob-grabner/Circle-Progress-View 在Android应用开发中，寻求独特且引人注目的UI元素总是能提升用户体验的关键。今天，我们要向您推荐一个独特的开源项目——CircleView，它是一款功能强大、完全可定制的动画圆形视图，可用于展示加载指示器、进度或数...
自定义 CircleView - 继承 View 重写 onDraw
catface
05-31 741
使用View画圆
CircleView
weixin_30852451的博客
06-27 102
源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/CircleViewDemo.zip 自定义View控件实现圆形的背景+居中的文字,主要代码如下: public class CircleView extends View { private static final int DEFAULT_DRAW_COLOR...
自定义View
QAQ
11-20 418
花了几个小时的时间总算把自定义View给理清楚了，以前总是没时间去看，网上总是一大把写好的控件。 在学习自定义View之前还需要回顾一下关于View的绘图流程相关知识。View的绘图流程有三个onDraw，onLayout还有onDraw。可以这样简单地描述这三个过程： onMeasure:计算出视图的大小。 onLayout:确定试图在屏幕中的显示位置。 onDraw:将控件绘
Android学习—简单自定义View（一）
mei_jia12的博客
10-13 356
最近手上不忙所以回顾了一下自己今年来所接触和学习的东西，突然觉得写博客真是一个很好的方式，希望自己 可以坚持下去。 自定义View的流程 创建自定义类继承View，并重写构造方法，构造方法总共有四种，我们暂时只需要继承前两种 public CircleView(Context context) { super(context); } public CircleView(Context...
专治花里胡哨（一）征服自定义View，写个最简单的自定义 View
孔维伟的博客
06-18 260
作为 花里胡哨系列的第一篇，聊点五毛钱的，之所以写这个自定义系列文章，主要还是希望大家，也包括自己，以后能在面对产品脑洞和炫酷的设计时，能说一句小意思，分分钟给你实现。同时也想把自己在这方面所知道的，走过的路和大家分享一下，有错误请多多指正。 我们先来看一下写一个最简单的自定义View，我觉得只要接触过 Android 开发，哪怕就一个月，也知道要写一个类继承自View，对吧，我们来看看： public class CircleView extends View { } 这个时候 AS 会报错，傻子
android 自定义圆环
08-06
在Android中，可以通过自定义控件来实现圆环的效果。 首先，我们可以创建一个自定义的View类，继承自View类。在自定义类中，我们需要重写onDraw()方法来绘制圆环。 在onDraw()方法中，我们可以通过Canvas类提供的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值