android自定义loding view（上）

此文的github地址：https://github.com/1181631922/OrliteDemo

也算是需求需要把，需要自定义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

写给自己：不知应无畏，可潜意识却胆怯