Plain Text in Android

 Trong thực tế, hầu như ứng dụng nào cũng có phần nhậm dữ liệu. Ví dụ điển hình nhất là khi bạn login tài khoản vào một ứng dụng nào đó. Ở bài viết này chúng tôi giới thiệu sơ lược về các input text trong Android, hay nó còn có tên gọi khác là EditText. 


EngSub:



Để thực hành với EditText thì mình sẽ bắt tay vào thiết kế layout cho ứng dụng. Và trong phạm vi của bài viết này mình chỉ giới thiệu những thuộc tính cơ bản và giúp cho các bạn hình dung cụ thể nhất EditText là gì. Với những bài sau, mình sẽ chuyên sâu từng khía cạnh cụ thể để bạn vận dụng cho công việc cũng như học tập.

EngSub:



Layout xml: 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
tools:context=".MainActivity">

<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:paddingTop="20dp"
android:paddingBottom="20dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:text="Plain Text"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPersonName"
android:text=""
tools:layout_editor_absoluteX="81dp"
tools:layout_editor_absoluteY="74dp" />

<TextView
android:text="Text Password"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextTextPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword"
tools:layout_editor_absoluteX="84dp"
tools:layout_editor_absoluteY="140dp" />

<TextView
android:text="Number Password"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextNumberPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberPassword"
tools:layout_editor_absoluteX="82dp"
tools:layout_editor_absoluteY="220dp" />

<TextView
android:text="Text Email"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextTextEmailAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textEmailAddress"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="297dp" />

<TextView
android:text="Text Phone"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextPhone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="phone"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="371dp" />

<TextView
android:text="Text Post Address"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextTextPostalAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPostalAddress"
tools:layout_editor_absoluteX="85dp"
tools:layout_editor_absoluteY="465dp" />

<TextView
android:text="Text Multiline"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextTextMultiLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:gravity="start|top"
android:inputType="textMultiLine"
tools:layout_editor_absoluteX="84dp"
tools:layout_editor_absoluteY="553dp" />

<TextView
android:text="Text Time"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="time"
tools:layout_editor_absoluteX="87dp"
tools:layout_editor_absoluteY="646dp" />
</LinearLayout>
<LinearLayout
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#000000"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:text="Text Date"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextDate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="date" />

<TextView
android:text="Text Number"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextNumber"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="number" />

<TextView
android:text="Text Number Signed"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextNumberSigned"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberSigned" />

<TextView
android:text="Text Number Decimal"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText
android:id="@+id/editTextNumberDecimal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />

<TextView
android:text="Text Auto Complete"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<AutoCompleteTextView
android:id="@+id/autoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />

<TextView
android:text="Text Multi Auto Complete"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<MultiAutoCompleteTextView
android:id="@+id/multiAutoCompleteTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="" />

<TextView
android:text="Text Checked"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckedTextView
android:id="@+id/checkedTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:enabled="true"
android:inputType="textWebEditText"
android:text="checked" />

<TextView
android:text="Text Template"
android:layout_marginBottom="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username"/>
</com.google.android.material.textfield.TextInputLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Tại sao lại có layout dài như vậy, là bởi vì chúng tôi đang liệt kê tất cả các dạng của EditText.

EngSub:



Nếu bạn tinh mắt, để ý chút thì sẽ thấy rằng những EditText trên chỉ khác nhau ở thuộc tính android:inputType . Để bạn rõ hơn, tiếp theo chúng ta code trong file MainActivity như sau và chạy ứng dụng, sau đó nhập dữ liệu vào EditText thì sẽ rõ hơn bản chất cũng như hoạt động của nó. Ở đây mình sẽ giải thích 10 loại inputType phổ biến chúng ta hay dùng thực tế trong công việc cũng như trong hầu hết các ứng dụng trên Google Play sử dụng.

EngSub: 



android:inputType="textPersonName": Thuộc tính này cho phép bạn nhập dữ liệu bình thường như một câu, hoặc một đoạn văn, hoặc tên người, tên địa danh, tên đồ vật, ... ect.    

android:inputType="textPassword": Thuộc tính này cho phép bạn nhập dữ liệu vào thì sẽ được chuyển sang dấu chấm khi hiển thị nhằm mục đích dấu thông tin dữ liệu bạn nhập vào.

android:inputType="numberPassword": Tương tự như thuộc tính ở trên, nhưng ở thuộc tính này, bàn phím trong thiết bị chỉ hiển thị các chữ số.

android:inputType="textEmailAddress": Với thuộc tính này, khi bàn phím hiển thị sẽ cung cấp cho bạn một số format để bạn dễ dàng trong việc nhập địa chỉ email. 

android:inputType="phone": Bàn phìm hiển thị toàn bộ số và các phím đặc biệt chỉ dùng cho nhập số điện thoại.   
 
android:inputType="textPostalAddress": Bàn phím hiển thị các ký tự thông thường phục vụ cho việc nhập địa chỉ.     

android:inputType="textMultiLine":  EditText sẽ cho phép bạn nhập nhiều dòng khi dữ liệu hết chiều dài khung chứa, sẽ tự động ngắt dòng.

android:inputType="date": Cho phép nhập ngày tháng năm theo định dạng chuẩn phổ biến.

android:inputType="number": Hiển thị và cho phép nhập dữ liệu là số.
   
Eng Sub:



Một số hình ảnh của keyboard Android hiển thị với một số EditText inputType: 






Đăng nhận xét

Mới hơn Cũ hơn