Học lập trình android miễn phí - bài học về view

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Học lập trình android miễn phí - bài học về view

Bài gửi by t11nguyen on 17/6/2017, 10:58

Giao diện người dùng của một ứng dụng Android được xây dựng bằng các đối tượng View và ViewGroup. View là các đối tượng như button (nút bấm), text field (ô gõ văn bản)… ViewGroup là các khung dùng để chứa các đối tượng View khác, ViewGroup quy định kích thước cũng như vị trí của các View con nằm trong nó, chẳng hạn như sắp xếp các View theo chiều dọc/ngang, hoặc theo dạng bảng…

Android định nghĩa một tập các thẻ XML tương ứng với các lớp View và ViewGroup để chúng ta có thể thiết kế giao diện theo cú pháp XML một cách dễ dàng.

Từ lớp gốc ViewGroup, các lớp con kế thừa được gọi với tên là Layout. Trong phần này chúng ta sẽ làm việc với https://vietpro.net.vn/lap-trinh-android

Tạo LinearLayout
Chúng ta dùng thẻ LinearLayout trong file main.xml như sau:

res/layout/main.xml

Lớp LinearLayout kế thừa từ lớp ViewGroup, lớp này sẽ sắp xếp các View con theo chiều ngang hoặc chiều dọc. Các phần tử sẽ được sắp xếp theo thứ tự mà chúng được khai báo trong file XML này.


android:eek:rientation="horizontal"
Thuộc tính android:eek:rientation sẽ quy định là sắp xếp theo chiều ngang hay dọc, ở đây horizontal là ngang, còn vertical sẽ là dọc.


android:layout_width="match_parent"
android:layout_height="match_parent"
Hai thuộc tính android:layout_width và android:layout_height là bắt buộc phải có, 2 thuộc tính này sẽ quy định kích thước cho đối tượng View. Giá trị "match_parent" tức là kích thước của Viewcon sẽ bằng kích thước của View cha, nhưng vì LinearLayout là lớp View gốc, tức là lớp này không có View cha nào cả nên ở đây lớp LinearLayout này sẽ có kích thước bằng với kích thước màn hình.

Thêm TextField
res/layout/main.xml


1
android:id="@+id/edit_message"
Thuộc tính android:id là một cái tên riêng dành cho đối tượng View mà chúng ta đã khai báo, chúng ta có thể tham chiếu tới id này giống như tham chiếu tới biến trong các file .java. Dấu @ có nghĩa là giá trị của biến này được định nghĩa trong các đối tượng resource (tiếng Anh là tài nguyên) chứ không khai báo trực tiếp ở đây, theo sau dấu @ là loại resource, ở đây là id, tiếp theo là dấu / và tên resouce edit_message.

Dấu + phía trước id có nghĩa là tại đây chúng ta định nghĩa luôn id chứ mặc định Android không biết id là cái gì cả. Khi chúng ta dịch project thì SDK sẽ nhìn cái id đó và định nghĩa một lớp có tên là ID bên trong file gen/R.java, các resource có cùng loại id sau này sẽ tự động được thêm vào ở lớp ID này để gán vào các thẻ View của chúng ta. Khi chúng ta định nghĩa một loại resource mà có dấu + thì các resource sau này có cùng loại không cần phải có dấu + nữa.


android:layout_width="wrap_content"
android:layout_height="wrap_content"
Hai thuộc tính layout_width và layout_height cũng giống với LinearLayout, nhưng ở đây chúng ta sử dụng giá trị wrap_content, giá trị này quy định kích thước của View là vừa đủ để bọc lấy nội dung bên trong nó, chẳng hạn như EditText có 3 kí tự thì kích thước sẽ tự động co dãn để vừa khớp với 3 kí tự đó.

1
android:hint="@string/edit_message"
Thuộc tính android:hint sẽ hiển thị một chuỗi mặc định nếu chúng ta không gõ gì vào text field. Ở đây giá trị của thuộc tính này tham chiếu tới biến edit_message trong loại resource là string,đây là loại resource có sẵn trong file strings.xml của project nên chúng ta không cần phải thêm dấu + vào làm gì, nhưng chúng ta phải khai báo biến edit_message trong file này, chúng ta sẽ khai báo ở dưới.

Mặc dù cả 2 thuộc tính android:id và android:hint đều tham chiếu tới resource có cùng tên là edit_message nhưng đây là 2 resource khác nhau vì chúng nằm trong 2 loại resource khác nhau là id và string.

Khai báo tài nguyên string
Mặc định khi tạo project Android thì project này có một file resource chứa loại string là res/values/strings.xml.

Thêm Button
res/layout/main.xml


Chúng ta thêm một đối tượng View là Button.

Các thuộc tính của thẻ Button cũng giống các thuộc tính của 2 thẻ kia, chỉ khác ở chỗ là ở đây chúng ta không khai báo id, thuộc tính id là một thuộc tính không bắt buộc.

Hiện tại giao diện của ứng dụng mà chúng ta đã thiết kế sẽ như hình bên dưới.

Chúng ta sửa lại main.xml như sau:

res/layout/main.xml

Chúng ta biên dịch và chạy lại ứng dụng với giao diện mới như hình trên.



Xử lý sự kiện nút Send
Chúng ta sửa lại file layout chính ở bài trước.

res/layout/main.xml



Chúng ta khai báo thêm thuộc tính android:eek:nClick cho thẻ Button, sendMessage là tên phương thức xử lý khi người dùng click vào nút Button.

Trong file MainActivity.java chúng ta sửa lại như sau:

MainActivity.java






public class MainActivity extends Activity



   @Override
   protected void onCreate(Bundle savedInstanceState)
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   

   public void sendMessage(View view)
   
       Intent intent = new Intent(this, DisplayMessageActivity.class);
       EditText editText = (EditText)findViewById(R.id.edit_message);
       String message = editText.getText().toString();
       intent.putExtra(EXTRA_MESSAGE, message);
       startActivity(intent);
   

Chúng ta khai báo phương thức sendMessage tương ứng với giá trị của thuộc tính android:eek:nClicktrong file XML.

1

Chúng ta khai báo một hằng số có tên là EXTRA_MESSAGE để dùng cho việc gửi dữ liệu đi tới Activity khác (sẽ trình bày ở dưới). Ở đây giá trị của hằng số này chúng ta dùng chính tên package cho khỏi trùng lắp và dễ nhớ, tất nhiên bạn có thể dùng giá trị khác.


public void sendMessage(View view)
https://vietpro.net.vn/lap-trinh-nodejs
Phương thức sendMessage nhận vào một đối tượng View, đây chính là đối tượng Button được click, tức là khi chúng ta chạy ứng dụng và click vào nút “Send” thì ứng dụng sẽ gọi phương thức sendMessage và gửi vào đó biến tham chiếu đến đối tượng Button này.

Lưu ý là các phương thức xử lý sự kiện như phương thức sendMessage trên phải được khai báo public, có kiểu trả về là void và tham số duy nhất là một đối tượng View.

1
Intent intent = new Intent(this, DisplayMessageActivity.class);
Intent là một đối tượng tạo cầu nối giữa các thành phần khác nhau trong khi ứng dụng đang chạy, nói chung là bạn chỉ cần hiểu Intent giống như một máy nhắn tin giúp trao đổi thông tin giữa các thành phần khác nhau vậy, Intent có rất nhiều công dụng nhưng thường thì người ta dùng Intent để chạy một Activity mới.



Tạo Activity mới
Như đã trình bày ở đầu bài, một Activity thông thường sẽ làm công việc thiết kế giao diện của một màn hình và xử lý các thao tác xảy ra trên màn hình đó. Trong một ứng dụng Android thì để thiết kế giao diện của một Activity chúng ta có 2 cách là code “chay” bằng Java bên trong file .java, 2 là thiết kế riêng trong một file XML. Ở đây chúng ta sẽ thiết kế trong file XML.

Chúng ta tạo một file XML có tên là activity_display_message.xml bên trong thư mục res/layout:

res/layout/activity_display_message.xml


Ở đây chúng ta khai báo RelativeLayout với các thuộc tính width, height và id. Chi tiết về các layout sẽ được trình bày ở bài khác.







public class DisplayMessageActivity extends Activity

   @Override
   protected void onCreate(Bundle savedInstanceState)
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_display_message);

       Intent intent = getIntent();
       String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
       TextView textView = new TextView(this);
       textView.setTextSize(40);
       textView.setText(message);

       RelativeLayout layout = (RelativeLayout) findViewById(R.id.content);
       layout.addView(textView);
   

Lớp DisplayMessageActivity sẽ kế thừa từ lớp Activity.




RelativeLayout layout =(RelativeLayout) findViewById(R.id.content);
layout.addView(textView);
Cuối cùng chúng ta tham chiếu đến đối tượng RelativeLayout thông qua phương thức findViewById() và chèn TextView vào layout này bằng phương thức addView().

Sau khi đã định nghĩa xong lớp Activity thì chúng ta phải khai báo Activity đó trong file AndroidManifest.xml.


Tìm hiểu về https://vietpro.net.vn/hoc-lap-trinh-web-php-co-ban
Biên dịch và chạy ứng dụng, bây giờ khi bấm vào nút “Send” thì ứng dụng sẽ mở một màn hình thứ hai có một chuỗi text lấy từ EditText của màn hình trước.

Các bạn chú ý theo dõi các bài học tiếp theo nhé. Chúc các bạn học tập tốt.

t11nguyen
Binh Nhất
Binh Nhất

Tổng số bài gửi : 35
Tuổi : 28
Đăng ký ngày : 22/04/2017

Xem lý lịch thành viên

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết