একটি কম্পোজেবল একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @Composable
দিয়ে টীকা করা হয়:
@Composable fun SimpleComposable() { Text("Hello World") }
এই কম্পোজেবলের একটি প্রিভিউ সক্ষম করতে, @Composable
এবং @Preview
দিয়ে টীকাযুক্ত আরেকটি কম্পোজেবল তৈরি করুন। এই নতুন, টীকাযুক্ত কম্পোজেবলটিতে এখন আপনার তৈরি করা কম্পোজেবল রয়েছে, SimpleComposable
:
@Preview @Composable fun SimpleComposablePreview() { SimpleComposable() }
@Preview
টীকাটি অ্যান্ড্রয়েড স্টুডিওকে বলে যে এই কম্পোজেবলটি এই ফাইলের ডিজাইন ভিউতে দেখানো উচিত। আপনি আপনার সম্পাদনা করার সাথে সাথে আপনার রচনাযোগ্য পূর্বরূপের লাইভ আপডেটগুলি দেখতে পারেন৷
Android Studio যেভাবে @Preview
রেন্ডার করে তা কাস্টমাইজ করতে আপনি আপনার কোডে ম্যানুয়ালি প্যারামিটার যোগ করতে পারেন। এমনকি আপনি বিভিন্ন বৈশিষ্ট্য সহ কম্পোজেবলের পূর্বরূপ দেখতে একই ফাংশনে একাধিকবার @Preview
টীকা যোগ করতে পারেন।
@Preview
কম্পোজেবল ব্যবহার করার প্রাথমিক সুবিধাগুলির মধ্যে একটি হল অ্যান্ড্রয়েড স্টুডিওতে এমুলেটরের উপর নির্ভরতা এড়ানো। আপনি আরও চূড়ান্ত চেহারা এবং অনুভূতি পরিবর্তনের জন্য এমুলেটরের মেমরি-ভারী স্টার্টআপ সংরক্ষণ করতে পারেন, এবং সহজে ছোট কোড পরিবর্তনগুলি করতে এবং পরীক্ষা করার @Preview
-এর ক্ষমতা।
@Preview
টীকাটিকে সবচেয়ে কার্যকরভাবে ব্যবহার করতে, আপনার স্ক্রীনগুলিকে ইনপুট হিসাবে প্রাপ্ত অবস্থা এবং এটি যে ইভেন্টগুলি আউটপুট করে তার পরিপ্রেক্ষিতে সংজ্ঞায়িত করতে ভুলবেন না।
আপনার @Preview
সংজ্ঞায়িত করুন
অ্যান্ড্রয়েড স্টুডিও কম্পোজযোগ্য পূর্বরূপ প্রসারিত করার জন্য কিছু বৈশিষ্ট্য অফার করে। আপনি তাদের কন্টেইনার ডিজাইন পরিবর্তন করতে পারেন, তাদের সাথে ইন্টারঅ্যাক্ট করতে পারেন বা এমুলেটর বা ডিভাইসে সরাসরি স্থাপন করতে পারেন।
মাত্রা
ডিফল্টরূপে, @Preview
ডাইমেনশন স্বয়ংক্রিয়ভাবে এর বিষয়বস্তু মোড়ানোর জন্য বেছে নেওয়া হয়। ম্যানুয়ালি মাত্রা সেট করতে, heightDp
এবং widthDp
প্যারামিটার যোগ করুন। এই মানগুলি ইতিমধ্যে dp
হিসাবে ব্যাখ্যা করা হয়েছে, তাই আপনাকে তাদের সাথে .dp
যোগ করার দরকার নেই:
@Preview(widthDp = 50, heightDp = 50) @Composable fun SquareComposablePreview() { Box(Modifier.background(Color.Yellow)) { Text("Hello World") } }
গতিশীল রঙের পূর্বরূপ
আপনি যদি আপনার অ্যাপে গতিশীল রঙ সক্ষম করে থাকেন, তাহলে ওয়ালপেপার পরিবর্তন করতে wallpaper
অ্যাট্রিবিউট ব্যবহার করুন এবং বিভিন্ন ব্যবহারকারীর নির্বাচিত ওয়ালপেপারে আপনার UI কীভাবে প্রতিক্রিয়া দেখায় তা দেখুন। Wallpaper
ক্লাসের দেওয়া বিভিন্ন ওয়ালপেপার থিম থেকে নির্বাচন করুন। এই বৈশিষ্ট্যটির জন্য কম্পোজ 1.4.0 বা উচ্চতর প্রয়োজন।
বিভিন্ন ডিভাইসের সাথে ব্যবহার করুন
অ্যান্ড্রয়েড স্টুডিও ফ্ল্যামিঙ্গোতে, আপনি বিভিন্ন ডিভাইসে আপনার কম্পোজেবলের কনফিগারেশন নির্ধারণ করতে পূর্বরূপ টীকাটির device
প্যারামিটার সম্পাদনা করতে পারেন।
যখন ডিভাইসের প্যারামিটারে একটি খালি স্ট্রিং থাকে ( @Preview(device = "")
, তখন আপনি Ctrl
+ Space
টিপে স্বয়ংসম্পূর্ণ করতে পারেন। তারপর, আপনি প্রতিটি প্যারামিটারের মান সেট করতে পারেন।
স্বয়ংসম্পূর্ণ থেকে, আপনি তালিকা থেকে যেকোনো ডিভাইস বিকল্প নির্বাচন করতে পারেন-উদাহরণস্বরূপ, @Preview(device = "id:pixel_4")
। বিকল্পভাবে, আপনি প্রতিটি প্যারামিটারের পৃথক মান সেট করতে spec:width=px,height=px,dpi=int…
বেছে নিয়ে একটি কাস্টম ডিভাইস প্রবেশ করতে পারেন।
আবেদন করতে, Enter
চাপুন, অথবা Esc
দিয়ে বাতিল করুন।
আপনি যদি একটি অবৈধ মান সেট করেন, তাহলে ঘোষণাটি লাল রঙে আন্ডারলাইন করা হয় এবং একটি ফিক্স উপলব্ধ হতে পারে ( Alt
+ Enter
(macOS-এর জন্য ⌥ + ⏎) > এর সাথে প্রতিস্থাপন করুন … .
লোকেল
বিভিন্ন ব্যবহারকারীর লোকেল পরীক্ষা করতে, locale
প্যারামিটার যোগ করুন:
@Preview(locale = "fr-rFR") @Composable fun DifferentLocaleComposablePreview() { Text(text = stringResource(R.string.greeting)) }
পটভূমির রঙ সেট করুন
ডিফল্টরূপে, আপনার কম্পোজেবল একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ প্রদর্শিত হয়। একটি ব্যাকগ্রাউন্ড যোগ করতে, showBackground
এবং backgroundColor
প্যারামিটার যোগ করুন। মনে রাখবেন যে backgroundColor
একটি ARGB Long
, একটি Color
মান নয়:
@Preview(showBackground = true, backgroundColor = 0xFF00FF00) @Composable fun WithGreenBackground() { Text("Hello World") }
সিস্টেম UI
আপনি যদি একটি পূর্বরূপের মধ্যে স্থিতি এবং অ্যাকশন বারগুলি প্রদর্শন করতে চান তবে showSystemUi
প্যারামিটার যোগ করুন:
@Preview(showSystemUi = true) @Composable fun DecoratedComposablePreview() { Text("Hello World") }
![একটি প্রিভিউ উইন্ডো স্ট্যাটাস এবং অ্যাকশন বার সহ একটি কার্যকলাপ দেখায়।](https://developer.android.com/static/develop/ui/compose/images/tooling-decorated-preview.png?authuser=4&hl=bn)
UI মোড
প্যারামিটার uiMode
Configuration.UI_*
ধ্রুবকগুলির যেকোনো একটি নিতে পারে এবং আপনাকে সেই অনুযায়ী পূর্বরূপের আচরণ পরিবর্তন করতে দেয়। উদাহরণস্বরূপ, থিমটি কীভাবে প্রতিক্রিয়া দেখায় তা দেখতে আপনি পূর্বরূপটি নাইট মোডে সেট করতে পারেন।
LocalInspectionMode
আপনি LocalInspectionMode
CompositionLocal
থেকে পড়তে পারেন যে কম্পোজেবলটি একটি পূর্বরূপ (একটি পরিদর্শনযোগ্য উপাদানের ভিতরে) রেন্ডার করা হয়েছে কিনা। যদি রচনাটি একটি প্রিভিউতে রেন্ডার করা হয়, LocalInspectionMode.current
true
মূল্যায়ন করে। এই তথ্য আপনাকে আপনার পূর্বরূপ কাস্টমাইজ করতে দেয়; উদাহরণস্বরূপ, আপনি বাস্তব তথ্য দেখানোর পরিবর্তে পূর্বরূপ উইন্ডোতে একটি স্থানধারক চিত্র দেখাতে পারেন।
এইভাবে, আপনি সীমাবদ্ধতার চারপাশেও কাজ করতে পারেন। উদাহরণস্বরূপ, নেটওয়ার্ক অনুরোধ কল করার পরিবর্তে নমুনা ডেটা দেখানো।
@Composable fun GreetingScreen(name: String) { if (LocalInspectionMode.current) { // Show this text in a preview window: Text("Hello preview user!") } else { // Show this text in the app: Text("Hello $name!") } }
আপনার @Preview
এর সাথে ইন্টারঅ্যাক্ট করুন
অ্যান্ড্রয়েড স্টুডিও এমন বৈশিষ্ট্যগুলি সরবরাহ করে যা আপনাকে আপনার সংজ্ঞায়িত পূর্বরূপগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়৷ এই মিথস্ক্রিয়া আপনাকে আপনার পূর্বরূপগুলির রানটাইম আচরণ বুঝতে সাহায্য করে এবং আপনাকে পূর্বরূপগুলির সাথে আপনার UI আরও ভালভাবে নেভিগেট করতে দেয়৷
ইন্টারেক্টিভ মোড
ইন্টারেক্টিভ মোড আপনাকে ফোন বা ট্যাবলেটের মতো আপনার প্রোগ্রাম চালানোর একটি ডিভাইসে কীভাবে আপনি একইভাবে একটি পূর্বরূপের সাথে ইন্টারঅ্যাক্ট করতে দেয়। ইন্টারেক্টিভ মোড একটি স্যান্ডবক্স পরিবেশে বিচ্ছিন্ন (অর্থাৎ, অন্যান্য পূর্বরূপ থেকে বিচ্ছিন্ন), যেখানে আপনি উপাদানগুলিতে ক্লিক করতে পারেন এবং প্রিভিউতে ব্যবহারকারীর ইনপুট প্রবেশ করতে পারেন। এটি আপনার কম্পোজেবলের বিভিন্ন অবস্থা, অঙ্গভঙ্গি এবং এমনকি অ্যানিমেশন পরীক্ষা করার একটি দ্রুত উপায়।
কোড নেভিগেশন এবং রচনাযোগ্য রূপরেখা
এর মধ্যে থাকা কম্পোজেবলের রূপরেখা দেখতে আপনি একটি প্রিভিউ-এর উপরে ঘুরতে পারেন। একটি সংমিশ্রণযোগ্য আউটলাইনে ক্লিক করা আপনার সম্পাদকের দৃশ্যকে এর সংজ্ঞাতে নেভিগেট করতে ট্রিগার করে।
প্রিভিউ চালান
আপনি একটি এমুলেটর বা একটি শারীরিক ডিভাইসে একটি নির্দিষ্ট @Preview
চালাতে পারেন। প্রিভিউ একই প্রকল্প অ্যাপের মধ্যে একটি নতুন Activity
হিসাবে স্থাপন করা হয়েছে, তাই এটি একই প্রসঙ্গ এবং অনুমতিগুলি ভাগ করে। এটি ইতিমধ্যে মঞ্জুর করা হলে আপনাকে অনুমতি চেয়ে বয়লারপ্লেট কোড লিখতে হবে না।
রান প্রিভিউ আইকনে ক্লিক করুন
@Preview
টীকাটির পাশে বা পূর্বরূপের শীর্ষে, এবং Android স্টুডিও সেই @Preview
আপনার সংযুক্ত ডিভাইস বা এমুলেটরে স্থাপন করে।
@Preview
রেন্ডার কপি করুন
প্রতিটি রেন্ডার করা পূর্বরূপ এটিতে ডান ক্লিক করে একটি চিত্র হিসাবে অনুলিপি করা যেতে পারে।
একই @Preview
টীকাটির একাধিক পূর্বরূপ
আপনি একই @Preview
কম্পোজেবলের একাধিক সংস্করণ বিভিন্ন স্পেসিফিকেশন সহ, অথবা কম্পোজেবলে পাস করা বিভিন্ন প্যারামিটার প্রদর্শন করতে পারেন। এইভাবে, আপনি বয়লারপ্লেট কোড কমাতে পারেন যা আপনাকে অন্যথায় লিখতে হবে।
মাল্টিপ্রিভিউ টেমপ্লেট
androidx.compose.ui:ui-tooling-preview
1.6.0-alpha01+ মাল্টিপ্রিভিউ এপিআই টেমপ্লেট প্রবর্তন করেছে: @PreviewScreenSizes
, @PreviewFontScales
, @PreviewLightDark
, এবং @PreviewDynamicColors
, যাতে আপনি একটি কমন প্রিভিউ-এর মাধ্যমে আপনার একক প্রিভিউ দেখতে পারেন। .
কাস্টম মাল্টিপ্রিভিউ টীকা তৈরি করুন
মাল্টিপ্রিভিউ-এর মাধ্যমে, আপনি একটি টীকা ক্লাস সংজ্ঞায়িত করতে পারেন যেটিতে বিভিন্ন কনফিগারেশন সহ একাধিক @Preview
টীকা রয়েছে। একটি সংমিশ্রণযোগ্য ফাংশনে এই টীকা যুক্ত করা স্বয়ংক্রিয়ভাবে সমস্ত বিভিন্ন পূর্বরূপ একবারে রেন্ডার করে। উদাহরণস্বরূপ, আপনি প্রতিটি একক কম্পোজেবলের জন্য সেই সংজ্ঞাগুলি পুনরাবৃত্তি না করে একই সময়ে একাধিক ডিভাইস, ফন্টের আকার বা থিমগুলির পূর্বরূপ দেখতে এই টীকাটি ব্যবহার করতে পারেন।
আপনার নিজস্ব কাস্টম টীকা ক্লাস তৈরি করে শুরু করুন:
@Preview( name = "small font", group = "font scales", fontScale = 0.5f ) @Preview( name = "large font", group = "font scales", fontScale = 1.5f ) annotation class FontScalePreviews
আপনি আপনার প্রিভিউ কম্পোজেবলের জন্য এই কাস্টম টীকাটি ব্যবহার করতে পারেন:
@FontScalePreviews @Composable fun HelloWorldPreview() { Text("Hello World") }
আপনি পূর্বরূপের আরও সম্পূর্ণ সেট তৈরি করতে একাধিক মাল্টিপ্রিভিউ টীকা এবং সাধারণ পূর্বরূপ টীকা একত্রিত করতে পারেন। মাল্টিপ্রিভিউ টীকা একত্রিত করার অর্থ এই নয় যে সমস্ত ভিন্ন সমন্বয় দেখানো হয়েছে। পরিবর্তে, প্রতিটি মাল্টিপ্রিভিউ টীকা স্বাধীনভাবে কাজ করে এবং শুধুমাত্র তার নিজস্ব ভেরিয়েন্ট রেন্ডার করে।
@Preview( name = "Spanish", group = "locale", locale = "es" ) @FontScalePreviews annotation class CombinedPreviews @CombinedPreviews @Composable fun HelloWorldPreview2() { MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } } }
মাল্টিপ্রিভিউ-- এবং সাধারণ প্রিভিউ--এর মিশ্র-এবং-মিল প্রকৃতি!-- আপনাকে আরও ব্যাপকভাবে বৃহত্তর প্রকল্পগুলির অনেক বৈশিষ্ট্য পরীক্ষা করতে দেয়।
@Preview
এবং বড় ডেটা সেট
খুব প্রায়ই, একটি প্রয়োজন দেখা দেয় যেখানে আপনাকে অবশ্যই একটি বড় ডেটাসেট আপনার কম্পোজেবল প্রিভিউতে পাস করতে হবে। এটি করার জন্য, @PreviewParameter
টীকা সহ একটি প্যারামিটার যোগ করে একটি রচনাযোগ্য পূর্বরূপ ফাংশনে নমুনা ডেটা পাস করুন।
@Preview @Composable fun UserProfilePreview( @PreviewParameter(UserPreviewParameterProvider::class) user: User ) { UserProfile(user) }
নমুনা ডেটা প্রদান করতে, একটি ক্লাস তৈরি করুন যা PreviewParameterProvider
প্রয়োগ করে এবং একটি ক্রম হিসাবে নমুনা ডেটা প্রদান করে।
class UserPreviewParameterProvider : PreviewParameterProvider<User> { override val values = sequenceOf( User("Elise"), User("Frank"), User("Julia") ) }
এটি ক্রমানুসারে ডেটা উপাদান প্রতি একটি পূর্বরূপ রেন্ডার করে:
আপনি একাধিক পূর্বরূপের জন্য একই প্রদানকারী শ্রেণী ব্যবহার করতে পারেন। প্রয়োজনে, সীমা প্যারামিটার সেট করে পূর্বরূপের সংখ্যা সীমিত করুন।
@Preview @Composable fun UserProfilePreview2( @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User ) { UserProfile(user) }
সীমাবদ্ধতা এবং সর্বোত্তম অনুশীলন
অ্যান্ড্রয়েড স্টুডিও প্রিভিউ এলাকায় সরাসরি প্রিভিউ কোড এক্সিকিউট করে। এটির জন্য কোনো এমুলেটর বা ফিজিক্যাল ডিভাইস চালানোর প্রয়োজন নেই কারণ এটি Layoutlib
নামক অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি পোর্টেড অংশকে ব্যবহার করে। Layoutlib
হল Android ফ্রেমওয়ার্কের একটি কাস্টম সংস্করণ যা Android ডিভাইসের বাইরে চালানোর জন্য ডিজাইন করা হয়েছে। লাইব্রেরির লক্ষ্য হল অ্যান্ড্রয়েড স্টুডিওতে একটি লেআউটের একটি পূর্বরূপ প্রদান করা যা ডিভাইসগুলিতে রেন্ডারিংয়ের খুব কাছাকাছি।
পূর্বরূপ সীমাবদ্ধতা
অ্যান্ড্রয়েড স্টুডিওতে যেভাবে প্রিভিউ রেন্ডার করা হয়, সেগুলি হালকা ওজনের এবং সেগুলি রেন্ডার করার জন্য পুরো অ্যান্ড্রয়েড ফ্রেমওয়ার্কের প্রয়োজন হয় না৷ যাইহোক, এটি নিম্নলিখিত সীমাবদ্ধতার সাথে আসে:
- নেটওয়ার্ক অ্যাক্সেস নেই
- কোনো ফাইল অ্যাক্সেস নেই
- কিছু
Context
API সম্পূর্ণরূপে উপলব্ধ নাও হতে পারে৷
পূর্বরূপ এবং ViewModels
কম্পোজেবলের মধ্যে ViewModel
ব্যবহার করার সময় পূর্বরূপ সীমিত। প্রিভিউ সিস্টেমটি ViewModel
পাস করা সমস্ত প্যারামিটার তৈরি করতে সক্ষম নয়, যেমন রিপোজিটরি, ইউজ কেস, ম্যানেজার বা অনুরূপ। এছাড়াও, যদি আপনার ViewModel
নির্ভরতা ইনজেকশনে অংশগ্রহণ করে (যেমন Hilt এর সাথে), প্রিভিউ সিস্টেমটি ViewModel
নির্মাণের জন্য সম্পূর্ণ নির্ভরতা গ্রাফ তৈরি করতে পারে না।
আপনি যখন ViewModel
এর সাথে একটি কম্পোজেবলের পূর্বরূপ দেখার চেষ্টা করেন, তখন Android স্টুডিও নির্দিষ্ট কম্পোজেবল রেন্ডার করার সময় একটি ত্রুটি দেখায়:
আপনি যদি একটি কম্পোজেবলের পূর্বরূপ দেখতে চান যা একটি ViewModel
ব্যবহার করে, তাহলে আপনাকে কম্পোজেবলের আর্গুমেন্ট হিসাবে পাস করা ViewModel
থেকে পরামিতি সহ আরেকটি কম্পোজেবল তৈরি করতে হবে। এইভাবে, আপনাকে কম্পোজেবলের পূর্বরূপ দেখতে হবে না যা ViewModel
ব্যবহার করে।
@Composable
fun AuthorColumn(viewModel: AuthorViewModel = viewModel()) {
AuthorColumn(
name = viewModel.authorName,
// ViewModel sends the network requests and makes posts available as a state
posts = viewModel.posts
)
}
@Preview
@Composable
fun AuthorScreenPreview(
// You can use some sample data to preview your composable without the need to construct the ViewModel
name: String = sampleAuthor.name,
posts: List<Post> = samplePosts[sampleAuthor]
) {
AuthorColumn(...) {
name = NameLabel(name),
posts = PostsList(posts)
}
}
টীকা ক্লাস @Preview
আপনার প্রিভিউ কাস্টমাইজ করার সময় @Preview
করা যেতে পারে এমন প্যারামিটারগুলির একটি সম্পূর্ণ তালিকার জন্য আপনি Android স্টুডিওতে সর্বদা 'ctrl বা ⌘ + ক্লিক' করতে পারেন।
annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showSystemUi: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT, @Wallpaper val wallpaper: Int = Wallpapers.NONE, )
অতিরিক্ত সম্পদ
অ্যান্ড্রয়েড স্টুডিও কীভাবে @Preview
ব্যবহারের সহজে প্রচার করে সে সম্পর্কে আরও পড়তে এবং আরও টুলিং টিপস জানতে, কম্পোজ টুলিং ব্লগটি দেখুন।
আপনার জন্য প্রস্তাবিত
- দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
- CompositionLocal সহ স্থানীয়ভাবে স্কোপড ডেটা
- কম্পোজে মেটেরিয়াল ডিজাইন 2
- কম্পোজে ভিউ ব্যবহার করা