2013-08-07 8 views
21

Al momento sto lavorando su un browser di file. Tutto funziona perfettamente con un'eccezione: Se l'utente fa clic su un'immagine (jpg, png, bmp, ..), voglio che l'immagine venga visualizzata in una finestra di dialogo o in un popup che ha le stesse dimensioni dell'immagine - quindi che non ci sono confini. I file immagine si trovano sulla sdcard.Finestra di dialogo Immagine Android/Popup delle stesse dimensioni dell'immagine e senza bordo

Ecco quello che ho finora:

BitmapDrawable bitmap = new BitmapDrawable(context.getResources(), TARGET_PATH); 

AlertDialog.Builder imageDialog = new AlertDialog.Builder(context); 
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

View layout = inflater.inflate(R.layout.thumbnail, null); 
ImageView image = (ImageView) layout.findViewById(R.id.thumbnail_IMAGEVIEW); 
image.setImageDrawable(bitmap); 
imageDialog.setView(layout); 
imageDialog.create(); 
imageDialog.show(); 

Il file XML:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <ImageView 
     android:id="@+id/thumbnail_IMAGEVIEW" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:contentDescription="@string/icon_DESCRIPTION" /> 

</RelativeLayout> 

Ecco l'output:

Fail Output

Ci sono bordi brutti ai bordi delle immagini - Non voglio che vengano visualizzati. Ho provato un sacco di cose ed esempi elencati in google, ecc. - non funzionava ancora nulla.

L'opzione migliore sarà quella di rendere la finestra di dialogo/la vista dietro l'immagine, della stessa dimensione dell'immagine. Un altro modo potrebbe essere quello di impostare lo sfondo dietro l'immagine trasparente.

Come si ottiene una soluzione? Mi piacerebbe fare in modo che lo sfondo abbia le stesse dimensioni dell'immagine, quindi non è rimasta alcuna parte "invisibile", ma andrò bene anche con l'opzione trasparente.


Soluzione:

// Get screen size 
Display display = context.getWindowManager().getDefaultDisplay(); 
Point size = new Point(); 
display.getSize(size); 
int screenWidth = size.x; 
int screenHeight = size.y; 

// Get target image size 
Bitmap bitmap = BitmapFactory.decodeFile(TARGET); 
int bitmapHeight = bitmap.getHeight(); 
int bitmapWidth = bitmap.getWidth(); 

// Scale the image down to fit perfectly into the screen 
// The value (250 in this case) must be adjusted for phone/tables displays 
while(bitmapHeight > (screenHeight - 250) || bitmapWidth > (screenWidth - 250)) { 
    bitmapHeight = bitmapHeight/2; 
    bitmapWidth = bitmapWidth/2; 
} 

// Create resized bitmap image 
BitmapDrawable resizedBitmap = new BitmapDrawable(context.getResources(), Bitmap.createScaledBitmap(bitmap, bitmapWidth, bitmapHeight, false)); 

// Create dialog 
Dialog dialog = new Dialog(context); 
dialog.requestWindowFeature(Window.FEATURE_NO_TITLE); 
dialog.setContentView(R.layout.thumbnail); 

ImageView image = (ImageView) dialog.findViewById(R.id.imageview); 

// !!! Do here setBackground() instead of setImageDrawable() !!! // 
image.setBackground(resizedBitmap); 

// Without this line there is a very small border around the image (1px) 
// In my opinion it looks much better without it, so the choice is up to you. 
dialog.getWindow().setBackgroundDrawable(null); 

// Show the dialog 
dialog.show(); 

file XML:

<?xml version="1.0" encoding="utf-8"?> 
<ImageView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/imageview" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

</ImageView> 

Risultato finale:

Output

+0

Dopo ore di tentativi ed errori ho avuto finalmente a lavorare. Aggiungo la soluzione a questo primo post. –

+5

Ehi, le tue soluzioni mi sono piaciute così tanto che l'ho astratto in un componente facile da usare https://github.com/juliomarcos/ImageViewPopUpHelper ImageViewPopUpHelper.enablePopUpOnClick (getActivity(), targetImageView); –

+0

È fantastico - grazie amico;) –

risposta

0

Utilizzare FrameLayout come genitore anziché RelativeLayout e impostato su wrap_content e 0 margini.

Prova:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:tools="http://schemas.android.com/tools" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:paddingLeft="@dimen/activity_horizontal_margin" 
android:paddingRight="@dimen/activity_horizontal_margin" 
android:paddingTop="@dimen/activity_vertical_margin" 
android:paddingBottom="@dimen/activity_vertical_margin" 
tools:context=".MainActivity" 
android:background="@color/background"> 

<FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/frameLayout" 
     android:background="#b2ff7c"> 

    <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/imageView" 
      android:src="@drawable/ic_launcher"/> 
</FrameLayout> 

</RelativeLayout> 

Il risultato dovrebbe essere un fondo della stessa dimensione come l'ImageView.

Se questo funziona. Provate a modificare questo in un tema personalizzato:

<style name="Widget.ImageWell"> 
    <item name="android:background">@android:drawable/panel_picture_frame_background</item> 
    </style> 
+0

Non ha funzionato per me. Il risultato è lo stesso che è con il mio pice di codice. Ci sono ancora bordi ai bordi della vista. –

1

Cambia la tua ImageView da questo:

<ImageView 
     android:id="@+id/thumbnail_IMAGEVIEW" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:contentDescription="@string/icon_DESCRIPTION" /> 

A tal:

<ImageView 
     android:id="@+id/thumbnail_IMAGEVIEW" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentTop="true" 
     android:adjustViewBounds="true" <!-- Here is the thing --> 
     android:contentDescription="@string/icon_DESCRIPTION" /> 

Spero che questo aiuti.

+0

Questo non ha cambiato nulla. Non funziona per me. –

+0

OK se non ha funzionato allora penso che dovresti creare il tuo 'Dialogo' e applicare il layout lì. Perché stai usando il 'AlertDialog' di Android, quindi non puoi cambiare il layout. Saluti. – user2652394

+0

Sì, mi è piaciuto che tu lo suggerissi ora - controlla il mio primo post "Soluzione". Ma grazie per il tuo aiuto però;) –

1

è possibile effettuare una finestra di dialogo personalizzata per mostrare le immagini, fare un layout per gonfiare in setContentView di dialogo, prendere un layout lineare con larghezza e altezza contenuti avvolgere e imageview con in essa con la proprietà scala fitxy.

0

Hai provato a impostare setType in ImageView?

<ImageView ... android:scaleType="fitXY" ... />

0

Aggiungere codice di linea singola sotto la vostra immagine vista di inizializzazione nella vostra attività e sarà risolvere il problema ..

image.setScaleType(ImageView.ScaleType.FIT_XY);