【Android UI】案例02 圓角邊框、圓角背景的實現(shape)，androidui

【Android UI】案例02 圓角邊框、圓角背景的實現(shape)，androidui

       本文主要分享圓角邊框與圓角背景的實現方式。該方式的實現，需要瞭解shape的使用，該部分的詳細介紹，請閱讀部落格http://blog.csdn.net/mahoking/article/details/23672271。文中有較詳細的介紹。

【轉載使用，請註明出處：http://blog.csdn.net/mahoking】
 如下是示範的shape_layout.xml模板。

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 填充色 -->    <solid android:color="#CCFF99"/><!-- 圓角 --><corners android:radius="10dp"/></shape>

       為了顯示的好看與協調，本案建立了多個shape_*.xml檔案，各個shape_*.xml檔案只是solid填充色的配置不同，讀者可以根據自己的設計與喜好自行搭配。在本文的而最後，會展示相應Demo。

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- 填充色 -->    <solid android:color="#FF9999"/><!-- 圓角 --><!-- android:radius 設定角的弧度，值越大角越圓--><corners android:radius="10dp"/></shape>

        建立Activity(RoundCornerActivity)，對應的布局檔案為activity_01_round_corner.xml。
RoundCornerActivity

/** *@describe  圓角邊框、圓角背景的實現示範 *@date 2014-8-24 22:35:49 */public class RoundCornerActivity extends Activity{@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_01_round_corner);}}

activity_01_round_corner.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <TextView        android:layout_width="match_parent"        android:layout_height="20dp"        android:layout_marginLeft="15dp"        android:layout_marginRight="15dp"        android:layout_marginTop="5dp"        android:background="@drawable/shape_01_round_corner_textview"        android:gravity="center"        android:text="圓角背景與邊框示範" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="60dp"        android:layout_marginLeft="15dp"        android:layout_marginRight="15dp"        android:layout_marginTop="10dp"        android:background="@drawable/shape_01_round_corner_layout" >    </LinearLayout>    <TextView        android:layout_width="match_parent"        android:layout_height="20dp"        android:layout_marginLeft="15dp"        android:layout_marginRight="15dp"        android:layout_marginTop="5dp"        android:background="@drawable/shape_01_round_corner_textview"        android:gravity="center"        android:text="以下是特效示範" />    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="10dp"        android:orientation="horizontal" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"            android:layout_weight="1"            android:orientation="vertical" >            <TextView                android:layout_width="match_parent"                android:layout_height="120dp"                android:background="@drawable/shape_01_round_corner_textview_ma"                android:gravity="center"                android:text="馬"                android:textSize="60dp" />        </LinearLayout>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:layout_marginRight="5dp"            android:layout_weight="1"            android:orientation="vertical" >            <TextView                android:layout_width="match_parent"                android:layout_height="55dp"                android:background="@drawable/shape_01_round_corner_textview_yi"                android:gravity="center"                android:text="意"                android:textSize="30dp" />            <TextView                android:layout_width="match_parent"                android:layout_height="55dp"                android:layout_marginTop="10dp"                android:background="@drawable/shape_01_round_corner_textview_ran"                android:gravity="center"                android:text="然"                android:textSize="30dp" />        </LinearLayout>    </LinearLayout></LinearLayout>

          切忌不要忘記在AndroidManifest.xml中註冊該Activity。

<application        android:allowBackup="true"        android:icon="@drawable/uisharing_ico"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.mahaochen.app.uisharing.example01.RoundCornerActivity"            android:screenOrientation="portrait"             android:label="@string/app_name">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>

運行該項目，效果如下：

 

網頁中的圓角邊框

相信我，背景圖片是你的最好選擇。
三年網頁設計師飄過~
 
好用的CSS圓角邊框代碼

一般圓角框最好用背景圖片實現，這樣相容性好，css也可以實現，不過有些限制，因為各個瀏覽器支援的標準不一樣
推薦你看一篇文章
hi.baidu.com/...1.html

另外asp.net 的 ajax控制項也有圓角框 RoundedCorners
示範地址
www.asp.net/...s.aspx