android自定义loding view(上)
2016-04-21 15:40
225 查看
此文的github地址:https://github.com/1181631922/OrliteDemo
也算是需求需要把,需要自定义loading,相信如果是一般情况下都会是想到用帧动画吧,下面是实现此loading的第一步,先让他实现静态的画面,ok,下面上代码:
ok,到现在为止静态的loading实现完成,还需要完成两个步骤,一是动态必不可少,第二是加上loading text,这我打算加上visable或者gone
写给自己:不知应无畏,可潜意识却胆怯
也算是需求需要把,需要自定义loading,相信如果是一般情况下都会是想到用帧动画吧,下面是实现此loading的第一步,先让他实现静态的画面,ok,下面上代码:
CircleLoadingView
package com.fanyafeng.orlitedemo.myview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.util.Log; import android.view.View; /** * Created by 365rili on 16/4/20. */ public class CircleLoadingView extends View { private Paint circleContour; public CircleLoadingView(Context context) { super(context); } public CircleLoadingView(Context context, AttributeSet attrs) { super(context, attrs); circleContour = new Paint(Paint.ANTI_ALIAS_FLAG); } public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); float circleContourStrokeWidth = 5; circleContour.setAntiAlias(true); circleContour.setColor(Color.parseColor("#3498DB")); // circleContour.setStyle(Paint.Style.STROKE); circleContour.setStrokeWidth(circleContourStrokeWidth); float startX = getLeft(); float endX = getRight(); float startY = getTop(); float endY = getBottom(); float height = getHeight(); float width = getWidth(); // 轮廓的半径 float circleContourRadius = (endY > endX ? (endX - startX) / 2 - circleContourStrokeWidth / 2 : (endY - startY) / 2 - circleContourStrokeWidth / 2); float circleCountourX = width / 2; float circleCountourY = height / 2; // canvas.drawCircle(circleCountourX, circleCountourY, circleContourRadius, circleContour); // 画一条垂直的线 // canvas.drawLine(circleCountourX, circleCountourY, circleCountourX, circleCountourY - circleContourRadius, circleContour); // 根据公式推导,每个间隔所占的角度为:11.25度,最小的圆的度数为7.5度,每个圆以7.5度等差增长,一共需要画8个圆 // 第一个:sin3.75*第一个大圆的半径 sin7.5 sin11.25 sin15 sin18.75 sin22.5 sin26.25 sin30 // 内接大圆的直径为外接大圆半径的三分之二 float radius = circleContourRadius / 3; // loading圆们距离圆心的距离 float circleLength = 2 * radius; // 每一度所对应的数值 double everyRadiusLength = 2 * Math.PI / 360; Log.d("TAG", "圆心距离:" + circleLength + "每一度的距离:" + everyRadiusLength); // 每个间隔的角度 double spaceAngle = 11.25; // 画最后一个要旋转的圆(大圆) // canvas.drawCircle(circleCountourX, circleCountourY - radius * 2, (float) eighthRadius, circleContour); double eighthAngle = 30; double eighthX = circleCountourX - circleLength * Math.sin(eighthAngle * everyRadiusLength); double eighthY = circleCountourY - circleLength * Math.cos(eighthAngle * everyRadiusLength); double eighthRadius = circleLength * Math.sin(eighthAngle * everyRadiusLength); canvas.drawCircle((float) eighthX, (float) eighthY, (float) eighthRadius, circleContour); double seventhAngle = 30 * 2 + spaceAngle + 26.25; double seventhX = circleCountourX - circleLength * Math.sin(seventhAngle * everyRadiusLength); double seventhY = circleCountourY - circleLength * Math.cos(seventhAngle * everyRadiusLength); double seventhRadius = circleLength * Math.sin(26.25 * everyRadiusLength); canvas.drawCircle((float) seventhX, (float) seventhY, (float) seventhRadius, circleContour); double sixthAngle = 30 * 2 + spaceAngle + 26.25 * 2 + spaceAngle + 22.5; double sixthX = circleCountourX - circleLength * Math.sin(sixthAngle * everyRadiusLength); double sixthY = circleCountourY - circleLength * Math.cos(sixthAngle * everyRadiusLength); double sixthRadius = circleLength * Math.sin(22.5 * everyRadiusLength); canvas.drawCircle((float) sixthX, (float) sixthY, (float) sixthRadius, circleContour); double fifthAngle = 30 * 2 + spaceAngle + 26.25 * 2 + spaceAngle + 22.5 * 2 + spaceAngle + 18.75; double fifthX = circleCountourX - circleLength * Math.sin(fifthAngle * everyRadiusLength); double fifthY = circleCountourY - circleLength * Math.cos(fifthAngle * everyRadiusLength); double fifthRadius = circleLength * Math.sin(18.75 * everyRadiusLength); canvas.drawCircle((float) fifthX, (float) fifthY, (float) fifthRadius, circleContour); double forthAngle = 30 * 2 + spaceAngle + 26.25 * 2 + spaceAngle + 22.5 * 2 + spaceAngle + 18.75 * 2 + spaceAngle + 15; double forthX = circleCountourX - circleLength * Math.sin(forthAngle * everyRadiusLength); double forthY = circleCountourY - circleLength * Math.cos(forthAngle * everyRadiusLength); double forthRadius = circleLength * Math.sin(15 * everyRadiusLength); canvas.drawCircle((float) forthX, (float) forthY, (float) forthRadius, circleContour); double thirdAngle = 30 * 2 + spaceAngle + 26.25 * 2 + spaceAngle + 22.5 * 2 + spaceAngle + 18.75 * 2 + spaceAngle + 15 * 2 + spaceAngle + 11.25; double thirdX = circleCountourX - circleLength * Math.sin(thirdAngle * everyRadiusLength); double thirdY = circleCountourY - circleLength * Math.cos(thirdAngle * everyRadiusLength); double thirdRadius = circleLength * Math.sin(11.25 * everyRadiusLength); canvas.drawCircle((float) thirdX, (float) thirdY, (float) thirdRadius, circleContour); double secondAngle = 30 * 2 + spaceAngle + 26.25 * 2 + spaceAngle + 22.5 * 2 + spaceAngle + 18.75 * 2 + spaceAngle + 15 * 2 + spaceAngle + 11.25 * 2 + spaceAngle + 7.5; double secondX = circleCountourX - circleLength * Math.sin(secondAngle * everyRadiusLength); double secondY = circleCountourY - circleLength * Math.cos(secondAngle * everyRadiusLength); double secondRadius = circleLength * Math.sin(7.5 * everyRadiusLength); canvas.drawCircle((float) secondX, (float) secondY, (float) secondRadius, circleContour); // 求出第一个圆的x和y的位置 double firstAngle = 30 * 2 + spaceAngle + 26.25 * 2 + spaceAngle + 22.5 * 2 + spaceAngle + 18.75 * 2 + spaceAngle + 15 * 2 + spaceAngle + 11.25 * 2 + spaceAngle + 7.5 * 2 + spaceAngle + 3.75; double firstX = circleCountourX - circleLength * Math.sin(firstAngle * everyRadiusLength); double firstY = circleCountourY - circleLength * Math.cos(firstAngle * everyRadiusLength); double firstRadius = circleLength * Math.sin(3.75 * everyRadiusLength); canvas.drawCircle((float) firstX, (float) firstY, (float) firstRadius, circleContour); Log.d("TAG", "第一个圆半径:" + firstRadius + "第二个圆半径:" + secondRadius + "第三个圆半径:" + thirdRadius + "第四个圆半径:" + forthRadius); Log.d("TAG", "第五个圆半径:" + fifthRadius + "第六个圆半径:" + sixthRadius + "第七个圆半径:" + seventhRadius + "第八个圆半径:" + eighthRadius); // 同心圆 // canvas.drawCircle(circleCountourX, circleCountourY, circleLength, circleContour); } }看一下xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.fanyafeng.orlitedemo.activity.CircleLoadingActivity" tools:showIn="@layout/activity_circle_loading"> <com.fanyafeng.orlitedemo.myview.CircleLoadingView android:layout_width="300dp" android:layout_height="300dp" android:layout_centerVertical="true" android:layout_centerHorizontal="true" /> </RelativeLayout>
ok,到现在为止静态的loading实现完成,还需要完成两个步骤,一是动态必不可少,第二是加上loading text,这我打算加上visable或者gone
写给自己:不知应无畏,可潜意识却胆怯
相关文章推荐
- Android Logcat 直接输出JSON格式的数据
- 完全解决!android studio更新 check for updates失败的问题
- Android里Service的bindService()和startService()混合使用深入分析
- Android手机蓝牙开发
- Android5.0如何将第三方so库打包到apk
- 如何查看Android的Keystore文件的SHA1值
- 那些年 Android Studio 遇到的坑
- Android 处理窗口控件大小,形状,像素等工具
- android 高德地图出现【定位失败key鉴权失败】
- Win8下Android SDK的安装与环境变量配置
- Android 解决listView item点击事件被其他控件屏蔽的问题
- Android——天气预报(MVP、Gson和天气、百度地图Api的练习)
- android:layout_weight的真实含义
- Android全屏模式,沉浸模式。粘性沉浸模式
- Android 创建目录方法却创建出一个文件的问题
- Android 解压工具类
- android通知声音
- apk调试时可以运行 ,打包签名之后运行闪退
- android_自定义折叠View
- Android实现View滑动的几种方式