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

首先上效果图：

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

方法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.youkuaiyun.com/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>

效果为：