Android
Tekst bewerken

Werken met EditTexts

De EditText is de standaard widget voor tekstinvoer in Android-apps. Als de gebruiker tekst in een app moet invoeren, is dit de primaire manier voor hen om dat te doen.

Tekst bewerken

Er zijn veel belangrijke eigenschappen die kunnen worden ingesteld om het gedrag van een EditText aan te passen. Verschillende hiervan worden hieronder vermeld. Bekijk de officiële tekstveldengids voor nog meer invoervelddetails.

Gebruik

Een EditText wordt toegevoegd aan een lay-out met alle standaardgedrag met de volgende XML:

<EditText
    android:id="@+id/et_simple"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">
</EditText>

Merk op dat een EditText gewoon een dunne extensie van de TextView is en alle dezelfde eigenschappen overneemt.

Waarde wordt opgehaald

Het verkrijgen van de waarde van de tekst die is ingevoerd in een EditText is als volgt:

EditText simpleEditText = (EditText) findViewById(R.id.et_simple);
String strValue = simpleEditText.getText().toString();

Verdere invoeraanpassing

Misschien willen we de invoer beperken tot één tekstregel (vermijd nieuwe regels):

<EditText
  android:singleLine="true"
  android:lines="1"
/>

U kunt het aantal tekens dat in een veld kan worden ingevoerd beperken met behulp van het cijferkenmerk:

<EditText
  android:inputType="number"
  android:digits="01"
/>

Dit zou de ingevoerde cijfers beperken tot alleen "0" en "1". We willen het totale aantal tekens mogelijk beperken met:

<EditText
  android:maxLength="5"
/>

Met behulp van deze eigenschappen kunnen we het verwachte invoergedrag voor tekstvelden definiëren.

Kleuren aanpassen

U kunt de achtergrondkleur van de geselecteerde tekst in een EditText aanpassen met de eigenschap android:textColorHighlight :

<EditText
    android:textColorHighlight="#7cff88"
/>

Tips voor tijdelijke aanduiding weergeven

Misschien wilt u de hint instellen voor het besturingselement EditText om een gebruiker om specifieke invoer te vragen met:

<EditText
    ...
    android:hint="@string/my_hint">
</EditText>

hints

De kleur van de onderste regel wijzigen

Ervan uitgaande dat u de AppCompat-bibliotheek gebruikt, kunt u de stijlen colorControlNormal, colorControlActivated en colorControlHighlight overschrijven:

<style name="Theme.App.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorControlNormal">#d32f2f</item>
    <item name="colorControlActivated">#ff5722</item>
    <item name="colorControlHighlight">#f44336</item>
</style>

Als u deze stijlen niet binnen een DialogFragment ziet, is er een bekende fout bij het gebruik van de LayoutInflater die is doorgegeven aan de methode onCreateView ().

Het probleem is al opgelost in de AppCompat v23-bibliotheek. Raadpleeg deze handleiding over upgraden. Een andere tijdelijke oplossing is om de lay-out inflater van de activiteit te gebruiken in plaats van degene die is doorgegeven aan de methode onCreateView ():

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = getActivity().getLayoutInflater().inflate(R.layout.dialog_fragment, container);
  }

Luisteren naar EditText-invoer

Bekijk de basisgebeurtenissen luisteraars cliffnotes voor een kijkje op hoe te luisteren naar wijzigingen in een EditText en een actie uit te voeren wanneer die veranderingen optreden.

Drijvende labelfeedback weergeven

Traditioneel verbergt de EditText het hintbericht (hierboven uitgelegd) nadat de gebruiker begint te typen. Bovendien moesten eventuele validatiefoutmeldingen handmatig door de ontwikkelaar worden beheerd.

Met de TextInputLayout kunt u een zwevend label instellen om hints en foutmeldingen weer te geven. U kunt hier meer informatie vinden .

Het InputType aanpassen

Tekstvelden kunnen verschillende invoertypen hebben, zoals nummer, datum, wachtwoord of e-mailadres. Het type bepaalt welk soort tekens in het veld zijn toegestaan en kan het virtuele toetsenbord vragen de lay-out te optimaliseren voor veelgebruikte tekens.

Standaard wordt alle EditText in een EditText besturingselement weergegeven als platte tekst. Door het kenmerk inputType , kunnen we de invoer van verschillende soorten informatie, zoals telefoonnummers en wachtwoorden, vergemakkelijken:

<EditText
    ...
    android:inputType="phone">
</EditText>

De meest voorkomende invoertypen zijn:

Met het android:inputType kunt u ook bepaald toetsenbordgedrag opgeven, bijvoorbeeld of u alle nieuwe woorden met een hoofdletter wilt schrijven of functies zoals automatisch aanvullen en spellingsuggesties wilt gebruiken.
Hier zijn enkele van de algemene waarden van het invoertype die het gedrag van het toetsenbord definiëren:

U kunt indien nodig meerdere inputType kenmerken instellen (gescheiden door '|').
Voorbeeld:

<EditText
    android:id="@+id/postal_address"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:hint="@string/postal_address_hint"
    android:inputType="textPostalAddress|
                       textCapWords|
                       textNoSuggestions" />

U kunt een lijst met alle beschikbare invoertypen zien hier .

`inputype` attribuut

inputype attribuut in EditText widget: (getest op Android 4.4.3 en 2.3.3)

<EditText android:id="@+id/et_test" android:inputType="?????"/>

textLongMessage = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Geval: kleine letters. Suggestie: ja. Toevoegen. verkoolt:, en. en alles

textFilter = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Geval: kleine letters. Suggestie: nee . Toevoegen. verkoolt:, en. en alles

textCapWords = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Geval: Camel Case . Suggestie: ja. Toevoegen. verkoolt:, en. en alles

textCapSentences = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Case: Zinzaak . Suggestie: ja. Toevoegen. verkoolt:, en. en alles

time = Keyboard: numeriek. Enter-knop: Verzenden / Volgende. Emotie: nee. Geval: -. Suggestie: nee . Toevoegen. tekens::

textMultiLine = Toetsenbord: alfabet / standaard. Enter-knop: volgende regel . Emotie: ja. Geval: kleine letters. Suggestie: ja. Toevoegen. verkoolt:, en. en alles

nummer = toetsenbord: numeriek . Enter-knop: Verzenden / Volgende. Emotie: nee. Geval: -. Suggestie: nee. Toevoegen. tekens: niets

textEmailAddress = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: nee . Geval: kleine letters. Suggestie: nee . Toevoegen. tekens: @ en . en alles

(Geen type) = Toetsenbord: alfabet / standaard. Enter-knop: volgende regel . Emotie: ja. Geval: kleine letters. Suggestie: ja. Toevoegen. verkoolt:, en. en alles

textPassword = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: nee. Geval: kleine letters. Suggestie: nee . Toevoegen. verkoolt:, en. en alles

text = Toetsenbord: Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Geval: kleine letters. Suggestie: ja. Toevoegen. verkoolt:, en. en alles

textShortMessage = Toetsenbord: alfabet / standaard. Enter-knop: emotie . Emotie: ja. Geval: kleine letters. Suggestie: ja. Toevoegen. verkoolt:, en. en alles

textUri = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: nee. Geval: kleine letters. Suggestie: nee . Toevoegen. tekens: / en . en alles

textCapCharacters = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Geval: HOOFDLETTERS . Suggestie: ja. Toevoegen. verkoolt:, en. en alles

telefoon = toetsenbord: numeriek . Enter-knop: Verzenden / Volgende. Emotie: nee. Geval: -. Suggestie: nee . Toevoegen. tekens: *** #. - / () WPN, + **

textPersonName = Toetsenbord: alfabet / standaard. Enter-knop: Verzenden / Volgende. Emotie: ja. Geval: kleine letters. Suggestie: ja. Toevoegen. verkoolt:, en. en alles


Opmerking: de instelling voor Auto-capitalization verandert het standaardgedrag.

Opmerking 2: op het Numeric keyboard zijn ALLE nummers Engels 1234567890.

Opmerking 3: Correction/Suggestion instelling zal het standaardgedrag veranderen.

SoftKeyboard verbergen

Softkeyboard verbergen is meestal een basisvereiste wanneer u met EditText werkt. Het softkeyboard kan standaard alleen worden gesloten door op de knop Terug te drukken. Daarom gebruiken de meeste ontwikkelaars InputMethodManager om Android te dwingen het virtuele toetsenbord te verbergen met de naam hideSoftInputFromWindow en het token van het venster met uw gerichte weergave door te geven. De code om het volgende te doen:

public void hideSoftKeyboard()    
{
        InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Activity.INPUT_METHOD_SERVICE);
        inputMethodManager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), 0);    
}

De code is direct, maar een ander groot probleem dat zich voordoet, is dat de functie verbergen moet worden aangeroepen wanneer een gebeurtenis optreedt. Wat te doen als u het Softkeyboard wilt verbergen wanneer u ergens anders drukt dan uw EditText? De volgende code geeft een nette functie die slechts één keer in uw methode onCreate () moet worden aangeroepen.

public void setupUI(View view) 
{
        String s = "inside";
        //Set up touch listener for non-text box views to hide keyboard.
        if (!(view instanceof EditText)) {

            view.setOnTouchListener(new View.OnTouchListener() {

                public boolean onTouch(View v, MotionEvent event) {
                    hideSoftKeyboard();
                    return false;
                }

            });
        }

        //If a layout container, iterate over children and seed recursion.
        if (view instanceof ViewGroup) {

            for (int i = 0; i < ((ViewGroup) view).getChildCount(); i++) {

                View innerView = ((ViewGroup) view).getChildAt(i);

                setupUI(innerView);
            }
        }    
}

Pictogram of knop in Aangepaste tekst bewerken en de actie en klik op luisteraars.

Dit voorbeeld helpt om de tekst Bewerken te hebben met het pictogram aan de rechterkant.

Opmerking: hier gebruik ik alleen setCompoundDrawablesWithIntrinsicBounds, dus als u de pictogrampositie wilt wijzigen, kunt u dat bereiken met setCompoundDrawablesWithIntrinsicBounds in setIcon.

public class MKEditText extends AppCompatEditText {

    public interface IconClickListener {
        public void onClick();
    }

    private IconClickListener mIconClickListener;

    private static final String TAG = MKEditText.class.getSimpleName();

    private final int EXTRA_TOUCH_AREA = 50;
    private Drawable mDrawable;
    private boolean touchDown;

    public MKEditText(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MKEditText(Context context) {
        super(context);
    }

    public MKEditText(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void showRightIcon() {
        mDrawable = ContextCompat.getDrawable(getContext(), R.drawable.ic_android_black_24dp);

        setIcon();
    }

    public void setIconClickListener(IconClickListener iconClickListener) {
        mIconClickListener = iconClickListener;
    }

    private void setIcon() {
        Drawable[] drawables = getCompoundDrawables();

        setCompoundDrawablesWithIntrinsicBounds(drawables[0], drawables[1], mDrawable, drawables[3]);

        setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        setSelection(getText().length());
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final int right = getRight();
        final int drawableSize = getCompoundPaddingRight();
        final int x = (int) event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (x + EXTRA_TOUCH_AREA >= right - drawableSize && x <= right + EXTRA_TOUCH_AREA) {
                    touchDown = true;
                    return true;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (x + EXTRA_TOUCH_AREA >= right - drawableSize && x <= right + EXTRA_TOUCH_AREA && touchDown) {
                    touchDown = false;
                    if (mIconClickListener != null) {
                        mIconClickListener.onClick();
                    }
                    return true;
                }
                touchDown = false;
                break;

        }
        return super.onTouchEvent(event);
    }
}

Als u het aanraakgebied wilt wijzigen, kunt u de standaardwaarden van EXTRA_TOUCH_AREA wijzigen die ik als 50 heb opgegeven.

En voor Schakel de knop in en klik op luisteraar die u kunt bellen vanuit uw activiteit of fragment zoals deze,

MKEditText mkEditText = (MKEditText) findViewById(R.id.password);
mkEditText.showRightIcon();
mkEditText.setIconClickListener(new MKEditText.IconClickListener() {
            @Override
            public void onClick() {
              // You can do action here for the icon.
               
            }
        });