یک تصویر به برنامه کارت تولد خود اضافه کنید

در این کد لبه یاد خواهید گرفت که چگونه با استفاده از ImageView تصاویر را به برنامه خود اضافه کنید.

پیش نیازها

• نحوه ایجاد و اجرای یک برنامه جدید در اندروید استودیو.
• نحوه افزودن و حذف و تنظیم ویژگی ها در TextViews با استفاده از Layout Editor.

چیزی که یاد خواهید گرفت

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

چیزی که خواهی ساخت

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

آنچه شما نیاز دارید

• یک رایانه با Android Studio نصب شده است.
• برنامه از لبه کد "ایجاد یک برنامه کارت تولد".

1. پروژه خود را از نرم افزار کدهای قبلی، ایجاد برنامه کارت تولد، در Android Studio باز کنید.
   وقتی برنامه را اجرا می کنید، باید شبیه به این باشد.
   

یک تصویر به پروژه خود اضافه کنید

در این کار، یک تصویر را از اینترنت دانلود کرده و به برنامه تولدت مبارک خود اضافه می کنید.

1. برای یافتن تصویری برای کارت تولد خود به این وب سایت بروید.
2. روی دکمه دانلود در سمت راست کلیک کنید. این به خودی خود تصویر را نمایش می دهد.
   
3. روی تصویر کلیک راست کرده و فایل را با نام androidparty.jpg در رایانه خود ذخیره کنید. محل ذخیره آن را یادداشت کنید (به عنوان مثال، پوشه دانلودها ).
4. در Android Studio، روی View > Tool Windows > Resource Manager در منوها کلیک کنید یا روی زبانه Resource Manager در سمت چپ پنجره Project کلیک کنید.
5. روی + زیر Resource Manager کلیک کنید و Import Drawables را انتخاب کنید. این یک مرورگر فایل را باز می کند.
   
6. در مرورگر فایل، فایل تصویری را که دانلود کرده اید پیدا کنید و روی Open کلیک کنید.
7. روی Next کلیک کنید.
   اندروید استودیو پیش نمایش تصویر را به شما نشان می دهد.
8. روی Import کلیک کنید.
9. اگر تصویر با موفقیت وارد شده باشد، Android Studio تصویر را به لیست Drawable شما اضافه می کند. این لیست شامل تمام تصاویر و نمادهای شما برای برنامه است. اکنون می توانید از این تصویر در برنامه خود استفاده کنید.
   
10. با کلیک بر روی View > Tool Windows > Project در منوها یا تب Project در سمت چپ، به نمای پروژه برگردید.
11. با بزرگ کردن app > res > drawable تأیید کنید که تصویر در پوشه قابل ترسیم برنامه شما قرار دارد.
    

برای نمایش یک تصویر در برنامه شما، به مکانی برای نمایش نیاز دارد. همانطور که از TextView برای نمایش متن استفاده می کنید، می توانید از ImageView برای نمایش تصاویر استفاده کنید.

در این کار، یک ImageView به برنامه خود اضافه می کنید و تصویر آن را روی تصویر کیکی که دانلود کرده اید تنظیم می کنید. سپس آن را در موقعیت قرار می دهید و اندازه آن را طوری تنظیم می کنید که صفحه را پر کند.

یک ImageView اضافه کنید و تصویر آن را تنظیم کنید

1. در پنجره پروژه activity_main.xml را باز کنید ( app > res > layout > activity_main.xml ).

نکته: اگر Layout Editor را نمی بینید، روی دکمه Design mode در سمت راست بالا کلیک کنید.

2. در Layout Editor، به پالت بروید و ImageView را به برنامه خود بکشید. آن را در نزدیکی مرکز بیندازید و هیچ یک از متن ها را روی هم قرار ندهید

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

3. در گفتگوی انتخاب یک منبع ، تصویر کیک را در لیست Drawable پیدا کنید.
4. روی تصویر کلیک کنید و سپس روی OK کلیک کنید.
   

این تصویر را به برنامه شما اضافه می کند، اما احتمالاً در جای درستی نیست و صفحه را پر نمی کند. در مرحله بعد آن را برطرف خواهید کرد.

ImageView را در موقعیت و اندازه قرار دهید

1. روی ImageView در Layout Editor کلیک کرده و بکشید، و توجه داشته باشید که با کشیدن، یک مستطیل صورتی در اطراف صفحه برنامه در نمای طراحی ظاهر می شود. مستطیل صورتی مرزهای صفحه را برای قرار دادن ImageView شما نشان می دهد.
2. ImageView را رها کنید تا لبه های چپ و راست با مستطیل صورتی تراز شوند. اندروید استودیو هنگامی که نزدیک هستید، تصویر را به لبه‌ها می‌اندازد. (در یک لحظه از بالا و پایین مراقبت خواهید کرد.)
   

Views در یک ConstraintLayout باید دارای محدودیت های افقی و عمودی باشند تا به ConstraintLayout نحوه قرار دادن آنها را بگویید. بعداً آنها را اضافه خواهید کرد.

توجه: یک محدودیت در زمینه ویرایشگر طرح‌بندی ، نشان‌دهنده اتصال یا تراز یک نما به نمای دیگر، طرح‌بندی والد یا یک دستورالعمل نامرئی است. برای مثال، یک نما را می توان محدود کرد که فاصله معینی از لبه ظرف خود داشته باشد یا همیشه در سمت راست نمای دیگری باشد یا همیشه نمای بالایی در داخل یک ظرف باشد.

1. نشانگر را روی دایره در بالای طرح کلی ImageView نگه دارید و با دایره دیگری برجسته می شود.
2. دایره را به سمت بالای صفحه برنامه بکشید، و در حین کشیدن یک فلش دایره را به نشانگر شما متصل می کند. بکشید تا به بالای صفحه بچسبد. شما یک محدودیت از بالای ImageView به بالای ConstraintLayout اضافه کرده‌اید.
   
   
3. یک محدودیت از پایین ImageView به پایین ConstraintLayout اضافه کنید.

نکته: افزودن محدودیت‌ها می‌تواند دشوارتر باشد زیرا تعداد Views بیشتری را روی صفحه اضافه می‌کنید. اگر محدودیتی را به View اشتباه اضافه کنید، می‌توانید آن مرحله را با Control+Z ( Command+Z در مک) لغو کنید یا روی View کلیک راست کنید تا منوی ظاهر شود و Clear Constraints of Selection را انتخاب کنید. تمام محدودیت های آن View را حذف کنید.

4. در قسمت Attributes ، از Widget Constraint برای اضافه کردن یک حاشیه 0 به سمت چپ و راست استفاده کنید. این به طور خودکار یک محدودیت در آن جهت ایجاد می کند.
   

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

1. در زیر ابزارک Constraint در بخش Constraints ، layout_width را روی 0dp (محدودیت مطابقت) قرار دهید.
   0dp کوتاه‌نویسی است که به Android Studio می‌گوید از محدودیت مطابقت برای عرض ImageView استفاده کند. "Match constraints به این معنی است که .... به دلیل محدودیت هایی که به تازگی اضافه کرده اید، این باعث می شود که پهنای آن به اندازه ConstraintLayout باشد، منهای هر حاشیه.
   
2. layout_height را روی 0dp (محدودیت مطابقت) قرار دهید.
   به دلیل محدودیت‌هایی که اضافه کردید، این باعث می‌شود ImageView به اندازه ConstraintLayout بلند باشد، منهای هر حاشیه.
   
3. ImageView به اندازه صفحه برنامه گسترده و بلند است، اما عکس در مرکز ImageView قرار دارد و یک دسته فضای خالی در بالا و پایین عکس وجود دارد. از آنجایی که خیلی جذاب به نظر نمی رسد، شما scaleType ImageView را تنظیم خواهید کرد که نحوه اندازه و تراز کردن تصویر را بیان می کند. درباره ScaleType در راهنمای مرجع توسعه‌دهنده بیشتر بخوانید. اکنون برنامه شما باید مانند شکل زیر باشد.
   
4. مشخصه scaleType را پیدا کنید. ممکن است لازم باشد به پایین پیمایش کنید یا این ویژگی را جستجو کنید. سعی کنید مقادیر مختلفی را برای scaleType تنظیم کنید تا ببینید آنها چه کاری انجام می دهند.

نکته: برای پیدا کردن یک خاصیت در لیست تمام ویژگی ها، روی نماد ذره بین در سمت راست Attributes کلیک کنید و شروع به تایپ نام ویژگی کنید. Android Studio فقط ویژگی هایی را نشان می دهد که شامل آن رشته هستند.

5. وقتی کارتان تمام شد، scaleType را روی centerCrop قرار دهید زیرا باعث می‌شود تصویر بدون تغییر شکل صفحه را پر کند.

تصویر کیک باید تمام صفحه را پر کند، همانطور که در زیر نشان داده شده است.

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

ImageView را پشت متن حرکت دهید

پس از اینکه ImageView صفحه را پر کرد، دیگر نمی توانید متن را ببینید. این به این دلیل است که تصویر اکنون متن را پوشش می دهد. به نظر می رسد که ترتیب عناصر UI شما مهم است. شما ابتدا TextViews را اضافه کردید، سپس ImageView را اضافه کردید، به این معنی که در بالای صفحه قرار گرفت. هنگامی که نماها را به یک طرح‌بندی اضافه می‌کنید، در انتهای فهرستی از نماها اضافه می‌شوند و به ترتیبی که در فهرست هستند ترسیم می‌شوند. ImageView به انتهای لیست Views در ConstraintLayout اضافه شد، به این معنی که آخرین ترسیم شده است و روی TextViews کشیده می شود. برای رفع این مشکل، ترتیب نماها را تغییر می‌دهید و ImageView را به ابتدای لیست منتقل می‌کنید تا ابتدا ترسیم شود.

1. در Component Tree ، روی ImageView کلیک کنید و آن را از بالای TextViews به سمت پایین ConstraintLayout بکشید. یک خط آبی با یک مثلث ظاهر می شود که نشان می دهد ImageView کجا خواهد رفت. ImageView را درست زیر ConstraintLayout رها کنید.
   
   

ImageView اکنون باید در لیست زیر ConstraintLayout اول باشد و بعد از آن TextViews قرار گیرد. هر دو "تولدت مبارک، سام!" و "از اما". اکنون متن باید قابل مشاهده باشد، اما "تولدت مبارک، سام!" ممکن است خواندن آن سخت باشد زیرا متنی تیره در پس زمینه تیره است. (در حال حاضر هشدار مربوط به توضیحات محتوای گمشده را نادیده بگیرید.)

رنگ متن را تغییر دهید

متن تبریک و امضای شما اکنون در مقابل تصویر است. اما ممکن است بسته به رنگ متنی که انتخاب کرده اید، دیدن آنها همچنان سخت باشد. در این مرحله رنگ متن را تنظیم می کنید تا با تصویر پشت آن بهتر نشان داده شود.

1. اولین TextView با کلیک بر روی آن در Component Tree انتخاب کنید.
2. در ویژگی ها، روی ویژگی textColor کلیک کنید و شروع به تایپ سفید کنید.
   توجه داشته باشید که در حین تایپ، اندروید استودیو فهرستی از رنگ‌ها را نشان می‌دهد که حاوی متنی است که تاکنون تایپ کرده‌اید.
   
3. @android:color/white را از لیست رنگ‌ها انتخاب کنید و Enter را فشار دهید. اندروید تعدادی رنگ را تعریف می کند تا بتوانید به طور مداوم از آنها در قسمت های مختلف برنامه خود استفاده کنید.
4. همین کار را با TextView دیگر انجام دهید.
5. برنامه خود را اجرا کنید و مشاهده کنید که اکنون خواندن متن بسیار آسان تر است.
   

تبریک می گویم! شما یک تصویر به برنامه اندروید خود اضافه کرده اید و متن شما روی آن عالی به نظر می رسد!!

هنگامی که TextViews را در لبه کد قبلی اضافه کردید، Android Studio آنها را با مثلث های هشدار دهنده پرچم گذاری کرد. در این مرحله، آن اخطارها را برطرف می‌کنید و همچنین هشدار را در ImageView برطرف می‌کنید.

در حال ترجمه

هنگام نوشتن برنامه‌ها، مهم است که به خاطر داشته باشید که ممکن است در مقطعی به زبان دیگری ترجمه شوند. همانطور که در یک کد قبلی یاد گرفتید، یک رشته دنباله ای از کاراکترهایی است مانند "تولدت مبارک، سم!".

رشته سخت کد شده رشته ای است که مستقیماً در کد برنامه شما نوشته می شود. رشته های کدگذاری شده ترجمه برنامه شما به زبان های دیگر را دشوارتر می کند و استفاده مجدد از یک رشته را در مکان های مختلف برنامه شما سخت تر می کند. شما می توانید با "استخراج رشته ها در یک فایل منبع" با آن مسائل مقابله کنید. این بدان معناست که به جای اینکه رشته را در کد خود کدگذاری کنید، رشته را در یک فایل قرار می دهید، نامی برای آن می گذارید و سپس هر زمان که می خواهید از این رشته استفاده کنید از نام آن استفاده کنید. حتی اگر رشته را تغییر دهید یا به زبان دیگری ترجمه کنید، نام ثابت می ماند.

1. روی مثلث نارنجی کنار اولین TextView با "تولدت مبارک، سام!"
   Android Studio پنجره ای با اطلاعات بیشتر و یک راه حل پیشنهادی باز می کند. ممکن است لازم باشد برای دیدن راه حل پیشنهادی به پایین پیمایش کنید.
   
   
2. روی دکمه Fix کلیک کنید.
   Android Studio گفتگوی Extract Resource را باز می کند. در این گفتگو، می‌توانید آنچه را که منبع رشته شما نامیده می‌شود و برخی جزئیات در مورد نحوه ذخیره آن سفارشی کنید. نام منبع همان چیزی است که رشته قرار است نامیده شود. مقدار Resource خود رشته واقعی خواهد بود.
3. در گفتگوی Extract Resource ، نام منبع را به happy_birthday_text تغییر دهید. منابع رشته ای باید نام های کوچک داشته باشند و چندین کلمه باید با زیرخط جدا باشند. تنظیمات دیگر را با تنظیمات پیش فرض رها کنید.
   
4. روی دکمه OK کلیک کنید.
5. در قسمت Attributes ، ویژگی text را پیدا کنید و متوجه شوید که Android Studio به طور خودکار آن را برای شما روی @string/happy_birthday_text تنظیم کرده است.
   
6. strings.xml ( app > res > values ​​> strings.xml ) را باز کنید و متوجه شوید که Android Studio یک منبع رشته ای به نام happy_birthday_text ایجاد کرده است.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
</resources>

فایل strings.xml دارای لیستی از رشته هایی است که کاربر در برنامه شما خواهد دید. توجه داشته باشید که نام برنامه شما نیز یک منبع رشته ای است. با قرار دادن همه رشته ها در یک مکان، می توانید به راحتی تمام متن برنامه خود را ترجمه کنید و راحت تر از یک رشته در قسمت های مختلف برنامه خود استفاده مجدد کنید.

7. همین مراحل را برای استخراج متن امضای TextView دنبال کنید و منبع رشته را signature_text نامگذاری کنید.

فایل تمام شده شما باید شبیه این باشد.

<resources>
    <string name="app_name">Happy Birthday</string>
    <string name="happy_birthday_text">Happy Birthday, Sam!</string>
    <string name="signature_text">From Emma.</string>
</resources>

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

پیروی از شیوه های خوب کدنویسی برای دسترسی به همه کاربران شما، از جمله کاربران دارای معلولیت، اجازه می دهد تا راحت تر با برنامه شما حرکت کنند و با آن تعامل داشته باشند.

توجه: اندروید ابزارهای زیادی را در اختیار کاربران قرار می دهد. برای مثال، TalkBack صفحه‌خوان Google است که در دستگاه‌های Android موجود است. TalkBack به کاربران بازخورد گفتاری می دهد تا کاربران بتوانند بدون نگاه کردن به صفحه از دستگاه خود استفاده کنند. در راهنمای مرجع توسعه‌دهنده درباره دسترسی بیشتر بخوانید.

Android Studio نکات و هشدارهایی را ارائه می دهد تا به شما کمک کند برنامه خود را در دسترس تر کنید.

1. در Component Tree ، به مثلث نارنجی رنگ در کنار ImageView که قبلا اضافه کردید توجه کنید. اگر نشانگر را روی آن نگه دارید، یک راهنمای ابزار با هشداری در مورد عدم وجود ویژگی «contentDescription» روی تصویر خواهید دید. شرح محتوا می‌تواند با تعریف هدف عنصر رابط کاربری به کاربردی‌تر کردن برنامه شما با TalkBack کمک کند.

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

2. در Component Tree ، ImageView را انتخاب کنید.
3. در پنجره Attributes ، در بخش All Attributes ، importantForAccessibility را پیدا کنید و آن را روی no قرار دهید.
   

مثلث نارنجی کنار ImageView ناپدید می شود.

4. برنامه خود را دوباره اجرا کنید تا مطمئن شوید هنوز کار می کند.

تبریک می گویم! شما یک تصویر به برنامه تولدت مبارک خود اضافه کرده‌اید، دستورالعمل‌های دسترس‌پذیری را دنبال کرده‌اید و ترجمه آن را به زبان‌های دیگر آسان‌تر کرده‌اید!

کد راه حل برای برنامه Happy Birthday در GitHub آپلود شده است، در صورتی که مایلید کدی را که ما به آن پایان دادیم ببینید.

GitHub سرویسی است که به توسعه دهندگان اجازه می دهد تا کد پروژه های نرم افزاری خود را مدیریت کنند. از Git استفاده می کند که یک سیستم کنترل نسخه است که تغییرات ایجاد شده برای هر نسخه از کد را پیگیری می کند. اگر تا به حال سابقه نسخه Google Doc را دیده اید، می توانید ببینید که در گذشته چه زمانی و چه ویرایش هایی روی سند انجام شده است. به طور مشابه، می توانید تاریخچه نسخه کد را در یک پروژه ردیابی کنید. اگر به صورت فردی یا تیمی روی یک پروژه کار می کنید، این بسیار مفید است.

GitHub همچنین یک وب سایت دارد که می توانید پروژه خود را مشاهده و مدیریت کنید. این پیوند GitHub به شما امکان می دهد فایل های پروژه تولدت مبارک را به صورت آنلاین مرور کنید یا آنها را در رایانه خود دانلود کنید.

آدرس کد راه حل: https://github.com/g oogle-developer-training/android-basics-kotlin-<APPNAME>

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

کد را دریافت کنید

1. روی URL کد راه حل کلیک کنید. با این کار صفحه GitHub برای پروژه در یک مرورگر باز می شود.
2. در صفحه GitHub برای پروژه، روی دکمه Clone یا دانلود کلیک کنید، که یک گفتگوی Clone ظاهر می شود.

3. در گفتگو، روی دکمه دانلود ZIP کلیک کنید تا پروژه در رایانه شما ذخیره شود. صبر کنید تا دانلود کامل شود.
4. فایل را در رایانه خود پیدا کنید (احتمالاً در پوشه دانلودها ).
5. روی فایل ZIP دوبار کلیک کنید تا بسته بندی شود. این یک پوشه جدید ایجاد می کند که حاوی فایل های پروژه است.

پروژه را در اندروید استودیو باز کنید

1. اندروید استودیو را راه اندازی کنید.
2. در پنجره خوش آمدید به Android Studio ، روی باز کردن پروژه موجود Android Studio کلیک کنید.

توجه: اگر Android Studio از قبل باز است، در عوض، گزینه منوی File > New > Import Project را انتخاب کنید.

3. در گفتگوی Import Project ، به جایی که پوشه پروژه از حالت فشرده خارج شده است (احتمالاً در پوشه دانلودهای شما) قرار دارد، بروید.
4. روی آن پوشه پروژه دوبار کلیک کنید.
5. منتظر بمانید تا Android Studio پروژه را باز کند.
6. روی دکمه Run کلیک کنید برای ساخت و اجرای برنامه مطمئن شوید که همانطور که انتظار می رود کار می کند.
7. فایل های پروژه را در پنجره ابزار Project مرور کنید تا ببینید برنامه چگونه پیاده سازی شده است.

راهنما: اگر کد دانلود شده شما به درستی بارگیری یا اجرا نمی شود، راهنمای عیب یابی و راهنما را ببینید.

• مدیر منابع در Android Studio به شما کمک می کند تصاویر و سایر منابع خود را اضافه و سازماندهی کنید.
• ImageView یک عنصر رابط کاربری برای نمایش تصاویر در برنامه شما است.
• ImageViews باید دارای توضیحات محتوا باشد تا به برنامه شما در دسترس‌تر شود.
• متنی که مانند تبریک تولد به کاربر نشان داده می شود باید در یک منبع رشته ای استخراج شود تا ترجمه برنامه شما به زبان های دیگر آسان تر شود.

• مدیریت منابع در اندروید استودیو
• کلاس ImageView
• دسترسی
• پشتیبانی از زبان های مختلف
• شروع کار با GitHub

توجه: تمرینات اختیاری است. آنها فرصتی را برای شما فراهم می کنند تا آنچه را که در این نرم افزار یاد گرفته اید تمرین کنید.

موارد زیر را انجام دهید:

1. برنامه کارت تولد خود را بر اساس طرح خود ایجاد کنید.
2. با فکر کردن به Views که نیاز دارید شروع کنید.
3. چه ترتیبی برای افزودن آنها راحت تر است؟
4. چه تصاویری را باید به پوشه قابل ترسیم اضافه کنید؟

دو نوع تصویر بیت مپ معمولا برای برنامه های اندروید استفاده می شود، فایل های JPEG و فایل های PNG. فایل های PNG می توانند دارای قسمت های شفاف (خالی) در آنها باشند. درباره فرمت های تصویر در مرجع توسعه دهنده بیشتر بخوانید.

5. به یاد داشته باشید که Views را ابتدا با محدودیت ها و حاشیه ها قرار دهید، سپس به آنها استایل دهید.
6. برای برجسته‌تر کردن متن در برخی از تصاویر، سعی کنید با shadowColor ، shadowDx ، shadowDy و shadowRadius آزمایش کنید.
   

کارتو چک کن:

برنامه تمام شده شما باید بدون خطا اجرا شود و کارت تولدی را که طراحی کرده اید نشان دهد.