TextInputLayout标签位于EditText的左侧drawable之上

时间:2016-01-08 14:28:01

标签: android android-textinputlayout

当用户在EditText中聚焦或输入时,是否可以使TextInputLayout标签垂直显示在EditText的左侧drawable上方。

这是EditText的xml:

public static byte[] pemToDer(String pem) {
    /* We split data with dashes as separator.
    As a result we should have either 5 parts or 1,
    if guarding strings were not present. */
    String[] parts = pem.split("-----");
    /* The middle element is base64 encoded data */
    String base64 = parts[parts.length / 2];
    return DatatypeConverter.parseBase64Binary(base64);
}

这是所需的输出:

enter image description here

以下是我得到的输出:

enter image description here

4 个答案:

答案 0 :(得分:5)

感谢Java的成员访问模型和谷歌的开发人员留下了一个小漏洞,可以通过一个简单的子类来实现,它重复了最少的原始代码:

package android.support.design.widget;

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;

public final class TextInputLayoutEx extends TextInputLayout {

    private final int mDefaultPadding = __4DP__;
    private final Rect mTmpRect = new Rect();

    public TextInputLayoutEx(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        if (isHintEnabled() && mEditText != null) {
            final Rect rect = mTmpRect;
            ViewGroupUtils.getDescendantRect(this, mEditText, rect);
            mCollapsingTextHelper.setCollapsedBounds(
                rect.left + mDefaultPadding, getPaddingTop(),
                rect.right - mDefaultPadding, bottom - top - getPaddingBottom());
            mCollapsingTextHelper.recalculate();
        }
    }

}

这里我们将一个新类放到同一个包中,该包打开对mCollapsingTextHelper的访问,具有包级别的可见性,然后从管理字段名称的原始onLayout方法重复部分代码定位。 __4DP__值是4dp值转换为像素,我很确定每个人都有一个实用方法。

在您的xml布局中,只需从android.support.design.widget.TextInputLayout切换到android.support.design.widget.TextInputLayoutEx,这样您的布局就像这样:

<android.support.design.widget.TextInputLayoutEx
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Mobile">
    <android.support.design.widget.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_phone_black_24dp"
        android:drawablePadding="4dp"/>
</android.support.design.widget.TextInputLayoutEx>

结果是

Collapsed and expanded state

目前适用于com.android.support:design:25.3.1

答案 1 :(得分:1)

您可以尝试以下自定义类:找到here

然后仅更改xml

  

com.mycompany.myapp.CustomTextInputLayout

import android.content.Context;
import android.graphics.Rect;
import android.support.design.widget.TextInputLayout;

import android.util.AttributeSet;
import java.lang.reflect.Field;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

public class CustomTextInputLayout extends TextInputLayout {
    private Object collapsingTextHelper;
    private Rect bounds;
    private Method recalculateMethod;

    public CustomTextInputLayout(Context context) {
        this(context, null);
    }

    public CustomTextInputLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        init();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        adjustBounds();
    }

    private void init() {
        try {
            Field cthField = TextInputLayout.class.getDeclaredField("mCollapsingTextHelper");
            cthField.setAccessible(true);
            collapsingTextHelper = cthField.get(this);

            Field boundsField = collapsingTextHelper.getClass().getDeclaredField("mCollapsedBounds");
            boundsField.setAccessible(true);
            bounds = (Rect) boundsField.get(collapsingTextHelper);

            recalculateMethod = collapsingTextHelper.getClass().getDeclaredMethod("recalculate");
        }
        catch (NoSuchFieldException | IllegalAccessException | NoSuchMethodException e) {
            collapsingTextHelper = null;
            bounds = null;
            recalculateMethod = null;
            e.printStackTrace();
        }
    }

    private void adjustBounds() {
        if (collapsingTextHelper == null) {
            return;
        }

        try {
            bounds.left = getEditText().getLeft() + getEditText().getPaddingLeft();
            recalculateMethod.invoke(collapsingTextHelper);
        }
        catch (InvocationTargetException | IllegalAccessException | IllegalArgumentException e) {
            e.printStackTrace();
        }
    }
}

答案 2 :(得分:0)

您可以使用动画和frame_layout为左侧图标设置动画,尝试this链接,可能对您有所帮助。

答案 3 :(得分:-1)

我已针对此问题制定了解决方法。它可能有点不可靠,但它在我的结束。 这是代码:

ggplot(melted,aes(x=Sal,y=value,color=variable)) + geom_line()

我在这里做的是在editText中的文本前放置一个spacer,然后以编程方式添加drawable。

但请确保在获取editText的内容之前删除这些空格:

String spacer="        ";
EditText myEditText= (EditText)findViewById(R.id.myEditText);
myEditText.setText(spacer + "Today");
myEditText.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_calendar, 0, 0, 0);

这意味着我在单词&#34; Today&#34;。

之前裁剪了8个空格