Cómo rellenar la imagen dentro de ImageView por la costumbre de la izquierda y la coordenada superior | Androide

Actualización: he añadido una aplicación de ejemplo al final de este artículo para ilustrar este concepto.

Segunda actualización: Se agregó un código para probar la aplicación para acomodar la escala xy

He cambiado la aplicación de ejemplo para incluir el código que se ajuste a la imagen, ya sea más pequeño o más grande que el ImageView , al tamaño de la vista respetando la relación de aspecto. Esto puede no ser exactamente lo que usted está buscando, pero debe conseguirle en el estadio de béisbol. Éste es código de la muestra, así que hay seguramente otras cosas a acomodar en una aplicación real. Por ejemplo, xScale y yScale podrían ser negativos en casos extremos. No estoy seguro de lo que sucede si lo hacen, pero un accidente es probablemente el resultado, por lo que un control de límites está en orden.

Si entiendo lo que está intentando hacer, desea que un ImageView de tamaño fijo muestre diferentes partes de una imagen más grande estableciendo coordenadas personalizadas (x, y) de la imagen para situarse en la coordenada (0,0) del ImageView. Esto es básicamente un recorte de la imagen a través de los bordes superior e izquierdo.

Probablemente hay muchas formas diferentes de hacer esto y cuál funciona mejor para usted dependerá de sus necesidades exactas, pero aquí hay una manera:

Utilice lo siguiente, o alguna variación, en su código:

 float xOffset = -100; float yOffset = -100; ImageView imageView = (ImageView) findViewById(R.id.shiftedView); Matrix matrix = new Matrix(); matrix.setTranslate(xOffset, yOffset); imageView.setImageMatrix(matrix); 

Configure su ImageView algo como lo siguiente. La clave aquí es android:scaleType="matrix"

 <ImageView android:id="@+id/shiftedView" android:layout_width="200dp" android:layout_height="match_parent" android:background="#FF00CCCC" android:scaleType="matrix" android:src="@drawable/image" /> 

Espero que esto te ayude.

Ejemplo de aplicación

Aquí está una maqueta rápida de este concepto. Esta aplicación está compuesta por la actividad principal y un diseño. Tendrá que proporcionar una imagen que sea la fuente para el ImageView para ver cómo funciona.

Los siete botones cambiarán la imagen a la izquierda, derecha, arriba y abajo en un clic dentro del diseño de ImageView . Los botones "Fit X" y "Fit Y" escalarán la imagen a la dimensión correspondiente disponible en ImageView . El botón "Reset" restablecerá la imagen a la configuración predeterminada original de ImageView .

MainActivity.java

 package com.example.imageshift; import android.graphics.Matrix; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageView; public class MainActivity extends AppCompatActivity implements View.OnClickListener { ImageView imageView; float xOffset = 0f; float yOffset = 0f; float xScale = 1.0f; float yScale = 1.0f; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); imageView = (ImageView) findViewById(R.id.shiftedView); findViewById(R.id.shiftUp).setOnClickListener(this); findViewById(R.id.shiftDown).setOnClickListener(this); findViewById(R.id.shiftLeft).setOnClickListener(this); findViewById(R.id.shiftRight).setOnClickListener(this); findViewById(R.id.shiftReset).setOnClickListener(this); findViewById(R.id.fitX).setOnClickListener(this); findViewById(R.id.fitY).setOnClickListener(this); } public void doMatrixTransformations() { Matrix matrix = new Matrix(); matrix.setTranslate(xOffset, yOffset); matrix.postScale(xScale, yScale); imageView.setImageMatrix(matrix); } @Override public void onClick(View view) { final int shiftAmount = 50; switch (view.getId()) { case R.id.shiftUp: yOffset -= shiftAmount; break; case R.id.shiftDown: yOffset += shiftAmount; break; case R.id.shiftLeft: xOffset -= shiftAmount; break; case R.id.shiftRight: xOffset += shiftAmount; break; case R.id.fitX: xScale = (float) imageView.getWidth() / ( (float) imageView.getDrawable().getIntrinsicWidth() + xOffset); yScale = xScale; break; case R.id.fitY: yScale = (float) imageView.getHeight() / ((float) imageView.getDrawable().getIntrinsicHeight() + yOffset); xScale = yScale; break; case R.id.shiftReset: xOffset = 0; yOffset = 0; xScale = 1.0f; yScale = 1.0f; break; } doMatrixTransformations(); } } 

Activity_main.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.imageshift.MainActivity"> <ImageView android:id="@+id/shiftedView" android:layout_width="200dp" android:layout_height="match_parent" android:layout_marginLeft="0dp" android:layout_marginTop="0dp" android:padding="2dp" android:scaleType="matrix" android:src="@drawable/image" /> <Button android:id="@+id/shiftUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Up" /> <Button android:id="@+id/shiftDown" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/shiftUp" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Down" /> <Button android:id="@+id/shiftLeft" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/shiftDown" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Left" /> <Button android:id="@+id/shiftRight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/shiftLeft" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Right" /> <Button android:id="@+id/fitX" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/shiftRight" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Fit X" /> <Button android:id="@+id/fitY" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/fitX" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Fit Y" /> <Button android:id="@+id/shiftReset" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/fitY" android:layout_marginLeft="20dp" android:layout_toRightOf="@id/shiftedView" android:text="Reset" /> </RelativeLayout> 

Parece que quieres tomar dos imágenes y crear una nueva imagen basada en alguna combinación de las dos imágenes.

Hay muchas maneras diferentes de hacer esto. Las formas más sencillas implican el uso de mapas de bits. Hay dos enfoques principales que puedo ver que son sencillos para lograr esto.

1. Coloque las vistas de su imagen como desee dentro de algún padre común y cree un mapa de bits de ese padre para utilizarlo como imagen resultante.

2. Cree un mapa de bits usted mismo dibujando las imágenes de sus vistas de imagen basándose en sus propios cálculos que deberían imitar la estructura de diseño que tiene.

Puesto que ya pareces estar mostrando las dos imágenes en la pantalla de la forma en que quieres que se vea la imagen resultante, la primera va a ser la más directa y no requerirá que vuelvas a hacer los cálculos que tus diseños y vistas de imagen son Ya está realizando.

Lo que vamos a hacer es aprovechar el hecho de que cada vista se dibujará en un lienzo y al final del día sólo se traduce en una imagen en sí. Para obtener un mapa de bits de su diseño padre, simplemente puede crear un mapa de bits del mismo tamaño y, a continuación, indicar a su diseño padre que se dibuje en un lienzo del mapa de bits, de la siguiente manera:

 private Bitmap getCombinedBitmap(View parentView) { Bitmap result = Bitmap.createBitmap(parentView.getWidth(), parentView.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(result); parentView.draw(canvas); return result; } 

Sin embargo, si desea no estar limitado por lo que el diseño principal esté dibujando en la pantalla, puede crear el mapa de bits que desea dibujando sus imágenes en un lienzo similar. Aquí he implementado el primer diseño de su pregunta:

 private Bitmap getCombinedBitmap(Bitmap a, Bitmap b) { int aWidth = a.getWidth() / 2; int bWidth = b.getWidth() / 2; int resultHeight = a.getHeight() < b.getHeight()? a.getHeight() : b.getHeight(); Bitmap result = new Bitmap(aWidth + bWidth, resultHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(result); Rect aRect = new Rect(0, 0, aWidth, resultHeight); Rect aResultRect = new Rect(0, 0, aWidth, resultHeight); canvas.drawBitmap(a, aRect, aResultRect); Rect bRect = new Rect(0, 0, bWidth, resultHeight); Rect bResultRect = new Rect(bWidth, 0, bWidth, resultHeight); canvas.drawBitmap(b, bRect, bResultRect); return result; } 

En este ejemplo opté por un código más claro en lugar de un código más optimizado. Usted puede optimizar esto por no crear tantos Rects, etc y por lo general simplificar sus cálculos. Pero puede utilizar este enfoque para recrear cualquiera de sus diseños en un único mapa de bits, sólo tendría que cambiar los cálculos.

Lo que estamos haciendo es crear primero un mapa de bits que tiene un ancho de la mitad de la primera imagen más la mitad de la segunda imagen, y la altura de la más pequeña de las dos imágenes. A continuación, tomar una sección de la primera imagen que es la mitad izquierda más ancho en sentido y tan alto como el resultado de la altura en sentido y lo dibujamos en nuestro resultado. A continuación, hacemos lo mismo con la segunda imagen, excepto que esta vez la sección es la mitad de la mitad de la derecha más sabio.

Espero que esto ayude.

Tengo que admitir que no estoy 100% seguro de entender lo que quieres hacer. Si entiendo correctamente, lo que necesitas es poner un ImageView dentro de otro elemento (muestro un ejemplo con FrameLayout pero también puedes usar LinearLayout o RelativeLayout ). A continuación, establezca el relleno en el elemento exterior.

 <!-- we put the ImageView inside a Frame so that we can change --> <!-- the padding size to create borders --> <FrameLayout android:layout_width="140dp" android:layout_height="140dp" android:id="@+id/image_frame" > <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/image_view" /> </FrameLayout> 

Entonces en el código: (use frame vez de img )

 FrameLayout frame = (FrameLayout)itemLayout.findViewById(R.id.image_frame); frame.setPadding((int) x, (int) y, 0, 0); 

Si entiendo lo que quieres hacer, esto lo hará.

Puedes hacerlo fácilmente fusionando BitMaps.

He creado un proyecto de prueba que carga 2 imágenes bitmaps con Glide y luego las fusiona en un BitMap utilizando lienzo y luego se establece en cualquier ImageView .

También puede guardar la imagen en un archivo en la tarjeta SD para evitar grandes cálculos cada vez. Se ve así (Gif – https://github.com/hiteshsahu/Android-Merge-Bitmaps-With-Glide/blob/master/Art/demo.gif ): –

He utilizado una sola vista de la imagen como el fondo de mi disposición del capítulo y he utilizado la barra de la búsqueda para cambiar la posición relativa del cartel Raees de la película. Puede cambiar las coordenadas de inicio X e Y de cualquiera de los mapas de bits utilizando esos barras de búsqueda.

Como lo hice

Este es el fragmento de código de cómo lo hice. Se explica por sí mismo

  Glide.with(context) .load(R.drawable.raees) .asBitmap() .into(new SimpleTarget<Bitmap>() { @Override public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) { // Add Bitmap in Array and load next bitmap arts[0] = resource; Glide.with(context) .load(R.drawable.raees_edited) .asBitmap() .into(new SimpleTarget<Bitmap>() { @Override public void onResourceReady(Bitmap resource1, GlideAnimation<? super Bitmap> glideAnimation) { // Both Bitmap loaded do the Merging arts[1] = resource1; //Set seekbars Max satrtX1SeekBar.setMax(arts[0].getWidth()); satrtX2SeekBar.setMax(arts[1].getWidth()); satrtY1SeekBar.setMax(arts[0].getHeight()); satrtY2SeekBar.setMax(arts[1].getHeight()); Bitmap bmOverlay = Bitmap.createBitmap(arts[0].getWidth(), arts[0].getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bmOverlay); if (shouldDrawLeftHalf) { // Rect(left, top, right, bottom) canvas.drawBitmap(arts[0], new Rect(0, 0, arts[0].getWidth() / 2, arts[0].getHeight()), new Rect(0, 0, arts[0].getWidth() / 2, arts[0].getHeight()), null); } else { canvas.drawBitmap(arts[0], startX1, startY1, null); } if (shouldDrawRightHalf) { // Rect(left, top, right, bottom) canvas.drawBitmap(arts[1], new Rect(arts[1].getWidth() / 2, 0, arts[0].getWidth(), arts[1].getHeight()), new Rect(arts[1].getWidth() / 2, 0, arts[1].getWidth(), arts[1].getHeight()), null); } else { canvas.drawBitmap(arts[1], startX2, startY2, null); } background.setImageBitmap(bmOverlay); // saveToDisk("Test", bmOverlay); } }); } }); 

Puedes descargar todo el proyecto desde My GitHub

https://github.com/hiteshsahu/Android-Merge-Bitmaps-With-Glide

Finalmente he encontrado la solución de mi pregunta –

Gracias por toda la ayuda proporcionada.

Así que, básicamente, tengo la altura de la vista , el ancho de la vista , la coordenada superior , la coordenada izquierda , la altura de la imagen original y el ancho de la imagen original .

1. Tengo que calcular el factor de aspecto con respecto a la vista y la imagen .

Aquí está la fórmula para eso –

  float newAspectFactor = 0; if (viewHeight > viewWidth) { //Aspect factor for Height newAspectFactor = viewHeight / bean.getPostMedia().get(i).getImg_height(); } else { //Aspect factor for Width newAspectFactor = viewWidth / bean.getPostMedia().get(i).getImg_width(); } float imgNewHeight = newAspectFactor * imageHeight; float imgNewWidth = newAspectFactor * imageWidth; Logger.logsError(TAG, " Image New Height : " + imgNewHeight); Logger.logsError(TAG, " Image New Width : " + imgNewWidth); if (imgNewHeight < viewHeight) { newAspectFactor = viewHeight / bean.getPostMedia().get(i).getImg_height(); } else if (imgNewWidth < viewWidth) { newAspectFactor = viewWidth / bean.getPostMedia().get(i).getImg_width(); } 

2. Coordenadas superior e izquierda.

     float x = 42.0; float y = 0.0; 

3. La magia comienza desde aquí.

     Matrix m = img.getImageMatrix(); RectF drawableRect = new RectF(x, y, ((x * newAspectFactor) + viewWidth) / newAspectFactor, imageHeight); RectF viewRect = new RectF(0, 0, viewWidth, viewHeight); m.setRectToRect(drawableRect, viewRect, Matrix.ScaleToFit.FILL); img.setImageMatrix(m); img.setScaleType(ImageView.ScaleType.MATRIX); imageLoaderNew.displayImage("IMAGE URL", img, optionsPostImg);