안드로이드 플래시 페이지 원형 카운트다운 진행률 게이지 구현

5401 단어
전언
현재 우리의 앱에는 기본적으로 플래시 페이지가 있는데 플래시 페이지에는 대부분 광고 정보나 우리 자신의 로고 등 홍보 사진의 전시를 넣는다. 이와 비슷한 효과는 다음과 같다.
사고의 방향
사용자 정의 View를 사용하면 View의 다시 그리기 방법Invalidate()을 통해onDraw()에서 서로 다른 호도의 호를 계속 그려서 표시 진도를 바꾸는 것이 간단하지 않습니까?구체적인 실현을 보도록 하겠습니다.
  • 그리는 위치를 정하고 먼저 onDraw()에서 View의 넓이를 가져와 사각형을 우리의 그리는 범위로 정의한다:
  •         int width = this.getWidth();
            int height = this.getHeight();
    
            if (width != height) {
                int min = Math.min(width, height);
                width = min;
                height = min;
            }
            
            //            mStrokeWidth      
            //         /2    ,     ,        ,             
            mRectF.left = mStrokeWidth / 2;
            mRectF.top = mStrokeWidth / 2;
            mRectF.right = width - mStrokeWidth / 2;
            mRectF.bottom = height - mStrokeWidth / 2;
    
  • 배경색을 그립니다. 여기 반은 반투명한 색입니다. 이 안의 반은 시간을 건너뛰거나 카운트다운하는 문자를 표시하기 때문에 불투명해서 아래 그림을 볼 수 없습니다. 전체 투명하면 글씨체 색과 밑에 있는 그림의 색이 비슷해서 잘 보이지 않을 수도 있습니다.so~붓 색깔과 충전 모드를 조정하면 됩니다. canvas 배경색은 전체 투명으로 설정해야 합니다.
  •         //       
            canvas.drawColor(Color.TRANSPARENT);
    
            //          
            mPaint.setColor(Color.parseColor("#33000000"));
            //         
            mPaint.setStyle(Paint.Style.FILL);
            //     
            canvas.drawOval(mRectF, mPaint);
    
  • 붓의 속성을 조정하여 원호를 그립니다. 여기서 주의해야 할 것은 원호를 그릴 때의 시작 각도는 3시 방향은 0도, 12시 방향은 -90도입니다.
  •         //    
            mPaint.setAntiAlias(true);              //   
            mPaint.setColor(paintColor);            //      
            mPaint.setStyle(Paint.Style.STROKE);    //         
            mPaint.setStrokeWidth(mStrokeWidth);    //      
    
            //                    ,        ,                     
            //                       
            //                       ,            
            //                        ,true         false       
            //          mProgress     ,-          
            canvas.drawArc(mRectF, -90, -(mProgress / mMaxProgress) * 360, false, mPaint);
    
  • 시간진도 계산은 이곳의 방법이 최적화되어야 하기 때문에 별로 좋지 않다.현재는 짧은 시간sleep를 순환적으로 제어하고 View의 리셋 방법을 사용하여 그림 진도를 업데이트합니다. 하위 라인에서 postInvalidate() 방법을 사용해야 리셋할 수 있습니다.
  • /**
         *      
         *
         * @param time          
         */
        public void startDownTime(final long time) {
            //    
            mMaxProgress = 100;
            //           
            new Thread(new Runnable() {
                @Override
                public void run() {
                    for (int i = (int) mMaxProgress; i >= 0; i--) {
                        try {
                            Thread.sleep((long) (time / mMaxProgress));
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        mProgress = (float) i;
                        //               invalidate()   ui    
                        ProgressView.this.postInvalidate();
                    }
                }
            }).start();
        }
    

    총결산
    마지막 단계 집합의 스트리밍 방법을 바꾸어 진도표를 그리는 방식을 바꿀 수 있고, 그릴 때의 각도의 양과 음으로 방향을 제어할 수 있다.원본 데모는 여기에서 다운로드할 수 있습니다: Github로 이동하려면 누르십시오
    질문과 건의가 있으면 댓글로 알려주세요.

    좋은 웹페이지 즐겨찾기