Android:使用

时间:2016-07-21 09:01:44

标签: java android android-edittext

我正在开发一个Android项目,其中我有一个登录页面,我想在其中添加用户名和密码字段。我的设计要求我以半透明的方式将它们放在里面。任何想法,我可以改变EditText使其半透明和塑造它,有很多线程通过将背景设置为null或颜色等使其透明,但我发现没有这样的。

设计:

enter image description here

我使用的是相对布局,右侧是那些图标,我将它们放在单独的PNG文件中。我可以直接在Edittext中添加它们,但我担心如果用户名和密码很长,它将开始覆盖图像。有什么策略吗?谢谢。

代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Text"
        android:id="@+id/textView"
        android:textSize="32sp"
        android:textColor="@color/common_signin_btn_dark_text_default"
        android:layout_marginTop="75dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_below="@+id/textView"
        android:layout_marginTop="41dp"

        android:layout_alignRight="@+id/textView"
        android:layout_alignEnd="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView" />
</RelativeLayout>

更新了截图

enter image description here

更新了EditText

 <EditText
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:id="@+id/emailEditText"
        android:inputType="textEmailAddress"
        android:layout_below="@+id/textView"
        android:layout_marginTop="41dp"
        android:drawableEnd="@drawable/Mail"
        android:drawableRight="@drawable/Mail"
        android:maxLines="1"
        android:ellipsize="end"
        android:hint="Email"
        android:textColorHint="@color/common_signin_btn_dark_text_focused"
        android:background="@drawable/layout_bg"
        android:layout_alignRight="@+id/textView"
        android:layout_alignEnd="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView" >
    </EditText>

layout_bg.xml:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/traslucent_background" />
    <stroke android:width="1dip" android:color="#B1BCBE" />
    <corners android:radius="17dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

2 个答案:

答案 0 :(得分:1)

试试这个:

  1. 在项目中定义可绘制的形状,如下所示:
  2. <shape 
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="#88ff0000"/>
        <corners android:radius="32dp"/>
    </shape>
    

    并将其设置为EditText的背景。另外,将此属性作为属性添加到XML中的EditText

        android:drawableRight="@drawable/any_drawable_file"
    

    如果您担心文字与drawable重叠,可以向paddingRight添加自定义EditText以解决此问题。这将节省您为自定义布局充气的努力。

答案 1 :(得分:1)

对于图片,您应该可以使用android:drawableEnd="@drawable/..."android:drawableRight="@drawable/...",这也会限制文字长度。

对于背景,您可以像这样定义自定义绘图:

<!-- background_edittext.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="8dp" />
    <solid android:color="@color/traslucent_background" />

</shape>

其中traslucent_color将在colors.xml中定义,例如,如下所示:

<color name="shadow_lighter_color">#64000000</color>

编辑:这是一个如何使用drawableEnd / drawableRight在文字和图标之间留出空格的示例:

    <EditText
        android:background="@drawable/background_edittext"
        android:drawablePadding="16dp"
        android:drawableEnd="@drawable/icon"
        android:drawableRight="@drawable/icon"
        android:maxLines="1"
        android:ellipsize="end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />