কম্পোজেবল প্রিভিউ সহ আপনার UI এর পূর্বরূপ দেখুন

সেভ করা পৃষ্ঠা গুছিয়ে রাখতে 'সংগ্রহ' ব্যবহার করুন আপনার পছন্দ অনুযায়ী কন্টেন্ট সেভ করুন ও সঠিক বিভাগে রাখুন।

একটি কম্পোজেবল একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @Composable দিয়ে টীকা করা হয়:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

এই কম্পোজেবলের একটি প্রিভিউ সক্ষম করতে, @Composable এবং @Preview দিয়ে টীকাযুক্ত আরেকটি কম্পোজেবল তৈরি করুন। এই নতুন, টীকাযুক্ত কম্পোজেবলটিতে এখন আপনার তৈরি করা কম্পোজেবল রয়েছে, SimpleComposable :

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

@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")
    }
}
AndroidStudioComposeSnippets.kt

গতিশীল রঙের পূর্বরূপ

আপনি যদি আপনার অ্যাপে গতিশীল রঙ সক্ষম করে থাকেন, তাহলে ওয়ালপেপার পরিবর্তন করতে 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))
}
AndroidStudioComposeSnippets.kt

পটভূমির রঙ সেট করুন

ডিফল্টরূপে, আপনার কম্পোজেবল একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ প্রদর্শিত হয়। একটি ব্যাকগ্রাউন্ড যোগ করতে, showBackground এবং backgroundColor প্যারামিটার যোগ করুন। মনে রাখবেন যে backgroundColor একটি ARGB Long , একটি Color মান নয়:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

সিস্টেম UI

আপনি যদি একটি পূর্বরূপের মধ্যে স্থিতি এবং অ্যাকশন বারগুলি প্রদর্শন করতে চান তবে showSystemUi প্যারামিটার যোগ করুন:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

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!")
    }
}
AndroidStudioComposeSnippets.kt

আপনার @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
AndroidStudioComposeSnippets.kt

আপনি আপনার প্রিভিউ কম্পোজেবলের জন্য এই কাস্টম টীকাটি ব্যবহার করতে পারেন:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

আপনি পূর্বরূপের আরও সম্পূর্ণ সেট তৈরি করতে একাধিক মাল্টিপ্রিভিউ টীকা এবং সাধারণ পূর্বরূপ টীকা একত্রিত করতে পারেন। মাল্টিপ্রিভিউ টীকা একত্রিত করার অর্থ এই নয় যে সমস্ত ভিন্ন সমন্বয় দেখানো হয়েছে। পরিবর্তে, প্রতিটি মাল্টিপ্রিভিউ টীকা স্বাধীনভাবে কাজ করে এবং শুধুমাত্র তার নিজস্ব ভেরিয়েন্ট রেন্ডার করে।

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

মাল্টিপ্রিভিউ-- এবং সাধারণ প্রিভিউ--এর মিশ্র-এবং-মিল প্রকৃতি!-- আপনাকে আরও ব্যাপকভাবে বৃহত্তর প্রকল্পগুলির অনেক বৈশিষ্ট্য পরীক্ষা করতে দেয়।

@Preview এবং বড় ডেটা সেট

খুব প্রায়ই, একটি প্রয়োজন দেখা দেয় যেখানে আপনাকে অবশ্যই একটি বড় ডেটাসেট আপনার কম্পোজেবল প্রিভিউতে পাস করতে হবে। এটি করার জন্য, @PreviewParameter টীকা সহ একটি প্যারামিটার যোগ করে একটি রচনাযোগ্য পূর্বরূপ ফাংশনে নমুনা ডেটা পাস করুন।

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

নমুনা ডেটা প্রদান করতে, একটি ক্লাস তৈরি করুন যা PreviewParameterProvider প্রয়োগ করে এবং একটি ক্রম হিসাবে নমুনা ডেটা প্রদান করে।

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

এটি ক্রমানুসারে ডেটা উপাদান প্রতি একটি পূর্বরূপ রেন্ডার করে:

আপনি একাধিক পূর্বরূপের জন্য একই প্রদানকারী শ্রেণী ব্যবহার করতে পারেন। প্রয়োজনে, সীমা প্যারামিটার সেট করে পূর্বরূপের সংখ্যা সীমিত করুন।

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

সীমাবদ্ধতা এবং সর্বোত্তম অনুশীলন

অ্যান্ড্রয়েড স্টুডিও প্রিভিউ এলাকায় সরাসরি প্রিভিউ কোড এক্সিকিউট করে। এটির জন্য কোনো এমুলেটর বা ফিজিক্যাল ডিভাইস চালানোর প্রয়োজন নেই কারণ এটি Layoutlib নামক অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি পোর্টেড অংশকে ব্যবহার করে। Layoutlib হল Android ফ্রেমওয়ার্কের একটি কাস্টম সংস্করণ যা Android ডিভাইসের বাইরে চালানোর জন্য ডিজাইন করা হয়েছে। লাইব্রেরির লক্ষ্য হল অ্যান্ড্রয়েড স্টুডিওতে একটি লেআউটের একটি পূর্বরূপ প্রদান করা যা ডিভাইসগুলিতে রেন্ডারিংয়ের খুব কাছাকাছি।

পূর্বরূপ সীমাবদ্ধতা

অ্যান্ড্রয়েড স্টুডিওতে যেভাবে প্রিভিউ রেন্ডার করা হয়, সেগুলি হালকা ওজনের এবং সেগুলি রেন্ডার করার জন্য পুরো অ্যান্ড্রয়েড ফ্রেমওয়ার্কের প্রয়োজন হয় না৷ যাইহোক, এটি নিম্নলিখিত সীমাবদ্ধতার সাথে আসে:

• নেটওয়ার্ক অ্যাক্সেস নেই
• কোনো ফাইল অ্যাক্সেস নেই
• কিছু Context API সম্পূর্ণরূপে উপলব্ধ নাও হতে পারে৷

পূর্বরূপ এবং ViewModels

কম্পোজেবলের মধ্যে ViewModel ব্যবহার করার সময় পূর্বরূপ সীমিত। প্রিভিউ সিস্টেমটি ViewModel পাস করা সমস্ত প্যারামিটার তৈরি করতে সক্ষম নয়, যেমন রিপোজিটরি, ইউজ কেস, ম্যানেজার বা অনুরূপ। এছাড়াও, যদি আপনার ViewModel নির্ভরতা ইনজেকশনে অংশগ্রহণ করে (যেমন Hilt এর সাথে), প্রিভিউ সিস্টেমটি ViewModel নির্মাণের জন্য সম্পূর্ণ নির্ভরতা গ্রাফ তৈরি করতে পারে না।

আপনি যখন ViewModel সাথে একটি কম্পোজেবলের পূর্বরূপ দেখার চেষ্টা করেন, তখন Android স্টুডিও নির্দিষ্ট কম্পোজেবল রেন্ডার করার সময় একটি ত্রুটি দেখায়:

আপনি যদি একটি কম্পোজেবলের পূর্বরূপ দেখতে চান যা একটি ViewModel ব্যবহার করে, তাহলে আপনাকে কম্পোজেবলের আর্গুমেন্ট হিসাবে পাস করা ViewModel থেকে পরামিতি সহ আরেকটি কম্পোজেবল তৈরি করতে হবে। এইভাবে, আপনাকে কম্পোজেবলের পূর্বরূপ দেখার দরকার নেই যা ViewModel ব্যবহার করে।

@Composable
fun AuthorScreen(viewModel: AuthorViewModel = viewModel()) {
  AuthorScreen(
    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]
) {
  AuthorScreen(...) {
    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,
)
AndroidStudioComposeSnippets.kt

অতিরিক্ত সম্পদ

অ্যান্ড্রয়েড স্টুডিও কীভাবে @Preview ব্যবহারের সহজে প্রচার করে সে সম্পর্কে আরও পড়তে এবং আরও টুলিং টিপস জানতে, কম্পোজ টুলিং ব্লগটি দেখুন।

একটি কম্পোজেবল একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @Composable দিয়ে টীকা করা হয়:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

এই কম্পোজেবলের একটি প্রিভিউ সক্ষম করতে, @Composable এবং @Preview দিয়ে টীকাযুক্ত আরেকটি কম্পোজেবল তৈরি করুন। এই নতুন, টীকাযুক্ত কম্পোজেবলটিতে এখন আপনার তৈরি করা কম্পোজেবল রয়েছে, SimpleComposable :

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

@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")
    }
}
AndroidStudioComposeSnippets.kt

গতিশীল রঙের পূর্বরূপ

আপনি যদি আপনার অ্যাপে গতিশীল রঙ সক্ষম করে থাকেন, তাহলে ওয়ালপেপার পরিবর্তন করতে 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))
}
AndroidStudioComposeSnippets.kt

পটভূমির রঙ সেট করুন

ডিফল্টরূপে, আপনার কম্পোজেবল একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ প্রদর্শিত হয়। একটি ব্যাকগ্রাউন্ড যোগ করতে, showBackground এবং backgroundColor প্যারামিটার যোগ করুন। মনে রাখবেন যে backgroundColor একটি ARGB Long , একটি Color মান নয়:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

সিস্টেম UI

আপনি যদি একটি পূর্বরূপের মধ্যে স্থিতি এবং অ্যাকশন বারগুলি প্রদর্শন করতে চান তবে showSystemUi প্যারামিটার যোগ করুন:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

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!")
    }
}
AndroidStudioComposeSnippets.kt

আপনার @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
AndroidStudioComposeSnippets.kt

আপনি আপনার প্রিভিউ কম্পোজেবলের জন্য এই কাস্টম টীকাটি ব্যবহার করতে পারেন:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

আপনি পূর্বরূপের আরও সম্পূর্ণ সেট তৈরি করতে একাধিক মাল্টিপ্রিভিউ টীকা এবং সাধারণ পূর্বরূপ টীকা একত্রিত করতে পারেন। মাল্টিপ্রিভিউ টীকা একত্রিত করার অর্থ এই নয় যে সমস্ত ভিন্ন সমন্বয় দেখানো হয়েছে। পরিবর্তে, প্রতিটি মাল্টিপ্রিভিউ টীকা স্বাধীনভাবে কাজ করে এবং শুধুমাত্র তার নিজস্ব ভেরিয়েন্ট রেন্ডার করে।

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

মাল্টিপ্রিভিউ-- এবং সাধারণ প্রিভিউ--এর মিশ্র-এবং-মিল প্রকৃতি!-- আপনাকে আরও ব্যাপকভাবে বৃহত্তর প্রকল্পগুলির অনেক বৈশিষ্ট্য পরীক্ষা করতে দেয়।

@Preview এবং বড় ডেটা সেট

খুব প্রায়ই, একটি প্রয়োজন দেখা দেয় যেখানে আপনাকে অবশ্যই একটি বড় ডেটাসেট আপনার কম্পোজেবল প্রিভিউতে পাস করতে হবে। এটি করার জন্য, @PreviewParameter টীকা সহ একটি প্যারামিটার যোগ করে একটি রচনাযোগ্য পূর্বরূপ ফাংশনে নমুনা ডেটা পাস করুন।

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

নমুনা ডেটা প্রদান করতে, একটি ক্লাস তৈরি করুন যা PreviewParameterProvider প্রয়োগ করে এবং একটি ক্রম হিসাবে নমুনা ডেটা প্রদান করে।

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

এটি ক্রমানুসারে ডেটা উপাদান প্রতি একটি পূর্বরূপ রেন্ডার করে:

আপনি একাধিক পূর্বরূপের জন্য একই প্রদানকারী শ্রেণী ব্যবহার করতে পারেন। প্রয়োজনে, সীমা প্যারামিটার সেট করে পূর্বরূপের সংখ্যা সীমিত করুন।

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

সীমাবদ্ধতা এবং সর্বোত্তম অনুশীলন

অ্যান্ড্রয়েড স্টুডিও প্রিভিউ এলাকায় সরাসরি প্রিভিউ কোড এক্সিকিউট করে। এটির জন্য কোনো এমুলেটর বা ফিজিক্যাল ডিভাইস চালানোর প্রয়োজন নেই কারণ এটি Layoutlib নামক অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি পোর্টেড অংশকে ব্যবহার করে। Layoutlib হল Android ফ্রেমওয়ার্কের একটি কাস্টম সংস্করণ যা Android ডিভাইসের বাইরে চালানোর জন্য ডিজাইন করা হয়েছে। লাইব্রেরির লক্ষ্য হল অ্যান্ড্রয়েড স্টুডিওতে একটি লেআউটের একটি পূর্বরূপ প্রদান করা যা ডিভাইসগুলিতে রেন্ডারিংয়ের খুব কাছাকাছি।

পূর্বরূপ সীমাবদ্ধতা

অ্যান্ড্রয়েড স্টুডিওতে যেভাবে প্রিভিউ রেন্ডার করা হয়, সেগুলি হালকা ওজনের এবং সেগুলি রেন্ডার করার জন্য পুরো অ্যান্ড্রয়েড ফ্রেমওয়ার্কের প্রয়োজন হয় না৷ যাইহোক, এটি নিম্নলিখিত সীমাবদ্ধতার সাথে আসে:

• নেটওয়ার্ক অ্যাক্সেস নেই
• কোনো ফাইল অ্যাক্সেস নেই
• কিছু Context API সম্পূর্ণরূপে উপলব্ধ নাও হতে পারে৷

পূর্বরূপ এবং ViewModels

কম্পোজেবলের মধ্যে ViewModel ব্যবহার করার সময় পূর্বরূপ সীমিত। প্রিভিউ সিস্টেমটি ViewModel পাস করা সমস্ত প্যারামিটার তৈরি করতে সক্ষম নয়, যেমন রিপোজিটরি, ইউজ কেস, ম্যানেজার বা অনুরূপ। এছাড়াও, যদি আপনার ViewModel নির্ভরতা ইনজেকশনে অংশগ্রহণ করে (যেমন Hilt এর সাথে), প্রিভিউ সিস্টেমটি ViewModel নির্মাণের জন্য সম্পূর্ণ নির্ভরতা গ্রাফ তৈরি করতে পারে না।

আপনি যখন ViewModel সাথে একটি কম্পোজেবলের পূর্বরূপ দেখার চেষ্টা করেন, তখন Android স্টুডিও নির্দিষ্ট কম্পোজেবল রেন্ডার করার সময় একটি ত্রুটি দেখায়:

আপনি যদি একটি কম্পোজেবলের পূর্বরূপ দেখতে চান যা একটি ViewModel ব্যবহার করে, তাহলে আপনাকে কম্পোজেবলের আর্গুমেন্ট হিসাবে পাস করা ViewModel থেকে পরামিতি সহ আরেকটি কম্পোজেবল তৈরি করতে হবে। এইভাবে, আপনাকে কম্পোজেবলের পূর্বরূপ দেখার দরকার নেই যা ViewModel ব্যবহার করে।

@Composable
fun AuthorScreen(viewModel: AuthorViewModel = viewModel()) {
  AuthorScreen(
    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]
) {
  AuthorScreen(...) {
    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,
)
AndroidStudioComposeSnippets.kt

অতিরিক্ত সম্পদ

অ্যান্ড্রয়েড স্টুডিও কীভাবে @Preview ব্যবহারের সহজে প্রচার করে সে সম্পর্কে আরও পড়তে এবং আরও টুলিং টিপস জানতে, কম্পোজ টুলিং ব্লগটি দেখুন।

একটি কম্পোজেবল একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @Composable দিয়ে টীকা করা হয়:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

এই কম্পোজেবলের একটি প্রিভিউ সক্ষম করতে, @Composable এবং @Preview দিয়ে টীকাযুক্ত আরেকটি কম্পোজেবল তৈরি করুন। এই নতুন, টীকাযুক্ত কম্পোজেবলটিতে এখন আপনার তৈরি করা কম্পোজেবল রয়েছে, SimpleComposable :

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

@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")
    }
}
AndroidStudioComposeSnippets.kt

গতিশীল রঙের পূর্বরূপ

আপনি যদি আপনার অ্যাপে গতিশীল রঙ সক্ষম করে থাকেন, তাহলে ওয়ালপেপার পরিবর্তন করতে 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))
}
AndroidStudioComposeSnippets.kt

পটভূমির রঙ সেট করুন

ডিফল্টরূপে, আপনার কম্পোজেবল একটি স্বচ্ছ ব্যাকগ্রাউন্ড সহ প্রদর্শিত হয়। একটি ব্যাকগ্রাউন্ড যোগ করতে, showBackground এবং backgroundColor প্যারামিটার যোগ করুন। মনে রাখবেন যে backgroundColor একটি ARGB Long , একটি Color মান নয়:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

সিস্টেম UI

আপনি যদি একটি পূর্বরূপের মধ্যে স্থিতি এবং অ্যাকশন বারগুলি প্রদর্শন করতে চান তবে showSystemUi প্যারামিটার যোগ করুন:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

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!")
    }
}
AndroidStudioComposeSnippets.kt

আপনার @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
AndroidStudioComposeSnippets.kt

আপনি আপনার প্রিভিউ কম্পোজেবলের জন্য এই কাস্টম টীকাটি ব্যবহার করতে পারেন:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

আপনি পূর্বরূপের আরও সম্পূর্ণ সেট তৈরি করতে একাধিক মাল্টিপ্রিভিউ টীকা এবং সাধারণ পূর্বরূপ টীকা একত্রিত করতে পারেন। মাল্টিপ্রিভিউ টীকা একত্রিত করার অর্থ এই নয় যে সমস্ত ভিন্ন সমন্বয় দেখানো হয়েছে। পরিবর্তে, প্রতিটি মাল্টিপ্রিভিউ টীকা স্বাধীনভাবে কাজ করে এবং শুধুমাত্র তার নিজস্ব ভেরিয়েন্ট রেন্ডার করে।

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

মাল্টিপ্রিভিউ-- এবং সাধারণ প্রিভিউ--এর মিশ্র-এবং-মিল প্রকৃতি!-- আপনাকে আরও ব্যাপকভাবে বৃহত্তর প্রকল্পগুলির অনেক বৈশিষ্ট্য পরীক্ষা করতে দেয়।

@Preview এবং বড় ডেটা সেট

খুব প্রায়শই, একটি প্রয়োজন দেখা দেয় যেখানে আপনাকে অবশ্যই আপনার কমপোজেবল পূর্বরূপে একটি বড় ডেটাসেট পাস করতে হবে। এটি করার জন্য, কেবল @PreviewParameter টীকাগুলির সাথে একটি প্যারামিটার যুক্ত করে একটি কমপোজেবল পূর্বরূপ ফাংশনে নমুনা ডেটা পাস করুন।

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

নমুনা ডেটা সরবরাহ করতে, এমন একটি শ্রেণি তৈরি করুন যা PreviewParameterProvider প্রয়োগ করে এবং নমুনা ডেটাটিকে ক্রম হিসাবে প্রদান করে।

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

এটি ক্রম অনুসারে ডেটা উপাদান প্রতি একটি পূর্বরূপ রেন্ডার করে:

আপনি একাধিক পূর্বরূপের জন্য একই সরবরাহকারী শ্রেণি ব্যবহার করতে পারেন। যদি প্রয়োজন হয় তবে সীমা প্যারামিটারটি সেট করে পূর্বরূপের সংখ্যা সীমাবদ্ধ করুন।

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

সীমাবদ্ধতা এবং সর্বোত্তম অনুশীলন

অ্যান্ড্রয়েড স্টুডিও সরাসরি পূর্বরূপ অঞ্চলে পূর্বরূপ কোড কার্যকর করে। এটির জন্য কোনও এমুলেটর বা শারীরিক ডিভাইস চালানোর প্রয়োজন হয় না কারণ এটি Layoutlib নামক অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি পোর্টেড অংশকে উপার্জন করে। Layoutlib অ্যান্ড্রয়েড ডিভাইসের বাইরে চালানোর জন্য ডিজাইন করা অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি কাস্টম সংস্করণ। লাইব্রেরির লক্ষ্য হ'ল অ্যান্ড্রয়েড স্টুডিওতে একটি লেআউটের একটি পূর্বরূপ সরবরাহ করা যা ডিভাইসগুলিতে এটির রেন্ডারিংয়ের খুব কাছাকাছি।

পূর্বরূপ সীমাবদ্ধতা

অ্যান্ড্রয়েড স্টুডিওর মধ্যে পূর্বরূপগুলি যেভাবে রেন্ডার করা হয়েছে তার কারণে এগুলি হালকা ওজনের এবং এগুলি রেন্ডার করার জন্য পুরো অ্যান্ড্রয়েড কাঠামোর প্রয়োজন হয় না। যাইহোক, এটি নিম্নলিখিত সীমাবদ্ধতার সাথে আসে:

• কোনও নেটওয়ার্ক অ্যাক্সেস নেই
• কোনও ফাইল অ্যাক্সেস নেই
• কিছু Context এপিআই পুরোপুরি উপলব্ধ নাও হতে পারে

পূর্বরূপ এবং ViewModels

কোনও কম্পোজেবলের মধ্যে ViewModel ব্যবহার করার সময় পূর্বরূপগুলি সীমাবদ্ধ। পূর্বরূপ সিস্টেমটি ViewModel , যেমন সংগ্রহস্থল, ব্যবহারের কেস, ম্যানেজার বা অনুরূপ হিসাবে পাস করা সমস্ত পরামিতিগুলি তৈরি করতে সক্ষম নয়। এছাড়াও, যদি আপনার ViewModel নির্ভরতা ইনজেকশনে (যেমন এইচআইএলটি সহ) অংশ নেয় তবে পূর্বরূপ সিস্টেম ViewModel নির্মাণের জন্য পুরো নির্ভরতা গ্রাফটি তৈরি করতে পারে না।

আপনি যখন ViewModel সাথে কোনও কমপোজেবলের পূর্বরূপ দেখার চেষ্টা করেন, তখন অ্যান্ড্রয়েড স্টুডিও নির্দিষ্ট কমপোজেবলকে রেন্ডার করার সময় একটি ত্রুটি দেখায়:

আপনি যদি কোনও ViewModel ব্যবহার করে এমন কোনও কম্পোজেবলের পূর্বরূপ দেখতে চান তবে আপনার ViewModel থেকে প্যারামিটারগুলি সহ আরও একটি কম্পোজেবল তৈরি করা উচিত কমপোজেবলের যুক্তি হিসাবে পাস করা। এইভাবে, আপনার ViewModel ব্যবহার করে এমন কম্পোজেবলের পূর্বরূপ দেখার দরকার নেই।

@Composable
fun AuthorScreen(viewModel: AuthorViewModel = viewModel()) {
  AuthorScreen(
    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]
) {
  AuthorScreen(...) {
    name = NameLabel(name),
    posts = PostsList(posts)
  }
}

টীকা ক্লাস @Preview

আপনার পূর্বরূপ কাস্টমাইজ করার সময় সামঞ্জস্য করা যায় এমন পরামিতিগুলির সম্পূর্ণ তালিকার জন্য আপনি সর্বদা 'সিটিআরএল বা ⌘ + ক্লিক' করতে পারেন অ্যান্ড্রয়েড স্টুডিওতে @Preview টীকাটি ক্লিক করুন।

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,
)
AndroidStudioComposeSnippets.kt

অতিরিক্ত সম্পদ

অ্যান্ড্রয়েড স্টুডিও কীভাবে ব্যবহারের সহজলভ্যতা @Preview প্রচার করে এবং আরও সরঞ্জামদণ্ডের টিপস শিখতে পারে সে সম্পর্কে আরও পড়তে, ব্লগ রচনা সরঞ্জামটি দেখুন।

একটি কমপোজেবল একটি ফাংশন দ্বারা সংজ্ঞায়িত করা হয় এবং @Composable দিয়ে টীকাযুক্ত:

@Composable
fun SimpleComposable() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

এই কমপোজেবলের একটি পূর্বরূপ সক্ষম করতে, @Composable এবং @Preview দিয়ে টীকাযুক্ত আরও একটি কমপোজেবল তৈরি করুন। এই নতুন, টীকাযুক্ত কমপোজেবলের এখন আপনি প্রাথমিকভাবে তৈরি করা কমপোজেবল রয়েছে, SimpleComposable :

@Preview
@Composable
fun SimpleComposablePreview() {
    SimpleComposable()
}
AndroidStudioComposeSnippets.kt

@Preview টীকাটি অ্যান্ড্রয়েড স্টুডিওকে বলে যে এই কম্পোজেবল এই ফাইলটির নকশা দৃশ্যে দেখানো উচিত। আপনি সম্পাদনাগুলি করার সাথে সাথে আপনি আপনার কমপোজেবল পূর্বরূপের লাইভ আপডেটগুলি দেখতে পারেন।

অ্যান্ড্রয়েড স্টুডিও রেন্ডারগুলি @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")
    }
}
AndroidStudioComposeSnippets.kt

গতিশীল রঙের পূর্বরূপ

যদি আপনি আপনার অ্যাপ্লিকেশনটিতে গতিশীল রঙ সক্ষম করে থাকেন তবে ওয়ালপেপারগুলি স্যুইচ করতে wallpaper বৈশিষ্ট্যটি ব্যবহার করুন এবং দেখুন যে আপনার ইউআই বিভিন্ন ব্যবহারকারীর নির্বাচিত ওয়ালপেপারে কীভাবে প্রতিক্রিয়া দেখায়। 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 (⌥ + ⏎ ম্যাকোসের জন্য))> এর সাথে প্রতিস্থাপন করুন… । পরিদর্শনটি আপনার ইনপুটটির সাথে সাদৃশ্যপূর্ণ হওয়ার নিকটবর্তী একটি ফিক্স সরবরাহ করার চেষ্টা করে।

লোকেল

বিভিন্ন ব্যবহারকারীর লোকাল পরীক্ষা করতে, locale প্যারামিটার যুক্ত করুন:

@Preview(locale = "fr-rFR")
@Composable
fun DifferentLocaleComposablePreview() {
    Text(text = stringResource(R.string.greeting))
}
AndroidStudioComposeSnippets.kt

পটভূমি রঙ সেট করুন

ডিফল্টরূপে, আপনার কমপোজেবল একটি স্বচ্ছ পটভূমি সহ প্রদর্শিত হয়। একটি ব্যাকগ্রাউন্ড যুক্ত করতে, showBackground এবং backgroundColor প্যারামিটারগুলি যুক্ত করুন। মনে রাখবেন যে backgroundColor রঙটি একটি আরগিবি Long , কোনও Color মান নয়:

@Preview(showBackground = true, backgroundColor = 0xFF00FF00)
@Composable
fun WithGreenBackground() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

সিস্টেম ইউআই

আপনার যদি কোনও পূর্বরূপের মধ্যে স্থিতি এবং অ্যাকশন বারগুলি প্রদর্শন করতে হয় তবে showSystemUi প্যারামিটার যুক্ত করুন:

@Preview(showSystemUi = true)
@Composable
fun DecoratedComposablePreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

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!")
    }
}
AndroidStudioComposeSnippets.kt

আপনার @Preview সাথে ইন্টারঅ্যাক্ট করুন

অ্যান্ড্রয়েড স্টুডিও এমন বৈশিষ্ট্য সরবরাহ করে যা আপনাকে আপনার সংজ্ঞায়িত পূর্বরূপগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়। এই মিথস্ক্রিয়াটি আপনাকে আপনার পূর্বরূপগুলির রানটাইম আচরণ বুঝতে সহায়তা করে এবং আপনাকে পূর্বরূপগুলির সাথে আপনার ইউআইকে আরও ভালভাবে নেভিগেট করতে দেয়।

ইন্টারেক্টিভ মোড

ইন্টারেক্টিভ মোড আপনাকে ফোন বা ট্যাবলেটের মতো আপনার প্রোগ্রামটি চালানো কোনও ডিভাইসে কীভাবে আপনি কীভাবে চান তার অনুরূপ একটি পূর্বরূপের সাথে ইন্টারঅ্যাক্ট করতে দেয়। ইন্টারেক্টিভ মোডটি একটি স্যান্ডবক্স পরিবেশে বিচ্ছিন্ন করা হয় (যার অর্থ, অন্যান্য পূর্বরূপগুলি থেকে বিচ্ছিন্ন), যেখানে আপনি উপাদানগুলিতে ক্লিক করতে পারেন এবং পূর্বরূপে ব্যবহারকারী ইনপুট প্রবেশ করতে পারেন। এটি বিভিন্ন রাজ্য, অঙ্গভঙ্গি এবং এমনকি আপনার কমপোজেবলের অ্যানিমেশনগুলি পরীক্ষা করার একটি দ্রুত উপায়।

কোড নেভিগেশন এবং কমপোজেবল রূপরেখা

এর মধ্যে থাকা কম্পোজেবলগুলির রূপরেখা দেখতে আপনি একটি পূর্বরূপের উপরে ঘুরে বেড়াতে পারেন। একটি কমপোজেবল আউটলাইন ক্লিক করা আপনার সম্পাদক ভিউকে এর সংজ্ঞাতে নেভিগেট করতে ট্রিগার করে।

পূর্বরূপ চালান

আপনি কোনও এমুলেটর বা শারীরিক ডিভাইসে একটি নির্দিষ্ট @Preview চালাতে পারেন। পূর্বরূপটি নতুন Activity হিসাবে একই প্রকল্প অ্যাপের মধ্যে মোতায়েন করা হয়, সুতরাং এটি একই প্রসঙ্গ এবং অনুমতিগুলি ভাগ করে। এটি ইতিমধ্যে মঞ্জুর করা হলে কোনও অনুমতি চাইতে জিজ্ঞাসা করে বয়লারপ্লেট কোড লিখতে আপনার প্রয়োজন হয় না।

রান পূর্বরূপ আইকনটি ক্লিক করুন @Preview টীকাটির পাশে বা পূর্বরূপের শীর্ষে এবং অ্যান্ড্রয়েড স্টুডিও আপনার সংযুক্ত ডিভাইস বা এমুলেটরটিতে @Preview মোতায়েন করে।

অনুলিপি @Preview রেন্ডার

প্রতিটি রেন্ডার পূর্বরূপ এটিতে ডান ক্লিক করে একটি চিত্র হিসাবে অনুলিপি করা যেতে পারে।

একই @Preview টীকাটির একাধিক পূর্বরূপ

আপনি বিভিন্ন স্পেসিফিকেশনের সাথে একই @Preview কমপোজেবলের একাধিক সংস্করণ প্রদর্শন করতে পারেন, বা বিভিন্ন পরামিতিগুলি কমপোজেবলের কাছে পাস করতে পারেন। এইভাবে, আপনি বয়লারপ্লেট কোডটি হ্রাস করতে পারেন যা আপনাকে অন্যথায় লিখতে হবে।

বহুগুণ টেম্পলেট

androidx.compose.ui:ui-tooling-preview 1.6.0-আলফা 01+ মাল্টিপ্রিভিউ এপিআই টেম্পলেটগুলি প্রবর্তন করে: @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
AndroidStudioComposeSnippets.kt

আপনি আপনার পূর্বরূপ কমপোজেবলগুলির জন্য এই কাস্টম টীকাটি ব্যবহার করতে পারেন:

@FontScalePreviews
@Composable
fun HelloWorldPreview() {
    Text("Hello World")
}
AndroidStudioComposeSnippets.kt

আপনি পূর্বরূপগুলির আরও সম্পূর্ণ সেট তৈরি করতে একাধিক বহুগুণ টীকা এবং সাধারণ পূর্বরূপ টীকাগুলি একত্রিত করতে পারেন। বহুগুণ টীকাগুলির সংমিশ্রণের অর্থ এই নয় যে সমস্ত বিভিন্ন সংমিশ্রণ দেখানো হয়েছে। পরিবর্তে, প্রতিটি বহুগুণ টীকাগুলি স্বাধীনভাবে কাজ করে এবং কেবল তার নিজস্ব রূপগুলি উপস্থাপন করে।

@Preview(
    name = "Spanish",
    group = "locale",
    locale = "es"
)
@FontScalePreviews
annotation class CombinedPreviews

@CombinedPreviews
@Composable
fun HelloWorldPreview2() {
    MaterialTheme { Surface { Text(stringResource(R.string.hello_world)) } }
}
AndroidStudioComposeSnippets.kt

বহুগুণের মিশ্রণ এবং ম্যাচ প্রকৃতি-এবং সাধারণ পূর্বরূপ!-আপনাকে আরও বড় আকারের প্রকল্পগুলির অনেকগুলি বৈশিষ্ট্য পরীক্ষা করতে দেয়।

@Preview এবং বড় ডেটা সেট

খুব প্রায়শই, একটি প্রয়োজন দেখা দেয় যেখানে আপনাকে অবশ্যই আপনার কমপোজেবল পূর্বরূপে একটি বড় ডেটাসেট পাস করতে হবে। এটি করার জন্য, কেবল @PreviewParameter টীকাগুলির সাথে একটি প্যারামিটার যুক্ত করে একটি কমপোজেবল পূর্বরূপ ফাংশনে নমুনা ডেটা পাস করুন।

@Preview
@Composable
fun UserProfilePreview(
    @PreviewParameter(UserPreviewParameterProvider::class) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

নমুনা ডেটা সরবরাহ করতে, এমন একটি শ্রেণি তৈরি করুন যা PreviewParameterProvider প্রয়োগ করে এবং নমুনা ডেটাটিকে ক্রম হিসাবে প্রদান করে।

class UserPreviewParameterProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User("Elise"),
        User("Frank"),
        User("Julia")
    )
}
AndroidStudioComposeSnippets.kt

এটি ক্রম অনুসারে ডেটা উপাদান প্রতি একটি পূর্বরূপ রেন্ডার করে:

আপনি একাধিক পূর্বরূপের জন্য একই সরবরাহকারী শ্রেণি ব্যবহার করতে পারেন। যদি প্রয়োজন হয় তবে সীমা প্যারামিটারটি সেট করে পূর্বরূপের সংখ্যা সীমাবদ্ধ করুন।

@Preview
@Composable
fun UserProfilePreview2(
    @PreviewParameter(UserPreviewParameterProvider::class, limit = 2) user: User
) {
    UserProfile(user)
}
AndroidStudioComposeSnippets.kt

সীমাবদ্ধতা এবং সর্বোত্তম অনুশীলন

অ্যান্ড্রয়েড স্টুডিও সরাসরি পূর্বরূপ অঞ্চলে পূর্বরূপ কোড কার্যকর করে। এটির জন্য কোনও এমুলেটর বা শারীরিক ডিভাইস চালানোর প্রয়োজন হয় না কারণ এটি Layoutlib নামক অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি পোর্টেড অংশকে উপার্জন করে। Layoutlib অ্যান্ড্রয়েড ডিভাইসের বাইরে চালানোর জন্য ডিজাইন করা অ্যান্ড্রয়েড ফ্রেমওয়ার্কের একটি কাস্টম সংস্করণ। লাইব্রেরির লক্ষ্য হ'ল অ্যান্ড্রয়েড স্টুডিওতে একটি লেআউটের একটি পূর্বরূপ সরবরাহ করা যা ডিভাইসগুলিতে এটির রেন্ডারিংয়ের খুব কাছাকাছি।

পূর্বরূপ সীমাবদ্ধতা

অ্যান্ড্রয়েড স্টুডিওর মধ্যে পূর্বরূপগুলি যেভাবে রেন্ডার করা হয়েছে তার কারণে এগুলি হালকা ওজনের এবং এগুলি রেন্ডার করার জন্য পুরো অ্যান্ড্রয়েড কাঠামোর প্রয়োজন হয় না। যাইহোক, এটি নিম্নলিখিত সীমাবদ্ধতার সাথে আসে:

• কোনও নেটওয়ার্ক অ্যাক্সেস নেই
• কোনও ফাইল অ্যাক্সেস নেই
• কিছু Context এপিআই পুরোপুরি উপলব্ধ নাও হতে পারে

পূর্বরূপ এবং ViewModels

কোনও কম্পোজেবলের মধ্যে ViewModel ব্যবহার করার সময় পূর্বরূপগুলি সীমাবদ্ধ। পূর্বরূপ সিস্টেমটি ViewModel , যেমন সংগ্রহস্থল, ব্যবহারের কেস, ম্যানেজার বা অনুরূপ হিসাবে পাস করা সমস্ত পরামিতিগুলি তৈরি করতে সক্ষম নয়। এছাড়াও, যদি আপনার ViewModel নির্ভরতা ইনজেকশনে (যেমন এইচআইএলটি সহ) অংশ নেয় তবে পূর্বরূপ সিস্টেম ViewModel নির্মাণের জন্য পুরো নির্ভরতা গ্রাফটি তৈরি করতে পারে না।

আপনি যখন ViewModel সাথে কোনও কমপোজেবলের পূর্বরূপ দেখার চেষ্টা করেন, তখন অ্যান্ড্রয়েড স্টুডিও নির্দিষ্ট কমপোজেবলকে রেন্ডার করার সময় একটি ত্রুটি দেখায়:

আপনি যদি কোনও ViewModel ব্যবহার করে এমন কোনও কম্পোজেবলের পূর্বরূপ দেখতে চান তবে আপনার ViewModel থেকে প্যারামিটারগুলি সহ আরও একটি কম্পোজেবল তৈরি করা উচিত কমপোজেবলের যুক্তি হিসাবে পাস করা। এইভাবে, আপনার ViewModel ব্যবহার করে এমন কম্পোজেবলের পূর্বরূপ দেখার দরকার নেই।

@Composable
fun AuthorScreen(viewModel: AuthorViewModel = viewModel()) {
  AuthorScreen(
    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]
) {
  AuthorScreen(...) {
    name = NameLabel(name),
    posts = PostsList(posts)
  }
}

টীকা ক্লাস @Preview

আপনার পূর্বরূপ কাস্টমাইজ করার সময় সামঞ্জস্য করা যায় এমন পরামিতিগুলির সম্পূর্ণ তালিকার জন্য আপনি সর্বদা 'সিটিআরএল বা ⌘ + ক্লিক' করতে পারেন অ্যান্ড্রয়েড স্টুডিওতে @Preview টীকাটি ক্লিক করুন।

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,
)
AndroidStudioComposeSnippets.kt

অতিরিক্ত সম্পদ

অ্যান্ড্রয়েড স্টুডিও কীভাবে ব্যবহারের সহজলভ্যতা @Preview প্রচার করে এবং আরও সরঞ্জামদণ্ডের টিপস শিখতে পারে সে সম্পর্কে আরও পড়তে, ব্লগ রচনা সরঞ্জামটি দেখুন।