2015-07-01 11 views
6

enter image description hereCome posso creare bordi ricci su una visione di immagini su Android?

Questo è ciò che devo raggiungere.

Qualcuno sa come posso avvicinarmi a questo?

È possibile eseguire in XML? In caso contrario, come ridimensionare un'immagine che ha la forma di questo?

+0

Non sono sicuro, ma probabilmente questo fatto utilizzando un'immagine png, che aveva la forma di questo. È possibile posizionare l'immagine riccia sopra l'altra vista. –

+0

dove hai un ImageView? – pskink

+0

Stavo pensando di rendere lo sfondo un ImageView, dal momento che è un po 'più semplice gestire le immagini in un ImageView, piuttosto che come sfondo di un layout o di TextView; – kimv

risposta

3

Prova ad usare la mia classe. Esso consente di impostare qualsiasi tipo di sfondo e ottenere l'effetto bordi ricci sulla vostra immagine:

/** 
* 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; 
     } 
    } 
} 

enter image description here

+0

Grazie! Class ha funzionato perfettamente al primo tentativo! – kimv

2
  1. creare una fetta onda come wave_pattern_image
  2. fare un disegnabile con esso in modo tale che si ripete
  3. insieme questo drawable come sfondo della vista

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" /> 
+0

grazie! ha funzionato! – kimv