【问题标题】:How to set Material design style to disabled EditText (android)?如何将材料设计样式设置为禁用的 EditText (android)?
【发布时间】:2016-02-05 08:18:17
【问题描述】:

我正在尝试使我禁用的 EditText 的样式像指南中那样:

https://www.google.com/design/spec/components/text-fields.html#text-fields-labels

<EditText
        android:id="@+id/account_number"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/test_account"
        android:enabled="false" />

我已经实现了材料设计风格,所以我所有的小部件看起来都很材料。

问题是:有什么方法可以在不添加额外视图的情况下使用样式来获得这个虚线下划线?

我的styles.xml

<style name="Theme.Main" parent="@style/Theme.AppCompat.Light.NoActionBar">         
    <item name="android:editTextStyle">@style/android:Widget.Material.EditText</item>
</style>

【问题讨论】:

标签: android android-layout android-edittext material-design


【解决方案1】:

最后我设法做到了你所展示的,它看起来像

drawable 文件夹中创建dotted.xml 并粘贴这些

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:bottom="1dp"
        android:left="-2dp"
        android:right="-2dp"
        android:top="-2dp">
        <shape android:shape="rectangle">
            <stroke
                android:width="0.5dp"
                android:color="@android:color/black" />    
            <solid android:color="#ffffff" />
            <stroke
                android:width="1dp"
                android:color="#030310"
                android:dashGap="5dp"
                android:dashWidth="5dp" />
            <padding
                android:bottom="5dp"
                android:left="5dp"
                android:right="5dp"
                android:top="5dp" />
        </shape>
    </item>
</layer-list>

然后只需将android:background 属性设置为我们刚刚创建的dotted.xml。你的EditText 看起来像这样。

<EditText
    android:id="@+id/account_number"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="test account"
    android:background="@drawable/dotted"
    style="@style/Theme.Main" <!--Its your custom style-->
    android:enabled="false" />

【讨论】:

    【解决方案2】:

    AFAIK,没有“库存”方式。将材料设计指南作为一个指南;)

    【讨论】:

      【解决方案3】:

      最后我得到了一个自定义视图。它可能不是最优雅的解决方案,但它解决了我的任务。

      希望对某人有所帮助。


      DisabledTextField.java

      package com.kabunov.example.ui.common;
      
      import android.content.Context;
      import android.content.res.TypedArray;
      import android.text.TextUtils;
      import android.util.AttributeSet;
      import android.view.View;
      import android.widget.FrameLayout;
      import android.widget.TextView;
      import com.kabunov.example.R;
      
      public final class DisabledTextField extends FrameLayout {
      
          private TextView tvCaption;
          private TextView tvText;
          private View divider;
      
          public DisabledTextField(final Context context) {
              this(context, null);
          }
      
          public DisabledTextField(final Context context, final AttributeSet attrs) {
              this(context, attrs, 0);
          }
      
          public DisabledTextField(final Context context, final AttributeSet attrs, final int defStyleAttr) {
              super(context, attrs, defStyleAttr);
      
              View.inflate(getContext(), R.layout.component_disabled_text_field, this);
      
              tvCaption = (TextView) findViewById(R.id.caption);
              tvText = (TextView) findViewById(R.id.value);
      
              final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.DisabledTextField);
              if (null != typedArray) {
                  final String captionText = typedArray.getString(R.styleable.DisabledTextField_caption);
                  if (TextUtils.isEmpty(captionText)) {
                      tvCaption.setVisibility(GONE);
                  } else {
                      tvCaption.setText(captionText);
                      tvCaption.setVisibility(VISIBLE);
                  }
      
                  final String text = typedArray.getString(R.styleable.DisabledTextField_disabledText);
                  tvText.setText(text);
      
                  typedArray.recycle();
              }
          }
      
          public final void setCaption(final CharSequence caption) {
              this.tvCaption.setText(caption);
              this.tvCaption.setVisibility(VISIBLE);
          }
          public final void setDisabledText(final CharSequence value) {
              this.tvText.setText(value);
          }
      }
      

      /layout/component_disabled_text.xml

      <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">
      
          <TextView
              android:id="@+id/caption"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              style="@style/DisabledTextFieldCaption"/>
      
          <TextView
              android:id="@+id/value"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              style="@style/DisabledTextFieldValue"/>
      
          <View
              android:id="@+id/divider"
              android:layout_width="match_parent"
              android:layout_height="1dp"
              android:background="@drawable/disabled_text_field_background"
              android:layerType="software"/>
      
      </LinearLayout>
      

      /values/attributes_disabled_text_field.xml

      <?xml version="1.0" encoding="utf-8"?>
      <resources>
          <declare-styleable name="DisabledTextField">
              <attr name="caption" format="string"/>
              <attr name="disabledText" format="string"/>
          </declare-styleable>
      </resources>
      

      /drawable/disabled_text_field_background.xml

      <?xml version="1.0" encoding="utf-8"?>
      <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
          <item
              android:bottom="-1dp"
              android:left="-1dp"
              android:right="-1dp"
              android:top="0dp">
      
              <shape android:shape="rectangle">
                  <stroke
                      android:width="1dp"
                      android:color="@color/text_color_disabled_text_view"
                      android:dashGap="2dp"
                      android:dashWidth="1dp" />
      
                  <solid android:color="@android:color/transparent" />
      
              </shape>
          </item>
      </layer-list>
      

      /values/styles.xml

      <?xml version="1.0" encoding="utf-8"?>
      <resources>
      
          <color name="text_color_disabled_text_view">#61000000</color>
      
          <style name="DisabledTextFieldCaption">
      
              <item name="android:textSize">12sp</item>
              <item name="android:textColor">@color/text_color_disabled_text_view</item>
      
          </style>
      
          <style name="DisabledTextFieldValue">
      
              <item name="android:layout_marginTop">3dp</item>
              <item name="android:layout_marginBottom">8dp</item>
              <item name="android:textSize">16sp</item>
              <item name="android:textColor">@color/text_color_disabled_text_view</item>
      
          </style>
      
      </resources>
      

      使用示例

      <LinearLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:custom="http://schemas.android.com/apk/res-auto"
          android:layout_width="match_parent"
          android:layout_height="match_parent">
      
      
              <com.kabunov.example.ui.common.DisabledTextField
                  android:id="@+id/example"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  custom:caption="Some caption"
                  custom:disabledText="Disabled text"/>
      
      </LinearLayout>
      

      结果

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-08-08
        • 2015-02-05
        • 1970-01-01
        • 2016-11-12
        • 1970-01-01
        • 2019-04-11
        相关资源
        最近更新 更多