Header ads

Header ads
» » » Hướng dẫn xây dựng trang đăng nhập app Android apk

Hôm nay mình sẽ hướng dẫn cho các bạn làm một cái ứng dụng đơn giản trên Android Studio cho phép người dùng nhập username và password , nếu đúng với thông tin (admin/admin) thì hiển thị màn hình in ra “Đăng nhập thành công” và chuyển sang màn hình khác rồi cho hiện lên chữ “Hello admin”. Nếu nhập sai thì hiển thị thông báo nhập lại username, password.
 – Đầu tiên phải chuẩn bị cho mình một tấm hình để làm biểu tượng cho phần đăng nhập của mình ( hình này bạn để ở thư mục drawable ). Sau đó các bạn vào file activity_main.xml để tiến hành thiết kế giao diện cho ứng dụng . Bạn có 2 cách để có thể thiết kế giao diện :
  • Cách 1 : Kéo thả trực tiếp các control vào giao diện màn hình ( cách này mình sẽ trình bày sau )
  • Cách 2 : Viết Code để phát sinh ra các control
– Để viết code phát sinh ra các control lên giao diện màn hình các bạn đang đứng ở file activity_main.xml chọn Text như hình :
hinh2

I. Sau đó các bạn tiến hành viết code phát sinh :
1. Thiết lập 2 Text View có tên lần lượt là Tài khoản và Mật Khẩu :
hinh3•  Chú thích :
+ Câu lệnh  android:background=”#0000A0″ dùng để thiết lập hình hoặc màu nền cho màn hình ở đây mình thiết lập màu cho màn hình là màu xanh có mã 0000A0 . Để biết mã màu bạn click vào link sau để tải về phần mềm lấy mã màu : Get color hex
+ Câu lệnh android:layout_width = “wrap_content” dùng để thiết lập kích thước chiều rộng của layout ở đây mình sử dụng wrap_content tức là kích thước layout vừa đủ với phần nội dung của View. Tương tự với câu lệnh android:layout_height cũng vậy.
+ Câu lệnh android:text  để thiết lập chữ phía trong control TextView , android:textSize  thiết lập cỡ chữ  và android:textColor để thiết lập màu cho chữ.
+ Câu lệnh android:layout_marginTop thiết lập khoảng cách của layout so với cạnh phía trên của màn hình
2. Thiết lập 2 EditText dùng để cho người dùng nhập dữ liệu username và password :
hinh4

• Chú thích : 
+ Câu lệnh android:id dùng để đặt tên cho control mà bạn muốn đặt tên ( bạn nên được tên sao cho gợi nhớ về control này )
+ Câu lệnh android:inputType thiết lập kiểu hiện thị cho control đó
+ Câu lệnh android:layout_marginLeft thiết lập khoảng cách giữa layout so với cạnh bên trái của màn hình.
3. Thiết lập Button dùng để cho người dùng kích vào khi tiến hành đăng nhập tài khoản
hinh5
• Chú thích :
+ Câu lệnh android:layout_alignTop có tác dụng căn thẳng hàng theo lề trên cụ thể ở đậy lề trên là editTextPassword mà chúng ta đã thiết lập từ trước đó.
4. Thiết lập ImageView
hinh6
– Ở câu lệnh android:background thì mình đã sử dụng hình ảnh đã chuẩn bị từ trước để làm hình nền cho View
– Như vậy ta đã hoàn thành việc thiết kế giao diện đăng nhập cho ứng dụng của chúng ta. Tiếp theo thì chúng ta cần ánh xạ chúng qua file MainActivity.java để thực hiện các xử lý trên ứng dụng này.
hinh7
– Khi bạn sang file MainActivity.java thì ở đối tượng mà class MainActivity kế thừa nó đã bị lỗi thời cho nên bạn cần sửa lại đối tượng cha của là Activity . Mặt khác khi ta khai báo biến lần đầu tiên nếu như Android Studio không tự động import thư viện cho bạn thì bạn sẽ nhìn thấy lỗi giống phía trên đồng thời nó cũng chỉ cho bạn cách để import là nhấn tổ hợp phím Alt + Enter.
II. Tiến hành ánh xạ hinh8

– Bạn khai báo biến như trên . Để ánh xạ bạn tiến hành sử dụng lệnh findViewById(R.id.<Tên bạn đặt cho các control ở đầu bài>)  sau đó phải ép kiểu nó về kiểu của control đó bởi vì khi bạn viết code phát sinh các control thì chúng sẽ hệ thống phát sinh và lưu trữ trong file R dưới dạng các số nguyên.
– Sau khi thực hiện các bước trên thì từ giờ trở đi khi bạn muốn thao tác trên control nào trên màn hình thì bạn chỉ cần thao táo trên chính các tên biến mà các bạn đã ánh xạ qua.
III. Tiến hành viết code : 
– Khi người dùng nhập Tài Khoản, Mật Khẩu xong thì người dùng sẽ kích vào Button Đăng Nhập tiến hành đăng nhập vậy để làm được điều đó thì bạn phải add sự kiện OnClick cho button đó . Sau khi người dùng nhấp vào button Đăng Nhập thì bạn kiểm tra xem username và password có trùng với username và password bạn đã khởi tạo sẵn không ? Nếu có thì thông báo cho người dùng biết đã “Đăng nhập thành công” .Ngược lại thông báo “Tài khoản hoặc Mật khẩu sai”. Cách làm như sau :
hinh9

– Nhìn có vẻ đúng đấy không sai cái gì cả nhỉ ? Nhưng ….. Điều bất ngờ lại nằm ở chỗ toán tử “==” . Một câu hỏi được đặt ra là tại sao thế nhỉ ? Ở mấy ngôn ngữ khác vẫn sài toán tử so sánh này chạy được mà nhưng giờ vẫn chạy app nhưng không hiện thông báo ? => Kì ta .Thật ra là như thế này bạn ạ !. Trong Java biến được chia làm 2 kiểu : biến kiểu tham trị và biến kiểu  tham chiếu. Biến kiểu tham trị gồm : int, float, double, long,… Còn biến kiểu tham chiếu gồm : String, array, kiểu dữ liệu tự tạo (kiểu đối tượng),…..Khi sử dụng biến kiểu tham trị thì Java chỉ cho phép bạn sử dụng toán tử so sánh “==” còn khi bạn sử dụng biến kiểu tham chiếu thì Java cho phép bạn sử dụng cả toán tử “==” và equals(). Tuy nhiên một điều bạn cần hết sức lưu ý  khi sử  dụng toán tử “==” bởi vì khi bạn sử dụng toán tử “==” thì Java sẽ hiểu rằng bạn đang so sánh 2 biến kiểu tham chiếu đó có cùng trỏ tới cùng một đối tượng hay không ? Còn phương thức equals() Java sẽ so sánh giá trị của 2 biến đó. Do vậy ở trong trường hợp này chúng ta phải sử dụng phương thức equals() chứ không phải sử dụng toán tử “==” và đoạn mã được viết lại như sau :
hinh10

– Bạn tiến hành run lại app thì sẽ thấy bây giờ đã xuất hiện được thông báo.
loifont– Ủa sao xuất ra chữ lại bị lỗi font vậy trời ? . Bạn đừng lo đó là do khi tạo project thì trong tài nguyên có sẵn trong file string.xml không hỗ trợ sẵn utf-8 cho chúng ta thôi không có gì đáng lo ngại cả !. Để khắc phục bạn cần tạo biến string trong file string.xml để có thể hỗ trợ  tiếng việt , cách tạo như sau :
hinh11hinh12 – Tiếp theo để có thể chuyển từ màn hình này sang màn hình khác thì đầu tiên bạn phải tạo ra 1 Activity mới như sau :
taomanhinh

– Sau khi tạo 1 activity mới bạn sử dụng Intent() và startActivity() để có thể chuyển màn hình như dưới đây :
anh13

– Bạn tiến hành thiết kế ra 1 TextView và dùng lệnh android:text = “Hello Admin” để có thể hiện chữ trên màn hình sau khi người dùng đăng nhập thành công.

– Và như bạn thường thấy ở các ứng dụng có sử dụng phần đăng nhập thì sau khi đăng nhập thành công và chuyển qua màn hình 2 thì sẽ có 1 nút để có thể cho phép người dùng Đăng Xuất quay về màn hình Đăng Nhập . Công việc này khá đơn giản bạn thiết kế ra 1 button rồi ánh xạ cho nó và tiến hành add sự kiện OnClick() cho button Đăng Xuất trong lúc sự kiện OnClick() được chạy thì bạn sử dụng Intent() và startActivity() để quay về màn hình Đăng Nhập. Cụ thể như sau :
hinh14
 – Hi vọng sau demo nhỏ này của mình đã giúp các bạn có thể tự mình thiết kế ra một ứng dụng đơn giản. Nếu bạn yêu thích lập trình di động có thể tham gia khóa học tại đây. Nếu bạn muốn trao đổi hoặc liên hệ vui lòng gửi email về: dinhanhtuan68@gmail.com

About Tuấn Đinh Anh

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