Floating Label mit zwei editText

Question

Ich möchte so etwas erreichen. Ein Floating-Label mit zwei Edit-Texten. Ich verwendete TextInputLayout und einige andere Bibliotheken auch, aber alle akzeptieren nur einzelne Kind als EditText. Jede Hilfe wird geschätzt.

Beide Text bearbeiten müssen fokussierbar sein und der Hinweis nach oben geht aus zweiten.

Answer 1

Ich habe dafür online eine Semi-Lösung gefunden.

Zunächst müssen Sie eine Abhängigkeit für die Android-Design-Bibliothek in Ihrem primären build.gradle hinzuzufügen:

dependencies { 
    compile fileTree(dir: 'libs', include: ['*.jar']) 
    compile 'com.android.support:appcompat-v7:22.2.0' 
    compile 'com.android.support:design:22.2.0' 
} 

Dann können Sie die Entwürfe von der Bibliothek in Ihrem XML bereitgestellt verwenden, indem Sie mit:

<android.support.design.widget.TextInputLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/PhoneNumberTILayout" 
    android:layout_marginTop="@strings/my_margin_top"> 

    <EditText 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:hint="Phone Number" /> 
</android.support.design.widget.TextInputLayout> 

Jetzt kann ich nicht scheinen, einen Weg zu finden, 2 Kinder von TextInputLayout zu bekommen ... es ist einfach nicht wie es funktioniert ist gemeint ... Aber man kann einfach ein anderes hinzufügen, die genauso gut funktionieren werden . In Ihrem Fall müssen Sie nur Ihr primäres Layout relativ machen und dann die Position des Ländercodes TILayout relativ zu der Telefonnummer TILayouts festlegen.

Dies ist, was ich für den relativelayout Teil haben:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/drawer_layout" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
tools:context="com.example.android.testapp.MainActivity" > 

<android.support.design.widget.TextInputLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_marginLeft="20dp" 
    android:id="@+id/TILayout" 
    android:layout_alignParentTop="true" 
    android:layout_alignParentStart="true" 
    android:layout_marginStart="11dp" 
    android:layout_marginTop="20dp"> 

    <EditText 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:hint="Code" 
     android:textSize="26sp" 
     android:ems="3" 
     android:id="@+id/PhoneCode" /> 

    <android.support.design.widget.TextInputLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/PhoneNumberTILayout" 
     android:layout_marginTop="-64dp" 
     android:layout_marginLeft="100dp"> 

     <EditText 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:hint="Phone Number" 
      android:textSize="26sp" 
      android:ems="6" 
      android:id="@+id/PhoneNumber" /> 
    </android.support.design.widget.TextInputLayout> 
</android.support.design.widget.TextInputLayout> 


</RelativeLayout> 

Hoffe, dass ich geholfen: D

tun Dies sollte

Answer 2

, was Sie wollen (beide EditText fokussierbar, an einem Ort andeuten [aber Änderungen an Fokus ]):

"Beide Text bearbeiten müssen fokussierbar sein und der Hinweis geht von der zweiten aufwärts."

\ res \ layout \ edittext_main.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/linlay0" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:paddingTop="60dp" 
     android:orientation="horizontal"> 

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

    <EditText 
    android:id="@+id/EditText1" 
    android:hint="code" 
    android:text="0044" 
    android:inputType="phone" 
    android:singleLine="true" 
    android:layout_width="130dp" 
    android:layout_height="wrap_content"/> 

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

<!-- separator --> 
    <ImageView 
    android:id="@+id/ImageViewSep" 
    android:layout_width="20dp" 
    android:layout_height="20dp" 
    android:adjustViewBounds="true" 
    android:contentDescription="separator" 
    android:translationX="-60dp" 
    android:translationY="20dp" 
    android:src="@drawable/line" />  

    <EditText 
    android:id="@+id/EditText2" 
    android:hint="phone number" 
    android:text="1234567890" 
    android:inputType="phone" 
    android:singleLine="true" 
    android:layout_width="130dp" 
    android:translationX="-60dp" 
    android:translationY="7dp" 
    android:layout_height="wrap_content"/> 
</LinearLayout> 

Mit diesem Code in Ihrer Aktivität:

private static final String TAG = EditActivity.class.getSimpleName(); 
    private Context    m_context; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) 
    { 
     super.onCreate(savedInstanceState); 
     m_context = getApplicationContext(); 

     setContentView(R.layout.edittext_main); 
     final TextInputLayout tiv1 = (TextInputLayout) findViewById(R.id.TextInputLayout1); 
     final EditText edit_Text1 = (EditText) findViewById(R.id.EditText1); 
     final EditText edit_Text2 = (EditText) findViewById(R.id.EditText2); 

     edit_Text1.setOnFocusChangeListener(new OnFocusChangeListener() { 
      @Override 
      public void onFocusChange(View v, boolean hasFocus) { 
       if(hasFocus){ 
//     Toast.makeText(m_context, "edit_Text1 got the focus", Toast.LENGTH_LONG).show(); 
        tiv1.setHint("code"); 
       }else { 
//     Toast.makeText(m_context, "edit_Text1 lost the focus", Toast.LENGTH_LONG).show(); 
       } 
       } 
      }); 

     edit_Text2.setOnFocusChangeListener(new OnFocusChangeListener() { 
      @Override 
      public void onFocusChange(View v, boolean hasFocus) { 
       if(hasFocus){ 
//     Toast.makeText(m_context, "edit_Text2 got the focus", Toast.LENGTH_LONG).show(); 
        tiv1.setHint(edit_Text2.getHint()); 
       }else { 
//     Toast.makeText(m_context, "edit_Text2 lost the focus", Toast.LENGTH_LONG).show(); 
       } 
       } 
      }); 
}//onCreate 

Hier sind einige Bilder von dem Code generiert:

Hier sind einige Stile und Themen, mit denen ich gespielt habe, um das gewünschte Ergebnis zu erzielen.
Wie die schwebenden Hinweis Schriftgröße ändern und Farbe etc ... res \ Werte \ Stile:

 <!-- Base application theme. --> 
    <style name="AppTheme" parent="Theme.AppCompat.Light"> 
     <!-- Customize your theme here. --> 
     <item name="colorPrimary">#ff0000</item> 
     <item name="colorPrimaryDark">#ff0000</item> 
     <item name="colorAccent">#ff0000</item> 
    </style> 

    <style name="Widget.Design.TextInputLayout" parent="AppTheme"> 
     <item name="hintTextAppearance">@style/AppTheme.TextFloatLabelAppearance</item> 
     <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item> 
     <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item> 
     <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item> 
    </style> 

    <style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint"> 
     <!-- Floating label appearance here --> 
     <item name="android:textColor">#ff0000</item> 
     <item name="android:textSize">10sp</item> 
    </style> 

    <style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error"> 
     <!-- Error message appearance here --> 
     <item name="android:textColor">#ff0000</item> 
     <item name="android:textSize">20sp</item> 
    </style> 

<style name="TextHint" parent="Base.TextAppearance.AppCompat"> 
    <item name="android:textSize">18sp</item> 
    <item name="android:textColor">#00FF00</item> 
</style>