Android 는 ImageView 를 사용 하여 투명 원호 인 스 턴 스 코드 를 만 듭 니 다.

요 며칠 동안 프로젝트 수요 로 인해 ImageView 에 투명 한 원 호 를 중첩 하고 원호 의 방향 을 따라 해당 하 는 문 자 를 표시 해 야 합 니 다.효 과 는 다음 그림 과 같 습 니 다.

이 요 구 를 받 으 면 먼저 이미지 뷰 를 사용자 정의 하여 이 기능 을 실현 하 는 것 이 생각 납 니 다.즉,onDraw()에서 원호 와 문 자 를 그립 니 다.또한 원호 의 위 치 를 임의로 배치 할 수 있 도록 해 야 하기 때문에 원호 의 색상,투명도 와 문자 크기,색상 등 이 모두 제어 할 수 있 기 때문에 사용자 정의 속성 을 추가 했다.실현 코드 는 매우 간단 합 니 다.다음 과 같 습 니 다.
1.사용자 정의 ImageView:

package com.chunk.customviewsdemo.views.ArcImageView;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.ImageView;
import com.chunk.customviewsdemo.R;
/**
* Description:A custom ImageView with circular arc and text
* Author: XiaoYu
* Date: // :
*/
public class ArcImageView extends ImageView {
/**
* The default text size.
*/
private final float DEFAULT_TEXT_SIZE = ;
/**
* The default scale value which decides the width of arc.
*/
private final float DEFAULT_SCALE = .f;
/**
* The default transparency of arc.
*/
private final int DEFAULT_ARC_ALPHA =;
/**
* The default width of arc.
*/
private final int DEFAULT_ARC_WIDTH =;
/**
* The default angle that the arc starts with.
*/
private final int DEFAULT_START_ANGLE = ;
/**
* The default angle that the arc.
*/
private final int DEFAULT_SWEEP_ANGLE = ;
/**
* The default distance along the path to add to the text's starting position.
*/
private final int DEFAULT_H_OFFSET = ;
/**
* The default distance above(-) or below(+) the path to position the text.
*/
private final int DEFAULT_V_OFFSET = ;
private Context mContext;
/**
* The text displayed on ImageView along arc.
*/
private String mDrawStr;
/**
* The font size of text.
*/
private float mTextSize = DEFAULT_TEXT_SIZE;
/**
* The scale value which decides the width of arc.
*/
private float mScale = DEFAULT_SCALE;
/**
* The transparency of arc.
*/
private int mArcAlpha = DEFAULT_ARC_ALPHA;
/**
* The width of arc.
*/
private int mArcWidth = DEFAULT_ARC_WIDTH;
/**
* The start angle of angle.
*/
private int mStartAngle = DEFAULT_START_ANGLE;
/**
* The swept angle of angle.
*/
private int mSweepAngle = DEFAULT_SWEEP_ANGLE;
/**
* The default distance along the path to add to the text's starting position.
*/
private float mHOffset = DEFAULT_H_OFFSET;
/**
* The default distance above(-) or below(+) the path to position the text.
*/
private float mVOffset = DEFAULT_V_OFFSET;
/**
* The style of arc, all styles includes LEFT_TOP, LEFT_BOTTOM, RIGHT_TOP, RIGHT_BOTTOM, CENTER。
* of course, you can add your own style according to your demands.
*/
private int mDrawStyle;
/**
* The color of arc.
*/
private int mArcColor;
/**
* The color of text.
*/
private int mTextColor;
public ArcImageView(Context context) {
super(context);
this.mContext = context;
}
public ArcImageView(Context context, AttributeSet attrs) {
super(context, attrs);
this.mContext = context;
obtainAttributes(attrs);
}
public ArcImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.mContext = context;
obtainAttributes(attrs);
}
/**
* Set the text that will be drawn on arc.
* @param drawStr the text content.
*/
public void setDrawStr(String drawStr) {
this.mDrawStr = drawStr;
//refresh this view
invalidate();
}
/**
* Set the transparency of arc.
* @param mArcAlpha the value of transparency.
*/
public void setArcAlpha(int mArcAlpha) {
this.mArcAlpha = mArcAlpha;
//refresh this view
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//draw arc
Paint arcPaint = new Paint();
arcPaint.setStrokeWidth(mArcWidth);
arcPaint.setStyle(Paint.Style.STROKE);
arcPaint.setColor(mArcColor);
arcPaint.setAlpha(mArcAlpha);
int width = getWidth();
int height = getHeight();
float radius;
if (width > height) {
radius = mScale * height;
} else {
radius = mScale * width;
}
RectF oval = new RectF();
int center_x = width;
int center_y = height;
switch (mDrawStyle) {
case :
center_x = ;
center_y = ;
mStartAngle = ;
mSweepAngle = -;
break;
case :
center_x = ;
center_y = height;
mStartAngle = ;
mSweepAngle = ;
break;
case :
center_x = width;
center_y = ;
mStartAngle = ;
mSweepAngle = -;
break;
case :
center_x = width;
center_y = height;
mStartAngle = ;
mSweepAngle = ;
break;
case :
center_x = width / ;
center_y = height / ;
mStartAngle = ;
mSweepAngle = ;
break;
}
float left = center_x - radius;
float top = center_y - radius;
float right = center_x + radius;
float bottom = center_y + radius;
oval.set(left, top, right, bottom);
canvas.drawArc(oval, mStartAngle, mSweepAngle, false, arcPaint);
//draw text
Paint textPaint = new Paint();
textPaint.setTextSize(mTextSize);
textPaint.setStyle(Paint.Style.FILL);
textPaint.setColor(mTextColor);
Path path = new Path();
path.addArc(oval, mStartAngle, mSweepAngle);
canvas.drawTextOnPath(mDrawStr, path, mHOffset, mVOffset, textPaint);
}
/**
* Obtain custom attributes that been defined in attrs.xml.
* @param attrs A collection of attributes.
*/
private void obtainAttributes(AttributeSet attrs) {
TypedArray ta = mContext.obtainStyledAttributes(attrs, R.styleable.ArcImageView);
mDrawStr = ta.getString(R.styleable.ArcImageView_drawStr);
mTextSize = ta.getDimension(R.styleable.ArcImageView_textSize, DEFAULT_TEXT_SIZE);
mArcAlpha = ta.getInteger(R.styleable.ArcImageView_arcAlpha, DEFAULT_ARC_ALPHA);
mArcWidth = ta.getInteger(R.styleable.ArcImageView_arcWidth, DEFAULT_ARC_WIDTH);
mStartAngle = ta.getInteger(R.styleable.ArcImageView_startAngle, DEFAULT_START_ANGLE);
mSweepAngle = ta.getInteger(R.styleable.ArcImageView_startAngle, DEFAULT_SWEEP_ANGLE);
mHOffset = ta.getInteger(R.styleable.ArcImageView_hOffset, DEFAULT_H_OFFSET);
mVOffset = ta.getInteger(R.styleable.ArcImageView_vOffset, DEFAULT_V_OFFSET);
mArcColor = ta.getColor(R.styleable.ArcImageView_arcColor, XCCCCCC);
mTextColor = ta.getColor(R.styleable.ArcImageView_textColor, XFFFFFF);
mDrawStyle = ta.getInt(R.styleable.ArcImageView_drawStyle, );
ta.recycle();
}
}

2.values 폴 더 의 attrs.xml 에서 속성 을 사용자 정의 합 니 다:

<?xml version="." encoding="utf-"?>
<resources>
<declare-styleable name="ArcImageView">
<attr name="drawStr" format="string" />
<attr name="textSize" format="dimension" />
<attr name="arcAlpha" format="integer" />
<attr name="arcWidth" format="integer" />
<attr name="startAngle" format="integer" />
<attr name="sweepAngle" format="integer" />
<attr name="scale" format="float" />
<attr name="hOffset" format="float" />
<attr name="vOffset" format="float" />
<attr name="drawStyle" format="enum">
<enum name="LEFT_TOP" value="" />
<enum name="LEFT_BOTTOM" value="" />
<enum name="RIGHT_TOP" value="" />
<enum name="RIGHT_BOTTOM" value="" />
<enum name="CENTER" value="" />
</attr>
<attr name="arcColor" format="color" />
<attr name="textColor" format="color" />
</declare-styleable>
</resources>

3.MainActivity 에서 ArcImageView 를 호출 하면 코드 는 다음 과 같 습 니 다.

package com.chunk.customviewsdemo;
import android.os.Bundle;
import android.support.v.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import com.chunk.customviewsdemo.views.ArcImageView.ArcImageView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ArcImageView aiv_one;
private ArcImageView aiv_two;
private ArcImageView aiv_three;
private ArcImageView aiv_four;
private Button btn_another_one;
private int mGroup = ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
aiv_one = (ArcImageView) findViewById(R.id.aiv_one);
aiv_one.setArcAlpha();
aiv_two = (ArcImageView) findViewById(R.id.aiv_two);
aiv_two.setArcAlpha();
aiv_three = (ArcImageView) findViewById(R.id.aiv_three);
aiv_three.setArcAlpha();
aiv_four = (ArcImageView) findViewById(R.id.aiv_four);
aiv_four.setArcAlpha();
btn_another_one = (Button) findViewById(R.id.btn_another_one);
btn_another_one.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_another_one:
if (mGroup == ) {
aiv_one.setDrawStr("  ");
aiv_one.setBackgroundResource(R.drawable.apple);
aiv_two.setDrawStr("  ");
aiv_two.setBackgroundResource(R.drawable.pineapple);
aiv_three.setDrawStr("  ");
aiv_three.setBackgroundResource(R.drawable.banana);
aiv_four.setDrawStr("  ");
aiv_four.setBackgroundResource(R.drawable.pineapple);
mGroup = ;
} else {
aiv_one.setDrawStr("  ");
aiv_one.setBackgroundResource(R.drawable.steak);
aiv_two.setDrawStr("  ");
aiv_two.setBackgroundResource(R.drawable.seafood);
aiv_three.setDrawStr("  ");
aiv_three.setBackgroundResource(R.drawable.cheese);
aiv_four.setDrawStr("  ");
aiv_four.setBackgroundResource(R.drawable.barbecue);
mGroup = ;
}
break;
}
}
}

4.MainActivity 의 레이아웃 파일 은 다음 과 같 습 니 다.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:custom="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="dp"
android:layout_marginBottom="dp"
android:orientation="vertical" >
<Button
android:id="@+id/btn_another_one"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="   " />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="dp"
android:layout_weight=""
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.ArcImageView.ArcImageView
android:id="@+id/aiv_one"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/steak"
custom:drawStyle="RIGHT_BOTTOM"
custom:drawStr="  "
custom:arcAlpha=""
custom:arcColor="@color/gray"
custom:textColor="@color/black"
custom:textSize="sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.ArcImageView.ArcImageView
android:id="@+id/aiv_two"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/seafood"
custom:drawStyle="LEFT_BOTTOM"
custom:drawStr="  "
custom:arcAlpha=""
custom:arcColor="@color/gray"
custom:textColor="@color/black"
custom:textSize="sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="dp"
android:layout_weight=""
android:orientation="horizontal" >
<RelativeLayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.ArcImageView.ArcImageView
android:id="@+id/aiv_three"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/cheese"
custom:drawStyle="RIGHT_TOP"
custom:drawStr="  "
custom:arcAlpha=""
custom:arcColor="@color/gray"
custom:textColor="@color/black"
custom:textSize="sp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="dp"
android:layout_weight=""
android:layout_height="match_parent" >
<com.chunk.customviewsdemo.views.ArcImageView.ArcImageView
android:id="@+id/aiv_four"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/barbecue"
custom:drawStyle="LEFT_TOP"
custom:drawStr="  "
custom:arcAlpha=""
custom:arcColor="@color/gray"
custom:textColor="@color/black"
custom:textSize="sp" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>

레이아웃 파일 에 사용자 정의 속성 을 도입 할 때 코드 를 추가 해 야 합 니 다:xmlns:custom="http://schemas.android.com/apk/res-auto"。
자,수요 가 해결 되 었 습 니 다.나머지 는 실제 프로젝트 로 옮 기 는 것 입 니 다.실현 효 과 는 다음 과 같다.

요약 하면 사용자 정의 View 는 일반적으로 onDraw,onMeasure(),onLayout()등 방법 으로 측정 하고 그립 니 다.그 릴 때 Canvas,Paint,Bitmap 등 유형 을 사용 합 니 다.측정 하고 그 리 는 과정 은 바로 현실 생활 에서 제도 작업 에 대한 추상 적 이 고 실현 입 니 다.우 리 는 대상 을 대상 으로 하 는 사상 을 이용 하여 화판,화지,붓 등 도구 와 그림 의 역 동적 인 역할 을 한 줄 의 코드 로 설명 하면 됩 니 다!
실현 과정 이 비교적 간단 하기 때문에 저 는 소스 코드 를 붙 이지 않 겠 습 니 다.여러분 들 이 2D 그림 에 대해 잘 모 르 면 관련 자 료 를 찾 아 보 거나 관련 책 을 찾 아 보 세 요!