2016-07-12 20 views
9

Những gì tôi muốn làm:TextInputLayout: màu khác nhau cho các nhãn gợi ý khi không tập trung

Khi sử dụng một EditText nhúng trong một TextInputLayout Tôi muốn ...

  1. Đặt Màu của nhãn thành XANH khi nó không tập trung và trôi nổi phía trên EditText vì người dùng đã nhập một số giá trị
  2. Đặt Màu của nhãn thành MÀU khi không tập trung và nằm bên trong EditText, vì người dùng chưa nhập một giá trị
  3. Tôi không muốn thay đổi màu văn bản gợi ý của tất cả các EditTexts thành RED, nhưng chỉ khi chúng được bọc trong một TextInputLayout (tôi không cần một cách tiếp cận chung - một cách tiếp cận cụ thể như thiết lập một chủ đề/phong cách cho mỗi TextInputLayout trong XML bố cục sẽ là tốt)
  4. Bảo tồn (ví dụ: không thay đổi) màu nhấn (YELLOW) được sử dụng để tô màu nhãn nổi khi người dùng đã tập trung vào trường.

Những gì tôi đã cố gắng:

Thiết dưới đây là một chủ đề/phong cách trên TextInputLayout không đáp ứng 1. nhưng không 2.

<style name="FloatingLabel" parent="Widget.Design.TextInputLayout"> 
    <item name="android:textColorHint">@color/red</item> 
</style> 

Thiết lập một màu cụ thể trên nhúng của tôi EditText thay đổi văn bản gợi ý thành một màu khác:

android:textColorHint="@color/text_placeholder_gray" 

thực sự gây ra chồng chéo các văn bản gợi ý khi nhãn được di chuyển từ vị trí thả nổi của nó trở lại vào Edittext dưới dạng gợi ý (tức là không có văn bản).

Thiết này:

<style name="TextAppearence.App.TextInputLayout" parent="@android:style/TextAppearance"> 
<item name="android:textColor">@color/main_color</item> 

trên TextInputLayout:

<android.support.design.widget.TextInputLayout 
    ... 
    app:hintTextAppearance="@style/TextAppearence.App.TextInputLayout" > 

Thay đổi màu nhãn gợi ý nhưng nó cũng làm như vậy đối với tập trung nhà nước - điều đó có nghĩa 4 là không hài lòng.

Và vì một bức tranh cho biết hơn một lời tousand (tất cả các lĩnh vực trong phi tập trung nhà nước):

enter image description here

Làm thế nào để đạt được một thiết lập thỏa mãn tiêu chí 1-4?

Trả lời

3

Tôi gặp vấn đề tương tự: Tôi cần triển khai bố cục nhập văn bản trong đó nhãn có các màu khác nhau để trống (khi không có văn bản nào được nhập trong văn bản chỉnh sửa), "đã điền" và trạng thái tập trung. Vấn đề chính của tôi là làm thế nào để phân biệt giữa trạng thái rỗng và trạng thái đầy khi thiết lập một màu khác cho trạng thái lấy nét đã dễ dàng sử dụng các bộ chọn. Cuối cùng, tôi quyết định xác định trạng thái "văn bản trống" tùy chỉnh và triển khai bố cục nhập văn bản tùy chỉnh của tôi (bố cục mở rộng bố cục nhập văn bản thông thường).

Dưới đây là một số mã:

Trong res/values ​​/ attrs.xml:

<?xml version="1.0" encoding="utf-8"?> 
<resources> 

... 

    <!-- Custom state for the text input layout to determine whether the label is shown above some text or not --> 
    <declare-styleable name="EmptyTextState"> 
     <attr name="state_empty_text" format="boolean"/> 
    </declare-styleable> 

</resources> 

Tục bố cục nhập văn bản:

public class EmptyStateTextInputLayout extends TextInputLayout { 
    private boolean emptyText = true; 
    private static final int[] EMPTY_TEXT_STATE = new int[]{R.attr.state_empty_text}; 

    public EmptyStateTextInputLayout(Context context) { 
     super(context); 
    } 

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

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

    @Override 
    protected int[] onCreateDrawableState(int extraSpace) { 
     int[] state = super.onCreateDrawableState(extraSpace + 1); 
     if (emptyText) { 
      mergeDrawableStates(state, EMPTY_TEXT_STATE); 
     } 
     return state; 
    } 

    public void setEmptyTextState(boolean emptyTextState) { 
     this.emptyText = emptyTextState; 
     refreshDrawableState(); 
    } 

    @Override 
    public void addView(View child, int index, ViewGroup.LayoutParams params) { 
     if (child instanceof EditText) { 
      EditText editText = (EditText) child; 
      if (!TextUtils.isEmpty(editText.getText())) { 
       setEmptyTextState(false); 
      } 
      editText.addTextChangedListener(new TextWatcher() { 
       @Override 
       public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { 

       } 

       @Override 
       public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { 

       } 

       @Override 
       public void afterTextChanged(Editable editable) { 
        if (!TextUtils.isEmpty(editable)) { 
         setEmptyTextState(false); 
        } else { 
         setEmptyTextState(true); 
        } 
       } 
      }); 
     } 
     super.addView(child, index, params); 
    } 
} 

XML chọn để thiết lập màu sắc của nhãn ở tiểu bang khác nhau (res/màu/input_field_floating_label.xml):

<?xml version="1.0" encoding="utf-8"?> 
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> 
    <item android:color="@color/focused_text_color" android:state_focused="true" /> 
    <item android:color="@color/placeholder_color" app:state_empty_text="true"/> 
    <item android:color="@color/primary_text_color"/> <!-- default color --> 
</selector> 

Kiểu cho bố cục văn bản đầu vào (trong res/values ​​/ styles.xml):

<style name="EditTextLayout"> 
    ... 
    <item name="android:textColorHint">@color/input_field_floating_label</item> 
</style> 

Theme và phong cách cho chỉnh sửa văn bản (vẫn còn trong res/values ​​/ styles.xml):

<style name="EditTextTheme"> 
    ... 
    <item name="android:textColorHint">@color/input_field_floating_label</item> 
</style> 

<style name="EditText"> 
    <item name="android:theme">@style/EditTextTheme</item> 
    ... 
</style> 

Cách sử dụng:

<com.package.path.widget.EmptyStateTextInputLayout 
      style="@style/DarkEditTextLayout" 
      android:layout_height="wrap_content" 
      android:layout_width="match_parent" 
      ... 
      > 

      <EditText 
       style="@style/EditText" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" /> 
</com.package.path.widget.EmptyStateTextInputLayout> 

Tôi khuyên bạn nên bài viết trên blog này để có được một ý tưởng về làm việc với tùy chỉnh tiểu bang: http://code.neenbedankt.com/example-of-custom-states-in-android-components/

Các vấn đề liên quan