Thứ Tư, 17 tháng 12, 2014

Lập trình Android TUT ANDROID 003: USER INTERFACE TRONG ANDROID – BUTTON (PART 1)


Lập trình Android TUT ANDROID 003: USER INTERFACE TRONG ANDROID – BUTTON (PART 1)


( VEDA ) Giao diện người dùng (UI) trong andoid app có 2 loại là View và View Group


UI trong andoird app được định nghĩa trong tập tin xml trong thư mục res->layout



UI trong android app gồm rất nhiều thành phần mình sẽ từ từ giới thiệu với các bạn từng thành phần trong đó cũng như những xử lý cơ bản nhất với các thành phần đó
Button

Button là một đối tượng rất phổ biết không chỉ trong android mà còn trong rất nhiều loại ngôn ngữ khác.

Trong ví dụ demo của mình mình có làm 1 ví dụ đơn giản về việc tạo một button trong giao diện và khi người dùng click vào button đó thì sẽ show ra “Toast” để thông báo là button đã được click

Để làm được ví dụ này các bạn thực hiện lần lượt các bước sau

Bước 1: Vào thư mục res->layout -> activity_main.xml : thêm button vào giao diện

<br /><br />&lt;RelativeLayout xmlns:android=<br /><%%KEEPWHITESPACE%%> xmlns:tools=<br /><%%KEEPWHITESPACE%%> android:layout_width="match_parent"<br /><%%KEEPWHITESPACE%%> android:layout_height="match_parent"<br /><%%KEEPWHITESPACE%%> tools:context=".MainActivity" &gt;<br /><br />&lt;Button<br /><%%KEEPWHITESPACE%%> android:id="@+id/btDemo"<br /><%%KEEPWHITESPACE%%> android:layout_width="wrap_content"<br /><%%KEEPWHITESPACE%%> android:layout_height="wrap_content"<br /><%%KEEPWHITESPACE%%> android:text="Button" /&gt;<br /><br />&lt;/RelativeLayout&gt;<br /><br />


Note: Với View hay ViewGroup trong android thì có 2 thuộc tính là bắt buộc là 

android:layout_width 

Qui định độ rộng của View hay ViewGroup 

android:layout_height 

Qui định độ cao của View hay ViewGroup 

Thuộc tính android:id 

Qui định id của View hoặc ViewGroup dùng để “control” View hay ViewGroup từ code 

Bước 2: Mở file MainActivity.Java trong folder src 

<br /><br />package com.example.buttondemo;<br /><br />import android.app.Activity;<br /><%%KEEPWHITESPACE%%> import android.content.Context;<br /><%%KEEPWHITESPACE%%> import android.os.Bundle;<br /><%%KEEPWHITESPACE%%> import android.view.Menu;<br /><%%KEEPWHITESPACE%%> import android.view.View;<br /><%%KEEPWHITESPACE%%> import android.view.View.OnClickListener;<br /><%%KEEPWHITESPACE%%> import android.widget.Button;<br /><%%KEEPWHITESPACE%%> import android.widget.Toast;<br /><br />public class MainActivity extends Activity {<br /><br />// buoc 1 xay dung 1 button trong layout<br /><br />// buoc 2 khai bao 1 bien kieu Button trong code<br /><%%KEEPWHITESPACE%%> private Button btDemo;<br /><br />@Override<br /><%%KEEPWHITESPACE%%> protected void onCreate(Bundle savedInstanceState) {<br /><%%KEEPWHITESPACE%%> super.onCreate(savedInstanceState);<br /><br />// Phuong thuc setContentView de set giao dien cho Activity<br /><%%KEEPWHITESPACE%%> setContentView(R.layout.activity_main);<br /><br />// buoc 3 ket noi bien voi layout<br /><%%KEEPWHITESPACE%%> btDemo = (Button) findViewById(R.id.btDemo);<br /><br />// buoc 4 lang nghe su kien Button duoc Click<br /><%%KEEPWHITESPACE%%> btDemo.setOnClickListener(new OnClickListener() {<br /><br />@Override<br /><%%KEEPWHITESPACE%%> public void onClick(View v) {<br /><%%KEEPWHITESPACE%%> // lam gi do khi button duoc click<br /><%%KEEPWHITESPACE%%> // trong vi du nay minh chi don gian la hien thi 1 Toast thong bao<br /><%%KEEPWHITESPACE%%> ShowToastLong(MainActivity.this, "Button duoc click");<br /><br />}<br /><%%KEEPWHITESPACE%%> });<br /><%%KEEPWHITESPACE%%> }<br /><br />public static void ShowToastLong(Context mContext, String Message) {<br /><%%KEEPWHITESPACE%%> Toast.makeText(mContext, Message, Toast.LENGTH_LONG).show();<br /><%%KEEPWHITESPACE%%> }<br /><br />@Override<br /><%%KEEPWHITESPACE%%> public boolean onCreateOptionsMenu(Menu menu) {<br /><%%KEEPWHITESPACE%%> // Inflate the menu; this adds items to the action bar if it is present.<br /><%%KEEPWHITESPACE%%> getMenuInflater().inflate(R.menu.main, menu);<br /><%%KEEPWHITESPACE%%> return true;<br /><%%KEEPWHITESPACE%%> }<br /><br />}<br /><br />

kết quả chạy demo

Tiếp theo Bài 4: 
TUT ANDROID 004: USER INTERFACE TRONG ANDROID – EDITTEXT, TEXTVIEW (PART 2)
Học viện công nghệ veda
Địa chỉ: Số 1, Hoàng Đạo Thúy, Thanh Xuân, Hà Nội

Không có nhận xét nào:

Đăng nhận xét