【Android UI】案例02 圆角边框、圆角背景的实现(shape)

本文主要分享圆角边框与圆角背景的实现方式。该方式的实现，须要了解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{
 
	@Override
	protected 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>

执行该项目，效果例如以下：