您的位置:

Android圆角边框详解

一、什么是圆角边框

Android圆角边框是指在View外围添加特定的边框,并且使这个边框的角变成圆角的UI设计模式。圆角边框通过改变视图的外观,增强了用户对视图的注意力,并且在页面内容相似的情况下,在UI设计中能够起到区分不同组件的作用。

二、如何添加圆角边框

1、自定义shape.xml文件

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        android:padding="10dp">

        <corners android:radius="10dp"/>

        <solid android:color="#ffffff"/>

        <stroke
            android:width="1dp"
            android:color="#cccccc"/>

    </shape>

自定义shape.xml文件是实现圆角边框的基础,通过shape标签实现矩形、圆形等形状的定义。其中corners标签用于设置角的圆角大小,solid标签用于填充形状内部颜色,stroke标签用于设置线的颜色和宽度。

2、在布局文件中的应用

     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_margin="20dp"
         android:background="@drawable/shape_border_rounded"
         android:gravity="center_horizontal"
         android:orientation="vertical"
         android:padding="20dp">
 
         <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="Hello, World!"
             android:textSize="18sp" />
     </LinearLayout>

在布局文件中,通过在控件或者布局的background属性中调用定义好的shape.xml文件,即可实现圆角边框的显示。在需要为控件添加圆角边框时,只需要将控件或者布局的background属性设置为定义好的shape.xml文件即可。

三、圆角边框的自定义属性

1、添加选中效果

     <selector xmlns:android="http://schemas.android.com/apk/res/android">

         <item android:state_pressed="false"
             android:state_focused="false"
             android:drawable="@drawable/shape_border_rounded"/>

         <item android:state_pressed="true"
             android:drawable="@drawable/shape_border_rounded_selected"/>

         <item android:state_focused="true"
             android:drawable="@drawable/shape_border_rounded_selected"/>

     </selector>

在使用圆角边框时,我们通常需要对其添加选中效果来提示用户当前控件的状态。在上述代码中,我们可以使用state_pressed和state_focused属性针对控件的选中状态进行定义,将相应的shape.xml文件设置为drawable。

2、添加渐变效果

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">

        <corners android:radius="50dp"/>

        <gradient
            android:type="linear"
            android:angle="0"
            android:startColor="#E91E63"
            android:endColor="#2196F3"/>

        <stroke
            android:width="5dp"
            android:color="#fff"/>

    </shape>

在上述代码中,我们可以通过gradient标签来定义渐变效果,type属性定义为linear时,是设置某一方向上的渐变;如果type设置为radial时,则为圆形渐变。

四、圆角边框的适配问题

1、圆角边框的设置对性能的影响

对于一些低端设备或者存储空间有限的设备,我们需要尽量减少过多的图片资源的使用。使用圆角边框时我们有时会选择将边框的样式作为图片进行存储,较多的图片资源会占用更多的存储空间,将对整个应用的性能产生影响。

2、圆角边框的适配问题

由于在不同的手机屏幕大小和密度上,圆角边框的效果会有所不同,因此我们需要在编写App时对圆角边框自定义属性进行适配。通常我们可以通过使用dp进行定义,将显示效果的差异降低到最小。

五、总结

通过对Android圆角边框的详细介绍,我们可以看到圆角边框作为UI设计中十分常用的基础元素,在App开发中十分重要。我们可以通过自定义shape.xml文件,添加选中效果和渐变效果等多方面对其进行定制,并且在适配问题上也有多种解决方案。