Android圆角效果

一.圆角风

      前几天朋友让我做一个普通的UI效果,感觉很简单,但是真正做起来才发现还是很有嚼头的,所以鸿雁特此整理,给各大程序辕分享.不管是360老大哥,还是新浪微博,京东商城.如下图:

代码下载:http://download.csdn.net/detail/u010375704/6353891

     的确,圆角的设计给人以温暖的感觉,给用户舒服的感觉.那么,我们不多说废话了,赶紧发现它的秘密吧,哈哈!  

二.实现过程

     每当看到这种带圆角的图,很多初级的程序员都费劲巴拉的趴在电脑上找这种只有一个dp宽的线条,劳力伤神.所以我今天教给大家一个非常不错的方法,那就是shapeDrawable.由于Android SDK并没有给我们封装好一个圆角的TextView,所以我们必须用自己的方式来完成.可以用的方式就是给TextView设置一个特殊的背景.具体实现直接上代码:

三.代码部分:

     MainActivity:

public class MainActivity extends Activity {protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);}}

actvity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#ffff4400"        android:gravity="center_vertical"        android:orientation="horizontal" >        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="   我的京东"            android:textColor="@android:color/white"            android:textSize="18sp" />        <Button            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="1"            android:background="@android:color/transparent" />        <Button            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="5dp"            android:background="@drawable/more_btn"            android:text="更多" />    </LinearLayout>    <ScrollView        android:layout_width="match_parent"        android:layout_height="wrap_content" >        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical" >            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="#ff22dd66"                android:gravity="center_horizontal"                android:orientation="vertical"                android:padding="30dp" >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="欢迎来到京东" />                <Button                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="登录" />            </LinearLayout>            <LinearLayout                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:background="#ffffffcc"                android:orientation="vertical" >                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="订单中心"                    android:textColor="@android:color/black"                    android:textSize="16sp" />                <TableLayout                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:padding="10dip" >                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_top_corner_no_bottom_line"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="鸿雁" >                        </TextView>                    </TableRow>                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_no_corner_without_bottom"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="向南飞" >                        </TextView>                    </TableRow>                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_bottom_corner_no_top_line"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="程序员成长之路" >                        </TextView>                    </TableRow>                </TableLayout>                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="程序员成长之路"                    android:textColor="@android:color/black"                    android:textSize="16sp" />                <TableLayout                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:padding="10dip" >                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_top_corner_no_bottom_line"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="程序员成长之路" >                        </TextView>                    </TableRow>                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_no_corner_without_bottom"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="程序员成长之路" >                        </TextView>                    </TableRow>                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_bottom_corner_no_top_line"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="程序员成长之路" >                        </TextView>                    </TableRow>                </TableLayout>                <TextView                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:text="程序员成长之路"                    android:textColor="@android:color/black"                    android:textSize="16sp" />                <TableLayout                    android:layout_width="fill_parent"                    android:layout_height="wrap_content"                    android:padding="10dip" >                    <TableRow                        android:layout_width="fill_parent"                        android:layout_height="wrap_content"                        android:background="@drawable/shape_normal_rectangle"                        android:padding="10dip" >                        <TextView                            android:layout_width="wrap_content"                            android:layout_height="wrap_content"                            android:layout_gravity="center_vertical"                            android:layout_marginRight="10dip"                            android:text="程序员成长之路" >                        </TextView>                    </TableRow>                                    </TableLayout>            </LinearLayout>        </LinearLayout>    </ScrollView></LinearLayout>

shapeDrawable(这才是本片文章的重点)

首先在res下创建一个drawable文件夹,然后新建一个根目录为layer_list的androidxml.

  具体代码如下:

  1.shape_bottom_corner_no_top_line.xml

<?xml version="1.0" encoding="UTF-8"?>  <!-- 底部圆角 白色背景 灰色边框 长方体 -->  <layer-list xmlns:android="http://schemas.android.com/apk/res/android">      <item>          <shape>              <solid android:color="#FFFFFF" />              <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"                  android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />              <stroke android:width="1dp" android:color="#ffa8abad" />          </shape>      </item>      <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">          <shape>              <solid android:color="#FFFFFF" />              <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"                  android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />              <stroke android:width="1dp" android:color="#ffffffff" />          </shape>      </item>  </layer-list>  

 

2.shape_no_corner_without_bottom.xml

<?xml version="1.0" encoding="UTF-8"?>  <!-- 不带圆角 白色背景 灰色边框 无下边框 长方体 -->  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >      <item>          <shape>              <solid android:color="#FFFFFF" />              <stroke                  android:width="1dp"                  android:color="#ffa8abad" />          </shape>      </item>      <item          android:left="1dp"          android:right="1dp"          android:top="1dp">          <shape>              <solid android:color="#FFFFFF" />              <stroke                  android:width="1dp"                  android:color="#ffffffff" />          </shape>      </item>  </layer-list>  

  3.shape_top_corner_no_bottom_line.xml

<?xml version="1.0" encoding="UTF-8"?>    <!-- 顶部带圆角 白色背景 灰色边框 无下边框 长方体 -->    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">        <item>            <shape>                <solid android:color="#FFFFFF" />                <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"                    android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />                <stroke android:width="1dp" android:color="#ffa8abad" />            </shape>        </item>        <item android:top="1dp" android:left="1dp" android:right="1dp">            <shape>                <solid android:color="#FFFFFF" />                <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"                    android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />                <stroke android:width="1dp" android:color="#ffffffff" />            </shape>        </item>    </layer-list>   

4.代码就是这些了,最后贴图出来: