应用中卡片做花边效果实现

来源：互联网发布：五金手册软件编辑：程序博客网时间：2024/04/30 17:32

首先上效果图：
这里写图片描述

可以看出来左右为花边效果。当然，有需要的话可以上下左右都做成花边效果。

方法1：

在布局文件左右各放置一个view或者一个imageview用来花边的图片

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_marginLeft="@dimen/s4"    android:layout_marginRight="@dimen/s4"    android:background="@color/c10"    android:id="@+id/favour_item_root_rela">    <!-- 布局文件左侧锯齿效果 -->    <View        android:id="@+id/favour_item_bg_left"        android:layout_width="6dp"        android:layout_height="match_parent"        android:layout_alignParentLeft="true"        android:layout_alignBottom="@+id/content_rela"        android:layout_alignTop="@+id/content_rela"        />    <!-- 布局文件右侧锯齿效果 -->    <View        android:id="@+id/favour_item_bg_right"        android:layout_width="6dp"        android:layout_height="match_parent"        android:layout_alignParentRight="true"        android:layout_alignBottom="@+id/content_rela"        android:layout_alignTop="@+id/content_rela"        />    <!-- 布局文件内容区域 --></RelativeLayout>

在java代码中：

/**     * 初始化锯齿背景     * @param holder     */    private void initViewBg(ViewHolder holder) {        // 设置内容区域平铺的小圆角背景        Bitmap topBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.ic_border_cupons_left);        BitmapDrawable leftDrawable = new BitmapDrawable(mContext.getResources(), topBitmap);        leftDrawable.setTileModeY(Shader.TileMode.REPEAT);//这里是竖直方向的重复。当然还有setTileModeX，setTileModeXY        Bitmap bottomBitmap = BitmapFactory.decodeResource(mContext.getResources(), R.mipmap.ic_border_cupons);        BitmapDrawable rightDrawable = new BitmapDrawable(mContext.getResources(), bottomBitmap);        rightDrawable.setTileModeY(Shader.TileMode.REPEAT);        rightDrawable.setDither(true);        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {            holder.favourItemBgLeft.setBackground(leftDrawable);            holder.favourItemBgRight.setBackground(rightDrawable);        } else {            holder.favourItemBgLeft.setBackgroundDrawable(leftDrawable);            holder.favourItemBgRight.setBackgroundDrawable(rightDrawable);        }    }

方法2：

首先创建一个重复图片的bitmap在drawable目录下：

<?xml version="1.0" encoding="utf-8"?><bitmap xmlns:android="http://schemas.android.com/apk/res/android"        android:dither="true"        android:src="@mipmap/ic_bottomview_address"        android:tileMode="repeat"></bitmap>

在相应的布局文件中：

<ImageView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_marginLeft="@dimen/s2"            android:layout_marginRight="@dimen/s2"            android:background="@drawable/bottom_address" />

这里我们都是使用了布局中的 tileMode 属性，该属性有三个枚举常量，其中分别代表：
repeat:重复使用;
mirror:和repeat相似，不同的是每两行图以镜面倒映的方式显示
clamp: 保持原图不变
我们用到的就是repeat重复显示这里写图片描述图片来完成花边效果

我们来看看mirror的效果展示：
这里写图片描述

方法3：

当然我们还可以自定义view实现
该方法为转载：http://blog.csdn.net/yissan/article/details/51429281

public class CouponDisplayView extends LinearLayout {    private Paint mPaint;    /**     * 圆间距     */    private float gap = 8;    /**     * 半径     */    private float radius = 10;    /**     * 圆数量     */    private int circleNum;    private float remain;    public CouponDisplayView(Context context) {        super(context);    }    public CouponDisplayView(Context context, AttributeSet attrs) {        super(context, attrs);        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setDither(true);        mPaint.setColor(Color.WHITE);        mPaint.setStyle(Paint.Style.FILL);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        if (remain==0){            //计算不整除的剩余部分            remain = (int)(w-gap)%(2*radius+gap);        }        circleNum = (int) ((w-gap)/(2*radius+gap));    }    public CouponDisplayView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        for (int i=0;i<circleNum;i++){            float x = gap+radius+remain/2+((gap+radius*2)*i);            canvas.drawCircle(x,0,radius,mPaint);//画顶部花边            canvas.drawCircle(x,getHeight(),radius,mPaint);//画底部花边        }    }}

该自定义view 直接继承LinearLayout ，所以拥有所有LinearLayout 的属性，我们直接在xml中使用即可。

<?xml version="1.0" encoding="utf-8"?><FrameLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:paddingLeft="16dp"    android:paddingRight="16dp"    android:paddingTop="20dp">    <com.qiangyu.test.coupondisplayviewtest.view.CouponDisplayView        android:orientation="horizontal" android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="#7a7a7a"        android:padding="20dp">        <ImageView            android:layout_width="120dp"            android:layout_height="match_parent"            android:src="@mipmap/ic_launcher"            android:scaleType="centerCrop"/>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            android:paddingLeft="16dp">            <TextView                android:id="@+id/name"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="18dp"                android:text="美食劵"                />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="12dp"                android:padding="5dp"                android:text="编号:11223124123213131"                />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="12dp"                android:padding="5dp"                android:text="编号:11223124123213131"                />            <TextView                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:textSize="12dp"                android:paddingLeft="5dp"                android:paddingTop="5dp"                android:text="截止日期:2001-09-07"                />        </LinearLayout>    </com.qiangyu.test.coupondisplayviewtest.view.CouponDisplayView></FrameLayout>

效果为：
这里写图片描述

0 0