Android에서 탕보아 물류 정보 TimeLineView 모방

타obao 배송 정보 TimeLine 제작 방법:

모방한 TimeLine 이미지 표시:

코드 구현:

package com.zms.timelineview;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
public class TimeLineView extends View {
 private Paint mPaint;
 /**
 * 첫 번째 노드의 외 반지름
 */
 private float timelineHeadRadius;
 /**
 * 첫 번째 노드의 중심 색상
 */
 private int timelineHeadColor;
 /**
 * 첫 번째 노드의 경계 색상
 */
 private int timelineHeadColorEdge;
 /**
 * 기타 노드의 색상 값
 */
 private int timelineOtherColor;
 /**
 * 시간선 노드 수
 */
 private int timelineCount;
 /**
 * 시간축 위치
 */
 private int viewWidth;
 /**
 * 시간축과 상단 사이 거리
 */
 private int marginTop;
 /**
 * 시간축 노드의 반지름
 */
 private int timelineRadius;
 /**
 * 시간축 노드 간 거리
 */
 private int timelineRadiusDistance;
 /**
 * 시간축 너비
 */
 private int timelineWidth;
 /**
 * 시간축 높이
 */
 private float timeLineViewHeight;
 public TimeLineView(Context context) {
 this(context, null);
 }
 public TimeLineView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }
 public TimeLineView(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 init(context, attrs, defStyle);
 }
 /**
 * 초기화
 * 
 * @param context
 * @param attrs
 * @param defStyle
 */
 private void init(Context context, AttributeSet attrs, int defStyle) {
 final TypedArray a = getContext().obtainStyledAttributes(attrs,
  R.styleable.TimeLineView, defStyle, 0);
 timelineRadiusDistance = (int) a.getDimension(),
  R.styleable.TimeLineView_timelineRadiusDistance,
  convertDIP2PX(context, 20));
 timelineHeadRadius = a.getDimension(),
  R.styleable.TimeLineView_timelineHeadRadius,
  convertDIP2PX(context, 6));
 timelineRadius = (int) a.getDimension(),
  R.styleable.TimeLineView_timelineRadius,
  convertDIP2PX(context, 5));
 timelineHeadColor = a.getColor(),
  R.styleable.TimeLineView_timelineHeadColor,
  Color.parseColor("#25ae5f")); // 센터 진한 색
 timelineHeadColorEdge = a.getColor(),
  R.styleable.TimeLineView_timelineHeadColorEdge,
  Color.parseColor("#b9e5cc")); // 경계 채소
 timelineOtherColor = a.getColor(),
  R.styleable.TimeLineView_timelineOtherColor,
  Color.parseColor("#cccccc"));
 timelineCount = a.getInteger(R.styleable.TimeLineView_timelineCount, 0);
 timelineWidth = (int) a.getDimension(
  R.styleable.TimeLineView_timelineWidth,
  convertDIP2PX(context, 1));
 marginTop = (int) a.getDimension(
  R.styleable.TimeLineView_timelineMarginTop,
  convertDIP2PX(context, 50));
 a.recycle();
 mPaint = new Paint();
 mPaint.setAntiAlias(true);
 }
 @Override
 protected void onDraw(Canvas canvas) {
 // 시간 축의 위치를 기본적으로 뷰의 중앙에 설정합니다
 viewWidth = getMeasuredWidth() / 2;
 // 첫 번째 노드의 색상을 설정합니다
 mPaint.setColor(timelineHeadColor);
 /**
  * 시간 축의 노드 수에 따라 해당 노드와 축을 그립니다
  */
 for (int j = 1; j <= timelineCount; j++) {
  /**
  * when j==1첫 번째 노드를 그릴 때는 특별히, 노드 밖에 또 다른 원環을 그려야 합니다
  */
  if (j == 1) {
  // 펜을 투명으로 설정합니다
  canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop,
   timelineRadius, mPaint);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeWidth(5.0f);
  // 첫 번째 노드 주위의 원環을 그립니다
  mPaint.setColor(timelineHeadColorEdge);
  canvas.drawCircle(viewWidth, timelineHeadRadius + marginTop,
   timelineHeadRadius, mPaint);
  // 펜색을 설정하여 다른 시간 점의 색상을 그립니다
  mPaint.setColor(timelineOtherColor);
  // 펜을 실체로 설정합니다
  mPaint.setStyle(Paint.Style.FILL);
  /**
   * 그림자 노드 아래의 축을 그립니다
   */
  canvas.drawRect(new Rect(viewWidth - timelineWidth / 2,
   (int) (2 *  + marginTop) + 5,
   viewWidth + timelineWidth / 2, (int) (2
    *  + timelineRadiusDistance
    +  + 5)), mPaint);
  continue;
  }
  /**
  * 시간축의 노드를 그리기 위해, 즉 원형을 그리기 위해 원점의 x는 모두 동일하며, view의 중간
  * 원점의 y 계산은 노드의 위치에 따라 계산됩니다, 예를 들어: 첫 번째 노드의 y는 첫 번째 노드가 위쪽으로의 거리와 첫 번째 노드의 반지름을 더한 값입니다
  * :timelineHeadRadius + 
  * 그 외의 노드는 한 노드의 y를 기준으로, 두 배의 반지름과 노드 간의 축의 길이＊노드 수를 더하여:(2 * timelineRadius +
  * timelineRadiusDistance) * (j - 1) +  -
  * timelineRadius + 
  * 
  */
  canvas.drawCircle(viewWidth,
   (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2
    *  - timelineRadius + marginTop,
   timelineRadius, mPaint);
  /**
  * 　 그 외의 축을 그리기 위해 left: 각 축이 왼쪽으로의 거리는 모두 동일하며　　　시간축의 중앙 위치-1/2的时间轴의 너비 viewWidth -
  * timelineWidth / 2 top: (int) (j * (2 * timelineRadius +
  * timelineRadiusDistance) - timelineRadiusDistance + 2 *
  * (timelineHeadRadius-timelineRadius)+ marginTop)　
  * right: 각 축이 오른쪽으로의 거리는 모두 동일하며　　　시간축의 중앙 위치+1/2的时间轴의 너비 viewWidth +
  * timelineWidth / 2 bottom: (int) (j * (2 * timelineRadius +
  * timelineRadiusDistance) + 2 *
  * (timelineHeadRadius-timelineRadius)+ marginTop)
  */
  canvas.drawRect(
   new Rect(
    viewWidth - timelineWidth / 2,
    (int) (j
     * (2 * timelineRadius + timelineRadiusDistance)
     - timelineRadiusDistance + 2
     * (timelineHeadRadius - timelineRadius) + marginTop),
    viewWidth + timelineWidth / 2,
    (int) (j
     * (2 * timelineRadius + timelineRadiusDistance)
     + 2 * (timelineHeadRadius - timelineRadius) + marginTop)),
   mPaint);
 }
 }
 public float getTimelineHeadRadius() {
 return timelineHeadRadius;
 }
 public void setTimelineHeadRadius(float timelineHeadRadius) {
 this.timelineHeadRadius = timelineHeadRadius;
 invalidate();
 }
 public int getTimelineHeadColor() {
 return timelineHeadColor;
 }
 public void setTimelineHeadColor(int timelineHeadColor) {
 this.timelineHeadColor = timelineHeadColor;
 invalidate();
 }
 public int getTimelineOtherColor() {
 return timelineOtherColor;
 }
 public void setTimelineOtherColor(int timelineOtherColor) {
 this.timelineOtherColor = timelineOtherColor;
 invalidate();
 }
 public int getTimelineCount() {
 return timelineCount;
 }
 public void setTimelineCount(int timelineCount) {
 this.timelineCount = timelineCount;
 invalidate();
 }
 public int getMarginTop() {
 return marginTop;
 }
 public void setMarginTop(int marginTop) {
 this.marginTop = marginTop;
 invalidate();
 }
 public int getTimelineRadius() {
 return timelineRadius;
 }
 public void setTimelineRadius(int timelineRadius) {
 this.timelineRadius = timelineRadius;
 invalidate();
 }
 public int getTimelineRadiusDistance() {
 return timelineRadiusDistance;
 }
 public void setTimelineRadiusDistance(int timelineRadiusDistance) {
 this.timelineRadiusDistance = timelineRadiusDistance;
 invalidate();
 }
 public int getTimelineWidth() {
 return timelineWidth;
 }
 public void setTimelineWidth(int timelineWidth) {
 this.timelineWidth = timelineWidth;
 }
 public float getTimeLineViewHeight() {
 this.timeLineViewHeight = getMarginTop(); + getTimelineCount()}
  * (2 * getTimelineRadius() + getTimelineRadiusDistance());
 return timeLineViewHeight;
 }
 public void setTimeLineViewHeight(float timeLineViewHeight) {
 this.timeLineViewHeight = timeLineViewHeight;
 invalidate();
 }
 public int getViewWidth() {
 return viewWidth;
 }
 public void setViewWidth(int viewWidth) {
 this.viewWidth = viewWidth;
 invalidate();
 }
 /**
 * dip을 px로 변환
 */
 public static int convertDIP2PX(Context context, int dip) {
 float scale = context.getResources().getDisplayMetrics().density;
 return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
 }
}

이것이 본문의 전체 내용입니다. 많은 도움이 되었기를 바랍니다. 또한, 노래教程에 많은 지원을 부탁드립니다.

신고: 본문은 인터넷에서 가져왔으며, 저작권자는 본 사이트가 소유하고 있지 않으며, 인터넷 사용자가 자발적으로 기여하고 자체적으로 업로드한 내용입니다. 본 사이트는 저작권을 보호하지 않으며, 인공 편집 처리를 하지 않으며, 관련 법적 책임을 부담하지 않습니다. 저작권 침해가 의심되는 내용을 발견하시면, notice#w로 이메일을 보내 주세요.3codebox.com（이메일을 보내는 경우, #을 @으로 변경하여 신고하시고 관련 증거를 제공하시면, 사이트는 즉시 저작권 침해 의심 내용을 삭제합니다.