轉載

最近做項目的時候遇到一個卡劵的效果，由于自己覺得用圖片來做的話可以會出現適配效果不好，再加上自己自定義view方面的知識比較薄弱，所以想試試用自定義View來實現。但是由于自己知識點薄弱，一開始居然想著用畫矩形來設置邊緣實現，后面一個哥們指導了我，在這里感謝他。

實現分析

上面的圖片其實和普通的Linearlayout，RelativeLayout一樣，只是上下兩邊多了類似于半圓鋸齒的形狀。那么只需要處理不同地方?？梢栽谏舷聝蓷l線上畫一個個白色的小圓來實現這種效果。

假如我們上下線的半圓以及半圓與半圓之間的間距是固定的，那么不同尺寸的屏幕肯定會畫出不同數量的半圓，那么我們只需要根據控件的寬度來獲取能畫的半圓數。

大家觀察圖片，很容易發現，圓的數量總是圓間距數量－1，也就是，假設圓的數量是circleNum,那么圓間距就是circleNum+1。

所以我們可以根據這個計算出circleNum.

circleNum = (int) ((w-gap)/(2*radius+gap));

這里gap就是圓間距，radius是圓半徑，w是view的寬。

具體的實現

下面看代碼：

上面定義了圓的半徑和圓間距，同時初始化了這些值并且獲取了需要畫的圓數量。

接下來只需要一個一個將圓畫出來就可以了。

簡單的根據circleNum的數量進行了圓的繪制。

這里remain/2是因為，可以一些情況，計算出來的可以畫的數量不是剛好整除的。這樣就會出現右邊最后一個間距會比其它的間距都要寬。

所以我們在繪制第一個的時候加上了余下的間距的一半，即使是不整除的情況。至少也能保證第一個和最后一個間距寬度一致。

這樣就實現了，看看布局文件：

效果圖：

作者通過非常巧妙和簡單的方式實現了邊緣特殊圖像的繪制，相信大家可以輕松的學習到相關知識，不過這里指定了特定的顏色（白色），如果想要直接像橡皮擦一樣擦成透明，可以使用xfermode來做處理。

源代碼下載

源代碼

參考鏈接

一起來學習android自定義控件—邊緣凹凸的View

更新

利用邊緣凹凸的View來實現比較好看的editText

效果如下

布局文件

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="0dp"android:paddingTop="@dimen/activity_vertical_margin"android:background="@color/backcircle"tools:context="com.zj.second.MainActivity"><com.zj.second.CouponDisplayView android:layout_marginRight="16dp"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#FFFFFF"android:padding="0dp"><EditText android:padding="20dp"android:textStyle="bold"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="姓 名"android:background="@null"android:textSize="16sp"/><View android:layout_width="fill_parent"android:layout_height="1dip"android:background="#FF909090" /><EditText android:padding="20dp"android:textStyle="bold"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="電 話"android:background="@null"android:textSize="16sp"/><View android:layout_width="fill_parent"android:layout_height="1dip"android:background="#FF909090" /><EditText android:padding="20dp"android:textStyle="bold"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="地 址"android:background="@null"android:textSize="16sp"/><View android:layout_width="fill_parent"android:layout_height="1dip"android:background="#FF909090" /><EditText android:gravity="top|left"android:padding="20dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:hint="案情描述"android:minLines="8"android:background="@null"/></com.zj.second.CouponDisplayView><ImageView android:id="@+id/imageView_send"android:layout_width="36dp"android:layout_height="36dp"android:padding="0dp"android:layout_marginLeft="3dp"android:layout_marginTop="168dp"android:foreground="?android:attr/selectableItemBackground"android:src="@drawable/inline_reply_dialog_send"android:layout_alignParentRight="true"/></RelativeLayout>

參考鏈接

文本框 - Material Design 中文版 - 極客學院Wiki

總結

以上是生活随笔為你收集整理的Android实现边缘凹凸的View的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。