English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

Androidの淘宝物流情報TimeLineViewの模倣

淘宝物流信息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++) {
  /**
  * 当j==1、最初のノードを描画する際は特別な処理が必要で、ノードの外側にさらに円環を追加する必要があります
  */
  if (j == 1) {
  // ペンを線に設定
  キャンバス.drawCircle(viewWidth, timelineHeadRadius + marginTop,
   timelineRadius, mPaint);
  mPaint.setStyle(Paint.Style.STROKE);
  mPaint.setStrokeWidth(5.0f);
  // 最初のノードの周りの円環を描画
  mPaint.setColor(timelineHeadColorEdge);
  キャンバス.drawCircle(viewWidth, timelineHeadRadius + marginTop,
   timelineHeadRadius, mPaint);
  // ペン色を設定、他の時間节点の色を描画
  mPaint.setColor(timelineOtherColor);
  // ペンを塗りつぶしに設定
  mPaint.setStyle(Paint.Style.FILL);
  /**
   * 最初のノードの下の軸を描画
   */
  キャンバス.drawRect(new Rect(viewWidth - timelineWidth / 2,
   (int) (2 * timelineHeadRadius + marginTop) + 5,
   viewWidth + timelineWidth / 2, (int) (2
    * timelineHeadRadius + timelineRadiusDistance
    + marginTop + 5)) mPaint);
  continue;
  }
  /**
  * 時間軸のノードを描画します、つまり円形を描画します　円心のxはすべて同じで、ビューの中央
  * 円心のyの計算は、ノードの位置に基づいて行われます、例えば:最初のノードのyは、最初のノードの上からの距離に最初のノードの半径を加算したものです
  * :timelineHeadRadius + marginTop
  * 残りのノードは、ノードのyの基础上、2倍の半径とノード間の軸の長さ×ノード数に加算されます:(2 * timelineRadius +
  * timelineRadiusDistance) * (j - 1) + timelineHeadRadius -
  * timelineRadius + marginTop
  * 
  */
  canvas.drawCircle(viewWidth,
   (2 * timelineRadius + timelineRadiusDistance) * (j - 1) + 2
    * timelineHeadRadius - 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#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。告発を行い、関連する証拠を提供してください。一旦確認が取れましたら、このサイトは直ちに侵害される可能性のある内容を削除します。）

基本教程
おすすめ