Android 다시 쓰기 View 새로운 컨트롤 실현

일반적으로 안 드 로 이 드 는 사용자 정의 컨트롤 을 실현 하 는 세 가지 방식 이 아 닙 니 다.
I.기 존의 컨트롤 을 계승 하여 컨트롤 의 기능 을 확대 합 니 다.
II.기 존 컨트롤 을 조합 하여 기능 이 더욱 강 한 컨트롤 을 실현 합 니 다.
Ⅲ、View 를 다시 써 서 새로운 컨트롤 을 실현 합 니 다.
본 고 는 가장 어 려 운 사용자 정의 컨트롤 형식 을 토론 하고 View 를 다시 써 서 새로운 컨트롤 을 실현 한다.
우선,우 리 는 어떤 상황 에서 View 를 다시 써 서 새로운 컨트롤 을 실현 해 야 하 는 지 알 아야 한다.일반적으로 우리 가 네 이 티 브 컨트롤 이 기 존의 수 요 를 만족 시 키 지 못 할 때 우 리 는 이때 새로운 View 를 만들어 우리 가 필요 로 하 는 기능 을 실현 하 는 것 을 고려 할 수 있다.새로운 View 를 만 들 고 사용자 정의 컨트롤 을 만 듭 니 다.이 몇 단계 로 나 눌 수 있 습 니 다.
I.OnMeasure()방법 에서 사용자 정의 컨트롤 의 크기 를 측정 하여 사용자 정의 컨트롤 이 레이아웃 의 다양한 수요 에 적응 할 수 있 도록 합 니 다.
II.OnDraw()방법 에 서 는 허 하 2 장(Canvas 와 Paint)을 이용 하여 표시 할 내용 을 그립 니 다.
Ⅲ.OnLayout()방법 에서 컨트롤 의 표시 위 치 를 확인 합 니 다.
Ⅳ、OnTouch Event()방법 으로 컨트롤 의 터치 사건 을 처리 합 니 다.
상응하는 사유 도 는 다음 과 같다.

많이 말 하면 무익 하 다.우 리 는 몇 가지 작은 사례 를 통 해 사용자 정의 컨트롤 을 어떻게 실현 하 는 지 설명 한다.
비례 진도 가 있 는 링 컨트롤
 우선 이 컨트롤 의 설명도 를 보 세 요. 

이 간단 한 설명도 를 통 해 우 리 는 프로젝트 가 완성 한 비율 에 대해 한눈 에 알 수 있다.이 간단 한 설명도 를 통 해 우 리 는 이 도형 을 세 부분 으로 빠르게 나 눌 수 있다.I.바깥쪽 의 고리,II.안의 정원,3.해당 하 는 문자.이런 생각 이 생 긴 후에 우 리 는 onDraw()방법 에서 하나씩 그 려 야 할 뿐이다.간단하게 보기 위해 서 이 컨트롤 의 너 비 를 화면의 너비 로 설정 합 니 다.
우선,사용자 정의 컨트롤 에 사용자 정의 속성 을 설정 하여 호출 자가 확장 할 수 있 도록 합 니 다.사용자 정의 속성 설정 코드 는 다음 과 같 습 니 다.

 <declare-styleable name="circleView">
  <attr name="textSize" format="dimension" />
  <attr name="text" format="string" />
  <attr name="circleColor" format="color" />
  <attr name="arcColor" format="color" />
  <attr name="textColor" format="color" />
  <attr name="startAngle" format="integer" />
  <attr name="sweepAngle" format="integer" />
 </declare-styleable>

I.textSize―중간 텍스트 의 크기 에 대응 합 니 다.
II,text―중간 텍스트 대응
Ⅲ、circle Color―내 원 에 대응 하 는 색
Ⅳ、arcColor―외부 고리 에 대응 하 는 색상
V.textColor-텍스트 에 대응 하 는 색상
VI、startAngle―외부 고리 의 시작 각도 에 대응
VII,sweepAngle―대응 외 환 스 캔 각도
이 어 사용자 정의 컨트롤 을 초기 화 하 는 방법 에서 사용자 정의 속성 을 가 져 옵 니 다.

TypedArray ta = context.obtainStyledAttributes(attrs,
    R.styleable.circleView);
  if (ta != null) {
   circleColor = ta.getColor(R.styleable.circleView_circleColor, 0);
   arcColor = ta.getColor(R.styleable.circleView_arcColor, 0);
   textColor = ta.getColor(R.styleable.circleView_textColor, 0);
   textSize = ta.getDimension(R.styleable.circleView_textSize, 50);
   text = ta.getString(R.styleable.circleView_text);
   startAngle = ta.getInt(R.styleable.circleView_startAngle, 0);
   sweepAngle = ta.getInt(R.styleable.circleView_sweepAngle, 90);
   ta.recycle();
  }

더 많은 자원 을 방출 하기 위해 서 는 TypedArray 라 는 대상 을 자원 방출 해 야 합 니 다.
다음은 OnMeasure()방법 에서 화필 스타일 을 초기 화하 고 화면의 너 비 를 가 져 오 며 중간 위치 에 있 는 좌 표를 계산 하고 외 접 사각형 을 지정 하 는 너비 코드 는 다음 과 같 습 니 다.

 private void init() {
  int length = Math.min(width, height);
  mCircleXY = length / 2;
  mRadius = length * 0.5f / 2;
  mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mCirclePaint.setColor(circleColor);
  mRectF = new RectF(length * 0.1f, length * 0.1f, length * 0.9f,
    length * 0.9f);

  mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mArcPaint.setColor(arcColor);
  mArcPaint.setStyle(Paint.Style.STROKE);
  mArcPaint.setStrokeWidth((width * 0.1f));

  mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mTextPaint.setTextSize(textSize);
  mTextPaint.setColor(textColor);
  mTextPaint.setTextAlign(Align.CENTER);

 }

사용자 정의 속성 을 다른 브러시 에 설정 합 니 다.
이렇게 많은 준 비 를 한 후에 우리 가 필요 로 하 는 것 은 OnDraw 방법 에서 내원,외환 과 문 자 를 그 리 는 것 이다.코드 는 다음 과 같 습 니 다:

@Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  drawSth(canvas);
 }

 private void drawSth(Canvas canvas) {
  canvas.drawCircle(mCircleXY, mCircleXY, mRadius, mCirclePaint);
  canvas.drawArc(mRectF, startAngle, sweepAngle, false, mArcPaint);
  canvas.drawText(text, 0, text.length(), mCircleXY, mCircleXY + textSize
    / 4, mTextPaint);
 }

지적 해 야 할 것 은 링 을 그 리 려 면 지정 한 사각형 구역 에서 그 려 야 하고 시작 각도,스캐닝 각 도 를 지정 해 야 합 니 다.이 변 수 는 모두 사용자 정의 속성 입 니 다.　
이 사용자 정의 컨트롤 의 최종 실행 효 과 는 다음 과 같 습 니 다.

2.동적 막대 그래프
막대 그래프 는 도표 전시 시스템 에서 더 이상 평범 하지 않 은 아이콘 이 어야 한다.정적 설명도 이렇게:

이 간단 한 설명도 를 통 해 우리 가 해 야 할 일 은 하나의 사각형 을 그린 다음 에 모든 사각형 x 좌 표를 일정한 단위 로 옮 기 는 것 이다.우 리 는 이런 현상 도 볼 수 있다.모든 막대 그래프 의 시작 점 이 일치 하지 않 고 종료 점 은 같다.시작 좌 표 는 랜 덤(랜 덤 함수)으로 딱 좋 습 니 다.정적 막대 그래프 를 실현 하 는 것 이 바로 이러한 사고 입 니 다.
우선,OnMeasure()방법 에서 각 사각형 의 너비 와 높이 를 계산 합 니 다.여 기 는 편리 하 게 보기 위해 각 사각형 의 기본 높이 는 화면의 높이 이 고 각 사각형 의 너 비 는 화면의 너비 에 80%를 곱 하여 사각형 의 개수 로 정의 합 니 다.그리고 너비 와 높이 에 따라 브러시(Paint)를 초기 화 합 니 다.왜 너비 와 높이 에 따라 붓 을 초기 화 했 습 니까?여기 서 저 는 사용자 정의 View 를 더욱 생동감 있 게 하기 위해 LinearGradient(선형 렌 더러)를 사용 하여 렌 더 링 을 했 습 니 다.이 대상 은 직사각형 너비 와 높이 를 사용 해 야 합 니 다.이 사용자 정의 컨트롤 은 동적 입 니 다.저 는 onDraw 방법 으로 계속 다시 그 려 야 합 니 다.컨트롤 이 너무 빨리 갱신 되 는 것 을 방지 하기 위해 300 밀리초 마다 보 기 를 새로 고 칩 니 다.이 컨트롤 의 전체 소스 코드 는 다음 과 같 습 니 다.

public class VolumneView extends View {

 private Paint mPaint;
 private int mCount;
 private int mWidth;
 private int mRectHeight;
 private int mRectWidth;
 private LinearGradient mLinearGradient;
 private double mRandom;
 private float mcurrentHeight;

 public static final int OFFSET = 5;

 public VolumneView(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  initView(context, attrs);

 }

 private void initView(Context context, AttributeSet attrs) {
  mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  mPaint.setColor(Color.GREEN);
  mPaint.setStyle(Paint.Style.FILL);
  TypedArray ta = context.obtainStyledAttributes(attrs,
    R.styleable.volumneView);
  if (ta != null) {
   mCount = ta.getInt(R.styleable.volumneView_count, 6);
   ta.recycle();
  }
 }

 public VolumneView(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public VolumneView(Context context) {
  this(context, null);
 }

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mWidth = getMeasuredWidth();
  mRectHeight = getMeasuredHeight();
  mRectWidth = (int) (mWidth * 0.8 / mCount);
  mLinearGradient = new LinearGradient(0, 0, mRectWidth, mRectHeight,
    Color.GREEN, Color.YELLOW, TileMode.CLAMP);
  mPaint.setShader(mLinearGradient);

 }

 @Override
 protected void onDraw(Canvas canvas) {
  super.onDraw(canvas);
  for (int i = 0; i < mCount; i++) {
   mRandom = Math.random();
   mcurrentHeight = (float) (mRectHeight * mRandom);
   float width = (float) (mWidth * 0.4 / 2 + OFFSET);
   canvas.drawRect(width + i * mRectWidth, mcurrentHeight, width
     + (i + 1) * mRectWidth, mRectHeight, mPaint);
  }
  postInvalidateDelayed(300);
 }

최종 실행 효 과 는 다음 과 같 습 니 다.

후기,이 두 가지 간단 한 컨트롤 을 통 해 사용자 정의 컨트롤 의 기본 절차 에 대해 알 고 있 을 것 이 라 고 믿 습 니 다.물론 사용자 정의 컨트롤 을 제대로 하려 면 이 절차 에 따라 한 걸음 한 걸음 씩 화 이 팅 해 야 합 니 다!