Android 에서 사용자 정의 진도 항목 상세 설명
14392 단어 Android사용자 정의 진행 막대
못 생 겼 죠?위대 한 제품 디자인 이 앞 배경,심지어 세로,심지어 원호 모양 을 바 꾸 라 고 요구 하면 어떻게 합 니까?예 를 들 어:
ok,우리 시작 합 시다.
1)이전 배경 바 꾸 기
먼저 progressbar 의 속성 을 살 펴 보 겠 습 니 다:
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
android:layout_toRightOf="@+id/progressBarV"
android:indeterminate="false"
android:padding="2dip"
android:progress="50" />
<style name="Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
</style>
<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
이 파일 을 자신의 프로젝트 의 drawable 에 복사 하면 shape 의 속성,그 라 데 이 션,원 각 등 을 마음대로 수정 할 수 있 습 니 다.
그럼 그림 을 어떻게 넣 지?ok,새 progresshorizontal1.xml：
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
</layer-list>
그리고 레이아웃 으로 돌아 가기:
<ProgressBar
android:id="@+id/progressBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/progressBar"
android:layout_margin="5dip"
android:layout_toRightOf="@+id/progressBarV"
android:background="@drawable/progress_bg"
android:indeterminate="false"
android:indeterminateOnly="false"
android:maxHeight="20dip"
android:minHeight="20dip"
android:padding="2dip"
android:progress="50"
android:progressDrawable="@drawable/progress_horizontal1" />
android:progressDrawable="@drawable/progress_horizontal 1"전경 사용 위의 progresshorizontal1
오케이
주의해 서 보 세 요.사각 에 원 역 각 이 있 습 니 다.시스템 이 스스로 추가 한 것 같 습 니 다.어쨌든 제 그림 에는 이 역 각 처 리 를 하지 않 았 습 니 다.
2)수직 진도 게이지
역시 소스 코드 부터 시작 해서 progresshorizontal.xml
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerY="0.75"
android:endColor="#ffffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<?xml version="1.0" encoding="utf-8"?>
<clip
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:clipOrientation=["horizontal" | "vertical"]
android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"] />
android:gravity 는 두 개의 속성 이 있 습 니 다.기본 값 은 left 입 니 다.
그럼 vertical 과 bottom 으로 바 꾸 면 어떤 효과 가 있 는 지,progress 를 새로 만 듭 시다.vertical.xml,원본 코드 progresshorizontal.xml 의 내용 을 복사 합 니 다.secondary Progress 를 제거 하고 클립 을 수 정 했 습 니 다.shape 의 그 라 데 이 션 중심 centerY 는 centerX 로 바 뀌 었 습 니 다.
<item android:id="@android:id/progress">
<clip
android:clipOrientation="vertical"
android:gravity = "bottom">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#ffffd300"
android:centerColor="#ffffb600"
android:centerX="0.75"
android:endColor="#ffffcb00"
android:angle="90"
/>
</shape>
</clip>
</item>
ok,해결,이렇게 간단 합 니 다.
3)원호 형 바
이것 은 진도 조 라 고 할 수 없고 사용 하 는 것 도 많 지 않 을 것 이다.기껏해야 계기판 을 사용 해 야 한다.그렇지 않 으 면 누가 진도 조 를 원호 로 만 들 겠 는가?그래,이 건 원본 코드 를 바 꾸 면 되 는 게 아니 야.코드 를 봐.
public class Arcs extends View {
private Paint mArcPaint;
private Paint mArcBGPaint;
private RectF mOval;
private float mSweep = 0;
private int mSpeedMax = 200;
private int mThreshold = 100;
private int mIncSpeedValue = 0;
private int mCurrentSpeedValue = 0;
private float mCenterX;
private float mCenterY;
private float mSpeedArcWidth;
private final float SPEED_VALUE_INC = 2;
..........
}
mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(mSpeedArcWidth);
// mPaint.setStrokeCap(Paint.Cap.ROUND);
mArcPaint.setColor(0xff81ccd6);
BlurMaskFilter mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
mArcPaint.setMaskFilter(mBlur);
mArcBGPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mArcBGPaint.setStyle(Paint.Style.STROKE);
mArcBGPaint.setStrokeWidth(mSpeedArcWidth+8);
mArcBGPaint.setColor(0xff171717);
BlurMaskFilter mBGBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
mArcBGPaint.setMaskFilter(mBGBlur);
@Override
protected void onSizeChanged(int w, int h, int ow, int oh) {
super.onSizeChanged(w, h, ow, oh);
Log.i("onSizeChanged w", w+"");
Log.i("onSizeChanged h", h+"");
mCenterX = w * 0.5f; // remember the center of the screen
mCenterY = h - mSpeedArcWidth;
mOval = new RectF(mCenterX - mCenterY, mSpeedArcWidth, mCenterX + mCenterY, mCenterY * 2);
}
@Override
protected void onDraw(Canvas canvas) {
drawSpeed(canvas);
calcSpeed();
}
private void drawSpeed(Canvas canvas) {
canvas.drawArc(mOval, 179, 181, false, mArcBGPaint);
mSweep = (float) mIncSpeedValue / mSpeedMax * 180;
if (mIncSpeedValue > mThreshold) {
mArcPaint.setColor(0xFFFF0000);
}
else {
mArcPaint.setColor(0xFF00B0F0);
}
canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);
}
private void calcSpeed() {
if (mIncSpeedValue < mCurrentSpeedValue) {
mIncSpeedValue += SPEED_VALUE_INC;
if (mIncSpeedValue > mCurrentSpeedValue) {
mIncSpeedValue = mCurrentSpeedValue;
}
invalidate();
}
else if (mIncSpeedValue > mCurrentSpeedValue) {
mIncSpeedValue -= SPEED_VALUE_INC;
if (mIncSpeedValue < mCurrentSpeedValue) {
mIncSpeedValue = mCurrentSpeedValue;
}
invalidate();
}
}
drawSpeed 안
mSweet=(float)mIncSpeedValue/mSpeedMax*180 계산 하기;
그리고 canvas.drawArc(mOval,180,mSweet,false,mArcPaint);
mSweet 의 변화 에 따라 그 길이 의 라디안 을 그 려 줍 니 다.
한도 값 과 의 대비 에 따라 다른 색 을 설정 할 수 있 습 니 다.
if (mIncSpeedValue > mThreshold) {
mArcPaint.setColor(0xFFFF0000);
}
else {
mArcPaint.setColor(0xFF00B0F0);
}
ok,큰 성 과 를 거두다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
