Autore Topic: ImageView con angoli arrotondati  (Letto 856 volte)

Offline iAndroidiano

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    z3 Compact
  • Sistema operativo:
    Windows 7
ImageView con angoli arrotondati
« il: 13 Agosto 2013, 15:46:01 CEST »
0
Ciao a tutti! Eccomi a chiedere il vostro aiuto per la prima volta, sperando possiate darmi una mano :)
Ho bisogno di "manipolare" un'immagine che prelevo dal web, cercando di arrotondarne gli angoli.

Prelevo correttamente l'immagine, ma non ho idea di come arrotondarne gli angoli.
Ho un linearlayout che mi fa da contenitore, e all'interno ci piazzo l'imageview.
L'immagine di base è rettangolare, ma con scaletype="center" riesco a renderla quadrata come il mio linearlayout.
Adesso però dovrei riuscire a fare quanto scritto sopra, ma non riesco a capire come.

Nell'allegato c'è una immagine che spero possa farvi capire quello che ho intenzione di fare.

Questo il pezzo di codice:

Codice (XML): [Seleziona]
<RelativeLayout
       android:id="@+id/relativeLayout1"
       android:layout_width="191dp"
       android:layout_height="191dp"
       android:layout_below="@+id/share_id"
       android:layout_centerHorizontal="true"
       android:background="@drawable/image_back" >

        <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:background="@null" >

            <ImageView
               android:id="@+id/autor_over"
               android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="center"
               android:padding="9pt"
               android:src="@drawable/image_over" />
        </LinearLayout>
    </RelativeLayout>

Io in realtà metto tutto dentro un relative layout perchè ho altri elementi intorno.

Offline elfo83

  • Utente normale
  • ***
  • Post: 287
  • Respect: +23
    • Mostra profilo
  • Sistema operativo:
    Mac OS 10.8.2
Re:ImageView con angoli arrotondati
« Risposta #1 il: 13 Agosto 2013, 16:42:04 CEST »
+1
prova questo metodo per arrotondare le bitmap:

Codice (Java): [Seleziona]
public Bitmap getRoundedCornerBitmap(Bitmap bitmap,int w,int h) {
           if(bitmap==null)
                   return null;
           if(w>maxRoundWidth || h>maxRoundWidth)
                   return bitmap;
           if(w<1 || h<1)
                   return bitmap;
         
           /*was Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARG_8888);*/
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Config.ARGB_4444);
        Canvas canvas = new Canvas(output);
       


        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(0,0,bitmap.getWidth(), bitmap.getHeight());
        final float roundPx = 7;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 255, 255,255);
        paint.setColor(0xff424242);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rectF, paint);
       
       
        paint.setStyle(Style.STROKE);
        paint.setColor(Color.WHITE);
       

        paint.setStrokeWidth(2);
        paint.setAntiAlias(true);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
       
        return output;             
    }


assegna alla variabile di tipo intero maxRoundWidth un valore di 150 ad esempio e vedi cosa succede.

Offline iAndroidiano

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    z3 Compact
  • Sistema operativo:
    Windows 7
Re:ImageView con angoli arrotondati
« Risposta #2 il: 14 Agosto 2013, 11:44:30 CEST »
0
Ti ringrazio elfo83, ma non sembra voler funzionare :(

Sto provando a farlo con una shape, inserendola come background dell'image view.
Effettivamente l'imageview mi esce con gli angoli arrotondati, ma l'immagine bitmap che vado a settargli dinamicamente mi si sovrappone senza inserirsi dentro l'imageview, sembra un elemento a parte.

Offline elfo83

  • Utente normale
  • ***
  • Post: 287
  • Respect: +23
    • Mostra profilo
  • Sistema operativo:
    Mac OS 10.8.2
Re:ImageView con angoli arrotondati
« Risposta #3 il: 15 Agosto 2013, 03:48:45 CEST »
0
Non so se ho capito bene ma prova ad esempio a dettare come proprietà dell'imageview scaletype=centerInside o centerCrop, vedi se hai lo stesso problema.

Offline iAndroidiano

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    z3 Compact
  • Sistema operativo:
    Windows 7
Re:ImageView con angoli arrotondati
« Risposta #4 il: 15 Agosto 2013, 11:58:58 CEST »
0
L'ho fatta brutta, ma mi sembra di aver capito che con android ogni tanto sia necessario.
Ho usato un'altra imageview come maschera, posizionandola sopra all'immagine che voglio con i bordi arrotondati.
Non è quello che volevo fare all'inizio, ma l'effetto è lo stesso e non ho dovuto aggiungere una riga di codice :D

Offline elfo83

  • Utente normale
  • ***
  • Post: 287
  • Respect: +23
    • Mostra profilo
  • Sistema operativo:
    Mac OS 10.8.2
Re:ImageView con angoli arrotondati
« Risposta #5 il: 15 Agosto 2013, 18:54:14 CEST »
0
Strana come cosa, se vuoi posta il codice java e l'xml e magari anche uno screenshoot per curiosità..

Offline iAndroidiano

  • Nuovo arrivato
  • *
  • Post: 14
  • Respect: 0
    • Mostra profilo
  • Dispositivo Android:
    z3 Compact
  • Sistema operativo:
    Windows 7
Re:ImageView con angoli arrotondati
« Risposta #6 il: 15 Agosto 2013, 21:25:42 CEST »
0
Eccolo:

Codice (XML): [Seleziona]
 <RelativeLayout
       android:id="@+id/relativeLayout1"
       android:layout_width="191dp"
       android:layout_height="191dp"
       android:layout_below="@+id/share_id"
       android:layout_centerHorizontal="true" >

        <ImageView
           android:id="@+id/autor_over"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:layout_centerHorizontal="true"
           android:layout_centerVertical="true"
           android:layout_margin="5.5pt"
           android:scaleType="center"
           android:src="@drawable/image_autore_default" />

        <ImageView
           android:id="@+id/image_back"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent"
           android:layout_centerHorizontal="true"
           android:layout_centerVertical="true"
           android:layout_margin="2.5pt"
           android:background="@drawable/bordi_tondi"
           android:src="@drawable/image_autore_back" />
    </RelativeLayout>

Codice (XML): [Seleziona]
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid  android:color="@null"/>    
   
   

    <stroke android:width="6dp"
       
           android:color="#fff" />
     
    <corners android:radius="55px"/>
</shape>

La seconda imageview come src ha un png che funge da maschera...la cosa funziona finché la grafica è molto semplice però :)
So che questa soluzione è poco ortodossa, ma essendo di fretta è la prima che mi è venuta in mente e funzionando l'ho tenuta buona :D
Ovviamente mi accontento perché mi serve questo effetto solo su un'immagine...fossero state di più non sarebbe stato facilmente praticabile :)

Con la shape riesco a scalare in grandezza la parte visibile all'interno della maschera, agendo sul corners radius.

« Ultima modifica: 15 Agosto 2013, 21:28:16 CEST da iAndroidiano »