Android
ImageView

Wprowadzenie

Składnia

• Metoda setImageResource(int resId) ustawia drawable jako treść tego ImageView .
• Użycie: imageView.setImageResource(R.drawable.anyImage)

Parametry

Ustaw zasób obrazu

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

ustaw rysowalną jako treść ImageView za pomocą atrybutu XML:

android:src="@drawable/android2"  

ustaw programowalnie:

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

Ustaw alfa

„alfa” służy do określania krycia obrazu.

ustaw alfa używając atrybutu XML:

android:alpha="0.5"  

Uwaga: przyjmuje wartość zmiennoprzecinkową od 0 (przezroczysty) do 1 (w pełni widoczny)

ustaw programowo alfa:

imgExample.setAlpha(0.5f);

ImageView ScaleType - Center

Obraz zawarty w ImageView może nie pasować do dokładnego rozmiaru podanego w pojemniku. W takim przypadku struktura umożliwia zmianę rozmiaru obrazu na wiele sposobów.

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"/>

Nie zmieni to rozmiaru obrazu i wyśrodkuje go w pojemniku (pomarańczowy = pojemnik)

W przypadku, gdy ImageView jest mniejszy niż obraz, obraz nie zostanie przeskalowany i będzie można zobaczyć tylko jego część

mocny tekst

ImageView ScaleType - CenterCrop

Skaluj obraz równomiernie (zachowaj proporcje obrazu), aby oba wymiary (szerokość i wysokość) były równe lub większe niż odpowiedni wymiar widoku (minus dopełnienie).

Oficjalne dokumenty

Gdy obraz pasuje do proporcji pojemnika:

Gdy obraz jest szerszy niż pojemnik, powiększy go do większego rozmiaru (w tym przypadku wysokości) i dostosuje szerokość obrazu bez zmiany jego proporcji, co spowoduje przycięcie.

ImageView ScaleType - CenterInside

Skaluj obraz równomiernie (zachowaj proporcje obrazu), aby oba wymiary (szerokość i wysokość) były równe lub mniejsze niż odpowiedni wymiar widoku (minus dopełnienie).

Oficjalne dokumenty

Wyśrodkuje obraz i zmieni rozmiar na mniejszy, jeśli oba rozmiary pojemników będą większe, będzie działał tak samo jak środek.

Ale jeśli jeden z rozmiarów jest mały, będzie pasował do tego rozmiaru.

ImageView ScaleType - FitStart i FitEnd

Skaluj obraz za pomocą START.

Skaluj obraz za pomocą END.

Oficjalne dokumenty

FitStart

Będzie pasować do najmniejszego rozmiaru pojemnika i wyrówna go do początku.

<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

Będzie pasować do najmniejszego rozmiaru pojemnika i wyrówna go do końca.

<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

Skaluj obraz za pomocą CENTRUM.

Oficjalne dokumenty

Spowoduje to rozwinięcie obrazu w celu dopasowania do pojemnika i wyrówna go do środka, dopasuje się do mniejszego rozmiaru.

Większa wysokość (dopasowanie do szerokości)

Ta sama szerokość i wysokość.

ImageView ScaleType - FitXy

Skaluj obraz za pomocą FILL.

Oficjalne dokumenty

<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"/>

Ustaw typ skali

Steruje sposobem zmiany rozmiaru lub przeniesienia obrazu w celu dopasowania do rozmiaru ImageView .

Atrybut XML:

android:scaleType="..."

Zilustruję różne typy skali za pomocą kwadratowego ImageView który ma czarne tło, a my chcemy wyświetlić prostokątne rysowanie na białym tle w ImageView .

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

scaleType musi być jedną z następujących wartości:

1. center : center obraz w widoku, ale nie wykonuj skalowania.

2. centerCrop : Skaluj obraz równomiernie (zachowaj proporcje obrazu), aby oba wymiary (szerokość i wysokość) obrazu były równe lub większe niż odpowiedni wymiar widoku (minus dopełnienie). Obraz jest następnie wyśrodkowany w widoku.

3. centerInside : Skaluj obraz równomiernie (zachowaj proporcje obrazu), aby oba wymiary (szerokość i wysokość) obrazu były równe lub mniejsze niż odpowiedni wymiar widoku (minus dopełnienie). Obraz jest następnie wyśrodkowany w widoku.

4. matrix : skaluj przy użyciu matrycy obrazu podczas rysowania.

5. fitXY : fitXY obraz za pomocą FILL .

6. fitStart : fitStart obraz za pomocą START .

7. fitCenter : fitCenter obraz za pomocą CENTRUM .

8. fitEnd : fitEnd obraz za pomocą END .

Ustaw odcień

Ustaw kolor barwienia obrazu. Domyślnie odcień będzie się SRC_ATOP trybie SRC_ATOP .

ustaw odcień za pomocą atrybutu XML:

android:tint="#009c38"

Uwaga: musi być wartością koloru, w postaci "#rgb" , "#argb" , "#rrggbb" lub "#aarrggbb" .

programowo ustawić odcień:

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

i możesz wyczyścić ten filtr kolorów:

imgExample.clearColorFilter();

Przykład:

MLRoundedImageView.java

Skopiuj i wklej następującą klasę w swoim pakiecie:

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;
    }
}

Użyj tej klasy w XML z nazwą pakietu zamiast ImageView

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