Cách triển khai TextInputLayout của Android

Trước khi đi vào ví dụ, chúng ta nên biết TextInputLayout trong android là gì. TextInputLayout được mở rộng bởi Bố cục tuyến tính. Nó sẽ hoạt động như một trình bao bọc để chỉnh sửa văn bản và hiển thị hoạt ảnh gợi ý phẳng để chỉnh sửa văn bản.

Ví dụ này trình bày về cách triển khai TextInputLayout của Android.

Bước 1 - Tạo một dự án mới trong Android Studio, đi tới Tệp ⇒ Dự án Mới và điền tất cả các chi tiết cần thiết để tạo một dự án mới.

Bước 2 - Thêm mã sau vào res / layout / activity_main.xml.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "https://schemas.android.com/apk/res/android"
   xmlns:tools = "https://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity"
   android:background = "#dde4dd"
   android:orientation = "vertical">
   <android.support.design.widget.TextInputLayout
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:id = "@+id/layoutEmail"
      android:layout_marginTop = "8dp"
      android:layout_marginStart = "8dp"
      android:layout_marginEnd = "8dp"
      style = "@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
      <android.support.design.widget.TextInputEditText
         android:layout_width = "match_parent"
         android:layout_height = "wrap_content"
         android:id = "@+id/email"
         android:hint = "Enter Email id"
         android:inputType = "textEmailAddress"/>
   </android.support.design.widget.TextInputLayout>
   <android.support.design.widget.TextInputLayout
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:id = "@+id/layoutPassword"
      android:layout_marginTop = "8dp"
      android:layout_marginStart = "8dp"
      android:layout_marginEnd = "8dp"
      style = "@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
      <android.support.design.widget.TextInputEditText
         android:layout_width = "match_parent"
         android:layout_height = "wrap_content"
         android:id = "@+id/password"
         android:hint = "Password"
         android:inputType = "textPassword"/>
   </android.support.design.widget.TextInputLayout>
   <Button
      android:id = "@+id/click"
      android:layout_width = "wrap_content"
      android:layout_height = "wrap_content"
      android:layout_gravity = "center"
      android:text = "Click"></Button>
</LinearLayout>

Trong đoạn mã trên, chúng tôi đã đưa ra hai TextInputEditText và một nút. khi bạn nhấp vào nút, nó sẽ lấy dữ liệu từ văn bản chỉnh sửa và hiển thị trên Bánh mì nướng.

Bước 3 - Thêm mã sau vào src / MainActivity.java

package com.example.andy.myapplication;

import android.graphics.Point;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.TextureView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
   EditText email,password;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      email = findViewById(R.id.email);
      password = findViewById(R.id.password);
      Button click = findViewById(R.id.click);
      click.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            if(!email.getText().toString().isEmpty()&&(!password.getText().toString().isEmpty())) {
               Toast.makeText(MainActivity.this, "you have entered email id " +                                     email.getText().toString() + "Password " + password.getText().toString(), Toast.LENGTH_LONG).show();
            } else {
               email.setError("Please Enter Email id");
               password.setError("Please Enter Pass word");
            }
         }
      });
   }
}

Bước 4 - Mở build.gradle và thêm phụ thuộc vào thư viện hỗ trợ thiết kế.

apply plugin: 'com.android.application'
android {
   compileSdkVersion 28
   defaultConfig {
      applicationId "com.example.andy.myapplication"
      minSdkVersion 15
      targetSdkVersion 28
      compileSdkVersion 28
      versionCode 1
      versionName "1.0"
      testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
   }
   buildTypes {
      release {
         minifyEnabled false
         proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
      }
   }
}
dependencies {
   implementation fileTree(dir: 'libs', include: ['*.jar'])
   implementation 'com.android.support:appcompat-v7:28.0.0'
   implementation 'com.android.support:design:28.0.0'
   implementation 'com.android.support.constraint:constraint-layout:1.1.3'
   testImplementation 'junit:junit:4.12'
   androidTestImplementation 'com.android.support.test:runner:1.0.2'
   androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Hãy thử chạy ứng dụng của bạn. Tôi giả sử bạn đã kết nối thiết bị Di động Android thực tế với máy tính của mình. Để chạy ứng dụng từ android studio, hãy mở một trong các tệp hoạt động của dự án của bạn và nhấp vào biểu tượng Chạy từ thanh công cụ. Chọn thiết bị di động của bạn làm tùy chọn, sau đó kiểm tra thiết bị di động sẽ hiển thị màn hình mặc định của bạn -

Trong kết quả trên là màn hình ban đầu. Bây giờ, hãy nhập một số dữ liệu và nhấp vào nút như hình dưới đây -

Bây giờ loại bỏ tất cả dữ liệu văn bản chỉnh sửa và nhấp vào nút. nó sẽ hiển thị kết quả như hình dưới đây -