Autore Topic: 5 immagini con testo e bordo arrotondato  (Letto 560 volte)

Offline gabric

  • Utente senior
  • ****
  • Post: 615
  • Respect: +18
    • Google+
    • Mostra profilo
    • Brancato's site
  • Dispositivo Android:
    Nexus 5 / Tablet mediacom s4
  • Play Store ID:
    Brancato's+app
  • Sistema operativo:
    window7. ubuntu
5 immagini con testo e bordo arrotondato
« il: 04 Luglio 2013, 16:15:28 CEST »
0
Salve!
ho un piccolo (grosso) problema
devo inserire 5 immagini all'interno di una horizontal scroll view
le immagini hanno tutte gli angoli arrotondati, e devono vedersi al 100% di altezza (la larghezza non importa poichè possono scorrere)
Inoltre sopra ogni immagine deve andare 1 area grigia, con delle stringhe di grandezza variabili.
Idee su come far funzionare il tutto?
Il problema principale è che mettendo come altezza "match_parent" il layout con le scritte, se ne va per i fatti suoi, e quindi le scritte escono lateralmente dall'immagine.

Ho fatto molti tentativi, ma ancora niente.
p.s. naturalmente le immagini non possono distorcersi, quindi niente fitXY
e la parte grigia deve essere ancorata a botom, left and right

vi posto l'xml della singola immagine
Codice (XML): [Seleziona]
<RelativeLayout
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:layout_marginLeft="2dp"
               android:layout_marginRight="2dp" >

                <ImageView
                   android:id="@+id/img_grande1"
                   android:layout_width="135dp"
                   android:layout_height="wrap_content"
                   android:scaleType="centerInside"
                   android:src="@drawable/img_canzone_grande" />

                <RelativeLayout
                   android:layout_width="135dp"
                   android:layout_height="50dp"
                   android:layout_alignBottom="@+id/img_grande1"
                   android:layout_alignParentRight="true"
                   android:background="@drawable/box_testo_grande"
                   android:paddingLeft="5dp" >

                    <TextView
                       android:id="@+id/TextView20"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_alignParentLeft="true"
                       android:layout_alignParentTop="true"
                       android:layout_marginLeft="1dp"
                       android:layout_marginTop="1dp"
                       android:text="Titolo canzone"
                       android:textAppearance="?android:attr/textAppearanceSmall"
                       android:textColor="#FFFFFFFF"
                       android:textSize="12sp"
                       android:textStyle="bold" />

                    <TextView
                       android:id="@+id/TextView19"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_alignLeft="@+id/TextView20"
                       android:layout_below="@+id/TextView20"
                       android:text="Artista"
                       android:textAppearance="?android:attr/textAppearanceSmall"
                       android:textColor="#FFFFFFFF"
                       android:textSize="10sp"
                       android:textStyle="italic" />

                    <TextView
                       android:id="@+id/TextView18"
                       android:layout_width="25dp"
                       android:layout_height="25dp"
                       android:layout_alignParentRight="true"
                       android:layout_centerVertical="true"
                       android:layout_marginRight="10dp"
                       android:background="@drawable/ellisse"
                       android:gravity="center"
                       android:text="€ 0.89"
                       android:textColor="#FF000000"
                       android:textSize="8sp"
                       android:visibility="visible" />

                    <TextView
                       android:id="@+id/TextView17"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
                       android:layout_alignLeft="@+id/TextView19"
                       android:layout_below="@+id/TextView19"
                       android:text="Genere e difficoltà"
                       android:textAppearance="?android:attr/textAppearanceSmall"
                       android:textColor="#FFFFFFFF"
                       android:textSize="10sp"
                       android:textStyle="bold" />

                    <ImageView
                       android:id="@+id/ImageView09"
                       android:layout_width="20dp"
                       android:layout_height="100dp"
                       android:layout_alignParentTop="true"
                       android:layout_alignRight="@+id/TextView18"
                       android:scaleType="fitStart"
                       android:src="@drawable/free_grande"
                       android:visibility="invisible" />
                </RelativeLayout>
            </RelativeLayout>

a questo è il risultato che voglio ottenere (in ogni risoluzione)



Post unito: 05 Luglio 2013, 17:26:37 CEST
Nessuno ha idee?
forse potrei creare un rettangolo con i bordi arrotondati, così come richiesto dal cliente, e poi mettergli dentro la bitmap che scarico, in questo modo anche se la ritaglio, in questo modo dovrebbe andare bene... ma non ho idea di come fare
« Ultima modifica: 05 Luglio 2013, 17:28:13 CEST da gabric »

Offline elfo83

  • Utente normale
  • ***
  • Post: 287
  • Respect: +23
    • Mostra profilo
  • Sistema operativo:
    Mac OS 10.8.2
Re:5 immagini con testo e bordo arrotondato
« Risposta #1 il: 06 Luglio 2013, 21:29:48 CEST »
0
Per arrotondare le bitmap puoi usare questo metodo (puoi cambiare i parametri a tuo piacimento):
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;             
    }

Non ho capito bene questa cosa che dici  che le scritte se ne vanno per fatti suoi..