1. 程式人生 > >android自定義圓角實線邊框,圓角虛線邊框,直實線,虛實線,半圓角邊框

android自定義圓角實線邊框,圓角虛線邊框,直實線,虛實線,半圓角邊框

先上圖。
<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>
<?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>
下面一樣,通過corners設定右下角和右上角的半徑為5dp,左上角,左下角半徑為0dp,我們即可得到左邊直角,右邊圓角的邊框。
<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>