نمایش تصاویر از طریق فولدر assets
در این درس از دوره آموزش توسعه اپلیکیشن‌های اندروید، نحوه نمایش تصاویر موجود در منابع برنامه در زمان اجرا با استفاده از کدنویسی جاوا آموزش داده میشود. ابتدا یک ImageView در لایوت تعریف میشود و سپس به‌صورت پویا با استفاده از متدهای جاوا مانند setImageResource و getResources().getIdentifier تصاویر به آن اختصاص داده میشوند. این روش برای مدیریت پویا و انعطاف‌پذیر تصاویر با استفاده از نام فایل‌ها (رشته‌ها) و نمایش آنها در زمان اجرا کاربرد دارد. همچنین نکات مربوط به تنظیم موقعیت تصاویر در لایوت و بهینه‌سازی کد بررسی شده است. این درس به‌ویژه برای توسعه‌دهندگانی مناسب است که نیاز به بارگذاری تصاویر به صورت پویا از منابع پروژه دارند.
در ویدیوی آموزشیِ قبلی توضیح دادم که چطوری یک تصویر رو با استفاده از Image Resource در Image View نمایش بدهید و همه تنظیمات آنرا هم در کد فایل لایوت توضیح دادم. ولی چون در بطن یک دوره آموزشی کامل قرار گرفتید، شما باید بتوانید اینکارها رو در کد جاوا هم انجام بدهید.
همانطور که می بینید الان من در پروژه ای با نام Image Resource کار میکنم و میخواهم یک کامپوننت Image View دیگر ایجاد کنم و آنرا زیر لایوتم اضافه کنم.
همان Image View قبلی رو کپی میکنم و می‌آیم پایین اینجا و داخل تگ Relative Layout و بعد از Scroll View آنرا پاست میکنم.
آیدی imageView جدید رو عوض میکنم و photo میگذارم.
همان تنظیمات ابعاد قبلی منابع رو نگه میدارم، ولی تنظیمات align ParentTop رو با align ParentBottom عوض میکنم؛ چون این تصویر قرار است زیر لایوت نشان داده بشود و بعد margin هم تغییر میدهم به margin Top و چون میخواهم انتخاب تصویرم به صورت پویا و با استفاده از کدهای جاوا باشد، ویژگی source رو پاک میکنم.
بعد برای اینکه مطمئن بشوم اسکرول ویو بین دو تصویر قرار میگیرد، یک ویژگی layout above رو در ساختارِ کدهای از نوعِ attribute کد xml ام اضافه میکنم. میدانید که attribute و element دو نوع مختلف از ساختار کدهای xml هست، و این ساختار در حال حاضر، الان attribute هست.
و روی آیدی photo تنظیمش میکنم و یک نگاهی به Design view می‌اندازم.
میبینیم که متن اسکرول ویو جمع شده در وسط صفحه و Image View زیر آن، غیر قابل دیدن، اینجا است در پایین صفحه.
خب، به کلاس Main Activity میروم.
می‌آیم در متد on Create و قدم اول این است که یک ارجاعی بدهم به شیء Image View.
این یک نمونه از کلاس Image View هست.
اسم آنرا میگذارم iv و مثل همیشه find ViewById رو فراخوانی میکنم و از آیدی موجود در منابع شیء Image View رو پیدا میکنم، پس می‌آیم و بعد از منابع آیدی یا resource id که در اینجا با R.id نشان داده شده.
کلمه photo رو تایپ می کنم و دستور یا عبارتم رو کامل میکنم و اینبار به عنوان یک شیء Image View، آنرا کاست میکنم.
حالا یک عکس میخواهم که توی این شیء نمایش داده بشود.
به دسکتاپ میروم جایی که Exercise Files ام رو نگه میدارم و فولدر Assets رو باز میکنم و اینبار میروم به فولدر Clothing Photos.
اینجا تعدادی فایل های تصویری و یا photo دارم.
اولی آن که jacket101 هست رو انتخاب میکنم و کپی اش میکنم به کلیپبورد سیستمم.
و به اندروید استودیو برمیگردم و مثل دفعه پیش در فولدر draw able آنرا در منابع پاست میکنم.
اگر یادتان باشد برای اینکار می‌آمدیم روی draw able کلیک راست می کردیم و از منوی باز شده هم کافی بود گزینه past رو انتخاب کنیم و نهایتاً هم اینجا در این پنجره copy، روی اوکی کلیک می کنیم. خب،همانطور که می بینید، حالا یک فایل تصویری دیگر هم در منابعم دارم و مرحله بعدی این است که اون رو نمایش بدهم.
برای انجام اینکار متد Set ImageResource رو برای iv فراخوانی میکنم و یک resource id جدید به آن میدهم.
مثل قبل با R شروع میکنم ولی اینبار نوع منبع draw able هست و وقتی دات رو تایپ کنم، نامِ تصویرِ jacket101 رو میبینم که در دسترس هست.
آنرا انتخاب میکنم.
حالا آماده‌ام که از برنامه ران بگیرم و jacket در پایین صفحه نمایش ظاهر میشود و لوگو هم که در بالا صفحه هست و متن قابل اسکرول هم بین آنها قرار دارد و می بینیم که خیلی هم خوب کار میکند.
این یک روش دیگر برای کار کردن با Image Resources با استفاده از کدهای جاوا بود؛ اگرچه من زیاد این روش رو توصیه نمیکنم.
خب، برمیگردم به اندروید استودیو.
میخواهم موقتاً این کدها رو کامنت کنم و با چند کد پیچیده تر آنرا جایگزین کنم، دقیقاً با کدهایی که با رشته ای شروع میشوند، که نماینده نامِ فایل هستند، منظور از “نماینده” این است که برای تعریف این رشته، فرمت فایل رو نادیده بگیریم و بعد هم می‌آیم و به صورت پویا بر اساس این رشته با دستوراتی که چند لحظه دیگر به شما نشان میدهم، آنرا از منابع میگیرم. پس اولین کاری که میکنم این است که می‌آیم و یک رشته به نام image Name ایجاد میکنم و مقدار jacket101 رو به آن میدهم.
توجه کنید فرمت فایل یعنی دات png رو اضافه نمیکنم.
بعد، یک متغیر resource ایجاد میکنم.
همانطور که میدانید با نوشتن int که برگرفته از کلمه integer هست و بعدش هم res که بر گرفته از resource هست، اینکار رو انجام میدهم؛ و بعدش هم عبارت getResources().getIdentifier() رو برایش تعریف میکنم.
که این عبارت سه تا آرگومان میگیرد. نام Image Resource، نوع منبع و نام پکیج برنامه جاری.
اولین مقدار یک رشته هست که الان با نوشتن image name و بعدش یک کاما، ساختمش.
دومی رشته draw able هست که نوع منبع draw able هست و آخرین آرگومانم رو هم با فراخونی متد get PackageName بدست می‌آورم.
حالا، یک منبع دارم که میتوانم با آن کار کنم. این خط رو از کامنت در می‌آورم چون برای ارجاع دادن به Image View به آن احتیاج دارم و یکبار دیگر set ImageResource رو برای iv فراخونی میکنم و اینبار مقدار integer که توسط متد get Identifier بدست آوردم رو میدهم به آن.
بنابراین این مدل کد وقتی استفاده میشود که با یک تصویر کار میکنید و میخواهید با یک مقدار رشته ای شروع کنید، مقداری که در دیتابیس نگهداری میشود و میخواهید با آن، رشته موجود در منابع تصویر رو نمایش بدهید. اما همانطور که بعداً در طول این دوره آموزشی نشان تان میدهم، شرایط خاصی هم وجود دارد، به خصوص وقتی میخواهید یک لیست از مقادیر رو اسکرول کنید و اون موقعِ تو اون شرایط خاص خواهید دید این مدل کد خیلی آروم عمل میکند. این رو هم بگویم که، البته یک رویکرد دیگر برای کار با تصاویر هم وجود دارد ولی نه به عنوان منابع، بلکه به عنوان چیزی به نام Assets، که این رویکرد رو در ویدئوی بعدی به شما آموزش میدهم.