Shembull Android TextInputLayout

Në këtë tutorial, ne do të shikojmë në thellësi veçoritë që na ofron Android TextInputLayout. Android TextInputLayout është një komponent dizajni që vjen me Bibliotekën e Mbështetjes së Dizajnit Material.

Android TextInputLayout

Android TexInputLayout zgjeron LinearLayout. Përdorimi kryesor i një TextInputLayout është që të veprojë si një mbështjellës për EditText (ose pasardhësin e tij) dhe të mundësojë animacionet lundruese të aludimeve. Rregulli i parë : TextInputLayout duhet të mbështjellë TextInputEditText në vend të EditText normal. Arsyeja? TextInputEditText është një nënklasë e EditText dhe është krijuar për t'u përdorur si fëmijë i TextInputLayout. Për më tepër, përdorimi i një EditText në vend të kësaj do të na nxirrte një paralajmërim: EditText i shtuar nuk është një TextInputEditText. Ju lutemi kaloni në përdorimin e asaj klase në vend të kësaj. TextInputLayout ka shumë më tepër për të ofruar sesa thjesht shfaqja e etiketave të udhëzimeve lundruese.

Karakteristikat e Android TextInputLayout

Disa nga veçoritë që do të mbulojmë në këtë tutorial janë:

1. Aktivizimi/Çaktivizimi i sugjerimeve lundruese
2. Aktivizimi/Çaktivizimi i animacionit lundrues të sugjerimeve
3. Duke shfaqur mesazhet e gabimit
4. Duke shfaqur numëruesin e karaktereve
5. Alarmimi i përdoruesit kur numri i karaktereve tejkalon kufirin e tij
6. Përshtatja e pamjes së tekstit për sugjerime lundruese, etiketë gabimi, numërues karakteresh
7. Ndrysho dukshmërinë e fjalëkalimit

Ne do të shikojmë secilën nga këto veçori dhe do t'i zbatojmë ato në një projekt Android Studio.

Shembull i strukturës së projektit Android TextInputLayout

compile 'com.android.support:design:25.3.1'

Aktivizimi/Çaktivizimi i këshillave lundruese

Këshillat lundruese janë aktivizuar si parazgjedhje në një TextInputLayout. Për ta çaktivizuar, duhet të shtojmë atributin e mëposhtëm brenda etiketës: app:hintEnabled=false. Kodi i mëposhtëm xml është nga faqosja activity_main.xml dhe ka tre fusha EditText.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            android:hint="TextInputEditText" />


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Enabled Default" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:hintEnabled="false">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Disabled" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

Aktivizimi/Çaktivizimi i animacionit Floating Hint

Ngjashëm me funksionin e mëparshëm, animacioni i aludimit lundrues është aktivizuar si parazgjedhje. Për ta çaktivizuar atë, duhet të shtojmë atributin e mëposhtëm brenda etiketës TextInputLayout. app:hintAnimationEnabled=false Kodi i mëposhtëm xml është nga faqosja activity_main.xml dhe ka fusha EditText për secilin prej rasteve.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Enabled Default" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:hintAnimationEnabled="false">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Hint Animation Disabled" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

Stilimi i sugjerimit TextAppearance

Për të përdorur një textColor dhe textSize të personalizuar për sugjerimet, përdoret atributi i mëposhtëm: app:hintTextAppearance=@style/HintText Stili HintText është shkruar brenda styles.xml siç tregohet më poshtë

<style name="HintText" parent="TextAppearance.Design.Hint">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/colorPrimary</item>
    </style>

Kodi i mëposhtëm xml është nga faqosja activity_main.xml dhe ka fusha EditText për secilën nga rastet (me/pa hintTextAppearance).

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Floating Hint Enabled" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Custom Hint TextAppearance" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

Kundër personazheve

Numri i karaktereve është një veçori e përdorur nga mjaft aplikacione. (E mbani mend kufirin e karaktereve në Twitter?). Cakto app:counterEnabled në true dhe app:counterMaxLength me numrin maksimal të karaktereve që dëshiron në TextInputLayout. Numri i karaktereve shfaqet si parazgjedhje poshtë EditText (poshtë djathtas) dhe gjatë shkrimit të këtij tutoriali, nuk ka ende asnjë mënyrë për të ndryshuar pozicionin. Stilimi i numëruesit është i ngjashëm me stilimin e tekstit të këshillës. app:counterTextAppearance është atributi i përdorur këtë herë. Ne kemi shtuar stilin e mëposhtëm brenda skedarit styles.xml në projektin tonë.

<style name="CounterText" parent="TextAppearance.Design.Counter">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/my_pink</item>
    </style>

Kodi i mëposhtëm xml është nga faqosja activity_main.xml dhe ka fusha EditText me një numërues karakteresh të paracaktuar dhe një të personalizuar.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Character Counter Limit 10" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Character Counter Custom TextAppearance" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

• Fusha e parë EditText ndryshon numëruesin e saj TextColor, sugjeron textColor dhe ngjyrën e treguesit kur tejkalohet numri i karaktereve.
• Fusha e dytë EditText bën të njëjtën gjë, por gjithashtu, ndryshon numëruesin Ngjyra e personalizuar e tekstit dhe Madhësia e tekstit të personalizuar kur kufiri kalon.

Për të specifikuar stilin që na nevojitet kur numëruesi i karaktereve tejkalon kufirin e tij, duhet të përdorim atributin counterFlow që do të shohim më pas.

Mbushje kundër personazheve

Siç e pamë më lart, kur numri i karaktereve tejkalon kufirin e përcaktuar, teksti i numëruesit përdor atributet e përcaktuara në counterFlow. Nëse atributet nuk ishin të pranishme, do t'i përmbahet atyre të paracaktuara siç pamë në daljen e mësipërme. Duhet të përdorim parametrin e mëposhtëm app:counterOverflowTextAppearance Stili për CounterOverflow është i pranishëm brenda styles.xml :

 <style name="CounterOverFlow" parent="TextAppearance.Design.Counter.Overflow">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/my_orange</item>
    </style>

Shtoni pjesën e mëposhtme të kodit në paraqitjen e mëparshme activity_main.xml:

<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="CounterOverflow CustomTextAppearance" />

        </android.support.design.widget.TextInputLayout>

Etiketa e gabimit

Vendosja e app:errorEnabled në true na lejon të shfaqim një tekst gabimi me kusht nën fushën tonë EditText. Për të stiluar tekstin e gabimit, do të përdornim atributin app:errorTextAppearance dhe do të shtonim kodin e mëposhtëm brenda skedarit tonë styles.xml.

<style name="ErrorText" parent="TextAppearance.Design.Error">
        <item name="android:textSize">16sp</item>
        <item name="android:textColor">@color/my_black</item>
    </style>

Kodi i mëposhtëm xml është nga faqosja activity_main.xml dhe ka fusha EditText për një etiketë gabimi të paracaktuar dhe një të personalizuar.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:id="@+id/errorInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:errorEnabled="true"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/errorEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Default Error Label" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:id="@+id/customErrorInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:errorEnabled="true"
            app:errorTextAppearance="@style/ErrorText"
            app:hintTextAppearance="@style/HintText">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/customErrorEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Custom Error Label" />

        </android.support.design.widget.TextInputLayout>

</LinearLayout>
</ScrollView>

Për të shfaqur tekstin e gabimit, do të duhet të thërrasim metodën setError(String) në një shembull të TextInputLayout në klasën tonë MainActivity.java siç tregohet më poshtë.

package com.journaldev.featuresoftextinputlayout;

import android.support.design.widget.TextInputEditText;
import android.support.design.widget.TextInputLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;

public class MainActivity extends AppCompatActivity {


    TextInputLayout errorInputLayout, customErrorInputLayout;
    TextInputEditText errorEditText, customErrorEditText;

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

        errorEditText = (TextInputEditText) findViewById(R.id.errorEditText);
        errorInputLayout = (TextInputLayout) findViewById(R.id.errorInputLayout);

        customErrorEditText = (TextInputEditText) findViewById(R.id.customErrorEditText);
        customErrorInputLayout = (TextInputLayout) findViewById(R.id.customErrorInputLayout);

        errorEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

                if (s.length() > errorInputLayout.getCounterMaxLength())
                    errorInputLayout.setError("Max character length is " + errorInputLayout.getCounterMaxLength());
                else
                    errorInputLayout.setError(null);

            }
        });

        customErrorEditText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {

                if (s.length() > customErrorInputLayout.getCounterMaxLength())
                    customErrorInputLayout.setError("Max character length is " + customErrorInputLayout.getCounterMaxLength());
                else
                    customErrorInputLayout.setError(null);

            }
        });


    }
}

Ndrysho dukshmërinë e fjalëkalimit

Vendosja e app:passwordToggleEnabled në e vërtetë ju lejon të shfaqni/fshehni fjalëkalimin. Për të ndryshuar ngjyrën e ikonës përdorni app:passwordToggleTint. Kodi i mëposhtëm xml është nga faqosja activity_main.xml dhe ka fusha EditText për ndryshimin e dukshmërisë së fjalëkalimit (ikona e parazgjedhur dhe me një nuancë)

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.journaldev.featuresoftextinputlayout.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText"
            app:passwordToggleEnabled="true">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password Visibility Toggle"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>


        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/activity_horizontal_margin"
            app:counterEnabled="true"
            app:counterMaxLength="5"
            app:counterOverflowTextAppearance="@style/CounterOverFlow"
            app:counterTextAppearance="@style/CounterText"
            app:hintTextAppearance="@style/HintText"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@color/my_orange">

            <android.support.design.widget.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Password Visibility Toggle Tint"
                android:inputType="textPassword" />

        </android.support.design.widget.TextInputLayout>
</LinearLayout>
</ScrollView>

Shkarkoni Projektin Android TextInputLayout

Referenca: Dokumenti zyrtar i Android