前不久在網上看見Android實現的模擬時鐘,感受十分有意思,這裏是地址:php
http://www.eoeandroid.com/forum.php?mod=viewthread&tid=58324惋惜的是這種方式沒有html
秒錶。筆者忽然對其有了興趣,也想去實現如下本身的模擬時鐘。折騰了一陣子總算是弄出來了java
如今將實現方式共享出來,你們一些交流。android
很少說,先上效果圖:canvas
首先咱們應該準備相關的素材:時鐘盤、時針、分針、秒針圖片.app
時鐘盤:ide
時針:post
分針:this
秒針:
設計
配置文件,比較簡單:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" tools:context=".MainActivity" android:background="@color/bg"> <com.kiritor.mymodelclock.MyQAnalogClock android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> </LinearLayout>MyQAnalogClock代碼:用於構造時鐘view以及其刷新顯示:
package com.kiritor.mymodelclock; import android.util.AttributeSet; import com.kiritor.mymodelclock.R; import android.content.Context; import android.graphics.*; import android.graphics.drawable.BitmapDrawable; import android.os.Handler; import android.view.View; import java.util.Calendar; import java.util.TimeZone; /** * Created by Kiritor on 13-5-30. */ public class MyQAnalogClock extends View { //時鐘盤,分針、秒針、時針對象 Bitmap mBmpDial; Bitmap mBmpHour; Bitmap mBmpMinute; Bitmap mBmpSecond; BitmapDrawable bmdHour; BitmapDrawable bmdMinute; BitmapDrawable bmdSecond; BitmapDrawable bmdDial; Paint mPaint; Handler tickHandler; int mWidth; int mHeigh; int mTempWidth = bmdSecond.getIntrinsicWidth(); int mTempHeigh; int centerX; int centerY; int availableWidth = 100; int availableHeight = 100; private String sTimeZoneString; public MyQAnalogClock(Context context,AttributeSet attr) { this(context,"GMT+8:00"); } public MyQAnalogClock(Context context, String sTime_Zone) { super(context); sTimeZoneString = sTime_Zone; mBmpHour = BitmapFactory.decodeResource(getResources(), R.drawable.shizhen); bmdHour = new BitmapDrawable(mBmpHour); mBmpMinute = BitmapFactory.decodeResource(getResources(), R.drawable.fenzhen); bmdMinute = new BitmapDrawable(mBmpMinute); mBmpSecond = BitmapFactory.decodeResource(getResources(), R.drawable.miaozhen); bmdSecond = new BitmapDrawable(mBmpSecond); mBmpDial = BitmapFactory.decodeResource(getResources(), R.drawable.android_clock_dial); bmdDial = new BitmapDrawable(mBmpDial); mWidth = mBmpDial.getWidth(); mHeigh = mBmpDial.getHeight(); centerX = availableWidth / 2; centerY = availableHeight / 2; mPaint = new Paint(); mPaint.setColor(Color.BLUE); run(); } public void run() { tickHandler = new Handler(); tickHandler.post(tickRunnable); } private Runnable tickRunnable = new Runnable() { public void run() { postInvalidate(); tickHandler.postDelayed(tickRunnable, 1000); } }; protected void onDraw(Canvas canvas) { super.onDraw(canvas); Calendar cal = Calendar.getInstance(TimeZone .getTimeZone(sTimeZoneString)); int hour = cal.get(Calendar.HOUR); int minute = cal.get(Calendar.MINUTE); int second = cal.get(Calendar.SECOND); float hourRotate = hour * 30.0f + minute / 60.0f * 30.0f; float minuteRotate = minute * 6.0f; float secondRotate = second * 6.0f; boolean scaled = false; if (availableWidth < mWidth || availableHeight < mHeigh) { scaled = true; float scale = Math.min((float) availableWidth / (float) mWidth, (float) availableHeight / (float) mHeigh); canvas.save(); canvas.scale(scale, scale, centerX, centerY); } bmdDial.setBounds(centerX - (mWidth / 2), centerY - (mHeigh / 2), centerX + (mWidth / 2), centerY + (mHeigh / 2)); bmdDial.draw(canvas); mTempWidth = bmdHour.getIntrinsicWidth(); mTempHeigh = bmdHour.getIntrinsicHeight(); canvas.save(); canvas.rotate(hourRotate, centerX, centerY); bmdHour.setBounds(centerX - (mTempWidth / 2), centerY - (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY + (mTempHeigh / 2)); bmdHour.draw(canvas); canvas.restore(); mTempWidth = bmdMinute.getIntrinsicWidth(); mTempHeigh = bmdMinute.getIntrinsicHeight(); canvas.save(); canvas.rotate(minuteRotate, centerX, centerY); bmdMinute.setBounds(centerX - (mTempWidth / 2), centerY - (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY + (mTempHeigh / 2)); bmdMinute.draw(canvas); canvas.restore(); mTempWidth = bmdSecond.getIntrinsicWidth(); mTempHeigh = bmdSecond.getIntrinsicHeight(); canvas.rotate(secondRotate, centerX, centerY); bmdSecond.setBounds(centerX - (mTempWidth / 2), centerY - (mTempHeigh / 2), centerX + (mTempWidth / 2), centerY + (mTempHeigh / 2)); bmdSecond.draw(canvas); if (scaled) { canvas.restore(); } } }主Activity:
package com.kiritor.mymodelclock; import android.app.Activity; import android.os.Bundle; /** * Created by Kiritor on 13-5-30. */ public class MainActivity extends Activity { public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } }好了一個簡單的模擬時鐘就完成了,不過經過觀察運行效果能夠看出的是,筆者對
時針、分針、秒針圖片的設計不是太美觀,看的不是太清楚,體驗略差。不過這不是重點
讀者能夠本身去設計一下那4張圖片,從而作出不一樣的效果!
這裏本實例使用Android Studio作的,完整項目源碼就不上傳了!Over!