如何在 Android 中设计 EditText 和 Button答案

【问题标题】：How to design EditText and Button in Android如何在 Android 中设计 EditText 和 Button
【发布时间】：2016-10-23 15:14:43
【问题描述】：

如何设计我的EditText 和Button，就像在Instagram 应用程序中一样？我知道我需要使用Drawable 文件来做到这一点，但我发现的每个链接都只显示了如何使用看起来很糟糕的Gradients 进行设计。我只是想要一些简单的东西，但不知道从哪里开始。

【问题讨论】：

标签： android xml android-edittext android-button

【解决方案1】：

您需要做的就是创建一个带有透明背景和彩色边框的Button 或Edittext 或TextView：

活动代码：

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

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Transparent Button with blue border"
    android:id="@+id/button"
    android:padding="10dp"
    android:layout_gravity="center_horizontal"
    android:background="@drawable/transparent_button_selector"
    android:textColor="@color/colorPrimary"
    android:textAllCaps="false"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true" />

</RelativeLayout>

transparent_button_selector.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed state -->
<item android:state_pressed="true"><shape>

    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners  android:radius="22dp" />

</shape></item>

<!-- focused state -->
<item android:state_focused="true"><shape>

    <solid android:color="@android:color/transparent" />
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners android:radius="22dp" />

</shape></item>
<!-- normal state -->
<item><shape>

    <solid android:color="@android:color/transparent"/>
    <stroke android:width="2dp" android:color="@color/colorPrimary" />
    <corners android:radius="22dp" />

</shape></item>
</selector>

颜色：

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="colorpink">#AAFF4081</color>

它看起来像：

您可以更改transparent_button_selector.xml，更改颜色、半径值、边框并尝试先创建布局，然后再考虑背景。是的，我也会说渐变。这里有一个问题：changing-gradient-background-colors-on-android-at-runtime

你也可以玩背景色，如果你使用像#33FFFFFF这样的一些透明白色，那么结果将是：http://imgur.com/poGN2nn

【讨论】：

谢谢！效果很好！我还使用您的示例来帮助我处理 EditText，它们看起来也很棒！
很高兴听到这个消息，我就是为此而来的，那时我很高兴。谢谢你也有美好的一天！

【解决方案2】：

看起来他们使用单个渐变drawable 作为登录布局的背景，然后EditTexts 具有大部分透明的白色背景，Button 具有完全透明的背景。要圆角 EditText/Button，请将背景设置为如下所示的可绘制对象：

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
     android:shape="rectangle"> 
    <solid android:color="@android:color/transparent"/>
    <corners 
        android:bottomRightRadius="2dp" 
        android:bottomLeftRadius="2dp" 
        android:topLeftRadius="2dp" 
        android:topRightRadius="2dp"/> 
</shape>

【讨论】：

【解决方案3】：

可能是这段代码可以帮助你。这是activity.xml 文件。将TextView 用作Button。

<?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"
    android:background="#FF929999">

    <EditText
        android:id="@+id/userName"
        android:layout_width="fill_parent"
        android:layout_height="48.0dip"
        android:layout_marginBottom="16.0dip"
        android:background="@drawable/input_field"
        android:hint="username"
        android:inputType="textNoSuggestions"
        android:paddingLeft="16.0dip"
        android:paddingRight="16.0dip"
        android:singleLine="true"
        android:textColor="@color/white"
        android:textColorHint="#b3ffffff"
        android:textCursorDrawable="@null"/>

    <TextView
        android:id="@+id/saveButton"
        android:layout_width="match_parent"
        android:layout_height="48.0dip"
        android:background="@drawable/button_border"
        android:gravity="center"
        android:text="Save"
        android:textColor="#ccffffff"
        android:textSize="16sp"
        android:textStyle="bold"/>

</LinearLayout>

input_field.xml 文件应如下所示：

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#1affffff"/>
    <corners android:radius="2.0dip"/>
</shape>

而button_border.xml 会是这样的：

<?xml version="1.0" encoding="utf-8"?>
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#1affffff"/>
            <stroke 
                 android:width="1.0dip"
                 android:color="#80ffffff"/>
            <corners android:radius="2.0dip"/>
        </shape>
   </item>
   <item>
      <shape android:shape="rectangle">
          <solid android:color="#00000000"/>
          <stroke 
              android:width="1.0dip" 
              android:color="#33ffffff"/>
          <corners android:radius="2.0dip"/>
      </shape>
   </item>

享受设计。

【讨论】：

这是一个漂亮的背景，看起来就像 instagram 应用程序
一模一样的 instagram，谢谢。

【解决方案4】：

EditText 和 Button 使用带边框和透明颜色的 Drawable，整个紫色背景是图像，而不是渐变可绘制。并且还可以使用 TransitionDrawable 在 Instagram 等两个可绘制对象之间进行转换。

【讨论】：