Android仿iPhone圆角边框

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

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

  方法一:用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);
     }
	@Override
	public 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);
				else
					setSelector(R.drawable.app_list_corner_round_top);
			} else if(itemnum == getAdapter().getCount() - 1)
				setSelector(R.drawable.app_list_corner_round_bottom);
			else
				setSelector(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可以留邮箱哈~

你可能感兴趣的:(Android仿iPhone圆角边框)