Android 圆角效果

最新推荐文章于 2024-05-28 16:47:58 发布
最新推荐文章于 2024-05-28 16:47:58 发布
阅读量1k 收藏
点赞数
分类专栏： Android UI设计 文章标签： Android 圆角 鸿雁
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hongyan_love/article/details/12282701
版权

                               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.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="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>
4.代码就是这些了,最后贴图出来:
一亩水塘
关注
专栏目录
android 圆角效果
渺之一粟的专栏
02-13 7253
android 圆角效果 最近做一个效果，要一个上边两个角为圆角，下面两个角为直角的四边形白色背景； 如下图:   这里用到了shape属性中的corners 属性， api原文中是这样：     android:radius="integer"     android:topLeftRadius="integer"     android:topRightRadi
Android 实现圆角效果
ThePromonkeyOf_HeLuo的博客
05-03 556
标题标题 Android开发之自定义圆角矩形图片ImageView的实现 android中对Bitmap图片设置任意角为圆角 Android图片圆角 用简单的方法实现 -
<转>android 圆角效果
程序之路
11-30 108
最近做一个效果，要一个上边两个角为圆角，下面两个角为直角的四边形白色背景； 如下图: 这里用到了shape属性中的corners 属性， api原文中是这样： 单一设置android:radius="integer"时，表示四个角都为integer像素的圆角； 这里我开始的时候这样设置了四个属性 结果发现四个角无圆角效果，怎么找都找不到原因； 后来我想到了折中的办法，我这...
android圆角效果
最新发布
09-14
在Android中，要实现元素的圆角效果，可以使用`android:radius`属性或者通过`ShapeDrawable`、`RoundRectShape`或者`CardView`等组件。以下是几种常见的方法： 1. **XML布局文件**： - 使用`shape`标签创建一个...
Android布局实现圆角边框效果
01-05
首先，在res下面新建一个文件夹drawable，在drawable下面新建三个xml文件：shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml，分别是下面两个角是圆角边框，上面两个角是圆角边框，四个角全部是圆角...
Android编程实现带渐变效果的圆角矩形示例
08-29
"Android编程实现带渐变效果的圆角矩形示例" 在Android编程中，实现带渐变效果的圆角矩形是一种常见的界面布局技巧。本文将详细介绍如何使用Android编程实现带渐变效果的圆角矩形，并对其涉及的Android界面布局及...
Android 圆角的效果实现
weixin_30291791的博客
07-01 147
Android 自定义ImageView实现圆角图片昨天给学生布置作业，写微信首页，也就是聊天的界面，listView里的item中联系人的头像是圆角的，图形界面如下： 那么我就仔细研究了圆角的具体实现。那么首先，我想到了第一种实现方案：1、就是给ImageView定义shape.xml文件，然后用src指定组件背景。那么想到这个方案的时候，我首先了解了一下ImageView的src和backg...
Android强制控件圆角实现
08-07
Android圆角Tag控件的另类实现 http://blog.csdn.net/yutao52shi/article/details/46995591
Android图片圆角效果
weixin_33739646的博客
04-24 65
一般来说图片加圆角可以使用 Java 的方式来进行, 对图片略加处理即可, 但也可以使用纯XML+Nice-Patch图片来进行, 这样的速度会更快. 如果背景是纯色的情况下建议使用此方法. 原理则是利用frameLayout在图片上加一个遮盖图片, 从而达到圆角效果. 背景图片: 一张中间透明, 四个边角带有颜色的遮盖图片即可, 可以使用ps画一个带圆角的矩形, 然后反选并填充边角颜色即可...
【Android】多种方式实现圆角控件View、图片、背景、边框（最全）
full courage的博客
05-28 3364
button按钮、ImageView、自定义View等各种控件或者布局常常需要这样的样式：多种方式去实现圆角效果（圆角背景或者圆角边框）： 1. shape 2. ViewOutlineProvider 3. CardView 4. 第三方库 5. GradientDrawable和RoundedBitmapDrawable 6. 自定义Drawable
Android矩形圆角
zhang1223665986的博客
04-13 1930
paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.RED); paint.setStyle(Paint.Style.FILL); RectF oval=new RectF(); oval.bottom=150; oval.top=50; oval.right=150; oval.left=50; RectF ...
Android 圖片圓角
jiafeiwangyi的博客
06-04 203
&lt;com.gt.yhjy.widget.RoundRectImageView android:id="@+id/img_pic" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:layout_centerVertica...
android 圆角与倒影
小志地盘
01-10 685
我只是把代码下了，忘了在呢看到了，对不住作者了  主要包含了 放大缩小 圆角图片 和 倒影  Java代码   package com.lp.imageUI;      import android.graphics.Bitmap;   import android.graphics.Canvas;   import android.graphics.
安卓按钮圆角设计
weixin_57336451的博客
07-14 252
关于安卓按钮圆角设计，网上有很多方法，最多的就是用xml自定义背景让后再引用过去，这种方法有点繁琐且设计出来的按钮没有点击动画，其实安卓是提供了方法在按钮中设定圆角的，只需要一行代码；还有另一种方法就是直接用一种名叫Chip的控件，这种控件功能和按钮类似，甚至比按钮更强大。 第一种方法在按钮属性中添加如下代码 app:cornerRadius="20dp" 第二种方法： 使用Chip控件，加入如下代码 <com.google.android.material.chip.Chip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值