سفارشی سازی متون و تصاویر در لیست ایجاد شده

در درس “سفارشی‌سازی نمایش متن و تصویر” از دوره آموزشی “Android App Development Essential Training”، شما با تکنیک‌های پیشرفته‌ای برای ارتقای رابط کاربری برنامه‌های اندروید آشنا می‌شوید. این درس به شما نشان می‌دهد چگونه با استفاده از TextView و ImageView، نمایش متن و تصاویر را به صورت حرفه‌ای سفارشی کنید، ویژگی‌های آن‌ها را تنظیم نمایید و با بهره‌گیری از Layout Managers، طرح‌بندی‌های پیچیده و کاربرپسندی را طراحی کنید. همچنین، روش‌های بهینه‌سازی عملکرد و افزایش سرعت بارگذاری تصاویر را خواهید آموخت تا برنامه‌هایتان از نظر بصری و کارایی در سطح بالایی قرار گیرند. این آموزش که برای توسعه‌دهندگان مشتاق به طراحی رابط‌های کاربری حرفه‌ای و بهینه طراحی شده، شما را آماده می‌کند تا با تماشای ویدیوی پیش‌رو، مهارت‌های خود را به سطحی جدید برسانید و برنامه‌هایی جذاب و کارآمد خلق کنید.

تا اینجای کار من اومدم و نحوه نمایش لیستم رو سفارشی کردم و تا اونجایی که تونستم نام انواع محصولات رو در لیست نمایش دادم، ولی هنوز مقادیر مربوط به قیمت و تصویر هر آیتم از لیست غیر واقعی و یکسان هستن. و حالا، باید کد جاوا ام رو سفارشی تر کنم. من در حال کار کردن در پروژه ای به نام Customize Controls هستم. شما میتونید هم این پروژه رو لود کنید و یا همون پروژه قبلی رو ادامه بدید. تمام کاری که میخام بکنم این هست که کمی تغییرات در کلاس Product ListAdapter انجام بدم. داده های ذخیره شده من نمونه از کلاس Product هستند و قیمت هم به عنوان یک مقدار از نوع داده double جاوا در اون ذخیره شده.

من میخوام ظاهر این مقدار عددی رو به صورت ارزی در بیارم تا شکیل تر و مفهوم تر بشه، و برای انجام اینکار هم میخام از یک کد جاوای متعارف استفاده کنم. اول یک نمونه از کلاس Number Format ایجاد میکنم. که عضوی از پکیج Java .text هست و اسمش رو formatter میذارم. و برای ارجاع دادن به اون از Number Format و بعد از اون، از فراخونی متد get CurrencyInstance استفاده میکنم. اگه بخوایید برنامه تون بین المللی باشه، میتونید این currency رو برای هر محل و کشور دلخواه و خاص تنظیم کنید.

بعد از اون یک رشته string به نام price ایجاد میکنم. و مقدارش رو حالت فرمت شده اون مقدار عددی میدم، و اینکار رو هم توسط عبارت formatter .format انجام میدم. و بعد به عنوان ورودی product .getPrice رو بهش میدم. حالا آماده ام تا این مقدار رو نمایش بدم. مثل قبل باید یک ارجاع به شی Text View موجود در لایوت بدم. اسمش هم price Text میذارم. و مقدارش رو با فراخونی convert View.findViewById و دادن آیدی R .Id.priceText بعنوان ورودی، تعیین میکنم.

و برای مقدار بازگشتی کستش میکنم. بعد میگم که priceText .setText؛ و price رو بهش میدم. و بعد یکبار دیگه کدم رو اجرا میکنم و میبینم چه اتفاقی میافته. و ایندفعه میبینیم که قیمت هر آیتم به طور مناسبی نمایش داده شده. به کد جاوا ام برمیگردم و حالا کد هایی برای لود شدن تصاویر پویا اضافه میکنم. برای اینکار میخوام یک متد دیگه اینجا این پایین اضافه کنم. و باید با کدهای جاوا یک مقدار bitmap متناظر با هر تصویر رو بدست بیارم.

من یک متد با سطح دسترسی private ایجاد میکنم و نوع خروجی اش رو یک نمونه از کلاس Bitmap از پکیج Android .graphics تعیین میکنم. و اسمش رو get BitmapFromAsset میذارم. حالا میخوام یک مقدار رشته ای که از کلاس product هست رو بگیرم و به این متد بدم. و این مقدار رشته ای در کلاس Data Provider در اینجا تنظیم و مقداردهی شده. در هر کدوم از این آیتم های محصولات، product ID با یک نام از فایل های PNG موجود در فولدر ASSETS مچ میشه و برای هر کدوم تصویری متناسب و همنام در فولدر asstes وجود داره.

بنابراین shirt101 با این فایل PNG، shirt101.png مچ میشه، و بقیه هم همینطور.

پس، برای به دست آوردن Bitmap هر کدوم از این تصاویر، به product ID نیاز دارم. پس میام تک آرگومانی از جنس string و با نام product Id به متدم میدم. بعد از اون میام از کدی که پیش از این در این دوره نحوه سفارشی سازی اش رو آموزش دادم استفاده میکنم، یعنی گرفتن asset از فولدر assets. ولی ایندفعه، اینکار رو با استفاده از رشته ای به عنوان آرگومان داده شده به صورت پویا انجام میدم.

یک ارجاع به کلاس asset Manager میدم و getContext .getAssets رو فراخونی میکنم. بعد یک Input Stream ایجاد میکنم که از پکیج Java.io هستش. و بصورت پیشفرض مقدارش رو null میذارم. بعد برای مقداردهی به این stream، بعد از گذاشتن علامت مساوی assetManager .open رو صدا میزنم و بعد به عنوان ورودی یک رشته ایجاد میکنم که از product Id به علاوه فرمت فایل یعنی .png تشکیل میشه. وقتی از علامت به علاوه بین دو رشته استفاده میشه اون دو رشته به هم متصل میشن و یک رشته رو به وجود میارن.

یک ارور وجود داره و اون بخاطر بوجود اومدن یک حالت استثنا هستش. پس میام از راهنمایی اندروید استودیو استفاده میکنم و بلوک try catch رو به کدم اضافه میکنم یعنی گزینه surround with try catch/block رو از لیست پیشنهادی انتخاب می کنم. و این بلوک به منزله این هست که اگه گرفتن stream با موفقیت انجام شد پس میتونم مقدار Bitmap مورد نظر رو با این عبارت بدست بیارم. پس عبارت return رو تایپ می کنم و بعدش من از کلاس Bitmap Factory از Android .graphics استفاده میکنم و decode Stream رو واسش صدا میزنم، و stream رو بعنوان ورودی بهش میدم و همچنین میگم اگه وارد بلوک catch شد مقدار null رو برگردونه.

خب، حالا کدی دارم که میتونم با استفاده از اون Bitmap مربوط به product ID رو بدست بیارم. حالا باید تصویر مربوط به این Bitmap رو در componentو شی Image View نمایش بدم. با اعلام نمونه ای از کلاس Image View با نام iv یک ارجاع به Image View موجود در لایوتم میدم و یکبار دیگه convertView .findViewById رو فراخونی میکنم و آیدی لایوت اش رو R .id.imageView میدم و برای نوع بازگشتی هم کستش میکنم. و بعدش هم میام و مرجع Bitmap ام رو هم اعلام میکنم.

یک نمونه از کلاس Bitmap ایجاد میکنم و مقدارش رو با فراخونی متد سفارشی get BitmapFromAsset بدست میارم. و product .getProductId رو بعنوان ورودی بهش میدم. و بعد این تصویر رو با iv .setImageBitmap و دادن شی Bitmap به عنوان ورودی بهش نمایش میدم. خب حالا، اون مقادیر پیش فرض Text View ها و Image View که در ابتدای کار بودن از بین میرن و مقادیر واقعی با این بازنویسی که من انجام دادم جای اونها رو میگیرن و یکبار دیگه از کدم اجرا میگیرم. و این هم نتیجه.

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