android自定義圓角實線邊框,圓角虛線邊框,直實線,虛實線,半圓角邊框
阿新 • • 發佈:2019-02-05
先上圖。
<img src="http://img.my.csdn.net/uploads/201510/05/1444048517_3752.png-thumb.jpg" width="1080" height="1920" style="font-family: Arial, Helvetica, sans-serif;" alt="" />
<span style="font-family: Arial, Helvetica, sans-serif;">在現實專案開發中,單純的Button,EditText等控制元件遠遠不能滿足我們專案的UI設計需求,這時候,我們就需要自己動手豐衣足食啦。接下來先給大家介紹一些屬性,備註寫的都非常清楚啦,我就不囉嗦啦。</span>
接下來我們看最頂上的"哈哈"與"嘻嘻"。通過corners設定左下角和左上角的半徑為5dp,右上角,右下角半徑為0dp,我們就可以得到左邊圓角,右邊直角的邊框啦。<?xml version="1.0" encoding="utf-8"?> <!--android:shape屬性代表繪製的圖形形狀 retangle;矩形,oval:橢圓 ,line:線 ring,環形--> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="###"> <!--stroke主要給我們所要畫的圖形進行描邊 color:邊框顏色,width:邊框寬度,dashGap:虛線框的間隔,dashWidth:虛線框的寬度--> <stroke android:width="###" android:color="###" android:dashGap="###" android:dashWidth="###" /> <!--corners主要是設定我們所畫圖形四個角的半徑 radius:四角半徑 bottomLeftRadius:左下角半徑, bottomRightRadius:右下角半徑,topLeftRadius:左上角半徑,topRightRadius:右上角半徑--> <corners android:bottomLeftRadius="###" android:bottomRightRadius="###" android:radius="###" android:topLeftRadius="###" android:topRightRadius="###" /> <!--padding主要設定內邊距,也就是你裝載的內容(大部分是Textview或者button)離圖形邊框的距離 bottom:下內邊距,left:左內邊距,right:右內邊距,top:上內邊距--> <padding android:bottom="###" android:left="###" android:right="###" android:top="###" /> <!--這個就不需要講了吧--> <size android:width="###" android:height="###" /> <!--主要設定你所畫圖形的填充色--> <solid android:color="###"/> <!--gradient主要指定一個漸變顏色的形狀。--> <gradient android:angle="###" android:centerColor="###" android:centerX="###" android:centerY="###" android:gradientRadius="###" android:endColor="###" android:startColor="###" android:type="###" android:useLevel="###"/> </shape>
下面一樣,通過corners設定右下角和右上角的半徑為5dp,左上角,左下角半徑為0dp,我們即可得到左邊直角,右邊圓角的邊框。<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <stroke android:width="1.2dp" android:color="#6f4189" /> <solid android:color="#6f4189" /> <corners android:bottomLeftRadius="5dp" android:bottomRightRadius="0dp" android:topLeftRadius="5dp" android:topRightRadius="0dp" /> <padding android:bottom="2dp" android:left="12dp" android:right="12dp" android:top="2dp" /> </shape> </item> </layer-list>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<stroke
android:width="1.2dp"
android:color="#6f4189" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="0dp"
android:topRightRadius="5dp" />
<solid android:color="#00000000" />
<padding
android:bottom="2dp"
android:left="12dp"
android:right="12dp"
android:top="2dp" />
</shape>
</item>
</layer-list>
它倆再加上viewpager就可以實現很多App上都有的左右滑動翻頁效果啦。
我們再看圖中的使用者名稱和密碼輸入框,至於整個框框就不說啦,和上面的'嘻嘻','哈哈'一個原理,主要給大家介紹一下中間的紅線。實現很簡單,我們只需要設定android:shape="line",然後通過stoke的android:width設定直線的寬度,android;color設定直線的顏色即可。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1.2dp"
android:color="#ff4323"/>
</shape>
讓其在頁面的顯示程式碼如下
<LinearLayout
android:id="@+id/straight_line"
android:layout_width="fill_parent"
android:layout_height="2dp"
android:background="@drawable/line"
android:orientation="vertical"></LinearLayout>
其實設定直線還有種跟直觀的方法,通過<view/>來設定,在這裡就不細講,大家可以自行百度。
接下來我們看看下面的三個登入框框,重點給大家講講最後面那個"斷點"虛線框框。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"/>
<solid
android:color="#E67e22"/>
</shape>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"/>
<stroke
android:color="#E67e22"
android:width="1.0dp"/>
</shape>
其中color是定義虛線的顏色,dashGap定義的是虛線的間隔,width定義的是虛線的大小,dashWidth定義虛線的寬度。</span>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="5dp"/>
<stroke
android:color="#E67e22"
android:width="1.0dp"/>
</shape>