【问题标题】:how to invert password eye icon?如何反转密码眼睛图标?
【发布时间】:2017-02-14 13:22:48
【问题描述】:

输入密码时编辑文本中的上述眼睛图标以相反的顺序显示,密码不可见时密码眼睛图标是盲目的。 如何反转它

谢谢,

<android.support.design.widget.TextInputLayout
android:id="@+id/layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#000000">

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/password"
android:hint="@string/password"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>

【问题讨论】:

标签: android material-design


【解决方案1】:

材质组件从 1.2.0-beta01 开始,这是默认行为:

使用以前的版本,您可以:

<com.google.android.material.textfield.TextInputLayout
    app:endIconDrawable="@drawable/custom_password_eye"
    ..>

custom_password_eye.xml 在哪里:

<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:ignore="NewApi">

    <item
        android:id="@+id/visible"
        android:drawable="@drawable/design_ic_visibility_off"
        android:state_checked="true"/>

    <item
        android:id="@+id/masked"
        android:drawable="@drawable/design_ic_visibility"/>

    <transition
        android:drawable="@drawable/avd_hide_password"
        android:fromId="@id/masked"
        android:toId="@id/visible"/>

    <transition
        android:drawable="@drawable/avd_show_password"
        android:fromId="@id/visible"
        android:toId="@id/masked"/>

</animated-selector>

【讨论】:

  • 有没有办法改变版本 1.3.0-alpha01 中的行为。我试过你的方法,但它不起作用。目前,默认情况下,隐藏密码时会显示可见性图标,反之亦然。
  • @fakhruddintahery 如果你想在 1.3.0-alpha01 上反转,你必须反转项目和过渡中的可绘制对象。
  • 问题是我使用 custom_password_eye.xml 时图标没有显示。在应用程序中:endIconDrawable
  • 删除app:passwordToggleEnabled="true"并添加app:endIconMode="password_toggle"
【解决方案2】:

您必须输入两个drawable,然后在按钮单击或任何其他类似下面的事件时动态更改drawable,您可以在EditText 中设置drawable,如下所示:

Drawable img = getContext().getResources().getDrawable( R.drawable.smiley );
editText.setCompoundDrawablesWithIntrinsicBounds( null, null, img, null);

【讨论】:

    【解决方案3】:

    迟到的答案。
    Probably, google decided to indicate state button instead of action button
    因此,如果您想要操作按钮,您可以仅使用 xml 布局自定义可绘制图标,无需以编程方式更改它。
    将此添加到 TextInputLayout:

    app:passwordToggleDrawable="@drawable/eye_password"
    

    如果您使用材料:1.1.0 或更高版本,请添加此内容

    app:endIconDrawable="@drawable/eye_password"
    

    然后为 eye_password 创建新的可绘制对象:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/ic_eye_close" android:state_checked="true"/>
        <item android:drawable="@drawable/ic_eye_open"/>
    </selector>
    

    ic_eye_open 可绘制:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
        <path
            android:fillColor="#FF000000"
            android:pathData="M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z"/>
    </vector>
    

    ic_eye_close 可绘制:

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
        <path
            android:fillColor="#FF000000"
            android:pathData="M12,7c2.76,0 5,2.24 5,5 0,0.65 -0.13,1.26 -0.36,1.83l2.92,2.92c1.51,-1.26 2.7,-2.89 3.43,-4.75 -1.73,-4.39 -6,-7.5 -11,-7.5 -1.4,0 -2.74,0.25 -3.98,0.7l2.16,2.16C10.74,7.13 11.35,7 12,7zM2,4.27l2.28,2.28 0.46,0.46C3.08,8.3 1.78,10.02 1,12c1.73,4.39 6,7.5 11,7.5 1.55,0 3.03,-0.3 4.38,-0.84l0.42,0.42L19.73,22 21,20.73 3.27,3 2,4.27zM7.53,9.8l1.55,1.55c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.66 1.34,3 3,3 0.22,0 0.44,-0.03 0.65,-0.08l1.55,1.55c-0.67,0.33 -1.41,0.53 -2.2,0.53 -2.76,0 -5,-2.24 -5,-5 0,-0.79 0.2,-1.53 0.53,-2.2zM11.84,9.02l3.15,3.15 0.02,-0.16c0,-1.66 -1.34,-3 -3,-3l-0.17,0.01z"/>
    </vector>
    

    【讨论】:

    • 这不适用于 1.3.0-alpha01 版本。我不确定其他版本。
    • @fakhruddintahery 与 1.2.0 相同,是 25.08.20 的最新和最稳定版本(无 alpha 或 beta)
    【解决方案4】:
           <com.google.android.material.textfield.TextInputLayout              
               app:endIconDrawable="@drawable/password_toogle"
               app:endIconMode="password_toggle">
    
               <com.google.android.material.textfield.TextInputEditText
                   android:id="@+id/inpPassword"
                   android:ems="15"
                   android:layout_width="match_parent"
                   android:layout_height="wrap_content"
                   android:inputType="textPassword"
                   android:textColor="#555555"
                   android:textSize="14sp" />
    
           </com.google.android.material.textfield.TextInputLayout>
    

    --------- 密码工具 ----------

          <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_eye_close"
        android:state_checked="false"/>
    <item android:drawable="@drawable/ic_eye_open"/>
    

    您可以简单地使用 propertyapp:passwordToggleEnabled="true" ,但它提供了用于隐藏和显示密码的倒置图标

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2013-09-28
      • 1970-01-01
      • 1970-01-01
      • 2021-07-06
      • 2021-11-10
      • 1970-01-01
      • 2020-02-24
      相关资源
      最近更新 更多