Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)

下面我们研究一下如何实现一个数字液晶时钟,本质属于特效一种哈。
首先创建一个布局文件:

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.       <TextView    
  6.         android:id ="@+id/ledview_clock_time"    
  7.         android:layout_width ="wrap_content"    
  8.         android:layout_height ="wrap_content"    
  9.         android:layout_centerInParent="true"  
  10.         android:shadowColor ="#00ff00"    
  11.         android:shadowDx ="0"    
  12.         android:shadowDy ="0"    
  13.         android:shadowRadius ="10"    
  14.         android:textColor ="#00ff00"    
  15.         android:textSize ="80sp" />    
  16.           
  17.     <TextView  
  18.         android:id ="@+id/ledview_clock_bg"     
  19.         android:layout_width="wrap_content"    
  20.         android:layout_height="wrap_content"    
  21.         android:layout_centerInParent="true"  
  22.         android:layout_gravity="center"    
  23.         android:text="@string/default_time"    
  24.         android:textColor="#3300ff00"    
  25.         android:textSize="80sp" />    
  26.     
  27.   
  28. </RelativeLayout>  


对于阴影的几个属性我们引用一下别人博客里的内容:(http://blog.csdn.net/whoispo/article/details/8061907)
Android的TextView的XML属性中有关于阴影的几条属性
shadowDX、shadowDy、shadowRadius,说明分别是阴影的横、纵坐标偏移,以及阴影的半径,这个不太好理解。一下的图可以实际说明这些的参数的内容。
shadowDx,shadowDy从下面三幅图可以看出是是什么
DX=20,Dy=0
Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第1张图片
DX=0,DY=20
Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第2张图片
DX=20,DY=20
Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第3张图片
shadowRadius可以从下面三幅图看出是什么
R=3
Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第4张图片
R=10
Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第5张图片
R=40
Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第6张图片
通过这些效果可以直观的看出每个属性的含义。
下面自定义一个控件:
[java]  view plain copy
  1. package com.yayun.leddemo;  
  2.   
  3. import java.io.File;  
  4. import java.util.Calendar;  
  5. import java.util.Date;  
  6. import java.util.TimeZone;  
  7.   
  8. import android.annotation.SuppressLint;  
  9. import android.content.Context;  
  10. import android.content.res.AssetManager;  
  11. import android.graphics.Typeface;  
  12. import android.os.Handler;  
  13. import android.util.AttributeSet;  
  14. import android.view.LayoutInflater;  
  15. import android.view.View;  
  16. import android.widget.LinearLayout;  
  17. import android.widget.TextView;  
  18.   
  19. public class LEDView extends LinearLayout {  
  20.   
  21.     private TextView timeView;  
  22.     private TextView bgView;  
  23.     private static final String FONT_DIGITAL_7 = "fonts" + File.separator  
  24.             + "digital-7.ttf";//字体  
  25.   
  26.     private static final String DATE_FORMAT = "%02d:%02d:%02d";//日期格式  
  27.     private static final int REFRESH_DELAY = 500;//刷新延迟  
  28.   
  29.     private final Handler mHandler = new Handler();  
  30.     private final Runnable mTimeRefresher = new Runnable() {  
  31.   
  32.         @Override  
  33.         public void run() {  
  34.             Calendar calendar = Calendar.getInstance(TimeZone  
  35.                     .getTimeZone("GMT+8"));//时区  
  36.             final Date d = new Date();  
  37.             calendar.setTime(d);  
  38.   
  39.             timeView.setText(String.format(DATE_FORMAT,  
  40.                     calendar.get(Calendar.HOUR), calendar.get(Calendar.MINUTE),  
  41.                     calendar.get(Calendar.SECOND)));  
  42.             mHandler.postDelayed(this, REFRESH_DELAY);  
  43.         }  
  44.     };  
  45.   
  46.     @SuppressLint("NewApi")  
  47.     public LEDView(Context context, AttributeSet attrs, int defStyle) {  
  48.         super(context, attrs, defStyle);  
  49.         init(context);  
  50.     }  
  51.   
  52.     public LEDView(Context context, AttributeSet attrs) {  
  53.         super(context, attrs);  
  54.         init(context);  
  55.     }  
  56.   
  57.     public LEDView(Context context) {  
  58.         super(context);  
  59.         init(context);  
  60.     }  
  61.   
  62.     private void init(Context context) {  
  63.         LayoutInflater layoutInflater = LayoutInflater.from(context);  
  64.   
  65.         View view = layoutInflater.inflate(R.layout.ledview, this);  
  66.         timeView = (TextView) view.findViewById(R.id.ledview_clock_time);  
  67.         bgView = (TextView) view.findViewById(R.id.ledview_clock_bg);  
  68.         AssetManager assets = context.getAssets();//字体管家类  
  69.         final Typeface font = Typeface.createFromAsset(assets, FONT_DIGITAL_7);  
  70.         timeView.setTypeface(font);// 设置字体  
  71.         bgView.setTypeface(font);  
  72.   
  73.     }  
  74.   
  75.     public void start() {  
  76.         mHandler.post(mTimeRefresher);  
  77.     }  
  78.   
  79.     public void stop() {  
  80.         mHandler.removeCallbacks(mTimeRefresher);  
  81.     }  
  82. }  

新建一个Activity调用这个控件:

[html]  view plain copy
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context=".LEDActivity"  
  6.     android:background="@color/black" >  
  7.   
  8.    <com.yayun.leddemo.LEDView   
  9.         android:id="@+id/ledview"  
  10.         android:layout_width="wrap_content"    
  11.         android:layout_height="wrap_content"    
  12.         android:layout_centerInParent="true"  
  13.         android:layout_gravity="center"  />    
  14.   
  15. </RelativeLayout>  

[java]  view plain copy
  1. package com.yayun.leddemo;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.annotation.TargetApi;  
  5. import android.app.ActionBar;  
  6. import android.app.Activity;  
  7. import android.os.Build;  
  8. import android.os.Bundle;  
  9. import android.view.Menu;  
  10.   
  11. @TargetApi(Build.VERSION_CODES.HONEYCOMB)  
  12. public class LEDActivity extends Activity {  
  13.   
  14.     private LEDView ledView;  
  15.   
  16.     @SuppressLint("NewApi")  
  17.     @Override  
  18.     protected void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.activity_led);  
  21.         ledView = (LEDView) findViewById(R.id.ledview);  
  22.           
  23.           ActionBar actionBar = getActionBar();    
  24.           actionBar.setDisplayHomeAsUpEnabled(true);   
  25.     }  
  26.   
  27.     @Override  
  28.     protected void onResume() {  
  29.         super.onResume();  
  30.         ledView.start();//调用开始  
  31.     }  
  32.   
  33.     @Override  
  34.     protected void onStop() {  
  35.         super.onStop();  
  36.         ledView.stop();//暂停  
  37.     }  
  38.       
  39.     @Override  
  40.     public boolean onCreateOptionsMenu(Menu menu) {  
  41.         getMenuInflater().inflate(R.menu.activity_led, menu);  
  42.         return true;  
  43.     }  
  44.   
  45. }  

运行实例如下:

Android实战简易教程<六十五>(自定义控件实现数字液晶时钟Demo)_第7张图片

录制显示问题,不知道为什么,大家可以自行运行查看效果。

喜欢的朋友关注我,谢谢!

源码下载


你可能感兴趣的:(android,控件)