Header ads

Header ads
» » Clock Android

AnalogClock, DigitalClock và TextClock

Trong Android, AnalogClock là dạng một  đồng hồ kim, hiển thị thời gian chính bằng kim, kim ngắn chỉ giờ, kim dài chỉ chỉ số phút. DigitalClock & TextClock cả hai trông giống như đồng hồ kỹ thuật số bình thường. Nó hiển thị giờ, phút và giây. 

Android AnalogClock là lớp con của lớp View,  Android DigitalClock là lớp con của lớp TextView.

Sau Android API 17 nên  sử dụng TextClock. Trong android, bạn cần kéo đồng hồ analog và kỹ thuật số từ các pallet để hiển thị đồng hồ analog và kỹ thuật số. Nó đại diện cho thời gian của các thiết bị hiện nay.

Lưu ý:  AnalogClock, DigitalClock TextClock không thể được sử dụng để thay đổi thời gian của thiết bị. Để làm như vậy, bạn cần phải sử dụng DatePicker TimePicker.


Các loại đồng hồ trong Android

Analog Clock:

AnalogClock là dạng một  đồng hồ kim, hiển thị thời gian chính bằng kim, kim ngắn chỉ giờ, kim dài chỉ chỉ số phút.

AnalogClock code trong XML

  <AnalogClock  android:id="@+id/simpleAnalogClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content" />

Digital Clock:

DigitalClock trông giống như đồng hồ kỹ thuật số bình thường. Nó hiển thị giờ, phút và giây. Nó chỉ sử dụng từ API 17  trở về trước

DigitalClock code trong XML

  <TextClock  android:id="@+id/simpleTextClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content" />

Text Clock:

Giống như DigitalClock nhưng nó sử dụng từ API 17 trở về sau.

  <TextClock  android:id="@+id/simpleTextClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content" />


Một số thuộc tính thường dùng của AnalogClock

1. android:id: Là thuộc tính duy nhất của AnalogClock.

  <AnalogClock  android:id="@+id/simpleAnalogClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content" /> <!--  id attribute of a analog clock used to uniquely identify it -->

Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id:

  AnalogClock simpleAnalogClock = (AnalogClock) findViewById(R.id.simpleAnalogClock);

3. android:background: Thuộc tính này thiết lập màu nền AnalogClock

Code sau chúng ta thiết lập màu nền, màu đỏ cho AnalogClock

  <AnalogClock  android:id="@+id/simpleAnalogClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:background="#f00"/>

Thiết lập màu nên trong java class

  AnalogClock simpleAnalogClock = (AnalogClock)findViewById(R.id.simpleAnalogClock); // inititate a analog clock  simpleAnalogClock.setBackgroundColor(Color.GREEN); // green color for the background of the analog clock  


Một số thuộc tính thường dùng của DigitalClock hoặc TextClock

1. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của DigitalClock với nội dung nó chứa: left, right, top or bottom. Cũng ví dụ trên bây giờ chúng ta xác định padding=40dp từ mọi phía cho DigitalClock.

   <DigitalClock      android:id="@+id/simpleDigitalClock"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_centerHorizontal="true"      android:background="#0f0"      android:padding="40dp"/><!-- Thiết lập padding=40dp -->

2. android:gravity: Thuộc tính này thường sử dụng để canh nội dung trên TextView: left, right, center, top, bottom, center_vertical, center_horizontal

Ví dụ sau chúng ta thiết lập hiển thị đồng hồ phía bên phải

  <DigitalClock  android:id="@+id/simpleDigitalClock"  android:layout_width="fill_parent"  android:layout_height="wrap_content"  android:layout_centerHorizontal="true"  android:textSize="25sp"  android:padding="20dp"  android:gravity="right"/>

3. android:textColor: Thuộc tính này dùng xác định màu chữ hiển thị của đồng hồ, dạng màu chữ: “#argb”, “#rgb”, “#rrggbb”, hoặc “#aarrggbb”.

  <DigitalClock  android:id="@+id/simpleDigitalClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_centerHorizontal="true"  android:textSize="25sp"  android:padding="20dp"  android:textColor="#f00"/>

Thiết lập màu nên trong Java Class

  DigitalClock simpleDigitalClock = (DigitalClock)findViewById(R.id.simpleDigitalClock); // initiate a digital clock  simpleDigitalClock.setTextColor(Color.RED); // Hiển thị màu đỏ

4. android:textSize: Thuộc tính textSize xác định kích thước văn bản của DigitalClock. Chúng ta có thể đ8ạ kích thước văn bản theo sp(scale independent pixel) hoặc dp(density pixel). Trong ví dụ này chúng ta xác định kích thước cho văn bản là 40sp.

  <DigitalClock  android:id="@+id/simpleDigitalClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_centerHorizontal="true"  android:padding="20dp"  android:textSize="40sp" /> <!--  thiết lập textsize=40dp -->

Thiết lập thuộc tính textSize trong Java class

  DigitalClock simpleDigitalClock = (DigitalClock)findViewById(R.id.simpleDigitalClock); // initiate a digital clock  simpleDigitalClock.setTextSize(25); // Thiết lập kích thước text

5. android: textStyle: Thuộc tính xác định loại văn bản của DigitalClock, thông thường có các loại văn bản:bold, italic và normal. Nếu chúng ta muốn sử nhiều hơn một loại văn bản thì phải thêm phép toán hoặc "|" vào giữa các loại văn bản:

Ví dụ sau chúng ta thiết lập kiểu chữ của DigitalClock là bold và italic.

  <DigitalClock  android:id="@+id/simpleDigitalClock"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:layout_centerHorizontal="true"  android:padding="20dp"  android:textSize="25sp"  android:textStyle="bold|italic" />

Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một AnalogClock, một DigitalClock và 2 TextView. Thiết lập sự kiện cho 2 clock, khi người sử dụng click vào sẽ hiển thị thông qua ToastTiến hành tạo project, vào thư mục  res /layout -> activity_main.xml thiết kế giao diện sau:

 

Bước 1: Tạo một project tên là DatePickerDialogFile->New->Android Application Project điền các thông tin ->Next ->Finish

Bước 2: Mở res -> values -> strings.xml

  <resources>  <string name="app_name">AnalogAndDigitalClock</string>  <string name="hello_world">Hello world!</string>  <string name="action_settings">Settings</string>  <string name="analogClock">Analog Clock</string>  <string name="digitalClock" >Digital Clock</string>  </resources>

Bước 3: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code, chúng ta sẽ tạo các đối tượng EditText trong  Relative Layout.

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      android:paddingBottom="@dimen/activity_vertical_margin"      android:paddingLeft="@dimen/activity_horizontal_margin"      android:paddingRight="@dimen/activity_horizontal_margin"      android:paddingTop="@dimen/activity_vertical_margin"      tools:context=".MainActivity">        <TextView          android:id="@+id/textView1"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_centerHorizontal="true"          android:text="@string/analogClock"          android:textSize="25sp"          android:textStyle="bold" />        <AnalogClock          android:id="@+id/simpleAnalogClock"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_centerHorizontal="true"          android:layout_marginTop="50dp"          android:background="#0f0"          android:padding="50dp" />        <TextView          android:id="@+id/textView2"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_below="@+id/simpleAnalogClock"          android:layout_centerHorizontal="true"          android:layout_marginTop="50dp"          android:text="@string/digitalClock"          android:textSize="25sp"          android:textStyle="bold" />        <DigitalClock          android:id="@+id/simpleDigitalClock"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_below="@+id/textView2"          android:layout_centerHorizontal="true"          android:layout_marginTop="20dp"          android:background="#0f0"          android:padding="20dp"          android:textColor="#fff"                  android:textStyle="bold" />    </RelativeLayout>

Bước 5: Mở app -> src ->MainActivity.java và thêm code.

Trong bước này chúng ta khởi tạo cho 2 clock và thiết lập sự kiện cho chúng. Khi người sử dụng Click vào Clock sẽ hiện tên Clock thông qua Toast

  package hiepsiit.com.calendarview;    import android.app.Activity;  import android.graphics.Color;  import android.os.Bundle;  import android.view.Menu;  import android.view.MenuItem;  import android.widget.CalendarView;  import android.widget.Toast;    public class MainActivity extends Activity {  	CalendarView simpleCalendarView;  	@Override  	protected void onCreate(Bundle savedInstanceState) {  		super.onCreate(savedInstanceState);  		setContentView(R.layout.activity_main);  		 simpleCalendarView = (CalendarView) findViewById(R.id.simpleCalendarView); // get the reference of CalendarView  	     simpleCalendarView.setFocusedMonthDateColor(Color.RED);// set the red color for the dates of  focused month  	     simpleCalendarView.setUnfocusedMonthDateColor(Color.BLUE); // set the yellow color for the dates of an unfocused month  	     simpleCalendarView.setSelectedWeekBackgroundColor(Color.RED); // Thiết lập màu đỏ cho các tuần, Từ API 23 trở lên mới hỗ trợ  	     simpleCalendarView.setWeekSeparatorLineColor(Color.GREEN); // Thiết lập cho đường khoảng cách giữa các tuần là màu xanh  	        // perform setOnDateChangeListener event on CalendarView  	     simpleCalendarView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {  	            @Override  	            public void onSelectedDayChange(CalendarView view, int year, int month, int dayOfMonth) {  	                // display the selected date by using a toast  	                Toast.makeText(getApplicationContext(), dayOfMonth + "/" + month + "/" + year, Toast.LENGTH_LONG).show();  	            }  	        });  	}    	  }  

Download ví dụ

Ứng dụng này được phát triển bởi adt bundleandroid 4.2 sử dụng minimum sdk 11  and target sdk 21.


Kết quả khi chạy ứng dụng:

Sau đó chọn giờ:



Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com

About Học viện đào tạo trực tuyến

Xinh chào bạn. Tôi là Đinh Anh Tuấn - Thạc sĩ CNTT. Email: dinhanhtuan68@gmail.com .
- Nhận đào tạo trực tuyến lập trình dành cho nhà quản lý, kế toán bằng Foxpro, Access 2010, Excel, Macro Excel, Macro Word, chứng chỉ MOS cao cấp, IC3, tiếng anh, phần mềm, phần cứng .
- Nhận thiết kế phần mềm quản lý, Web, Web ứng dụng, quản lý, bán hàng,... Nhận Thiết kế bài giảng điện tử, số hóa tài liệu...
HỌC VIỆN ĐÀO TẠO TRỰC TUYẾN:TẬN TÂM-CHẤT LƯỢNG.
«
Next
Bài đăng Mới hơn
»
Previous
Bài đăng Cũ hơn