Repetición de mapa de bits + esquinas redondeadas

Como entiendo el objetivo: tener una imagen de fondo con baldosas curvas curvas.

No es muy pixel perfecto, pero es lo más cerca que puedo conseguir.

Primero, aquí hay algunos diseños que estoy usando para dibujar ese botón

The_button.xml

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/wrapper_main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:background="@drawable/bg_curved_tiled" android:padding="20dp" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="Some Text" /> </FrameLayout> 

Y eso es usar esto como su fondo

Bg_curved_tiled.xml

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@id/layer_needs_rounding"> <bitmap android:src="@drawable/patch" android:tileMode="repeat" /> </item> <item> <shape android:shape="rectangle" android:useLevel="false" > <stroke android:width="3dp" android:color="#666666" /> <solid android:color="@null" /> <corners android:bottomLeftRadius="@dimen/radius_corner_default" android:bottomRightRadius="@dimen/radius_corner_default" android:radius="@dimen/radius_corner_default" android:topLeftRadius="@dimen/radius_corner_default" android:topRightRadius="@dimen/radius_corner_default" /> </shape> </item> </layer-list> 

En este punto, usted tiene una imagen que se parece a esto

Como se puede ver, el mapa de bits de mosaico sobresale en las esquinas más allá de la forma curvada que se superpone en la parte superior de la misma.

Así que ahora usted necesita una función que rodea las esquinas de un mapa de bits … tengo este en algún otro lugar en stackoverflow

  public static Bitmap createRoundedCornerBitmap(Context context, Bitmap input, float roundPx, boolean squareTL, boolean squareTR, boolean squareBR, boolean squareBL) { if (input == null) { return null; } final int w = input.getWidth(), h = input.getHeight(); Bitmap output = Bitmap.createBitmap(w, h, Config.ARGB_8888); Canvas canvas = new Canvas(output); final int color = 0xff424242; final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, w, h); final RectF rectF = new RectF(rect); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawRoundRect(rectF, roundPx, roundPx, paint); // draw rectangles over the corners we want to be square if (squareTL) { canvas.drawRect(0, 0, w / 2, h / 2, paint); } if (squareTR) { canvas.drawRect(w / 2, 0, w, h / 2, paint); } if (squareBL) { canvas.drawRect(0, h / 2, w / 2, h, paint); } if (squareBR) { canvas.drawRect(w / 2, h / 2, w, h, paint); } paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(input, 0, 0, paint); return output; } 

¡Casi allí! Odio esta parte – no he encontrado ninguna manera mejor de conseguir el objeto del mapa de bits que tiene el mapa de bits en mosaico real en él. Por ejemplo, BitmapDrawable.getBitmap sólo le da el mapa de bits de parche individual, no el mosaico repetido patch canvas … bummer. Así que en su lugar, estoy recibiendo la caché de dibujo de la vista. Usted necesita cerciorarse de que la visión se haya inicializado totalmente primero (la altura y el ancho se han calculado y embaldosado apropiadamente), así que post a la visión y hacer el proceso allí.

 private void shaveOffCorners(final ViewGroup view) { view.post(new Runnable() { @Override public void run() { // make all child views invisible before scraping the drawing cache SparseIntArray viewStates = new SparseIntArray(); for(int index = 0; index < view.getChildCount(); ++index) { View child = view.getChildAt(index); viewStates.put(index, child.getVisibility()); child.setVisibility(View.INVISIBLE); } view.buildDrawingCache(); // this is the exact bitmap that is currently rendered to screen. hence, we wanted to // hide all the children so that they don't permanently become part of the background final Bitmap rounded = view.getDrawingCache(); // restore actual visibility states after getting the drawing cache for(int index = 0; index < view.getChildCount(); ++index) { View child = view.getChildAt(index); child.setVisibility(viewStates.get(index)); } view.setBackgroundDrawable(new BitmapDrawable( getResources(), MyImageUtil.createRoundedCornerBitmap( view.getContext(), rounded, getResources().getDimensionPixelSize(R.dimen.radius_corner_default), false, true, true, false))); } }); } 

Y así lo hice, espero que ayude!

Si alguien conoce una forma menos horrible de lograr esto, por favor comparta. También si alguien sabe cómo obtener el mapa de bits de mosaico que no sea el raspado de la caché de dibujo, sería útil también – todo el ocultamiento y la restauración de las vistas de los niños es un poco janky.

Encontré este post de Romain Guy que es una manera mucho más fácil de redondear esquinas en un mapa de bits de mosaico. Aquí está la respuesta corta:

 class CurvedAndTiled extends Drawable { private final float mCornerRadius; private final RectF mRect = new RectF(); private final BitmapShader mBitmapShader; private final Paint mTilePaint; CurvedAndTiled( Bitmap bitmap, float cornerRadius) { mCornerRadius = cornerRadius; mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT); mTilePaint = new Paint(); mTilePaint.setAntiAlias(true); mTilePaint.setShader(mBitmapShader); } @Override protected void onBoundsChange(Rect bounds) { super.onBoundsChange(bounds); mRect.set(0, 0, bounds.width(), bounds.height()); } @Override public void draw(Canvas canvas) { canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mTilePaint); } @Override public int getOpacity() { return PixelFormat.TRANSLUCENT; } @Override public void setAlpha(int alpha) { mTilePaint.setAlpha(alpha); } @Override public void setColorFilter(ColorFilter cf) { mTilePaint.setColorFilter(cf); } } 

Usted acaba de establecer el fondo de su vista es dibujable para ser uno de estos chicos y su bien para ir.