با مجموعهها، منظم بمانید
ذخیره و دستهبندی محتوا براساس اولویتهای شما.
مقدمه
محتوای اکثر طراحیهای رابط کاربری ثابت نیستند - بسته به دادهها تغییر میکنند. در این بخش، دادهها را از طریق پارامترهای محتوا به طرح خود اضافه میکنیم، که به طراحان اجازه میدهد مشخص کنند کدام قسمت از طرح باید با داده پر شود.
پارامترها را در Figma اضافه کنید
بیایید پارامترهای محتوا را به کامپوننت خود اضافه کنیم.
به Figma بروید. در NewsCardTutorial، لایه تصویر کوچک را در نوع hero-item انتخاب کنید (⌘ + روی Mac یا Ctrl + کلیک بر روی Windows و Linux روی تصویر).
در پلاگین Relay for Figma، روی + کلیک کنید و image-content را در منوی کشویی انتخاب کنید، سپس نام را به "Thumbnail" تغییر دهید.
لایه متن عنوان را انتخاب کنید، روی + کلیک کنید و text-content را انتخاب کنید. همین مراحل را برای نویسنده تکرار کنید و لایههای متن را در نوع hero-item تاریخگذاری کنید . آنها را به ترتیب «سرخط»، «نویسنده» و «تاریخ» نام ببرید.
بر روی پارامتر تصویر کوچک در افزونه کلیک کنید. توجه داشته باشید که در هر گونه جزء، لایه بندانگشتی یک تصویر است و انتخاب شده است.
از آنجایی که سه لایه نام یکسانی دارند («تصویر کوچک») و نوع داده یکسانی (تصویر-محتوا) هستند، پارامتر محتوا در هر سه نوع به آن متصل شده است. این بدان معنی است که یک پارامتر داده های یکسانی را به چندین نوع می دهد. این برای پارامترهای عنوان، نویسنده و تاریخ نیز صادق است.
ذخیره نسخه نامگذاری شده
بیایید اکنون این نسخه را به عنوان آماده برای وارد شدن به کد علامت گذاری کنیم.
افزونه Figma Relay را باز کنید، اگر قبلاً باز نشده است.
روی اشتراک گذاری با توسعه دهنده کلیک کنید.
در صفحه اشتراکگذاری با توسعهدهنده ، یک نام و توضیح برای نسخه وارد کنید.
عنوان مثال : پارامترهای اضافه شده
توضیح مثال : پارامترهای محتوا به کارت اضافه شده است
روی ذخیره کلیک کنید.
کامپوننت را در اندروید استودیو به روز کنید
بیایید مولفه NewsCard را به روز کنیم:
در Android Studio، مطمئن شوید که پنجره ابزار Project در نمای Android باشد. سپس روی app/ui-packages/news_card/ کلیک راست کرده و روی Update UI Package کلیک کنید.
کلیک کنید برای ساخت پروژه خود این بسته UI به روز شده را می گیرد و یک نسخه به روز از کد قابل ترکیب ایجاد می کند.
اگر به app/java (generated)/com/example/hellonews/newscard/NewsCard.kt نگاه کنید، خواهید دید که پارامترهای محتوایی که اضافه کردیم ( thumbnail ، headline ، author ، date ) در لیست پارامترهای composable ما ظاهر میشوند.
// View to select for NewsCardenumclassView{HeroItem,ArticleItem,AudioItem}/*** News card component intended to display news items for a list** This composable was generated from the UI package 'news_card'.* Generated code; don't edit directly.*/@ComposablefunNewsCard(modifier:Modifier=Modifier,view:View=View.HeroItem,thumbnail:Painter=EmptyPainter(),headline:String="",author:String="",date:String=""){...
ادغام در برنامه
بیایید به برنامه خود نگاه کنیم که رابط کاربری آن را هنوز تغییر نداده ایم. این شامل فهرستی از اخبار معمولی و فهرستی از داستان های صوتی است. اینها دو قابلیتی هستند که برای افزودن مؤلفه NewsCard خود به آنها نیاز داریم:
نوشته PostListArticleStories مسئول اخبار معمولی است.
پارامتر postTop نشان دهنده داستان برتر است.
پارامتر پست ها بقیه داستان ها را نشان می دهد.
PostListAudioStories قابل نوشتن داستان های خبری صوتی را ارائه می دهد. حالا بیایید جزء NewsCard خود را در صفحه اصلی ادغام کنیم.
در app/java/com/example/hellonews/ui/home/HomeScreen.kt ، موارد وارداتی زیر را در کنار سایر خطوط واردات در بالای فایل اضافه کنید: import com.example.hellonews.newscard.NewsCard
import com.example.hellonews.newscard.View
هنوز در HomeScreen.kt ، به پایین به PostListArticleStories بروید.
محتوا و نمونه کدها در این صفحه مشمول پروانههای توصیفشده در پروانه محتوا هستند. جاوا و OpenJDK علامتهای تجاری یا علامتهای تجاری ثبتشده Oracle و/یا وابستههای آن هستند.
تاریخ آخرین بهروزرسانی 2024-11-12 بهوقت ساعت هماهنگ جهانی.
[[["درک آسان","easyToUnderstand","thumb-up"],["مشکلم را برطرف کرد","solvedMyProblem","thumb-up"],["غیره","otherUp","thumb-up"]],[["اطلاعاتی که نیاز دارم وجود ندارد","missingTheInformationINeed","thumb-down"],["بیشازحد پیچیده/ مراحل بسیار زیاد","tooComplicatedTooManySteps","thumb-down"],["قدیمی","outOfDate","thumb-down"],["مشکل ترجمه","translationIssue","thumb-down"],["مشکل کد / نمونهها","samplesCodeIssue","thumb-down"],["غیره","otherDown","thumb-down"]],["تاریخ آخرین بهروزرسانی 2024-11-12 بهوقت ساعت هماهنگ جهانی."],[],[]]