問(wèn)題描述

我正在嘗試設(shè)計(jì)一個(gè)具有像這樣的陰影(底部和右側(cè))的 EditText 字段

I am trying to design an EditText Field having Shadows (bottom and right side) like this

嘗試谷歌搜索和搜索了很多 SO 討論，但都是針對(duì) TextView 而不是 EditText.

tried googling & hunted many SO discussions but all are for TextView not EditText.

這是我在輸入文本中添加陰影而不是在文本字段中添加陰影的代碼

This is my code adding shadow to Input Text but not to TextField

<EditText android:id="@+id/txtpin" 
        android:maxLength="4" 
        android:layout_marginLeft="10dp" 
        android:layout_height="37dp" 
        android:gravity="center_horizontal" 
        android:inputType="textPassword" 
        android:longClickable="false" 
        android:layout_width="160dp" 

        android:shadowColor="@color/Black"
        android:shadowDx="1.2"
        android:shadowDy="1.2"
        android:shadowRadius="1.5" 

        android:background="@color/White">
            <requestFocus></requestFocus>
        </EditText>

<小時(shí)>

我猜它需要一些可繪制的自定義 xml 視圖，但沒(méi)有得到確切的想法.實(shí)現(xiàn)這一目標(biāo)的邏輯是什么.

I guess it needs some custom xml view in drawable but not getting exact idea. What will be the logic to achieve this.

任何幫助將不勝感激.

推薦答案

嗯.. @Shalini 的回答以這種方式幫助了我，但我仍然有另一種方法可以使用 EditText Field 實(shí)現(xiàn) 2D 陰影，我將與您分享.

Well.. @Shalini's answer helped me in this way but still I got another way to achieve 2D shadow with EditText Field and I am going to share with you.

我們需要為 EditText 創(chuàng)建具有三層的自定義 XML 視圖，底部陰影和右側(cè)陰影

We need to create custom XML view with three layer for EditText, bottom shadow and right side shadow

下面是我的代碼.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<!-- most important is order of layers -->

    <!-- Bottom right side 2dp Shadow -->
    <item >
        <shape android:shape="rectangle">
            <solid android:color="#000000" />           
        </shape>
    </item>

    <!-- Bottom 2dp Shadow -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#000000" />   
        </shape>
    </item>

    <!-- White Top color -->
    <item android:bottom="3px" android:right="3px">
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />           
        </shape>
    </item> 
</layer-list>

<小時(shí)>

現(xiàn)在我們可以使用Background"屬性將此陰影視圖設(shè)置為我們的 TextField

Now we can set this shadow view to our TextField using "Background" property

喜歡這個(gè)

<EditText android:layout_width="wrap_content" 
            android:id="@+id/txtpin"  
            android:maxLength="4" 
            android:layout_height="37dp" 
            android:gravity="center_horizontal" 
            android:longClickable="false" 
            android:padding="2dp"

            android:inputType="textPassword|number" 
            android:password="true" 
            android:background="@drawable/edittext_shadow" 
            android:layout_weight="0.98" 
            android:layout_marginLeft="15dp">
                <requestFocus></requestFocus>
   </EditText>

<小時(shí)>

結(jié)果屏幕就像我在上面發(fā)布的問(wèn)題一樣.

and the result screen is like I have posted in question above.

感謝 SO，分享知識(shí).

Thanks to SO, sharing knowledge.

這篇關(guān)于向 EditText 字段添加陰影效果的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！