2016-06-08 14 views
5

Sto usando TextInputLayout e in cui imposto un drawableLeft e quando clicco su edittext l'etichetta è già mobile, ma voglio anche far fluttuare il drawable sinistro con l'etichetta. Come posso ottenere, vedere l'immagine allegata ...Come fluttuare a sinistra disegnabile con l'etichetta (suggerimento) in TextInputLayout?

In questo momento quando clicco su "Titolo" solo leble è mobile, ma voglio che entrambe siano fluttuanti "leftdrawable" e "label" quando sono focalizzate. E prima di fare clic su di esso apparirà una linea normale come "Data di servizio".

enter image description here

mio codice è seguito ..

<FrameLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/input_layout_cardnum" 
    > 
    <ImageView 
     android:id="@+id/imgLeft" 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:layout_gravity="bottom" 
     android:src="@mipmap/ic_launcher" 
     android:layout_marginBottom="10dp" 
     /> 
    <android.support.design.widget.TextInputLayout 
     android:id="@+id/input_layout_cardnums" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     > 
     <EditText 
      android:id="@+id/cardnumEditTexst" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:maxLength="255" 
      android:singleLine="true" 
      android:hint="hello" 
      android:drawableLeft="@null" 
      android:paddingLeft="35dp" 
      /> 
    </android.support.design.widget.TextInputLayout> 
</FrameLayout> 

E nel mio codice sto impostando un'animazione sul onFocus così si va sulla parte superiore con l'etichetta

final Animation animation = AnimationUtils.loadAnimation(this,R.anim.anims); 
    final ImageView imgLeft = (ImageView) findViewById(R.id.imgLeft); 

    final EditText et = (EditText) findViewById(R.id.cardnumEditTexst); 
    et.setOnFocusChangeListener(new View.OnFocusChangeListener() 
    { 
     @Override 
     public void onFocusChange(View v, boolean hasFocus) 
     { 
      if (hasFocus) 
      { 
       if (et.getText().length() == 0) 
       { 
        imgLeft.startAnimation(animation); 
       } 
      } else 
      { 
       if (et.getText().length() == 0) 
        imgLeft.clearAnimation(); 
      } 
     } 
    }); 

E il mio l'animazione proietterà la visualizzazione dell'immagine in cima

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fillAfter="true" 
    android:duration="200" 
    android:interpolator="@android:interpolator/linear" 
    > 
    <scale 
     android:fromXScale="0%" 
     android:fromYScale="0%" 
     android:toXScale="60%" 
     android:toYScale="60%" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     /> 
    <translate 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:startOffset="100" 
     android:fromYDelta="0%" 
     android:toYDelta="-80%"/> 

</set> 

E impostando questo ho, ora fluttuante va bene ma vedi il paddingLeft = "35dp", voglio avviarlo dalla posizione 0 vedere nella prima immagine dove "Titolo" sta mostrando, voglio dire non ci dovrebbe essere padding ma se lo farò rimuovere il padding Left la perdita di funzionalità fluttuante.

enter image description here

+1

Avrai bisogno di scrivere la tua implementazione per quello. TextInputLayout utilizza la classe [CollapsingTextHelper] (https://android.googlesource.com/platform/frameworks/support/+/6ba61c5/design/src/android/support/design/widget/CollapsingTextHelper.java) per disegnare il testo animato sul layout tela. Non c'è spazio per la personalizzazione in quanto questa classe è interna. –

+0

@ S.D. ho provato a personalizzare ma ora ho solo un piccolo problema, voglio rimuovere leftPadding, in modo che l'utente possa iniziare molto iniziando, vedere l'immagine –

+0

Basta rimuovere/impostare il disegnabile a sinistra all'avvio dell'animazione. [TextInputLayout] (https://android.googlesource.com/platform/frameworks/support/+/6ba61c5/design/src/android/support/design/widget/TextInputLayout.java) ha un TextListener che monitora EditText in esso, e da qui spara animazione. –

risposta

3

provare questo ...

final Animation animation = AnimationUtils.loadAnimation(this, R.anim.anims); 
final ImageView imgLeft = (ImageView) findViewById(R.id.imgLeft); 

findViewById(R.id.cardnumEditTexst).setOnFocusChangeListener(new View.OnFocusChangeListener() { 
    @Override 
    public void onFocusChange(View v, boolean hasFocus) { 
     if (hasFocus) { 
      imgLeft.startAnimation(animation); 
     } else { 
      imgLeft.clearAnimation(); 
     } 
    } 
}); 

e

<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:duration="200" 
    android:fillAfter="true" 
    android:interpolator="@android:interpolator/linear"> 

    <scale 
     android:fromXScale="0%" 
     android:fromYScale="0%" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     android:toXScale="60%" 
     android:toYScale="60%" /> 

    <translate xmlns:android="http://schemas.android.com/apk/res/android" 
     android:fromYDelta="0%" 
     android:startOffset="100" 
     android:toYDelta="-80%" /> 

</set> 

e impostare il layout come questo ...

<FrameLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@+id/input_layout_cardnum"> 

    <ImageView 
     android:id="@+id/imgLeft" 
     android:layout_width="30dp" 
     android:layout_height="30dp" 
     android:layout_gravity="bottom" 
     android:src="@mipmap/ic_launcher" 
     android:layout_marginBottom="10dp" /> 

    <android.support.design.widget.TextInputLayout 
     android:id="@+id/input_layout_cardnums" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <EditText 
      android:id="@+id/cardnumEditTexst" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:maxLength="255" 
      android:singleLine="true" 
      android:hint="hello" 
      android:drawableLeft="@null" 
      android:paddingLeft="35dp" /> 
    </android.support.design.widget.TextInputLayout> 
</FrameLayout> 
+0

per favore vedi la mia domanda modificata, io non sto migliorando, vedere l'immagine. –

Problemi correlati