展开

关键词

Android实现多个连续带数字圆圈效果

有项目需求需要绘制多个圆圈,并且使用连续的数字对其排列起来,也就是好多排的圆圈。 首先看一下效果图: 一排设置为8,一共有53的: ? 一排设值为5的,一共有153: ? 可以根据总的个数每排个数自动调节圆圈的大小,并且根据传入的监听事件作出不同的点击效果。 思路很简单,首先需要画一圆出来: <? 可以根据屏幕的总宽度每排需要放置的圆个数,计算出每一圆的合适大小,然后设置每个圆之间的margin为这个圆的十分之一,所以这个圆的最后大小应该为平均值的十分之八。 ; import android.util.Log; import android.view.Gravity; import android.view.View; import android.view.ViewGroup app.AppCompatActivity; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView

26340

高仿QQ运动的周报界面

第二第三圆圈里面还配有圆的背景,效果如下图: ? 有3波浪区域,各占一圆的三分之一,所以第一步就是计算出这个圆的左下角,右小角正上角的三点,如图 ? Y轴的坐标,假如judgeDotte返回的个数是两的话那就是证明顶点在最外面的圆,假如是3的话就画出顶点之外顶点之内的线就可以了,代码注释已经很详细了,效果图如下: ? canvas.drawCircle(mCirlce2X,mCircle2Y,8,mCircleHoldPaint); } //画一定要画的圆圈圆点 canvas.drawCircle(mCirlce3X ,通过传进去的数值来要画多少圆圈,而原点是不管数值多少都要画的。

35140
  • 广告
    关闭

    腾讯云+社区系列公开课上线啦!

    Vite学习指南,基于腾讯云Webify部署项目。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android开发笔记(一百三十二)矢量图形与矢量动画

    说白了,就是(30,50)(75,35)两点之间画一根线段。 好了,每行定义一动作,每行的第一字符表示动作的类型,后面的数字表示动作经过的坐标点。 下面是支付宝支付成功的动画截图: ? 支付成功动画包含两形状,首先在外面圆圈,然后圆圈里面画打勾符号。 因为圆圈打勾并不相连,如果按照一般的处理,就会一边画圆圈一边画打勾,这不是我们所希望的画完圆圈再画打勾的效果。 所以要想让圆圈动画打勾动画按顺序播放,得分别定义圆圈的矢量图形打勾的矢量图形,然后等圆圈动画播放完毕,再开始播放打勾动画。 ="hook" android:animation="@anim/anim_pay" /> </animated-vector> 圆圈动画播放完毕,接着播放打勾动画,这要在代码控制

    51120

    思路所用到的内容2. 辅助元素的创建(背景颜色、草坪、大地、小树、云彩)3. 雪山的实现4. 轨道的实现

    思路所用到的内容 1.1 思维导图 ? 所以就换了一思路:先画一全部被雪覆盖满的山体,然后在这个之上再画一有棕色土地的部分。 完成后是这个样子的: ? 雪山.png 3.2 雪山绘画的步骤 STEP ONE: ? 雪山.png 3.3 需要注意的点 画山的过程,最复杂的是找到山上左右两侧山坡上边缘的那个点的CGPoint。 以第一座山左边上坡上开始有雪的那个点来说。 那我们用最复杂的绿色这个带圆圈的轨道来分享一下。它是由三部分组成的,考虑到最后我们会让过山车从右边进入,跑到左边去,我们就从最右侧开始画起。 4.1 绘画的步骤 1,先画最右边的弧线,一二次贝塞尔曲线。 ? Paste_Image.png 2,画一圆圈。注意控制圆的半径以及圆心的位置。 ?

    45850

    Swift动画 —— 进度条

    最后需要完成的效果: 首先要做的就是用CAShapeLayer画一圆。 view.layer.addSublayer(shapeLayer) (滑动显示更多) 接下来shapeLayer外面添加一圈红色的圆圈。 ,以便后面来进行外面圆圈的动画。 ) 添加响应方法 @objc func handleTap() { } 添加外面圆圈的动画时候需要用到shapeLayer,所以把shapeLayer放到外面声明让VC持有。 basicAnimation.duration = 2 shapeLayer.add(basicAnimation, forKey: "stokeAnimation") (滑动显示更多) 这样点击之后就会画一圆圈

    14110

    Android开发自定义控件之折线图实现方法详解

    代码如下,新建一ChartView类继承自View,并实现他的几个构造方法,并重写onDrawonMeasure方法,因为我们要在onDraw方法里面进行绘制工作,并且我希望这个控件的长宽是相等的, 所以onMeasure方法设置宽高相等。 进行绘制之前,我们要进行若干初始化工作,其中就包括画笔的初始化。然后就可以进行绘制了,我们先绘制一简单的圆圈,然后将控件放到布局文件,运行看看效果。 到目前为止,已经实现了最简单的一自定义控件,虽然它什么功能都没有,只是简单显示一红色圆圈,但本质都是一样的。接下来就开始图表的绘制。 1.初始化一些需要使用的值。 更多关于Android相关内容感兴趣的读者可查看本站专题:《Android控件用法总结》、《Android开发入门与进阶教程》、《Android视图View技巧总结》、《Android编程之activity

    44351

    Android-打造一简单通用的Material加载LoadingView

    实现Material Progressbar 因为网络请求的时间一般是未知的,所以我们一般都是用一循环的圆圈指示器来提示用户,如下图。 ? Material-Progressbar 这个View,仔细观察,可以按下面的步骤做无限循环来显示: 1.根据起始弧度startArc要画的弧度arc,画一弧形,弧度arc逐渐加大。 除此之外还有一件事情要做,需要在弧形中间画一圆形,来擦除中间部分的颜色,我们可以用Xfermode来实现,Xfermode可以对多个图层按规则进行混合,具体可以自行Google哦。 , //保证它们maxAngleminAngle之间循环递增递减 if (startAngle == minAngle) { endAngle += 6; } 来显示文字,所以我们再封装一ViewGroup,来管理加载的几种状态,包括指示器的隐藏现实,textView文本的改变等。

    2.3K30

    Android开发时的多点触控是如何实现的?

    MotionEvent对象可能会存储多个Pointer的相关信息,每个Pointer都有自己的PointerIndexPointerId。 多点触控,就是用PointerIndexPointerId来标识用户手指的。 PointerIndex表示当前手指的索引,PointerId是手指按下时分配的唯一id,用来标识这根手指。 1 自定义View并初始化 布局很简单,就是一全屏View,为了View上画圆圈,我们必须自定义View,其中的初始化代码如下: public class MultiTouchView extends 3 onDraw 重绘界面时,主要是point存储的第2根手指的位置处画一白色圆圈: protected void onDraw(Canvas canvas) { canvas.drawColor canvas.restore(); } 首先,为整个屏幕绘一层绿色,把上一屏的内容清掉: canvas.drawColor(Color.GREEN); 然后,如果第2根手指按下了,则在它的位置处画一圆圈

    15720

    PPT辅助Power BIExcel设计:异形饼图

    statista看到一有趣的饼图,把苹果logo按比例划分。Power BI或者Excel能不能实现? 但是,由于苹果logo的不规则性,饼图有的部分露在了外面,而内部有的部分产生了缺失,无法与logo完美匹配。 那么怎么办?可以想到,饼图上方的图片需要这样的效果: 1. 苹果的颜色是无色,为了将底层的饼图显示出来;苹果的外面、圆的里面填充颜色,为了遮盖底层饼图多余的部分。 使用PPT的合并形状功能可以完美达到以上目的,接下来正式开始操作。 接着画一圈(按住shift,否则可能是椭圆),并将圈放在苹果的下方。 全选图案,合并形状下选择拆分。 可以看到图片分成了三部分。苹果的两部分圆圈。 苹果的形状填充选择无颜色,圆圈的形状填充颜色取决于你的Power BI底纹颜色,如果是白色,则选择白色。此处看上去苹果圆圈都是白色,实际设置是不一样的。

    11050

    canvas绘制虚线图表

    其实该图表,就是一圆圈外面套一圆弧的效果, 主要的难点在于不知道怎么绘制圆圈虚线效果。 其实canvas本身已经支持了虚线的绘制,就是一api调用的事情,api是setLineDash。

    11020

    信息图制作教程案例

    步骤 3 复制粘贴出同一形状,顶部对齐,两形状相接。形成四条参考线。 ? 步骤 4 中间的那条参考线上画一白色的长方形矩形,与参考线中心对称。 步骤 6 本图的设计,决定使用圆形作为装饰元素。使用圆形工具绘制大小不同的圆形,并摆放在不同的位置上。将圆形添加不同的颜色,也可以调整圆圈的透明度。 ? 步骤 7 将一部分的圆圈放在标题的右上方。 ? 步骤 8 使用AI的图标工具绘制饼图,将需要呈现的数据填入数据区域,工具会自己生成对应的饼图。 ? 同样也可以旋转饼图的角度,饼图上添加数据。 ? 步骤 10 同理制作其他的饼图,并绘制虚线将饼图隔开。也可以绘制实线将内容内容模块之前分开。 如果需要增强视觉效果,可以图标上增加一些之前设计的圆圈作为装饰。 ? 这就是这张信息图的诞生记!

    65470

    自定义圆形控件RoundImageView并认识一下attr.xml

    讲之前解释一下attr.xml的作用,我用土话废话说,这样容易理解:比如我自定义一控件,怎么实现呢,以RoundImageView为例,首先是继承ImageView,然后实现其构造函数,构造函数, 比如颜色宽度,这个attr.xml定义了相关的名字,而在使用RoundImageView的xml布局文件,我们会为其设置值,这里需要用的值,就是从那里设置的),并设置本控件,然后继承onDraw 比如颜色宽度,这个attr.xml定义了相关的名字,而在使用RoundImageView的xml布局文件,我们会设置其值,这里需要用的值,就是从那里设置的),并设置本控件,然后继承onDraw ,就定义画两圆框,分别为内圆外圆边框 if (mBorderInsideColor ! = defaultColor) {// 这里的是如果外圆边框不为空且颜色值不是默认值,就画一外圆的边框 radius = (defaultWidth < defaultHeight ?

    68680

    Android 自定义球型水波纹带圆弧进度效果(实例代码)

    需求 如下,实现一圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一圆弧进度。 ? 思路 外围圆弧进度:可以通过canvas.drawArc()实现。 至于波浪的移动,可以通过移动平移水平线的起始位置来实现,使用动画循环即可,为了能够稳定的显示,绘制波浪时需要严格绘制整数倍周期的波浪。 园形的实现:绘制一完整的圆形,然后通过Path.op()合并裁剪水波纹path。注意点就是Android6有坑,使用该方法会有明显的抖动,为了解决该问题,我的做法是多画一层圆弧以掩盖此抖动。 = null) : View(context, attributeSet) { companion object { const val RESUME = 0x1 const val STOP = 0x2 ,用于从90度开启渐变,由于线条头部有圆圈会导致显示差异,因此从88度开始绘制 private val sweepMatrix by lazy { val matrix = Matrix() matrix.setRotate

    47920

    Android开发笔记(一百二十三)下拉刷新布局SwipeRefreshLayout

    (该方法新版已被废弃) setOnRefreshListener : 设置刷新监听器。在下拉松开时触发该监听器,需要重写该监听器的onRefresh方法。 首先要注意:布局文件android.support.v4.widget.SwipeRefreshLayout下面只能有一直接子视图,如果有多个子视图,那么将只展示第一子视图,后面的子视图将不予展示 > SwipeRefreshLayout自带的刷新提示只有一进度圆圈,显然不能满足多变的定制化需求,比如我们常常需要展示不同的提示文本提示图片,这时就要在ListView控件上面增加一块提示区域 这里我们先在提示区域放置一TextView控件,用来展示最基本的提示文字,刷新开始时显示该提示,刷新结束时移除该提示。 上面我们看到搭配ListView的情况下,刷新开始与刷新结束时,提示文字的展示与隐藏过程有点突兀,都是一下子展示一下子隐藏,缺乏动画效果,使人觉得生硬呆板。

    80430

    D2-Android自定义拉绳小控件

    零、前言 [1].今天忙了大半天重构LogicCanvas库结果还是很令我满意的,LogicCanvas已经升级到V0.02了 [2].以前想过,以后我变厉害了,一定要写个小拉环,一晚上总算捣哧出来了 拉环控件.gif ---- 一、准备工作: 1.新建SwitchRopView继承自View:初始化NumGo public class SwitchRopView extends View { mRingR - mRopWidth) / 2, -mRopHeight / 5 * i); painter.draw(piece); } //绘制圆圈点 = null) {//下拉过程的监听 mOnRopDownListener.ropDown(downHeight); } .d.view.SwitchRopView android:id="@+id/rop" android:layout_width="wrap_content"

    38910

    Android开发笔记(四十九)异步任务处理AsyncTask

    AsyncTask异步任务 Thread+Handler方式虽然能够实现多线程的通信处理,但是写起代码来颇为繁琐,所以Android提供了AsyncTask这样一轻量级的异步任务类,其内部封装好 方法调用publishProgress时会触发该方法,通常用于处理过程刷新进度条 onPostExecute : doInBackground执行完毕时调用,通常用于处理完毕后刷新展示页面 onCancelled 注意,只有水平进度条才能设置当前进度,圆圈进度无法设置当前进度 样式设置方式为,xml布局文件的ProgressBar增加如下的style属性: style="? 可指定标题消息内容,进度条样式为默认的圆圈进度。 ; import android.app.ProgressDialog; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener

    38720

    Android实现人脸识别动画效果

    //清除混合模式 mPaint.setXfermode(null); canvas.restore(); } 这时效果如下 image.png 2.绘制两动画效果的圆圈 咱们绘制的两图片如下 image.png image.png 我们要做的就是通过计算将Bitmap缩放成与之前遮罩效果的圆圈一样大,因为我们这里用的两张图片是一样大的,因此我们只需要计算出内圆圈图片与遮罩圆圈的缩放比例即可 ,从文章开头的效果我们可以看出两圆圈的旋转方向是不一样的,因此我们逻辑上也要注意一是顺时针旋转另一是逆时针旋转,代码如下 private float mDegress = 0;//旋转角度 private ,详细完整的代码大家可以通过如下地址获取 https://gitee.com/itfitness/face-check-view 原文链接:https://www.jianshu.com/p/9383ce973d6a 欢迎关注我,分享Android干货,交流Android技术。 对文章有何见解,或者有何技术问题,欢迎评论区一起留言讨论!

    11340

    Android实现渐变圆环、圆形进度条效果

    最近做了一功能,里面涉及到了渐变圆形的需求。就是一颜色可以渐变的圆环,最后实现的效果如下图: ? ? 左图是带渐变效果,右图是不带渐变效果。 通过组合这些对象我们可以画出一些简单有趣的界面出来,但是光有这些功能还是不够的,如果我要画一仪表盘(数字围绕显示圆圈)呢? 为了方便一些转换操作,Canvas 还提供了保存回滚属性的方法(saverestore),比如你可以先保存目前画纸的位置(save),然后旋转90度,向下移动100像素后画一些图形,画完后调用restore android.view.View; import android.view.animation.Animation; import android.view.animation.Transformation android:id="@+id/color_progress_view" android:layout_width="match_parent" android:layout_height="0dp

    56510

    小甜点,RecyclerView 之 ItemDecoration 讲解及高级特性实践

    绿色区域代表 RecyclerView 的一 ItemView,而外面橙色区域也就是相应的 outRect,也就是 ItemView 与其它组件的偏移区域,等同于 margin 属性,通过复写 getItemOffsets onDraw() Android 的每一 View onDraw() 是很重要的一方法,用来绘制组件的UI效果,所以 ItemDecocration 它自然也是用来绘制外观的。 我们可以验证一下,时间轴与 ItemView 的边界画一完整的圆,观察它的效果。 可以看到,重合的地方,圆圈确实被 ItemView 内容覆盖了。 大家可能会想到,ItemDecoration 内容能不能覆盖 ItemView 内容之上呢? 是的,确实是可以的,将 Flag 角标定义每一 ItemView 布局文件,然后 Adapter 的 onBindViewHolder 方法根据 postion 的值来决定是否加载角标。

    46720

    模仿QQ运动item的界面

    android:layout_width="match_parent" android:layout_height="match_parent" android:background 的宽,heightView是整个view的高,如下图: ? 底下日期是用Calendar得到前7天的日期再循环的画上去,思路上面一样不再赘述。此时效果如下: ? 原理是向上定一控制点有向下定一控制点使之形成一sin函数图形。具体请学贝塞尔曲线。此时效果图: ? img7.PNG 最后就是画底下的矩形和头像和文字了。 对了,最后还有一刚开始的动画效果。

    21830

    扫码关注腾讯云开发者

    领取腾讯云代金券