Andriod Studio EditText 输入框 美化

对输入框实现以下美化:

Andriod Studio EditText 输入框 美化_第1张图片

该显示的结构为 LinearLayout 内部加一个 EditText ,图中外部轮廓是LinearLayout 的样式。

LinearLayout 部分:

  1. 在要操作页面的 Design 页面添加一个大小合适的 LinearLayout
  2. res>values>styles.xml 中添加一个style:
<style name="InputBoxStyle">
        <item name="android:layout_centerHorizontal">true</item>
        <item name="android:layout_marginLeft">18dp</item>
        <item name="android:layout_marginRight">18dp</item>
        <item name="android:background">@drawable/border_input_box</item>
        <item name="android:gravity">center</item>
        <item name="android:orientation">horizontal</item>
    </style>
  1. 在 res>drawable 中添加一个border_input_box.xml,代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />
    <stroke
        android:width="1dp"
        android:color="@color/border_color" />
</shape>

  1. 在 LinearLayout 的xml文件中加个这个:应用该风格
 style="@style/InputBoxStyle"

至此,LinearLayout 部分完成

EditText部分:

  1. 在之前添加的 LinearLayout 中拖入一个EditText(Plain Text)

  2. res>values>styles.xml 中添加一个style:

     <style name="EditTextStyle">
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_marginRight">10dp</item>
        <item name="android:layout_marginBottom">5dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:background">@null</item>
    </style>
  1. 在EditText的xml文件中加一句如下,对该风格进行应用:
   style="@style/EditTextStyle"

你可能感兴趣的:(Android,Studio)