Question

我想实现像这样的东西。带有两个编辑文本的浮动标签。我也使用了TextInputLayout和其他一些库，但都只接受单个孩子EditText。任何帮助表示赞赏。

两个编辑文本都必须是可聚焦的，并且提示从第二个上升。

Answer 1

这应该做你想要的（EditText可聚焦，在一个地方暗示[但焦点变化]）：

＆＃34;两个编辑文本都必须是可聚焦的，并且提示从第二个上升。＆＃34;

\ RES \布局\ 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>

在您的活动中使用此代码：

    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

以下是代码生成的一些图像：

这里有一些我用过的风格和主题来获得理想的结果如何更改浮动提示字体大小和颜色等... res \ values \ styles：

        <!-- 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>

Answer 2

我在网上找到了这个半解决方案。

首先，您需要在主build.gradle中为android设计库添加依赖项：

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

然后，您可以使用以下方法在XML中使用库提供的设计：

<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>

现在我似乎无法找到一种方法来获得2个TextInputLayout的孩子...这不是它的工作方式......但你可以简单地添加另一个也可以工作的。在您的情况下，您需要做的就是使您的主要布局相对，然后设置国家代码TILayout相对于电话号码TILayout的位置。

这就是我对relativelayout部分所拥有的：

<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>

希望我帮助过：D

带有两个editText的浮动标签

2 个答案: