Android圆角效果
一.圆角风
前几天朋友让我做一个普通的UI效果,感觉很简单,但是真正做起来才发现还是很有嚼头的,所以鸿雁特此整理,给各大程序辕分享.不管是360老大哥,还是新浪微博,京东商城.如下图:
的确,圆角的设计给人以温暖的感觉,给用户舒服的感觉.那么,我们不多说废话了,赶紧发现它的秘密吧,哈哈!
二.实现过程
每当看到这种带圆角的图,很多初级的程序员都费劲巴拉的趴在电脑上找这种只有一个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.xml4.代码就是这些了,最后贴图出来:<?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>