Android 사용자 정의 view 의 태극 도 구현 튜 토리 얼

9715 단어 android사용자 정의 뷰태극 도
태극 도
목요일 여가 시간 이 비교적 많 았 는데 마침 며칠 전에 초등학교 동생 에 게 문 제 를 해결 하기 위해 안 드 로 이 드 의 지식 을 돌 이 켜 보 았 습 니 다.(학교 에 다 닐 때 예전 에 출근 해서 배 운 것 을 잃 어 버 리 지 못 했 습 니 다)그래서 사용자 정의 view 에 관 한 글 을 썼 습 니 다.
마지막 완성 모습(회전 가능)

이 글 은 Canvas 를 사용 하여 간단 한 그림,사용자 정의 속성,속성 애니메이션 ObjectAnimator 의 회전 애니메이션 을 그립 니 다.
제시:다음은 이 글 의 본문 내용 입 니 다.
태극
먼저 정 의 된 것 을 소개 합 니 다.

  private int useWidth; //        
  private int leftcolor; //      （ ）
  private int rightcolor;//      （ ）
1.첫 번 째 단 계 는 한쪽 은 검 고 한쪽 은 하 얀 원 을 그린다.

    mPaint.setColor(leftcolor);
    canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, -180, true, mPaint);

    mPaint.setColor(rightcolor);
    canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, 180, true, mPaint);
효과:

2.두 번 째 단 계 는 흑백 두 개의 작은 원 을 그린다.

    mPaint.setColor(leftcolor);
    canvas.drawArc(new RectF(useWidth / 4, 0, useWidth / 2 +useWidth / 4, useWidth / 2),
        270, 360, true, mPaint);

    mPaint.setColor(rightcolor);
    canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
        270, 360, true, mPaint);
효과:

3.세 번 째 단 계 는 흑백 두 개의 더 작은 원 을 그린다.

    mPaint.setColor(leftcolor);
    canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);

    mPaint.setColor(rightcolor);
    canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);
효과.

2.태극 회전 시 키 기
먼저 정 의 된 것 을 간단하게 소개 하 겠 습 니 다.

 private ObjectAnimator objectAnimator;//    
 private int animaltime;//       （  ）
1.회전의 시작 방법

//         
  public void createAnimation() {
    if (objectAnimator==null){
      objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//      ，           
      objectAnimator.setDuration(animaltime);//      
      objectAnimator.setInterpolator(new LinearInterpolator());//        
      objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
      objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
      objectAnimator.start();//    
    }else{
      objectAnimator.resume();//      
    }


  }
2.회전 하 는 일시 정지 방법(계속 회전 가능)

  public void stopAnimation(){
    if (objectAnimator!=null){
      objectAnimator.pause();//     .end()    
    }
  }
3.회전 정지 방법(계속 회전 불가)

  public void cleanAnimation(){
    if (objectAnimator!=null){
      objectAnimator.end(); //    
    }
  }
3.사용자 정의 속성(색상,애니메이션 속도)
1.새 attrs 파일

2.속성 정의

  <declare-styleable name="TaiJiView">
    <attr name="leftcolor" format="reference|color"/>
    <attr name="rightcolor" format="reference|color"/>
    <attr name="animaltime" format="integer"/>
  </declare-styleable>
3.레이아웃 에 사용

    app:leftcolor="@color/colorAccent"
    app:rightcolor="@color/colorPrimaryDark"
    app:animaltime="3000"
4.자바 파일 에서 레이아웃 에 정 의 된 값 가 져 오기

 /**
          
   */
  private void initCustomAttrs(Context context, AttributeSet attrs) {
    //       。
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TaiJiView);
    //      
    leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor, Color.BLACK);
    rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor, Color.WHITE);
    //  
    animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000);

    //  
    ta.recycle();

  }
마지막 으로 한번 돌려 볼 게 요.

소스 코드
1.TaiJiView.java

public class TaiJiView extends View{
  private Paint mPaint;
  private int mWidth;
  private int mHeight;
  private int useWidth;
  private int leftcolor;
  private int rightcolor;
  private ObjectAnimator objectAnimator;
  private int animaltime;
  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  public TaiJiView(Context context) {
    this(context,null);
  }

  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  public TaiJiView(Context context, @Nullable AttributeSet attrs) {
    this(context, attrs,0);
  }

  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    this(context, attrs, defStyleAttr,0);
    initCustomAttrs(context,attrs);
  }

  @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
  public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
    init();

  }
  private void init() {
    initPaint();
  }


  /**
          
   */
  private void initCustomAttrs(Context context, AttributeSet attrs) {
    //       。
    TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TaiJiView);
    //      
    leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor, Color.BLACK);
    rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor, Color.WHITE);
    animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000);

    //  
    ta.recycle();

  }
  /**
   *      
   */
  private void initPaint() {
    mPaint = new Paint();    //      
    mPaint.setColor(Color.BLACK);  //      
    mPaint.setStyle(Paint.Style.FILL); //         
    mPaint.setStrokeWidth(10f);   //       10px
    mPaint.setAntiAlias(true);   //     
    mPaint.setAlpha(255);    //       
  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mWidth = w;
    mHeight = h;
    useWidth=mWidth;
    if (mWidth>mHeight){
      useWidth=mHeight;
    }
  }


  @RequiresApi(api = Build.VERSION_CODES.KITKAT)
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPaint.setColor(leftcolor);
    canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, -180, true, mPaint);

    mPaint.setColor(rightcolor);
    canvas.drawArc(new RectF(0, 0, useWidth, useWidth), 270, 180, true, mPaint);

    mPaint.setColor(leftcolor);
    canvas.drawArc(new RectF(useWidth / 4, 0, useWidth / 2 +useWidth / 4, useWidth / 2),
        270, 360, true, mPaint);

    mPaint.setColor(rightcolor);
    canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
        270, 360, true, mPaint);
    mPaint.setColor(leftcolor);
    canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);

    mPaint.setColor(rightcolor);
    canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);

  }

  @RequiresApi(api = Build.VERSION_CODES.KITKAT)
  public void createAnimation() {
    if (objectAnimator==null){
      objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//      ，           
      objectAnimator.setDuration(animaltime);//      
      objectAnimator.setInterpolator(new LinearInterpolator());//        
      objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
      objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
      objectAnimator.start();//    
    }else{
      objectAnimator.resume();//      
    }


  }
  @RequiresApi(api = Build.VERSION_CODES.KITKAT)
  public void stopAnimation(){
    if (objectAnimator!=null){
      objectAnimator.pause();//     .end()    
    }
  }
  public void cleanAnimation(){
    if (objectAnimator!=null){
      objectAnimator.end(); //    
    }
  }
}
2.attrs 파일

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <declare-styleable name="TaiJiView">
    <attr name="leftcolor" format="reference|color"/>
    <attr name="rightcolor" format="reference|color"/>
    <attr name="animaltime" format="integer"/>
  </declare-styleable>
</resources>
총결산
도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.선배 님 들 의 평 가 를 환영 합 니 다.
안 드 로 이 드 사용자 정의 view 의 태극 도 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 안 드 로 이 드 사용자 정의 view 의 태극 도 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
PHP 는 HTTPS 내용 을 캡 처 합 니 다.
페이지 는 점진 적 인 JPEG 를 이용 하여 사용자 체험 도 를 향상 시킨다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage