Android仿iPhone圆角边框

如今APP的设计，都掀起了一股“圆角风”。在iPhone的应用，原生UI就已经实现了圆角边框，可惜在Android上就不是了。

不过Android还是可以仿着iPhone来编写出圆角边框的，方法有两种。下面给大家看一个简单的Demo吧

方法一：用TableLayout和TableRow实现

XML布局文件如下：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"     android:background="@android:color/white">    <!-- 标题栏 -->    <RelativeLayout    android:id="@+id/title"     android:layout_width="fill_parent"    android:layout_height="wrap_content"    android:background="@drawable/title" >    <!-- 标题栏上的返回按钮 -->    <Button             android:id="@+id/btn_back"             android:gravity="center_vertical"             android:layout_marginLeft="5dp"             android:paddingLeft="18dp"             android:textSize="18.0sp"             android:textColor="#ffffff"              android:background="@drawable/selector_btn_back"             android:layout_width="70dp"             android:layout_height="wrap_content"             android:text="@string/back" />    <!-- 标题 -->    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/user_title_name"        android:layout_centerInParent="true"        style="@style/my_Txt"/>    <!-- 标题栏上的小图标 -->    <ImageView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/user_label"        android:layout_centerVertical="true"        android:layout_alignParentRight="true"        android:layout_marginRight="15dp"/>    </RelativeLayout>    <!-- 圆角边框 -->    <TableLayout         android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="60dp"        android:padding="10dp">        <TableRow             android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="@drawable/shape_top_corner_no_buttom_line"            android:padding="10dp">            <TextView                 android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_marginRight="200dp"                android:textSize="18sp"                android:textColor="@android:color/black"                android:text="昵称："/>        </TableRow>        <TableRow             android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="@drawable/shape_no_corner_without_bottom"            android:padding="10dp">            <TextView                 android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_marginRight="200dp"                android:textSize="18sp"                android:textColor="@android:color/black"                android:text="账号："/>        </TableRow>        <TableRow             android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:background="@drawable/shape_bottom_corner_no_top_line"            android:padding="10dp">            <TextView                 android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_gravity="center_vertical"                android:layout_marginRight="200dp"                android:textSize="18sp"                android:textColor="@android:color/black"                android:text="签名："/>        </TableRow>    </TableLayout></RelativeLayout>

方法二：继承ListView，复写onIntercepTouchEvent(MotionEvent ev)方法

public class MyListView extends ListView {public MyListView(Context context) {super(context);// TODO Auto-generated constructor stub}public MyListView(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);     }     public MyListView(Context context, AttributeSet attrs) {         super(context, attrs);     }@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) {switch(ev.getAction()) {//获取点击事件case MotionEvent.ACTION_DOWN:int x = (int) ev.getX();int y = (int) ev.getY();//获取到点击的位置，然后转换成点击项int itemnum = pointToPosition(x, y);//位置无效时，跳出if(itemnum == AdapterView.INVALID_POSITION)break;else if(itemnum == 0) {if(itemnum == getAdapter().getCount() - 1) setSelector(R.drawable.app_list_corner_round);elsesetSelector(R.drawable.app_list_corner_round_top);} else if(itemnum == getAdapter().getCount() - 1)setSelector(R.drawable.app_list_corner_round_bottom);elsesetSelector(R.drawable.app_list_corner_shape);break;case MotionEvent.ACTION_UP:break;}return super.onInterceptTouchEvent(ev);}}

上面的R.drawable.app_list_corner_round、R.drawable.app_list_corner_round_top、R.drawable.app_list_corner_round_bottom、R.drawable.app_list_corner_shape分别代表四周圆角（只有一项的时候）、上方圆角（两项以上的第一项）、下方圆角（两项以上的最后一项）、无圆角（三项以上的非首尾项）

app_list_corner_round.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:topLeftRadius="6dip"        android:topRightRadius="6dip"        android:bottomLeftRadius="6dip"        android:bottomRightRadius="6dip"/></shape>

其他的XML大家应该也猜出来如何编写了，我就不列出来了。需要Demo可以留邮箱哈~

更多相关文章

随机推荐