Android 扇形网络控件 - 无网络视图（动画）

2024-06-24 06:58
文章标签 控件 视图 网络 android 动画 扇形

本文主要是介绍Android 扇形网络控件 - 无网络视图（动画），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

一般在APP没有网络的情况下，我们都会用一个无网络的提示图标，在提示方面为了统一app的情况，我们一般使用简单的提示图标，偶尔只需要改变一下图标的颜色就一举两得，而不需要让PS来换一次颜色。当然app有图标特殊要求的就另当别论了。

效果图

这里写图片描述

当你第一眼看到这样的图，二话不说直接让UI给你切一张图标来的快对吧，我其实开始也是这么想的，但是到了做的app越来越多的时候，你就会发现就算是用这个简单的图标，随着主题颜色的改变，我们的图标颜色也会发生相应的改变，我们需要的就随意改变这个图标颜色，那么改变图标颜色就难了，还是自己着手自己写一个控件吧，看着这个控件我有点愣住了，因为有平滑效果，怎么弄呢。我问了一下UI他们怎么绘制的，结果他给我说这个图标他们是用圆来完成的。从中得到启发的我，开始着手来完成这样一个控件。

控件分析

这里写图片描述

使用

（1）将下面的源码复制到自己项目中，本人不提倡用Git依赖，依赖多了打包慢，写代码卡。

（2）以下是可以用到的方法

    /*** 设置扇形高度** @param arcStrokeWidth*/public void setStrokeWidth(float arcStrokeWidth)/*** 设置扇形的半径** @param radius*/public void setRadius(float radius)/*** 设置扇形的间距** @param arcPadding*/public void setArcPadding(float arcPadding)/*** 设置扇形数量** @param arcCount*/public void setArcCount(int arcCount)/*** 设置开始角度** @param startAngle*/public void setStartAngle(float startAngle)/*** 设置颜色** @param color*/public void setColor(int color) /*** 设置动画时间** @param duration*/public void setDuration(int duration)/*** 开始动画*/public void startAnimation()/*** 停止动画*/public void stopAnimation()

布局xml

    <com.android.widget.ArcNetViewandroid:layout_width="match_parent"android:layout_height="wrap_content" app:arc_color="@color/colorAccent"app:arc_animation="true"/>

注：包名请修改成自己项目的包名（ArcNetView复制到自己项目中）；

attr.xml

    <declare-styleable name="ArcNetView"><attr name="arc_count" format="integer" /><attr name="arc_color" format="color" /><attr name="arc_radius" format="dimension" /><attr name="arc_stroke_width" format="dimension" /><attr name="arc_padding" format="dimension" /><attr name="arc_animation" format="boolean" />

ArcNetView

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;import com.android.R;/*** Created by Relin* on 2018-09-11.* 扇形网络控件*/
public class ArcNetView extends View {private Canvas canvas;private Paint paint;private float arcStrokeWidth = dpToPx(24);private float radius = dpToPx(28);private float arcPadding = dpToPx(20);private int arcCount = 3;private float width;private float height;private float startAngle = -135;private float sweepAngle = Math.abs(startAngle + 90) * 2;private float circleY;private float circleX;private ValueAnimator animator;private boolean isStart;private int duration = 600;private int arcColor = Color.parseColor("#005F91");public ArcNetView(Context context) {super(context);init(context, null);}public ArcNetView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init(context, attrs);}public ArcNetView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context, attrs);}/*** 初始化** @param context* @param attrs*/private void init(Context context, AttributeSet attrs) {TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.NetworkView);arcCount = array.getColor(R.styleable.NetworkView_arc_count, arcCount);arcColor = array.getColor(R.styleable.NetworkView_arc_color, arcColor);radius = array.getDimension(R.styleable.NetworkView_arc_radius, radius);arcStrokeWidth = array.getDimension(R.styleable.NetworkView_arc_stroke_width, arcStrokeWidth);arcPadding = array.getDimension(R.styleable.NetworkView_arc_padding, arcPadding);isStart = array.getBoolean(R.styleable.NetworkView_arc_animation, isStart);array.recycle();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);int w = widthSpecSize;int h = heightSpecSize;int needHeight = (int) (radius * arcCount + arcStrokeWidth / 2 + arcPadding * arcCount);if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {w = needHeight;h = needHeight;} else if (widthSpecMode == MeasureSpec.AT_MOST) {w = needHeight;h = heightSpecSize;} else if (heightSpecMode == MeasureSpec.AT_MOST) {w = widthSpecSize;h = needHeight;}setMeasuredDimension(w, h);//获取最终的宽高width = getMeasuredWidth();height = getMeasuredHeight() - getPaddingTop() - getPaddingBottom();radius -= getPaddingLeft() - getPaddingRight();}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);this.canvas = canvas;//初始化画笔paint = new Paint();paint.setColor(arcColor);paint.setStrokeWidth(arcStrokeWidth);paint.setAntiAlias(true);paint.setStyle(Paint.Style.STROKE);circleX = width / 2;circleY = height / 2 + radius * arcCount / 2 + arcStrokeWidth / (arcCount * 2);//类型绘制if (!isStart) {for (int i = 0; i < arcCount; i++) {drawArcView(canvas, i);}//绘制最底部圆drawCircle(canvas, arcColor, circleX, circleY, arcStrokeWidth / 2);} else {animationDraw();}}/*** 动态绘制*/private void animationDraw() {animator = ValueAnimator.ofInt(-1, arcCount + 1);// -1 0 1 2 3animator.setDuration(duration);animator.setInterpolator(new LinearInterpolator());animator.setRepeatCount(-1);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {int value = (int) animation.getAnimatedValue();if (value == arcCount) {canvas.restore();}if (value == -1 || value == arcCount) {drawCircle(canvas, arcColor, circleX, circleY, arcStrokeWidth / 2);}if (value > -1) {drawArcView(canvas, value);}invalidate();Log.e("RRL", "value:" + value);}});animator.start();}/*** 绘制上部分** @param canvas   画布* @param acrIndex 绘制下标[第几个扇形]*/private void drawArcView(Canvas canvas, int acrIndex) {//绘制扇形float arcRadius = radius + (arcStrokeWidth / 2 + arcPadding) * acrIndex;RectF rectF = new RectF(circleX - arcRadius, circleY - arcRadius, circleX + arcRadius, circleY + arcRadius);canvas.drawArc(rectF, startAngle, sweepAngle, false, paint);//绘制两端圆点double angle = (sweepAngle / 2) * Math.PI / 180;float x = (float) (Math.sin(angle) * arcRadius);float y = (float) (Math.cos(angle) * arcRadius);//左边圆点drawCircle(canvas, arcColor, circleX - x, circleY - y, arcStrokeWidth / 2);//右边圆点drawCircle(canvas, arcColor, circleX + x, circleY - y, arcStrokeWidth / 2);}/*** 绘制圆** @param canvas  画布* @param color   颜色* @param circleX 圆中心X* @param circleY 圆中心Y* @param radius  圆半径*/public void drawCircle(Canvas canvas, int color, float circleX, float circleY, float radius) {Paint circlePaint = new Paint();circlePaint.setColor(color);circlePaint.setStyle(Paint.Style.FILL);circlePaint.setAntiAlias(true);canvas.drawCircle(circleX, circleY, radius, circlePaint);}public static float dpToPx(float dp) {return dp * getScreenDensity();}public static float getScreenDensity() {return Resources.getSystem().getDisplayMetrics().density;}/*** 设置扇形高度** @param arcStrokeWidth*/public void setStrokeWidth(float arcStrokeWidth) {this.arcStrokeWidth = dpToPx(arcStrokeWidth);}/*** 设置扇形的半径** @param radius*/public void setRadius(float radius) {this.radius = dpToPx(radius);}/*** 设置扇形的间距** @param arcPadding*/public void setArcPadding(float arcPadding) {this.arcPadding = dpToPx(arcPadding);}/*** 设置扇形数量** @param arcCount*/public void setArcCount(int arcCount) {this.arcCount = arcCount;}/*** 设置开始角度** @param startAngle*/public void setStartAngle(float startAngle) {this.startAngle = startAngle;this.sweepAngle = Math.abs(startAngle + 90) * 2;}/*** 设置颜色** @param color*/public void setColor(int color) {this.arcColor = color;}/*** 设置动画时间** @param duration*/public void setDuration(int duration) {this.duration = duration;}/*** 开始动画*/public void startAnimation() {isStart = true;invalidate();}/*** 停止动画*/public void stopAnimation() {isStart = false;if (animator != null) {animator.removeAllUpdateListeners();animator = null;}invalidate();}}

这篇关于Android 扇形网络控件 - 无网络视图（动画）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1089468。

相关文章

【Altium】查找PCB上未连接的网络

【Altium】查找PCB上未连接的网络

【更多软件使用问题请点击亿道电子官方网站】 1、文档目标： PCB设计后期检查中找出没有连接的网络 应用场景：PCB设计后期，需要检查是否所有网络都已连接布线。虽然未连接的网络会有飞线显示，但是由于布线后期整板布线密度较高，虚连，断连的网络用肉眼难以轻易发现。用DRC检查也可以找出未连接的网络，如果PCB中DRC问题较多，查找起来就不是很方便。使用PCB Filter面板来达成目的相比DRC
阅读更多...
通信系统网络架构_2.广域网网络架构

通信系统网络架构_2.广域网网络架构

1.概述          通俗来讲，广域网是将分布于相比局域网络更广区域的计算机设备联接起来的网络。广域网由通信子网于资源子网组成。通信子网可以利用公用分组交换网、卫星通信网和无线分组交换网构建，将分布在不同地区的局域网或计算机系统互连起来，实现资源子网的共享。 2.网络组成          广域网属于多级网络，通常由骨干网、分布网、接入网组成。在网络规模较小时，可仅由骨干网和接入网组成
阅读更多...
Eclipse+ADT与Android Studio开发的区别

Eclipse+ADT与Android Studio开发的区别

下文的EA指Eclipse+ADT,AS就是指Android Studio。 就编写界面布局来说AS可以边开发边预览（所见即所得,以及多个屏幕预览），这个优势比较大。AS运行时占的内存比EA的要小。AS创建项目时要创建gradle项目框架，so,创建项目时AS比较慢。android studio基于gradle构建项目，你无法同时集中管理和维护多个项目的源码，而eclipse ADT可以同时打开
阅读更多...
android 免费短信验证功能

android 免费短信验证功能

没有太复杂的使用的话，功能实现比较简单粗暴。 在www.mob.com网站中可以申请使用免费短信验证功能。 步骤： 1.注册登录。 2.选择“短信验证码SDK” 3.下载对应的sdk包，我这是选studio的。 4.从头像那进入后台并创建短信验证应用，获取到key跟secret 5.根据技术文档操作（initSDK方法写在setContentView上面） 6.关键：在有用到的Mo
阅读更多...
android一键分享功能部分实现

android一键分享功能部分实现

为什么叫做部分实现呢，其实是我只实现一部分的分享。如新浪微博，那还有没去实现的是微信分享。还有一部分奇怪的问题：我QQ分享跟QQ空间的分享功能，我都没配置key那些都是原本集成就有的key也可以实现分享，谁清楚的麻烦详解下。 实现分享功能我们可以去www.mob.com这个网站集成。免费的，而且还有短信验证功能。等这分享研究完后就研究下短信验证功能。 开始实现步骤（新浪分享，以下是本人自己实现
阅读更多...
Android我的二维码扫描功能发展史（完整）

Android我的二维码扫描功能发展史（完整）

最近在研究下二维码扫描功能，跟据从网上查阅的资料到自己勉强已实现扫描功能来一一介绍我的二维码扫描功能实现的发展历程： 首页通过网络搜索发现做android二维码扫描功能看去都是基于google的ZXing项目开发。 2、搜索怎么使用ZXing实现自己的二维码扫描：从网上下载ZXing-2.2.zip以及core-2.2-source.jar文件，分别解压两个文件。然后把.jar解压出来的整个c
阅读更多...
android 带与不带logo的二维码生成

android 带与不带logo的二维码生成

该代码基于ZXing项目，这个网上能下载得到。 定义的控件以及属性： public static final int SCAN_CODE = 1;private ImageView iv;private EditText et;private Button qr_btn,add_logo;private Bitmap logo,bitmap,bmp; //logo图标private st
阅读更多...
Toolbar+DrawerLayout使用详情结合网络各大神

Toolbar+DrawerLayout使用详情结合网络各大神

最近也想搞下toolbar+drawerlayout的使用。结合网络上各大神的杰作，我把大部分的内容效果都完成了遍。现在记录下各个功能效果的实现以及一些细节注意点。 这图弹出两个菜单内容都是仿QQ界面的选项。左边一个是drawerlayout的弹窗。右边是toolbar的popup弹窗。 开始实现步骤详情： 1.创建toolbar布局跟drawerlayout布局 <?xml vers
阅读更多...
Android多线程下载见解

Android多线程下载见解

通过for循环开启N个线程，这是多线程，但每次循环都new一个线程肯定很耗内存的。那可以改用线程池来。 就以我个人对多线程下载的理解是开启一个线程后： 1.通过HttpUrlConnection对象获取要下载文件的总长度 2.通过RandomAccessFile流对象在本地创建一个跟远程文件长度一样大小的空文件。 3.通过文件总长度/线程个数=得到每个线程大概要下载的量（线程块大小）。
阅读更多...
时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

时间服务器中，适用于国内的 NTP 服务器地址，可用于时间同步或 Android 加速 GPS 定位

NTP 是什么？   NTP 是网络时间协议（Network Time Protocol），它用来同步网络设备【如计算机、手机】的时间的协议。 NTP 实现什么目的？   目的很简单，就是为了提供准确时间。因为我们的手表、设备等，经常会时间跑着跑着就有误差，或快或慢的少几秒，时间长了甚至误差过分钟。 NTP 服务器列表 最常见、熟知的就是 www.pool.ntp.org/zo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2