【问题标题】:How can I make curly edges on an imageview on android?如何在android上的imageview上制作卷边?
【发布时间】:2015-09-18 05:20:48
【问题描述】:

这是我必须达到的目标。

有谁知道我该如何解决这个问题?

是否可以在 XML 中完成?如果不是,我将如何缩放这样形状的图像?

【问题讨论】:

  • 不确定,但这可能是使用形状像这样的图像 png 完成的。您可以将卷曲图像放在另一个视图的顶部。
  • 你在哪里有 ImageView ?
  • 我正在考虑将背景设为 ImageView,因为在 ImageView 中处理图像比作为布局或 TextView 的背景要容易一些;
  • @Shivam 它不会在不同的屏幕尺寸上严重缩放吗?
  • 您可能必须自己制作这样的图像。创建一个 9patch 图像。如果你做对了,它会缩放不卷曲的部分。卷曲部分将保持不变

标签: android imageview android-imageview


【解决方案1】:

尝试使用我的课程。它允许您设置任何类型的背景并在图像上获得卷边效果:

/**
 * Created by GIGAMOLE on 01.07.2015.
 */
public class CurlyEdgesImageView extends ImageView {

    private int width;
    private int height;

    private ArrayList<FloatPoint> points = new ArrayList<>();

    private final Path curlyEdgesPath = new Path();
    private final Paint curlyEdgesPaint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
        }
    };

    private final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG) {
        {
            setDither(true);
            setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        }
    };

    private Canvas curlyEdgesCanvas;
    private Bitmap curlyEdgesBitmap;

    private Canvas canvas;
    private Bitmap bitmap;

    private float offset;
    private float curlyEdgesCount = 20f;

    public CurlyEdgesImageView(Context context) {
        super(context);
    }

    public CurlyEdgesImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CurlyEdgesImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        this.width = w;
        this.height = h;

        this.offset = this.width / (curlyEdgesCount * 2);

        bitmap = drawableToBitmap(getDrawable());
        canvas = new Canvas(bitmap);

        curlyEdgesBitmap = Bitmap.createBitmap(w, (int) offset, Bitmap.Config.ARGB_8888);
        curlyEdgesCanvas = new Canvas(curlyEdgesBitmap);

        drawCurlyEdges();

        canvas.drawBitmap(curlyEdgesBitmap,
                0,
                getHeight() - (int) offset,
                paint
        );

        super.onSizeChanged(w, h, oldw, oldh);
    }

    private void drawCurlyEdges() {
        final float innerOffset = curlyEdgesCount / offset;

        int counterY = 1;
        for (float i = -offset; i < this.width + offset; i += offset) {
            if (counterY++ % 2 == 0) {
                points.add(new FloatPoint(i + innerOffset, offset));
            } else {
                points.add(new FloatPoint(i + innerOffset, 0));
            }
        }

        points.add(new FloatPoint(this.width + offset, (int) offset * 2));
        points.add(new FloatPoint(-offset, (int) offset * 2));

        if (points.size() > 1) {
            FloatPoint prevPoint = null;
            for (int i = 0; i < points.size(); i++) {
                FloatPoint point = points.get(i);

                if (i == 0) {
                    curlyEdgesPath.moveTo(point.x, point.y);
                } else {
                    float midX = (prevPoint.x + point.x) / 2f;
                    float midY = (prevPoint.y + point.y) / 2f;

                    if (i == 1) {
                        curlyEdgesPath.lineTo(midX, midY);
                    } else {
                        curlyEdgesPath.quadTo(prevPoint.x, prevPoint.y, midX, midY);
                    }
                }
                prevPoint = point;
            }
            curlyEdgesPath.lineTo(prevPoint.x, prevPoint.y);
        }

        curlyEdgesCanvas.drawPath(curlyEdgesPath, curlyEdgesPaint);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(bitmap, 0, 0, null);
    }

    private Bitmap drawableToBitmap(final Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            return convertToMutable(getContext(), ((BitmapDrawable) drawable.mutate()).getBitmap());
        }

        final Bitmap bitmap = Bitmap.createBitmap(this.width, this.height, Bitmap.Config.ARGB_8888);
        final Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return convertToMutable(getContext(), bitmap);
    }

    @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH)
    public static Bitmap convertToMutable(final Context context, final Bitmap imgIn) {
        final int width = imgIn.getWidth(), height = imgIn.getHeight();
        final Bitmap.Config type = imgIn.getConfig();

        File outputFile = null;
        final File outputDir = context.getCacheDir();
        try {
            outputFile = File.createTempFile(Long.toString(System.currentTimeMillis()), null, outputDir);
            outputFile.deleteOnExit();

            final RandomAccessFile randomAccessFile = new RandomAccessFile(outputFile, "rw");
            final FileChannel channel = randomAccessFile.getChannel();
            final MappedByteBuffer map = channel.map(FileChannel.MapMode.READ_WRITE, 0, imgIn.getRowBytes() * height);

            imgIn.copyPixelsToBuffer(map);
            imgIn.recycle();

            final Bitmap result = Bitmap.createBitmap(width, height, type);

            map.position(0);
            result.copyPixelsFromBuffer(map);

            channel.close();
            randomAccessFile.close();

            outputFile.delete();
            return result;
        } catch (final Exception e) {
        } finally {
            if (outputFile != null)
                outputFile.delete();
        }
        return null;
    }

    private class FloatPoint {
        public float x;
        public float y;

        private FloatPoint(float x, float y) {
            this.x = x;
            this.y = y;
        }
    }
}

【讨论】:

  • @Gigamole 能够看到图像的卷曲效果,但之后无法使用 glide 库 android 看到加载的图像
【解决方案2】:
  1. 创建一个波片为wave_pattern_image
  2. 用它制作一个可重复的drawable
  3. 将此可绘制对象设置为视图的背景

drawable/tilebg.xml

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-13
    相关资源
    最近更新 更多