জেটপ্যাক কম্পোজ সহ একটি অ্যাপকে কীভাবে স্টাইল এবং থিম করবেন

এই নিবন্ধে, আমরা জেটপ্যাক কম্পোজে কীভাবে একটি অ্যাপ্লিকেশনকে স্টাইল এবং থিম করতে হয় তা শিখব।

কম্পোজ হল অ্যান্ড্রয়েডের জন্য একটি নতুন UI ফ্রেমওয়ার্ক (যদিও ডেস্কটপ এবং ওয়েব সমর্থন তৈরি করা হচ্ছে), যা পুরানো XML-ভিত্তিক ভিউ সিস্টেমকে প্রতিস্থাপন করে৷

এই নিবন্ধটি লেখার সময় এখনও বিটা রিলিজে থাকা অবস্থায়, আমি আশা করি না যে লাইব্রেরির এই বিশেষ অংশটি স্থিতিশীল প্রকাশের জন্য ব্যাপকভাবে পরিবর্তিত হবে।

বিষয় অন্তর্ভুক্ত:

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

এগিয়ে যাওয়ার আগে, এটি গুরুত্বপূর্ণ যে আপনি একটি কম্পোজেবল কি তা বুঝতে পারেন। আমি এখানে সেই ধারণাটি ব্যাখ্যা করতে থামব না, যেমনটি আমি ইতিমধ্যেই এই নিবন্ধে রেখেছি।

এক্সএমএল রিসোর্স ব্যবহার করে আমরা কীভাবে অ্যান্ড্রয়েড অ্যাপ স্টাইল করতাম

যথারীতি, আমি এই বিষয়গুলির পিছনের প্রেরণা এবং ইতিহাসের একটি বিট আপনার সাথে শেয়ার করতে চাই৷ আপনি যদি চিন্তা না করেন, তাহলে নির্দ্বিধায় পরবর্তী বিভাগে চলে যান যেখানে আমরা ব্যবহারিক বিষয়গুলিতে প্রবেশ করি৷

Android সম্পদ

অ্যান্ড্রয়েড অ্যাপ রিসোর্স সিস্টেম এমন কিছু যা অ্যান্ড্রয়েড টিম অন্তত আমার মতে উচ্চ ফাইভের জন্য প্রাপ্য। কিন্তু প্রতিটি ডিজাইনের সিদ্ধান্তের মতো, একটি পরিস্থিতিতে একটি বৈশিষ্ট্য অন্য পরিস্থিতিতে একটি ত্রুটি হয়ে ওঠে।

সুনির্দিষ্টভাবে বলতে গেলে, প্ল্যাটফর্ম এবং অ্যাপ্লিকেশান ডেভেলপার উভয়ের জন্যই সবচেয়ে বড় চ্যালেঞ্জগুলির মধ্যে একটি হল আমি যাকে স্থানীয় সংস্থান বলব তা তৈরি করা। . আমি অ্যাপ তৈরির চ্যালেঞ্জের কথা উল্লেখ করছি যা:

• বিভিন্ন ভাষা এবং বর্ণমালায় পাঠ্য এবং গ্রাফিক্স প্রদর্শন করুন
• দেখুন এবং অনুভব করুন বিভিন্ন ধরণের ফর্ম ফ্যাক্টর (মাত্রা, ঘনত্ব এবং আরও অনেক কিছু।)

এগুলি কেবল দুটি সাধারণ উদাহরণ - আরও অনেক কিছু রয়েছে। রিসোর্স সিস্টেম আমাদের এমন একটি জায়গা দেয় যেখানে অ্যাপ ডেভেলপাররা স্থানীয় রিসোর্স সরবরাহ করতে পারে যা প্ল্যাটফর্মটি কম্পাইলের সময় নির্বাচন করতে পারে। এটি আমাদেরকে সেই বয়লারপ্লেট কোডটি নিজেরাই লিখতে বাঁচায়।

বৈশিষ্ট্য বা ত্রুটি?

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

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

দয়া করে মনে রাখবেন যে এটি প্ল্যাটফর্ম বিকাশকারী/ইঞ্জিনিয়ারদের সমালোচনা হিসাবে বোঝানো হয়নি। এটা নিছক একটি পর্যবেক্ষণ যে কিভাবে ডিজাইনের সিদ্ধান্তে সবসময় সুবিধা এবং খরচ থাকে।

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

আমি যে দুটি সাধারণ সমস্যায় পড়েছিলাম তা হল:

• আমি এমন একটি জায়গায় একটি সংস্থান অ্যাক্সেস করতে চাই যেখানে আমি প্ল্যাটফর্ম API-এর সাথে শক্ত সংযোগ চাই না যা সংস্থান সরবরাহ করে
• একটি ভিউয়ের চেহারা পরিবর্তন করার জন্য আমাকে কিছু হাস্যকর বয়লারপ্লেট কোড লিখতে হবে (অর্থাৎ, সম্পদ শৈলী এবং থিমের মধ্যে সংজ্ঞায়িত কিছুকে ওভাররাইড করুন)

মূল সমস্যা জড়িত প্রত্যেকের জন্য টাইট কাপলিং ভিউ সিস্টেম এবং অ্যান্ড্রয়েড রিসোর্স সিস্টেমে (যা নিজেদের মধ্যে শক্তভাবে সংযুক্ত)।

প্ল্যাটফর্ম ডেভেলপারদের জন্য, এর অর্থ হল তাদের উপরে তৈরি করতে হবে, বা বিশাল এবং পুরানো কোডবেসের চারপাশে কাজ করতে হবে। যোগ করুন যে তাদের অবশ্যই পুরানো অ্যান্ড্রয়েড ওএস সংস্করণগুলিতে নতুন বৈশিষ্ট্যগুলি কাজ করার চেষ্টা করতে হবে এবং এটি একটি খুব অকৃতজ্ঞ কাজ হয়ে ওঠে৷

আমাদের অ্যাপ্লিকেশন ডেভেলপারদের জন্য ফলাফলটি প্রায়শই প্রচুর বয়লারপ্লেট কোড, কিছু হ্যাকি সমাধান এমন জিনিসগুলির জন্য যা স্বজ্ঞাতভাবে মনে হয় সেগুলি এক-লাইনার হওয়া উচিত। এই সম্পদগুলি পাওয়ার জন্য প্রধান API উল্লেখ না করা হল Context , যা এমন একটি ক্লাস যা আপনি সত্যিই মেমরিতে ফাঁস করতে চান না।

জেটপ্যাক রচনা লিখুন৷৷

জেটপ্যাক রচনার মাধ্যমে থিম, রঙ এবং ফন্ট কিভাবে সেট আপ করবেন

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

যেহেতু আমরা কোটলিনে সেই কাজটি করব, এর মানে একটি অত্যন্ত গুরুত্বপূর্ণ বিষয়:আমরা এবং প্ল্যাটফর্ম ডেভেলপার উভয়েই অনুবাদ (সংকলন) এবং API ব্রিজ (Android-এর R দ্বারা অনেক কম আবদ্ধ। ক্লাস এবং Context ) XML এবং JVM এর মধ্যে।

সহজ ভাষায়, এর মানে অনেক কম বয়লারপ্লেট কোড , এবং রানটাইমে অনেক বেশি নিয়ন্ত্রণ .

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

কোটলিন কম্পোজ দিয়ে Colors.xml রিসোর্স কিভাবে প্রতিস্থাপন করবেন

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

• রঙ প্যালেট
• রঙ টুল

আপনি যদি হালকা এবং গাঢ় অ্যাপ থিম সমর্থন করার পরিকল্পনা করেন (শীঘ্রই ব্যাখ্যা করা হয়েছে), একটি রঙের স্কিম নির্বাচন করার চেষ্টা করুন যা সাদা পাঠকে সমর্থন করে এবং একটি রঙের স্কিম যা কালো পাঠকে সমর্থন করে।

Color.kt নামে একটি ফাইল তৈরি করুন (নামটি কোন ব্যাপার নয়) এবং এটিকে অপরিবর্তনীয় val দিয়ে পূরণ করুন ues:

import androidx.compose.ui.graphics.Color

val primaryGreen = Color(0XFF00bc00)
val primaryCharcoal = Color(0xFF2b2b2b)
val accentAmber = Color(0xFFffe400)

val textColorLight = Color(0xDCFFFFFF)
val textColorDark = Color(0xFFf3f3f3)
val gridLineColorLight = Color.Black
//...

আপনি হয় পূর্বনির্ধারিত মান ব্যবহার করতে পারেন যেমন Color.Black অথবা আপনার নিজস্ব ARGB হেক্স মান সরবরাহ করুন।

যেহেতু ARGB Hex হল একগুচ্ছ জার্গন যা বর্ণনা করার জন্য "0XFF00bc00 " মানে, আমাকে অনুবাদ করতে দিন:

• প্রথম দুটি অক্ষর 0x কম্পাইলারকে বলুন যে এটি একটি হেক্সাডেসিমেল সংখ্যা
• দ্বিতীয় দুটি অক্ষর , "FF " অথবা "DC ", স্বচ্ছতা/অস্বচ্ছতা/A প্রতিনিধিত্ব করে হেক্সে lpha
• বাকি ছয়টি অক্ষর জোড়া R প্রতিনিধিত্ব করে ed, G reen, এবং B লু
  

কীভাবে ফন্ট যোগ করবেন এবং fontFamily প্রতিস্থাপন করবেন বৈশিষ্ট্য

টাইপোগ্রাফি (ফন্ট) পরিচালনা করাও খুব সহজ। এই ধরনের জিনিস যেখানে Kotlin এর ডিফল্ট আর্গুমেন্ট খুব দরকারী.

Type.kt নামে একটি ফাইল তৈরি করুন (নামটি এখনও গুরুত্বপূর্ণ নয়) এবং Typography তৈরি করুন ক্লাস...:

val typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),

    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Bold,
        fontSize = 32.sp
    ),

    caption = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
)
//...

...এবং কিছু TextStyle ক্লাস:

//...
val mainTitle = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.Light,
    fontSize = 48.sp,
    textAlign = TextAlign.Center
)

fun dropdownText(color: Color) = TextStyle(
    fontFamily = FontFamily.Default,
    fontWeight = FontWeight.Normal,
    fontSize = 32.sp,
    textAlign = TextAlign.Center,
    color = color
)
//...

আপনি সর্বজনীন ফাংশন বা মান প্রদান করেন কিনা (আমি var ব্যবহার করার বিরুদ্ধে পরামর্শ দিই এখানে) আপনার ব্যক্তিগত পছন্দ এবং বর্তমান প্রয়োজনীয়তার উপর নির্ভর করে।

জেটপ্যাক রচনায় কীভাবে একটি অ্যাপ থিম তৈরি করবেন

আপনার কম্পোজেবলে আপনার থিম ব্যবহার করার আগে আপনাকে শেষ যে জিনিসটি কনফিগার করতে হবে তা হল একটি MaterialTheme @Composable . গ্রাফসুডোকু থিম নামে একটি ফাইলে আমার এবং আমার হালকা এবং গাঢ় রঙের প্যালেট সহ আছে:

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color

private val LightColorPalette = lightColors(
    primary = primaryGreen,
    secondary = textColorLight,
    surface = lightGrey,
    primaryVariant = gridLineColorLight,
    onPrimary = accentAmber,
    onSurface = accentAmber
)

private val DarkColorPalette = darkColors(
    //main background color
    primary = primaryCharcoal,
    //used for text color
    secondary = textColorDark,
    //background of sudoku board
    surface = lightGreyAlpha,
    //grid lines of sudoku board
    primaryVariant = gridLineColorLight,
    onPrimary = accentAmber,

    onSurface = accentAmber

)

@Composable
fun GraphSudokuTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {

    MaterialTheme(
        colors = if (darkTheme) DarkColorPalette else LightColorPalette,
        typography = typography,
        shapes = shapes,
        content = content
    )
}

যেহেতু কম্পোজেবল কী তার সাথে আপনার ইতিমধ্যেই পরিচিত হওয়া উচিত (আমি আপনাকে ন্যায্য সতর্কতা দিয়েছি), এখানে একমাত্র নতুন জিনিস হল darkTheme: Boolean = isSystemInDarkTheme() .

একটি সরলীকৃত ব্যাখ্যা দিতে, isSystemInDarkTheme() একটি কল যা ব্যবহারকারীর হালকা বা গাঢ় থিমের পছন্দের জন্য যেকোনো সামঞ্জস্যপূর্ণ অ্যান্ড্রয়েড ডিভাইসকে জিজ্ঞাসা করে৷

এটি একটি বুলিয়ান মান ফেরত দেয় যা আমরা একটি টার্নারি (শর্তসাপেক্ষ) অ্যাসাইনমেন্ট এক্সপ্রেশনে ব্যবহার করতে পারি যেমন colors = if (darkTheme) DarkColorPalette else LightColorPalette .

যে আসলে এটা. রঙ, ফন্ট, এবং দুটি থিম কয়েক মিনিটের মধ্যে সংজ্ঞায়িত।

কম্পোজে একটি থিম কীভাবে ব্যবহার করবেন

এখন আপনার অ্যাপে এই থিমটি ব্যবহার করার সময় এসেছে। এই অ্যাপে, যার শুধুমাত্র দুটি প্রাথমিক স্ক্রীন রয়েছে, আমি শুধু একটি ধারক হিসাবে একটি কার্যকলাপ ব্যবহার করি আমার কম্পোজেবলের জন্য:

class NewGameActivity : AppCompatActivity(), NewGameContainer {
	//...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
		//...

        setContent {
            GraphSudokuTheme {
                NewGameScreen(
                    onEventHandler = logic::onEvent,
                    viewModel
                )
            }
        }
		//...
    }

যেখানেই আপনি নিজেকে setContent {} কল করছেন , নতুনদের জন্য আমার পরামর্শ হল অবিলম্বে এটির ভিতরে আপনার থিম কম্পোজযোগ্য রাখুন। এটি করার ফলে শৈলীর তথ্য প্রতিটি নেস্টেড কম্পোজেবলে ক্যাসকেড/উত্তরাধিকারী হবে .

তুমি পেরেছ! প্রায়।

কিভাবে শৈলী এবং থিম ওভাররাইড করবেন

আপনি যদি এটিকে সাহায্য করতে পারেন তবে আপনার হালকা এবং গাঢ় প্যালেটগুলিতে আপনি যে রঙ চান তা অন্তর্ভুক্ত করার চেষ্টা করুন। এইভাবে, যখন আপনি MaterialTheme.colors.<Color> কল করেন , সিস্টেম উপযুক্ত প্যালেট বাছাই করার জন্য প্রয়োজনীয় শর্তযুক্ত যুক্তি পরিচালনা করবে:

@Composable
fun NewGameContent(
    onEventHandler: (NewGameEvent) -> Unit,
    viewModel: NewGameViewModel
) {
    Surface(
        Modifier
            .wrapContentHeight()
            .fillMaxWidth()
    ) {
        ConstraintLayout(Modifier.background(MaterialTheme.colors.primary)) { 
        	//...
        }
        //...
      }
}      
        

যাইহোক, কখনও কখনও আপনার নিজের শর্তযুক্ত যুক্তি লিখতে আরও উপযুক্ত হয়...অথবা আমি অলস হয়ে গেছি। সৌভাগ্যবশত রচনা এই ধরনের অনেক কনফিগারেশনকে বৈশিষ্ট্য হিসাবে উপলব্ধ করে:

@Composable
fun DoneIcon(onEventHandler: (NewGameEvent) -> Unit) {
    Icon(
        imageVector = Icons.Filled.Done,
        tint = if (MaterialTheme.colors.isLight) textColorLight 
        else textColorDark,
        contentDescription = null,
        modifier = Modifier
            .clickable(
            //...
            )
    )
}

MaterialTheme.Colors.isLight তারা কোন মোডে আছে তা নির্দেশ করে একটি বুলিয়ান ফেরত দেয়, তারপর আমরা সেখান থেকে আরেকটি টারনারি অ্যাসাইনমেন্ট ব্যবহার করতে পারি।

কিভাবে টেক্সট কম্পোজযোগ্য স্টাইল করবেন

শুধু style সেট করুন আপনার পাঠ্য শৈলীগুলির একটির সমান যুক্তি (এটি MaterialTheme থেকে আসে কিনা অথবা Type.kt-এর মধ্যে একটি শৈলী ):

Text(
    text = stat.toTime(),
    style = statsLabel.copy(
        color = if (isZero) Color.White
        else MaterialTheme.colors.onPrimary,
    fontWeight = FontWeight.Normal
    ),
    modifier = Modifier
        .wrapContentSize()
        .padding(end = 2.dp, bottom = 4.dp),
        textAlign = TextAlign.End
)

TextStyle এর নিজস্ব copy আছে ফাংশন যেতে প্রস্তুত আপনার যদি কিছু ওভাররাইট করতে হয়।

এবং এটাই! আপনি এখন জেটপ্যাক কম্পোজ ব্যবহার করে একটি অ্যাপ্লিকেশনকে স্টাইল এবং থিম করতে জানেন। পড়ার জন্য ধন্যবাদ :)

সামাজিক৷

আপনি আমাকে এখানে ইনস্টাগ্রামে এবং এখানে টুইটারে খুঁজে পেতে পারেন৷

এখানে আমার কিছু টিউটোরিয়াল এবং কোর্স আছে

https://youtube.com/wiseass https://www.freecodecamp.org/news/author/ryan-michael-kay/ https://skl.sh/35IdKsj (অ্যান্ড্রয়েড স্টুডিও সহ অ্যান্ড্রয়েডের ভূমিকা)