您的位置:首页 > 产品设计 > UI/UE

Android之UI圆角矩形,图形圆角美化

2015-12-23 19:55 513 查看
创建工程Android_StyleAndUIShape下的res文件夹下->new other->Android XML File->Next->Resource Type下选择Drawable->选择shape->File命名为button_shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<gradient
android:angle="45"
android:endColor="#80FF00FF"
android:gradientRadius="100.0"
android:startColor="#FFFF0000"
android:type="radial" >
</gradient>

<padding
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp" />

<corners
android:topLeftRadius="12dp"
android:topRightRadius="12dp" >
</corners>

</shape>


<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="192dp"
android:background="@drawable/button_shape"
android:textSize="90sp"
android:text="Button" />


效果图如下



在drawable中新建两个文件view_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<gradient
android:endColor="#CCCCCC"
android:startColor="#CCCCCC" >
</gradient>

<corners
android:topLeftRadius="12dp"
android:topRightRadius="12dp" >
</corners>

<size
android:height="100dp"
android:width="200dp" />

<stroke

android:dashWidth="3dp"
android:width="3dp"
android:color="#FFDDCC" >
</stroke>
<!--
填充图形的颜色
<solid android:color="#000000"/>

-->

</shape>
和view_bottom.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<gradient
android:endColor="#CCFFDD"
android:startColor="#CCFFDD" />

<corners
android:bottomLeftRadius="12dp"
android:bottomRightRadius="12dp" >
</corners>

<size
android:height="100dp"
android:width="200dp" />
<!--
填充图形的颜色
<solid android:color="#000000"/>
-->
</shape>


在activity_main.xml中

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="@+id/button1"
android:layout_marginTop="36dp"
android:background="@drawable/view_shape"
android:orientation="vertical" >
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_alignLeft="@+id/linearLayout1"
android:layout_alignRight="@+id/linearLayout1"
android:layout_centerVertical="true"
android:background="#CCCCCC"
android:orientation="vertical" >
</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/linearLayout2"
android:layout_alignRight="@+id/linearLayout2"
android:layout_below="@+id/linearLayout2"
android:background="@drawable/view_bottom"
android:orientation="vertical" >

</LinearLayout>


效果图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: