Android
Figuurweergave

Invoering

Syntaxis

• De methode setImageResource(int resId) stelt een setImageResource(int resId) inhoud in als de inhoud van deze ImageView .
• Gebruik: imageView.setImageResource(R.drawable.anyImage)

parameters

Stel Afbeeldingsbron in

<ImageView
 android:id="@+id/imgExample"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 ...
 />

stel een tekenruimte in als inhoud van ImageView met behulp van het XML-kenmerk:

android:src="@drawable/android2"  

programmeerbaar een tekenbaar:

 ImageView imgExample = (ImageView) findViewById(R.id.imgExample);
 imgExample.setImageResource(R.drawable.android2);

Alfa instellen

"alpha" wordt gebruikt om de dekking voor een afbeelding op te geven.

stel alpha in met behulp van het XML-kenmerk:

android:alpha="0.5"  

Opmerking: neemt floatwaarde van 0 (transparant) tot 1 (volledig zichtbaar)

stel alfa programmatisch in:

imgExample.setAlpha(0.5f);

ImageView ScaleType - Center

De afbeelding in de ImageView past mogelijk niet precies bij de grootte die aan de container is gegeven. In dat geval kunt u op een aantal manieren het formaat van de afbeelding wijzigen.

Centrum

    <ImageView android:layout_width="20dp"
           android:layout_height="20dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="center"
           android:background="@android:color/holo_orange_light"/>

Hierdoor wordt de grootte van de afbeelding niet gewijzigd en wordt deze in de container gecentreerd (Orange = container)

In het geval dat de ImageView kleiner is dan de afbeelding, wordt de grootte van de afbeelding niet gewijzigd en kunt u slechts een deel ervan zien

sterke tekst

ImageView ScaleType - CenterCrop

Schaal de afbeelding gelijkmatig (behoud de beeldverhouding van de afbeelding) zodat beide dimensies (breedte en hoogte) van de afbeelding gelijk zijn aan of groter zijn dan de overeenkomstige dimensie van de weergave (minus opvulling).

Officiële documenten

Wanneer de afbeelding overeenkomt met de verhoudingen van de container:

Wanneer de afbeelding breder is dan de container, wordt deze vergroot naar de grotere grootte (in dit geval hoogte) en wordt de breedte van de afbeelding aangepast zonder de verhoudingen te wijzigen, waardoor deze wordt bijgesneden.

ImageView ScaleType - CenterInside

Schaal de afbeelding gelijkmatig (behoud de beeldverhouding van de afbeelding) zodat beide dimensies (breedte en hoogte) van de afbeelding gelijk zijn aan of kleiner zijn dan de overeenkomstige dimensie van de weergave (minus opvulling).

Officiële documenten

Het zal de afbeelding centreren en verkleinen naar het kleinere formaat, als beide containergroottes groter zijn, zal het hetzelfde werken als centreren.

Maar als een van de maten klein is, past deze in die maat.

ImageView ScaleType - FitStart en FitEnd

Schaal de afbeelding met START.

Schaal de afbeelding met END.

Officiële documenten

FitStart

Dit past op de kleinste maat van de container en zal deze uitlijnen op het begin.

<ImageView android:layout_width="200dp"
           android:layout_height="200dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitStart"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

FitEnd

Dit past op de kleinste maat van de container en zal deze uitlijnen tot het einde.

<ImageView android:layout_width="200dp"
           android:layout_height="100dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitEnd"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

ImageView ScaleType - FitCenter

Schaal de afbeelding met behulp van CENTER.

Officiële documenten

Dit vergroot de afbeelding om te proberen de container te matchen en deze zal in het midden worden uitgelijnd, het past in het kleinere formaat.

Grotere hoogte (past op breedte)

Dezelfde breedte en hoogte.

ImageView ScaleType - FitXy

Schaal de afbeelding met FILL.

Officiële documenten

<ImageView android:layout_width="100dp"
           android:layout_height="200dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitXY"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

Stel het schaaltype in

Bepaalt hoe het formaat van de afbeelding moet worden aangepast of verplaatst om overeen te komen met de grootte van ImageView .

XML-kenmerk:

android:scaleType="..."

ik zal verschillende ImageView illustreren met een vierkante ImageView met een zwarte achtergrond en we willen een rechthoekig tekenbaar op witte achtergrond in ImageView .

 <ImageView
  android:id="@+id/imgExample"
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:background="#000" 
  android:src="@drawable/android2"
  android:scaleType="..."/>

scaleType moet een van de volgende waarden zijn:

1. center : centreer de afbeelding in de weergave, maar schaal niet.

2. centerCrop : Schaal de afbeelding gelijkmatig (behoud de beeldverhouding van de afbeelding) zodat beide dimensies (breedte en hoogte) van de afbeelding gelijk zijn aan of groter zijn dan de overeenkomstige dimensie van de weergave (minus opvulling). De afbeelding wordt vervolgens gecentreerd in de weergave.

3. centerInside : schaal de afbeelding uniform (behoud de beeldverhouding van de afbeelding) zodat beide dimensies (breedte en hoogte) van de afbeelding gelijk zijn aan of kleiner zijn dan de overeenkomstige dimensie van de weergave (minus opvulling). De afbeelding wordt vervolgens gecentreerd in de weergave.

4. matrix : schaal met behulp van de afbeeldingsmatrix tijdens het tekenen.

5. fitXY : schaal de afbeelding met FILL .

6. fitStart : schaal de afbeelding met START .

7. fitCenter : De afbeelding schalen met CENTER .

8. fitEnd : De afbeelding schalen met END .

Tint instellen

Stel een kleur in voor de afbeelding. Standaard wordt de tint gemengd in de SRC_ATOP modus.

tint instellen met XML-kenmerk:

android:tint="#009c38"

Opmerking: Moet een kleurwaarde zijn in de vorm van "#rgb" , "#argb" , "#rrggbb" of "#aarrggbb" .

programmeer tint instellen:

imgExample.setColorFilter(Color.argb(255, 0, 156, 38));

en u kunt dit kleurenfilter wissen:

imgExample.clearColorFilter();

Voorbeeld:

MLRoundedImageView.java

Kopieer en plak de volgende klasse in je pakket:

public class MLRoundedImageView extends ImageView {

    public MLRoundedImageView(Context context) {
        super(context);
    }

    public MLRoundedImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MLRoundedImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;
        
        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }
        
        Bitmap output = Bitmap.createBitmap(radius, radius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }
}

Gebruik deze klasse in XML met pakketnaam in plaats van ImageView

<com.androidbuts.example.MLRoundedImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />