آموزش کامل انواع ScaleType در ImageView

آموزش کامل انواع ScaleType در ImageView
اندروید

آموزش کامل انواع ScaleType در ImageView

قبل از اینکه بریم سراغ این آموزش بهتره اول کاری که میگمو انجام بدی.

برو توی منو گوشیت و هر برنامه ای رو که خواستی رو باز کن (البته بجز برنامه‌های سیستمی😀).

آیا میتونی برنامه‌ای رو پیدا کنی که توش از هیچ تصویری استفاده نشده باشه؟!!

قطعا خیر! چون برای اینکه برای کاربران رابط کاربری خوبی رو ایجاد کنیم باید از تصاویر استفاده کنیم.

تصاویر توی برنامه‌ها مهم هستند، مخصوصا برنامه‌های آنلاین.

حالا که دیدی تصاویر توی برنامه‌ها چقدر مهم هستن، پس باید نحوه درست استفاده کردن از اونارو هم کامل یاد بگیری.

مقیاس‌ها زمانی که از تصاویر استفاده می‌کنید خیلی مهم میشن.

ما به عنوان برنامه نویس اندروید باید انواع مقیاس ها در تصاویر رو بشناسیم و بتونیم به بهترین شکل از ازشون استفاده کنیم.

به این مقیاس‌ها در اندروید اصطلاحا ScaleType میگن که توی ImageView قرار دارن.

پس هرموقع که از ImageView استفاده می‌کنید بهتره که نوع مناسب ScaleType رو براش اعمال کنی تا تصاویرت بهم نریزن.

اگه ازاین ScaleType ها به خوبی استفاده نکنی ممکنه تصاویر موجود توی برنامه‌ت کلا بهم بریزن، بیش از اندازه کشیده بشن و یا حتی خیلی ریز بشن.

فرض کن میخوای تصویری که از اینترنت میگیری کل عرض گوشی رو پوشش بده، ولی چون بلد نیستی از انواع مقیاس ها استفاده کنی، عکسی که قرار بود کل عرض گوشی رو بگیره. به صورت مربع وسط صفحه میافته و دورتادورش هم خالی میمونه…

اندروید برای ImageView از 8 نوع مختلف ScaleType استفاده میکنه.

در ادامه این پست تک تک اون حالت‌ها رو میخوام کامل براتون بررسی کنم.

ثبت‌نام رایگان در دوره کاتلین
رایگان

دوره مقدماتی کاتلین برای برنامه نویسان اندروید

4.5/5
(4 امتیاز)
20 درس
مبتدی
آنچه یاد خواهید گرفت
آموزش از صفر برنامه نویسی کاتلین
اضافه کردن ImageView

اول از همه باید ویو مربوط به نمایش تصاویر یعنی ImageView رو به لایه‌ت اضافه کنی.

مثل کد زیر :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="240dp"
        android:src="@drawable/my"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

نتیجه کد بالا یه چیزی تقریبا مثل عکس زیر میشه :

حالت پیشفرض بدون هیچ ScaleType

من برای نمایش بهتر حالت‌های مختلف تصویر با انواع مقیاس‌ها از لوگوی اینستاگرامم استفاده کردم😊

توی اندروید ما می‌تونیم با استفاده از ScaleTypeهای مختلف ، محدوده ImageView رو مقیاس بندی کنیم.

انواع ScaleTypeها برای ImageView

  • CENTER
  • CENTER_CROP
  • CENTER_INSIDE
  • FIT_CENTER
  • FIT_START
  • FIT_END
  • FIT_XY
  • MATRIX

خب بریم که تک تک اینها رو کامل توضیح بدم.

حالت Center :

از این حالت برای قراردادن تصویر در مرکز ImageView استفاده میشه که تصویر با حفظ همون نسبت ابعادی که داره در مرکز قرار میگیره.

اگه تصویر اونقدر بزرگ باشه که در مرکز ImageView جا نباشه ، توی این حالت مقیاس بندی انجام نمیشه و در حالی که عکس در مرکز قرار داره ، بعضی از قسمتهای تصویر بریده میشن.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="center"

نمونه این حالت :

تصویر بعد از اعمال حالت center

اگه این تصویر رو با تصویر بالا مقایسه کنی متوجه میشی که توی این حالت، تصویر از مرکز به قدری بزرگ شده که کل ابعاد ImageView رو پوشش بده.

به همین خاطر بخش‌هایی از تصویر بریده شدن.

حالت Center Crop :

از این حالت برای قرار دادن تصویر در مرکز ImageView و مقیاس بندی تصویر با حفظ نسبت ابعاد استفاده میشه.

در این حالت یه نکته مهمی وجود داره، اونم اینکه عرض یا ارتفاع تصویر دقیقا برابر میشه با عرض یا ارتفاع ImageView.

در هنگام مقیاس گذاری ، اگه هر یک از اونا (عرض یا ارتفاع) برابر بشن، مقیاس بندی متوقف شده و بقیه قطعات بریده میشن.

بنابراین ، ابعاد تصویر می‌تونه برابر یا بیشتر از ImageView باشه.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="centerCrop"

نمونه این حالت :

تصویر بعد از اعمال حالت center crop

در تصویر بالا، در حالی که وقتی عرض تصویر برابر با عرض ImageView می شود، مقیاس بندی متوقف شده و بقیه قسمت بریده می شود.

حالت Center Inside :

از این حالت برای قرار دادن تصویر در مرکز ImageView و مقیاس بندی تصویر با حفظ نسبت ابعاد استفاده می شود.

بنابراین اساساً مقیاس گذاری تا جایی انجام می شود که هم عرض و هم ارتفاع تصویر از عرض و ارتفاع ImageView کمتر شود.

بنابراین ، تصویر بدون در نظر گرفتن اندازه تصویر در داخل ImageView قرار می گیرد و هیچ برشی از تصویر انجام نمی شود.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="centerInside"

نمونه این حالت :

تصویر بعد از اعمال حالت center inside

در تصویر بالا ، مقیاس گذاری تا زمانی انجام می شود که عرض و ارتفاع تصویر برابر با عرض و ارتفاع ImageView شود.

حالت Fit Center :

از این حالت برای قرار دادن تصویر در مرکز ImageView و مقیاس بندی تصویر به طور یکنواخت با حفظ نسبت ابعاد استفاده می شود و هیچ برشی از تصویر انجام نمی شود.

عرض و ارتفاع تصویر بر اساس اندازه تصویر کم یا زیاد می شود.

بنابراین مقیاس گذاری تا جایی انجام می شود که هم عرض و هم ارتفاع تصویر از عرض و ارتفاع ImageView کمتر شود.

هر تصویری از عرض یا ارتفاع باید با عرض یا ارتفاع ImageView یکسان باشد.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="fitCenter"

نمونه این حالت :

تصویر بعد از اعمال حالت fit center

در تصویر بالا ، تصویر در مرکز و بدون برش قرارداده شده است.

حالت Fit Start :

از این حالت برای قرار دادن تصویر در سمت چپ و بالاترین قسمت ImageView استفاده می‌شود و همچنین مقیاس بندی تصویر به طور یکنواخت با حفظ نسبت ابعاد اعمال می‌شود و هیچ برشی از تصویر انجام نمی شود.

عرض و ارتفاع تصویر بر اساس اندازه تصویر کم یا زیاد می شود.

بنابراین مقیاس گذاری در قسمت چپ انجام می شود تا جایی که هم عرض و هم ارتفاع تصویر از عرض و ارتفاع ImageView کمتر شود.

هر تصویری از عرض یا ارتفاع باید با عرض یا ارتفاع ImageView یکسان باشد.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="fitStart"

نمونه این حالت :

تصویر بعد از اعمال حالت fit start

در تصویر بالا ، تصویر در قسمت سمت چپ ImageView قرار گرفته است.

حالت Fit End :

از این حالت برای قرار دادن تصویر در سمت راست و پایین‌ترین قسمت ImageView استفاده می‌شود و همچنین مقیاس بندی تصویر به طور یکنواخت با حفظ نسبت ابعاد اعمال می‌شود و هیچ برشی از تصویر انجام نمی شود.

عرض و ارتفاع تصویر بر اساس اندازه تصویر کم یا زیاد می شود.

بنابراین اساساً مقیاس گذاری در قسمت چپ انجام می شود تا جایی که هم عرض و هم ارتفاع تصویر از عرض و ارتفاع ImageView کمتر شود.

هر تصویری از عرض یا ارتفاع باید با عرض یا ارتفاع ImageView یکسان باشد.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="fitEnd"

نمونه این حالت :

تصویر بعد از اعمال حالت fit end

در تصویر بالا ، تصویر در قسمت سمت راست ImageView قرار گرفته است.

حالت Fit XY :

از این حالت برای مقیاس گذاری تصویر در سراسر ImageView استفاده می شود.

نسبت ابعاد تصویر در اینجا حفظ نمی شود.

عرض و ارتفاع تصویر همان عرض و ارتفاع ImageView است.

درواقع تصویر را به قدری کِش میاورد که از عرض و ارتفاع دقیقا هم اندازه ImageView شود.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="fitXY"

نمونه این حالت :

تصویر بعد از اعمال حالت fit xy

همانطور که می‌بینید تصویر را آنقدر کشیده که از عرض و ارتفاع دقیقا هم اندازه ImageView شود.

حالت Matrix :

از این حالت برای مقیاس گذاری تصویر با توجه به برخی از MATRIX های تعریف شده توسط کاربر استفاده می شود.

در واقع ، ما از یک ماتریس برای دستکاری canvas، هنگام طراحی برخی از گرافیک ها استفاده می کنیم.

بنابراین ، هنگام استفاده از ماتریس با ImageView ، می توانید از آن برای افکت‌هایی مثل چرخش و … با تصویر خود استفاده کنید.

برای استفاده از این حالت کد زیر رو به ImageView باید اضافه کنی.

android:scaleType="matrix"

نمونه این حالت :

تصویر بعد از اعمال حالت matrix

 

توی این پست سعی کردم تمامی حالت‌ها رو به طور کامل توضیح بدم.

برای اینکه درک بهتری از این حالت‌ها داشته باشید و کاملا متوجه بشید که در چه شرایطی باید ازشون استفاده کنید، بهتره که این حالت‌ها رو یکبار با سایزهای مختلف تصاویر خودتون امتحان کنید.

اینطوری خیلی راحت‌تر میتونید درک کنید که برای تصاویر با سایزهای مختلف و شرایط‌های مختلف باید از کدوم یکی از این حالت ها استفاده کنید.

دیدگاه خود را اینجا قرار دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • Custom attributes
  • زمینه های دلخواه
مقایسه
لیست علاقه مندی ها 0