안 드 로 이 드 사용자 정의 플래시 페이지 광고 카운트다운 view 효과

현재 앱 이 점점 많아 지고 있 습 니 다.우리 가 매일 사용 하 는 소프트웨어 도 점점 많아 지고 있 습 니 다.그러나 우리 가 비용 을 지불 하지 않 는 상황 에서 앱 제조 업 체 는 어떻게 실현 하고 수입,심지어 이윤 을 창 출 합 니까?정 답 은 우리 가 소프트웨어 를 켜 는 데 반드시 거 쳐 야 하 는 곳 에 광 고 를 삽입 하 는 것 입 니 다.물론 사용자 의 느낌 을 고려 하기 위해 보통 카운트다운 형식 으로 사용자 에 게 보 여 줍 니 다.사용 자 는 건 너 뛰 기 를 선택 할 수 있 습 니 다.자신의 강박 증 때 문인 지 어떻게 해 야 할 지 스스로 시도 해 보 았 습 니 다.여러분 에 게 공유 하 는 동시에 자신의 이 해 를 강화 할 수 있 습 니 다.효 과 는 그림 과 같 습 니 다.

 
1.제품 과 디자인 을 만족 시 키 기 위해 먼저 몇 가지 사용자 정의 속성 을 만 듭 니 다.
1)내부 배경
2)숫자의 색깔
3)바깥쪽 링 너비
4)텍스트 크기
5)겉 고리 색
6)원 의 반지름
 여기 서 제 외 환 색상 은 텍스트 색상 과 같 습 니 다.구체 적 인 사용자 정의 속성 은 다음 과 같 습 니 다.

<declare-styleable name="AdTimePickView">
  <attr name="mSmallCircleBg" format="color"></attr>
  <attr name="mTextSize1" format="dimension"></attr>
  <attr name="mTextColor1" format="color"></attr>
  <attr name="mProgressWidth" format="dimension"></attr>
  <attr name="mRadius" format="dimension"></attr>
 </declare-styleable>

--------------------------------------------------------------------------------
2.사용자 정의 View 의 구조 방법 에서 사용자 정의 속성 읽 기:

mProgressViewWidth = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mProgressWidth, DEFAULT_PROGRESS_WIDTH);
  mRadius = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mRadius1, DEFAULT_RADIUS);
  mSmallCircleBg = typedArray.getColor(R.styleable.AdTimePickView_mSmallCircleBg, Color.parseColor(DEFAULT_BG_COLOR));
  mTextSize = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mTextSize1, DEFAULT_TEXT_SIZE);
  mTextColor = typedArray.getColor(R.styleable.AdTimePickView_mTextColor1, Color.parseColor(DEFAULT_TEXT_COLOR));

--------------------------------------------------------------------------------
3.onMeasure()방법 을 다시 쓰 고,
너비 에 따라 반경 이 나 오 는데 왜 사용자 정의 반경 이 적용 되 지 않 습 니까?너비 에 따라 반경 이 나 오 는 것 이 이 View 의 내 절 원 반경 이기 때문에 사용자 정의 반경 은 너비 에 따라 반경 이 나 오지 않 는 상황 에서 만 사용 된다.

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  mWidth = getViewSize(widthMeasureSpec, 0);
  mHeight = getViewSize(heightMeasureSpec, 1);
  mRadius = Math.min(mWidth, mHeight) / 2;
  setMeasuredDimension(mWidth, mHeight);
 }

    getView Size 방법 은 다음 과 같 습 니 다.

 private int getViewSize(int viewMeasureSpec, int type) {
  int viewValue = 0;
  int viewSize = MeasureSpec.getSize(viewMeasureSpec);
  int viewMode = MeasureSpec.getMode(viewMeasureSpec);
  if (MeasureSpec.EXACTLY == viewMode) {
   viewValue = viewSize;
   if (type == 0) {
    mCirCleX = viewSize / 2;
   } else {
    mCircleY = viewSize / 2;
   }
  } else {
   if (type == 0) {
    mCirCleX = mRadius;
   } else {
    mCircleY = mRadius;
   }
   viewValue = 2 * (mRadius + mProgressViewWidth);
  }
  return viewValue;
 }

--------------------------------------------------------------------------------
4.onDraw 방법 으로 그리 기
1)안쪽 원 그리 기

canvas.drawCircle(mCirCleX, mCircleY, (float) (mRadius - 1.5 * mProgressViewWidth), mPaint);

2)텍스트 를 그립 니 다.텍스트 의 위 치 를 계산 하여 가운데 로 유지 합 니 다.

 Rect textRect = getTextRect(String.valueOf(mAdTIme));
  Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
  int baseLine = (int) (mHeight / 2 + (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent);
  int x = mWidth / 2 - textRect.width() / 2;
  canvas.drawText(String.valueOf(mAdTIme), x, baseLine, mTextPaint);
//       Rect  
private Rect getTextRect(String centerContent) {
  Rect rect = new Rect();
  mTextPaint.getTextBounds(centerContent, 0, centerContent.length(), rect);
  return rect;
 }

3)바깥쪽 에 새로 고침 되 는 링 그리 기 
 원리:360 도로 부터 일정 시간 간격 으로 원 호 를 그립 니 다.각 도 는 각각 360,359,1,0 입 니 다.따라서 폴 더 가 필요 합 니 다.끊임없이 새로 고침 을 그립 니 다.
원호 코드 그리 기:    

 //  Canvans   ,         ,Canvas        
  canvas.save();
  //      View        90  ,          
  canvas.rotate(-90, mCirCleX, mCircleY);
  //     RectF
  RectF rectF = new RectF(mCirCleX - mRadius + mProgressViewWidth, mCirCleX - mRadius + mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth);
  //                 
  canvas.drawArc(rectF, 0, -mCurrentAngle, false, mPaint);
  //     
  canvas.restore();

--------------------------------------------------------------------------------
5.새로 고침 폴 더
1)RxAndroid 와 lambda 를 사용 하여 구현

//interval   ： 1              
Observable.interval(1, TIME_DIFF, TimeUnit.MILLISECONDS)
    //map                   
    .map(value -> {
     return countAngel - value.intValue();
    })
    //         ，    ，         
    .limit(361)
    //       
    .subscribe(action -> {
     if (action % 72 == 0) {
      mAdTIme = action / 72;
     }
     mCurrentAngle = action;
     AdTimePickView.this.postInvalidate();
    });

2)스 레 드 방식 으로 구현

new Thread(new Runnable() {
   @Override
   public void run() {
    for (int i = 360; i>=0;i--){
     try {
      Thread.sleep(100);
     } catch (InterruptedException e) {
      e.printStackTrace();
     }
     if (i % 72 == 0) {
      mAdTIme = i / 72;
     }
     mCurrentAngle = i;
     AdTimePickView.this.postInvalidate();
    }
   }
  }).start();

OK,이렇게 해서 저희 광고 카운트다운 View 가 완성 되 었 습 니 다.여러분 의 지적 을 환영 합 니 다.
첨부:전체 사용자 정의 View 코드

public class AdTimePickView extends View {
private Paint mPaint;
private Paint mTextPaint;
//    
private int mRadius = 200;
//      
private int mSmallCircleBg = Color.parseColor("#66f1679b");
//        
private int mProgressViewWidth = 10;
private float mCurrentAngle;
private static final int TIME_DIFF = 25;
//    
private int mCirCleX;
private int mCircleY;
//    View   ,           
private int mWidth;
private int mHeight;
//          
private int mTextSize;
private int mTextColor;
//     
private int mAdTIme = 5;
private Context mContext;
public AdTimePickView(Context context) {
 this(context, null);
}
public AdTimePickView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
}
public AdTimePickView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.AdTimePickView, defStyleAttr, 0);
 mProgressViewWidth = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mProgressWidth, 10);
 mRadius = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mRadius1, 100);
 mSmallCircleBg = typedArray.getColor(R.styleable.AdTimePickView_mSmallCircleBg, Color.parseColor("#66f1679b"));
 mTextSize = typedArray.getDimensionPixelSize(R.styleable.AdTimePickView_mTextSize1, 20);
 mTextColor = typedArray.getColor(R.styleable.AdTimePickView_mTextColor1, Color.parseColor("#333333"));
 //       
 typedArray.recycle();
 this.mContext = context;
 init();
}
private void init() {
 mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mPaint.setAntiAlias(true);
 mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
 mTextPaint.setColor(mTextColor);
 mTextPaint.setTextSize(mTextSize);
 mTextPaint.setStyle(Paint.Style.FILL);
 mTextPaint.setAntiAlias(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 mWidth = getViewSize(widthMeasureSpec, 0);
 mHeight = getViewSize(heightMeasureSpec, 1);
 //   
 mRadius = Math.min(mWidth, mHeight) / 2;
 setMeasuredDimension(mWidth, mHeight);
}
private int getViewSize(int viewMeasureSpec, int type) {
 int viewValue = 0;
 int viewSize = MeasureSpec.getSize(viewMeasureSpec);
 int viewMode = MeasureSpec.getMode(viewMeasureSpec);
 if (MeasureSpec.EXACTLY == viewMode) {
  viewValue = viewSize;
  if (type == 0) {
   mCirCleX = viewSize / 2;
  } else {
   mCircleY = viewSize / 2;
  }
 } else {
  if (type == 0) {
   mCirCleX = mRadius;
  } else {
   mCircleY = mRadius;
  }
  viewValue = 2 * (mRadius + mProgressViewWidth);
 }
 return viewValue;
}
@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 mPaint.setColor(mSmallCircleBg);
 mPaint.setStyle(Paint.Style.FILL);
 canvas.drawCircle(mCirCleX, mCircleY, (float) (mRadius - 1.5 * mProgressViewWidth), mPaint);
 //      
 mPaint.setColor(mTextColor);
 mPaint.setStyle(Paint.Style.STROKE);
 mPaint.setStrokeWidth(mProgressViewWidth);
 //  Canvans   
 canvas.save();
 //      View        90  
 canvas.rotate(-90, mCirCleX, mCircleY);
 RectF rectF = new RectF(mCirCleX - mRadius + mProgressViewWidth, mCirCleX - mRadius + mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth, mCirCleX + mRadius - mProgressViewWidth);
 //                 
 canvas.drawArc(rectF, 0, -mCurrentAngle, false, mPaint);
 canvas.restore();
 Rect textRect = getTextRect(String.valueOf(mAdTIme));
 Paint.FontMetrics fontMetrics = mTextPaint.getFontMetrics();
 int baseLine = (int) (mHeight / 2 + (fontMetrics.descent - fontMetrics.ascent) / 2 - fontMetrics.descent);
 int x = mWidth / 2 - textRect.width() / 2;
 canvas.drawText(String.valueOf(mAdTIme), x, baseLine, mTextPaint);
}
private Rect getTextRect(String centerContent) {
 Rect rect = new Rect();
 mTextPaint.getTextBounds(centerContent, 0, centerContent.length(), rect);
 return rect;
}
public void refresh() {
 final int countAngel = 360;
 Observable.interval(1, TIME_DIFF, TimeUnit.MILLISECONDS)
   .map(value -> {
    return countAngel - value.intValue();
   })
   .limit(361)
   .subscribe(action -> {
    if (action % 72 == 0) {
     mAdTIme = action / 72;
    }
    mCurrentAngle = action;
    AdTimePickView.this.postInvalidate();
   });
}
}

위 에서 말 한 것 은 소 편 이 소개 한 안 드 로 이 드 사용자 정의 플래시 페이지 광고 카운트다운 view 효과 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 지지 에 감 사 드 립 니 다!