Android 带有两个文本的浮动标签

我想实现这样的目标。带有两个编辑文本的浮动标签。我使用了

TextInputLayout

和其他一些库，但它们都只接受单个子库作为

EditText

。感谢您的帮助

---

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

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

首先，您需要在主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>

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

这就是我对相对论部分的看法：

<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

focusable，在一个地方提示[但焦点改变]）：

“两个编辑文本都必须可聚焦，提示从第二个文本向上。”

\res\layout\edittext\u 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>

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

以下是我使用的一些风格和主题，以获得理想的效果。
如何改变浮动提示字体大小和颜色等。。。res\values\style：

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

#ff0000
#ff0000
#ff0000
@style/AppTheme.TextFloatLabelAppearance
@style/AppTheme.text错误外观
@样式/文本外观.Design.Counter
@style/TextAppearance.Design.Counter.Overflow
#ff0000
10便士
#ff0000
20便士
18便士
#00FF00

那么问题出在哪里呢？你试过了吗？问题是我只能在TextInputLayout中有一个孩子。这样的话，如果我把这三个（两个编辑文本和一行）放在一条直线上。浮动标签将在第二个标签上方设置动画。。但我想把它放在左上角..这是两个editText吗？有自定义的实现，（例如在android arsenal上搜索“浮动”，“浮动文本”），所以在最后的手段中，你可以使用和修改其中的一个Instedi明天将尝试你的破解，并提供我的注释，谢谢，请提供您正在做的事情的代码？相对布局部分？是的，请提供，相对布局部分不能评论代码。。。我正在编辑当前答案如果我使用您的解决方案，它将与上图中提到的不同。我需要国家代码EditText具有与图片中相同的宽度，现在当手机号码EditText具有焦点时，“tiv1”引用的第一个TextInputlayout将得到提示，但其剪切为国家代码EditText的宽度仅限于国家代码值；i、 像这样的“电话号码”。我认为没有办法将

TextInputLayout

的提示宽度扩展到比它的子项更大。是的，我知道（正如你所看到的，我试图通过减小字体大小和移动编辑文本以使电话号码合适来最小化这一点），这就是为什么我个人会使用两个TextInputLayout，并有两个提示。TextInputLayout是仅用于一个edittext的包装器。您无法在TextInputLayout的边界框外绘制。什么设计问题？您的第二张图像对于棒棒糖制作前的设备仍然存在设计问题。你能解决这个问题吗？我不明白，这段代码使用了android-support-v7-appcompat，我在API16（4.11果冻豆）设备上测试了它！

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