Android 使用<layer-list>實現微信聊天輸入框功能

2019-12-12 02:55:58

字體：大中小

來源：轉載

供稿：網友

LayerDrawable

<layer-list> 標簽可是設置LayerDrawable，一種有層次的Drawable疊加效果，<layer-list> 可以包含多個 <item>標簽，

每個 <item>代表一個Drawable。<item>可以通過left、right、top、bottom設置左右上下的偏移量，<item>可以應用一個圖片，也可以是一個shape

我們來模仿實現微信的聊天輸入框：

先設置綠色的背景：

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <item>   <shape android:shape="rectangle">    <solid android:color="@android:color/holo_green_light" />   </shape>  </item> </layer-list>

再疊加一層白色，留出側面綠色線條的高度：

 <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <item>   <shape android:shape="rectangle">    <solid android:color="@android:color/holo_green_light" />   </shape>  </item>  <item android:bottom="8dp">   <shape android:shape="rectangle">    <solid android:color="@android:color/white" />   </shape>  </item> </layer-list>

再鋪上一層白色，覆蓋已經設置好的背景，留出底部和側面的線條，中間的一層其實就是為了留出兩邊的綠色線框的高度：

<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  <item>   <shape android:shape="rectangle">    <solid android:color="@android:color/holo_green_light" />   </shape>  </item>  <item android:bottom="8dp">   <shape android:shape="rectangle">    <solid android:color="@android:color/white" />   </shape>  </item>  <item   android:bottom="1dp"   android:left="1dp"   android:right="1dp"   android:shape="rectangle">   <shape>    <solid android:color="@android:color/white" />   </shape>  </item> </layer-list>