Android中自定义圆角样式

效果图如上,在网上查找的资源,于是乎操作了一遍,Java代码是自动生成的,看下布局文件activity_main.xml,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >

    <!-- 表格布局 -->

    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" >

        <!--
        表格布局中每个TableRow表示一行,TableRow中的每个基本控件
        都是一列,这是一个三行两列的布局,这里的表格背景是自定义的shape
        shape_top_corner_no_bottom_line.xml文件:顶部带圆角 白色背景 灰色边框 无下边框 长方体
        shape_no_corner_without_bottom.xml文件:不带圆角 白色背景 灰色边框 无下边框 长方体
      shape_bottom_corner_no_top_line.xml文件:底部圆角 白色背景 灰色边框 长方体
        -->
        <!-- 表格布局:第一行 -->

        <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>

            <EditText
                android:id="@+id/bankingYourNameEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@null"
                android:singleLine="true" >
            </EditText>
        </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>

            <EditText
                android:id="@+id/bankingContactTelEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@null"
                android:inputType="phone"
                android:singleLine="true" >
            </EditText>
        </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>

            <EditText
                android:id="@+id/bankingContactTelEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@null"
                android:inputType="phone"
                android:singleLine="true" >
            </EditText>
        </TableRow>
    </TableLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button" />

</LinearLayout>

三个样式位于drawable文件夹中,分别为:

shape_top_corner_no_bottom_line.xml文件:顶部带圆角 白色背景 灰色边框 无下边框 长方体
shape_no_corner_without_bottom.xml文件:不带圆角 白色背景 灰色边框 无下边框 长方体
shape_bottom_corner_no_top_line.xml文件:底部圆角 白色背景 灰色边框 长方体

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:bottomLeftRadius="0.1dp"
                android:bottomRightRadius="0.1dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />

            <stroke
                android:width="1dp"
                android:color="#ffa8abad" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="#FFFFFF" />

            <corners
                android:bottomLeftRadius="0.1dp"
                android:bottomRightRadius="0.1dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="10dp" />

            <stroke
                android:width="1dp"
                android:color="#ffffffff" />
        </shape>
    </item>

</layer-list>


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>

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:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp"
                android:topLeftRadius="0.1dp"
                android:topRightRadius="0.1dp" />

            <stroke
                android:width="1dp"
                android:color="#ffa8abad" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="#FFFFFF" />

            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp"
                android:topLeftRadius="0.1dp"
                android:topRightRadius="0.1dp" />

            <stroke
                android:width="1dp"
                android:color="#ffffffff" />
        </shape>
    </item>

</layer-list>

对于,该布局还存在许多的问题,比如:EditText组件可以无限的输入,没有字数限制;应用中的EditText如何直接获取焦点;还有需要注意的是,EditText组件中的属性
android:background="@null",将其值设为@null,可以去掉EditText背景中的下划线。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值