نمایش تصویر موجود در منابع بوسیله ImageView

در این درس از دوره جامع توسعه اندروید، نحوه استفاده از ویجت ImageView برای نمایش تصاویر ذخیرهشده در منابع پروژه (Resources) آموزش داده میشود. ابتدا به ساختار دایرکتوری res پرداخته و نحوه قرار دادن فایلهای تصویری در پوشه drawable توضیح داده میشود. سپس با استفاده از فایل XML Layout، ImageView به لایه رابط کاربری اضافه شده و ویژگیهایی مانند src برای تنظیم تصویر منبع، layout_width و layout_height برای تعیین اندازه، و scaleType برای کنترل نحوه نمایش تصویر در فضای مشخصشده بررسی میگردد. این درس به صورت گامبهگام، مفاهیم پایه و کاربردی مرتبط با مدیریت و نمایش تصاویر را در پروژههای اندروید پوشش میدهد و مقدمهای عملی برای ایجاد واسطهای کاربری حرفهای و تعاملی محسوب میشود.
در ویدیوی آموزشی قبلی نشان تان دادم که چطوری آیکن گرافیکی لانچر پیشفرض برنامه را با یک آیکن دلخواه عوض کنید، تا یک ظاهر شکیل تری روی صفحه لانچر دستگاه کاربرتان داشته باشد. به علاوه میتوانید از این تصاویر گرافیکی درون برنامه تان هم استفاده کنید.
در این نسخه از پروژه با نام Image View، لایوت من که اسمش content_main.xml هست، فقط یک تکست ویو داخل کامپوننت Scroll View دارد.
خب، من میخواهم از همان تصویر آیکن برنامه اینجا هم استفاده کنم و داخل صفحه آنرا نمایش بدهم. برای اینکار، از کامپوننتی با نام image view استفاده میکنم. ولی اول از هر چیزی باید آن فایل گرافیکی رو در منابعم داشته باشم تا بتوانم از آن استفاده کنم.
میروم سراغ فولدر Exercise Files ام، در فولدر Assets و بعد فولدر logo و این فایل را از اینجا به clipboard یا حافظه موقت سیستمم کپی میکنم.
بعد برمیگردم به اندروید استودیو و در پنجره project، در زیر دایرکتوری draw able در res یا همان resources و منابعمان آنرا پاست میکنم و اوکی میزنم تا accept بشود.
حالا این میشود image resource من و میتوانید با رجوع به همان آیدی منابع که قبلاً برای رشته ها استفاده میکردم به این تصویر هم دسترسی داشته باشید.
خب؛ یک کامپوننت image view اضافه میکنم. میخواهم یک image view اضافه کنم که بتواند از هر نوع تصویری، بدون توجه به اینکه از کجا آمده، استفاده کند و آنرا نمایش بدهد. من به شما نشان میدهم که چطوری یک تصویر را از منابع و از چیزی به نام asset به نمایش بگذارید، به علاوه میتوانید تصاویری از وب دانلود کنید و اونها رو با استفاده از image view به نمایش بگذارید.
من از این پایین به Design mode میروم و روی کامپوننت image view کلیک میکنم و درآگش میکنم روی صفحه برنامهام و آنرا میگذارم بالا صفحه.
خب؛ تنظیمات آنرا اینجا در محیط بصری انجام نمیدهم.
پس اجازه بدهید برای تنظیم شان برویم به قسمت کدها.
اول بیایید مطمئن بشویم که image view بالا صفحه هست یا نه.
خب؛ کدهایش را کات میکنم و جایی که میخواهم باشد، یعنی بالای کدهایم آنرا پاست میکنم، یعنی بالای کامپوننت Scroll View و ویژگیهایش را مجدد چک میکنم تا معلوم بشود که اونها مناسب برنامه هستند یا نه Align ParentTop اش true هست خب این خوب است، یعنی اینکه این کامپوننت بالای صفحه قرار دارد و layout _centerHorizontal اش هم true هست یعنی این شیء دقیقاً در وسط قرار گرفته، وسط نسبت به قسمت چپ و راست صفحه.
حالا میخواهم نشانتان بدهم که چطوری تصویری که میخواهم را، بگذارم توی این کامپوننت.
از ویژگی source استفاده میکنم، پس برای اینکار میآیم توی یک خط جدید از کدهام و برای تنظیم آن از resource ID که با @drawable/ شروع میشود، استفاده می کنم. خب؛ برای اینکار می نویسم src؛ می بینید که در لیست مشاهده میشود، پس آنرا انتخاب می کنم و نهایتاً هم از این لیست @drawable/ رو انتخاب می کنم و بعد وقتی control space رو فشار بدهم، میتوانم بصورت خودکار با استفاده از منابع draw able موجود در این برنامه آنرا کامل کنم.
خب؛ طول و عرضش هم عوض میکنم.
تنظیمات پیشفرض آن روی wrap _content هست که یعنی تصویر با سایز پیکسل خودش نشان داده بشود. یعنی همان اندازه ای که هست نمایش داده بشود.
ولی من این را نمیخواهم.
و به جای آن مقادیر هر دو طول و عرض یعنی width و height را روی 150dp یا device-independent pixels تنظیم میکنم.
به علاوه میخواهم یک فضا جداکننده زیر تصویرم ایجاد کنم که از متن قابل اسکرولم جدایش کنم.
ویژگی layout _marginBottom رو به روش مشابه اضافه می کنم و آنرا روی 10dp یا device-independent pixels تنظیم میکنم.
یک نگاهی به Design mode بیندازیم ببینیم چطوری شد، میبینیم که متنم زیر تصویرم قرار گرفته و متن مان با تصویرمان پوشش داده شده.
من میخواهم که متنم از زیر تصویر شروع بشود.
پس برمیگردم به code view و یک ویژگی اینجا برای Scroll View به نام layout _below تعریف میکنم.
این ویژگی رو با تایپ کلمه below میتوانم پیدا کنم و بعد میآیم و از لیست آنرا انتخاب میکنم و بعد آنرا تنظیم میکنم که Scroll View بعد از Image View قرار بگیرد.
دوباره به Design view نگاه کنیم و میبینیم که درست شد و همانطوری که میخواستم شد. در آخر برمیگردم به کدم و با فشار دادن کلیدهای میانبر کدم را ریفرمت میکنم تا همه کدم به صورت مناسب منظم و مرتب بشود.
و حالا، آمادهام تا برنامهام را روی دستگاه تست کنم.
و این هم نتیجه.
تصویر لوگو در بالا صفحه نمایش ظاهر شده. فضای خالی بالایی مربوط به تنظیمات مارجین های ظرف اصلی یا relative layout هستند و فضا خالی زیر لوگو مربوط به تنظیمات مارجین below هست، که با نحوه سفارشی سازی هر دوی اینها آشنا شدید. متن قابل اسکرول از زیر لوگو شروع شده و این هم بخاطر تنظیماتی است که به آن دادیم و یکبار دیگر میبینید که میتوانم متنم را اسکرول کنم؛ چون تکست ویو داخل اسکرول ویو گذاشته شده.
بنابراین، وقتی میخواهید تصویر مورد نظرتان را روی صفحه، نمایش بدهید باید آنرا در فولدر draw able قرار بدهید و بعد از طریق resource آیدی به آن تصویر مراجعه کنید و آنرا به عنوان تصویر مورد نظر انتخاب کنید و ابعاد آنرا هم با واحد dp تنظیم کنید و با سایزِ پیکسل معمولی خودش رهایش نکنید و اینطوری مطمئن باشید که این ابعاد متناسب با هر دستگاه خاصی تغییر میکند.
نهایتاً، میخواهم تنظیمات ابعاد را که با DP مشخص انجام دادم به عنوان dimension resource سیو کنم تا بتوانم دفعه بعد برای بقیه تنظیمات آنرا راحت فراخونی کنم.
روی یکی از ابعاد کلیک میکنم، alt یا option و enter یا return را به ترتیب در محیط های ویندوزی و مک فشار میدهم و از منویی که برای من باز میشود Extract dimension resource را انتخاب میکنم.
مقدار نمونه یا value را logo _side قرار میدهم و اوکی میکنم.
و حالا میآیم و با استفاده از مقدار نمونه ای که همین الان تعریفش کردم ارتفاع یا layout_height رو هم همان مقدار میگذارم.
مقدارش را پاک میکنم و با @dimen شروع میکنم و بعد logo _side را می بینیم و کافی است آنرا انتخاب کنیم.
یکبار دیگر برنامه را اجرا میکنم تا مطمئن بشوم مثل قبل درست کار میکند و میبینیم همه چیز همانطور که میخواستم درست کار میکند. تصویرم، متنم و اسکرول متن داخل اسکرول ویو.