Compose-এ স্টাইল

Style API হল Jetpack Compose-এ এলিমেন্ট ও কম্পোনেন্ট কাস্টমাইজ বা "স্টাইল" করার জন্য একটি নতুন দৃষ্টান্ত, যা ঐতিহ্যগতভাবে মডিফায়ারের মাধ্যমে করা হয়েছে। এটি আরও গভীর, সহজ কাস্টমাইজেশন আনলক করার জন্য ডিজাইন করা হয়েছে।

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

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

স্টাইলের সুবিধা

  • স্টেট-ভিত্তিক স্টাইলিং সহজ করে: API আরও সংক্ষিপ্ত এবং ঘোষণামূলক উপায়ে স্টাইল নির্ধারণ করে যা বিভিন্ন স্টেটের (যেমন, হোভার করা, ফোকাস করা, প্রেস করা) উপর ভিত্তি করে পরিবর্তিত হয়, মডিফায়ার সিস্টেমের তুলনায় বয়লারপ্লেট কোড উল্লেখযোগ্যভাবে হ্রাস করে।
  • অ্যানিমেটেড স্টেট ট্রানজিশন উন্নত করে: Style API আদর্শ পারফর্ম্যান্স বৈশিষ্ট্য সহ স্টেটগুলির মধ্যে স্টাইল প্রপার্টির বিল্ট-ইন অ্যানিমেশনের অনুমতি দেয়, বর্তমান animateColorAsState পদ্ধতির সাথে ঘটে যাওয়া রিকম্পোজিশন এড়িয়ে যায়।
  • কম্পোনেন্ট API স্ট্রিমলাইন করে: কাস্টমাইজেশনের জন্য একটি স্টাইল প্যারামিটার চালু করার মাধ্যমে, কম্পোনেন্ট API নাটকীয়ভাবে সরলীকৃত হয় এবং আরও বেশি নমনীয়তা অফার করে।
  • কম রিকম্পোজিশন মডিফায়ারের তুলনায় আরও ভালো পারফর্ম্যান্স প্রদান করে: স্টাইল কম্পোজের ড্র ও লেআউট ফেজে রান করে, কম্পোজিশন ফেজ এড়িয়ে যায়।
  • আরও স্ট্যান্ডার্ডাইজড API-এর সেট: স্টাইলিস্টিক প্রপার্টির স্ট্যান্ডার্ড সেট যেকোনও কম্পোনেন্টকে স্টাইল করার উপযুক্ত করে তোলে।

মূল ধারণা

ধারণা বর্ণনা
Style স্টাইল করা যায় এমন প্রপার্টির স্ট্যান্ডার্ড সেট সহ UI এলিমেন্টের চেহারা কেমন হবে তা নির্ধারণ করে এমন ইন্টারফেস। এটি CSS স্টাইলের মতো এবং লোকালি বা থিমের মাধ্যমে কাস্টমাইজ করা যায়। স্টাইল একে অপরকে ওভাররাইট করে; কোনও প্রপার্টি দুবার সেট করলে (যেমন, background()) একটিই চূড়ান্ত ভ্যালু পাওয়া যায়।
StyleScope স্টাইলের মধ্যে applyStyle() ফাংশনের জন্য রিসিভার স্কোপ। এটি ভিজ্যুয়াল প্রপার্টি (প্যাডিং, ব্যাকগ্রাউন্ড, বর্ডার ইত্যাদি) নির্ধারণ করার এবং বর্তমান StyleState অ্যাক্সেস করার ফাংশন প্রদান করে।
StyleState স্টেট (যেমন, isEnabled, isPressed, isChecked, কাস্টম স্টেট) প্রদান করে যা আপনি কন্ডিশনাল স্টাইলিং নির্ধারণ করতে স্টাইলের মধ্যে ব্যবহার করতে পারবেন।

শুরু করা যাক: ডিপেন্ডেন্সি যোগ করুন

আপনার নিজের প্রোজেক্টে API ব্যবহার করতে, আপনি Jetpack Compose ফাউন্ডেশনের লেটেস্ট আলফা রিলিজ ব্যবহার করছেন কিনা তা নিশ্চিত করুন। আপনার settings.gradle.kts ফাইলে, ব্যবহার করার জন্য রিপোজিটরির তালিকায় স্ন্যাপশট Maven রিপোজিটরি যোগ করুন।

আপনার libs.versions.toml-এ অথবা সরাসরি আপনার app/build.gradle.kts ফাইলে, Compose-এর ভার্সন 1.12.0-alpha03-এ সেট করুন:

compose = "1.12.0-alpha03"
androidx-compose-runtime = { group = "androidx.compose.runtime", name = "runtime", version.ref = "compose" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui", version.ref = "compose" }
androidx-compose-ui-graphics = { group = "androidx.compose.ui", name = "ui-graphics", version.ref = "compose" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling", version.ref = "compose" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview", version.ref = "compose" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest", version.ref = "compose" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4", version.ref = "compose" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation", version.ref = "compose" }