SDK Fluig

Árvore de páginas

Índice

Objetivo

O objetivo deste guia é mostrar ao usuário como utilizar o componente FluigSdkEditText e quais os seus atributos.

O FluigSdkEditText é o principal componente de campo de texto do fluig SDK Android.  Este componente é uma subclasse de AppCompatEditText e, portanto, possui todas as funcionalidades já presentes nesta classe.

Importante

Antes de utilizar o componente, não esqueça de importar o módulo de componentes do SDK. Para saber como, clique aqui.


Uso

No seu projeto, este componente pode ser utilizado no XML de um layout ou dentro de uma classe Java.

O visual e comportamento do FluigSdkEditText segue o estilo definido pelo fluig Style Guide.

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <sdk.fluig.com.ui.components.edittext.FluigSdkEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/my_text" />

</LinearLayout>
MainActivity.java
import ...
import sdk.fluig.com.ui.components.edittext.FluigSdkEditText;
 
public class MainActivity {

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

        FluigSdkEditText editText = (...);
        editText.setText(R.string.my_text);
    }
}


Atributos

Esta seção explica o funcionamento de todos os atributos específicos do FluigSdkEditText, assim como mudanças de comportamento em alguns atributos padrões do AppCompatEditText.


Caso o atributo não seja padrão do AppCompatEditText, nos XMLs será necessário importar o namespace abaixo.

xmlns:app="http://schemas.android.com/apk/res-auto"


Border

O FluigSdkEditText possui uma borda com as seguintes características:

  • Cor padrão de #cecece ()
  • Espessura de 1dp
  • Sempre visível


Corner Radius

int cornerRadius

Os cantos do FluigSdkEditText são arredondados em 4dp.

Importante

Não é possível alterar esse atributo.


Icon

Drawable iconDrawable

Define a imagem que será mostrada do lado esquerdo do campo de texto. Caso não seja definida ou seja alterada para null, a imagem não é mostrada.

Importante

Independende da cor da imagem fornecida, o componente mostrará a imagem sempre com a mesma cor definida em textColor. Caso o campo de texto esteja vazio, a cor será a mesma de textColor porém com 50% da opacidade.

example.xml
<sdk.fluig.com.ui.components.edittext.FluigSdkEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:icon="@drawable/my_icon" />
Example.java
FluigSdkEditText editText = (FluigSdkButton) findViewById(R.id.my_edit_text_id);
editText.setIcon(R.drawable.my_icon);
 
//caso tenha uma instância de Drawable
Drawable myIcon = ...;
editText.setIcon(myIcon);


OnTextListener

FluigSdkEditText.OnTextListener textListener

Define um objeto que implemente a interface FluigSdkEditText.OnTextListener para escutar os eventos de quando o texto está vazio ou não. A interface OnTextListener requer que a classe implemente os métodos onTextEmpty() e onTextNotEmpty() para notificá-la quando o campo de texto está vazio ou não, respectivamente.

Este atributo pode ser alterado somente pelas classes Java.

Example.java
import ...
import sdk.fluig.com.ui.components.edittext.FluigSdkEditText;

public class MyActivity implements OnTextListener {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_layout);

        FluigSdkEditText editText = (...);
        editText.setTextListener(this);
    }

    @Override
    public void onTextEmpty() {...}

    @Override
    public void onTextNotEmpty() {...}
}

Cuidado

Não confunda este atributo com o TextWatcher padrão do EditText.


State

FluigSdkEditText.State state

Define o estado visual do campo de texto. Há três possíveis estados: NORMAL, ERROR, VALID. ERROR e VALID são estados que mostram uma barra vertical colorida no lado esquerdo do campo de texto. Segue abaixo explicações mais detalhadas de cada estado.

  • NORMAL é o estado padrão do campo de texto.
  • ERROR deve ser usado quando algo inesperado ocorreu na sua aplicação, destacando melhor o estado de erro na tela. A cor da barra mostrada neste estado é #ff4747 ().
  • VALID deve ser usado quando o conteúdo do campo de texto já foi validado por algum critério. A cor da barra mostrada neste estado é #12cf2d ().

Este atributo pode ser alterado somente pelas classes Java.


Example.java
FluigSdkEditText editText = (FluigSdkButton) findViewById(R.id.my_edit_text_id);
//NORMAL
editText.showNormalState();
//ERROR
editText.showErrorState();
//VALID
editText.showValidState();


Text Color Hint

int textColorHint

A cor do hint do FluigSdkEditText é sempre a cor definida em textColor com opacidade de 50%.


  • Sem rótulos