জেটপ্যাক কম্পোজে UI ইভেন্টগুলি কীভাবে পরিচালনা করবেন

এই সংক্ষিপ্ত এবং ব্যবহারিক নিবন্ধে, আমরা জেটপ্যাক রচনায় UI ইভেন্টগুলি কীভাবে পরিচালনা করব সে সম্পর্কে কথা বলব।

পুরানো সিস্টেমে, আমরা OnClickListeners এবং অন্যান্য ইন্টারফেস ব্যবহার করতাম। কম্পোজে, আমরা কোটলিনের সিল করা ক্লাসের সম্পূর্ণ সুবিধা নিতে পারি , ফাংশনের ধরন এবং ল্যাম্বডা এক্সপ্রেশন .

আপনি যদি না জানেন যে একটি কম্পোজেবল কি, এই নিবন্ধটি পড়ার বিবেচনা করুন যা মৌলিক বিষয়গুলি ব্যাখ্যা করে৷

এই নিবন্ধটি এই ভিডিওতে 3 মিনিটের মধ্যে সংক্ষিপ্ত করা হয়েছে।

সিল করা ক্লাসের সাথে কীভাবে UI ইভেন্ট মডেল করবেন

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

আমি জাভা এবং কোটলিন (পুরানো ভিউ সিস্টেম সহ) এর জন্য এই একই প্রক্রিয়াটি আগে বর্ণনা করেছি, তাই আমি এই সংক্ষিপ্ত রাখব।

প্রক্রিয়া

আপনার UI-এর প্রতিটি স্ক্রীন বা সাব-স্ক্রীনের জন্য, নিজেকে এই প্রশ্নটি করুন:ব্যবহারকারীরা এর সাথে ইন্টারঅ্যাক্ট করতে পারে এমন সব ভিন্ন উপায় কী?

গ্রাফ সুডোকু:

সম্পূর্ণরূপে তৈরি করা আমার প্রথম অ্যাপ থেকে একটি উদাহরণ নেওয়া যাক জেটপ্যাক কম্পোজে UI ইভেন্টগুলি কীভাবে পরিচালনা করবেন

একটি সুডোকু অ্যান্ড্রয়েড অ্যাপের স্ক্রিনশট

এই স্ক্রিনের UI মিথস্ক্রিয়াগুলি উপস্থাপন করার জন্য আমি যে সিল করা ক্লাসটি ব্যবহার করি তা এইরকম দেখাচ্ছে:

sealed class ActiveGameEvent {
    data class OnInput(val input: Int) : ActiveGameEvent()
    data class OnTileFocused(val x: Int, 
    val y: Int) : ActiveGameEvent()
    object OnNewGameClicked : ActiveGameEvent()
    object OnStart : ActiveGameEvent()
    object OnStop : ActiveGameEvent()
}

সংক্ষেপে ব্যাখ্যা করতে:

অনইনপুট একজন ব্যবহারকারীকে একটি ইনপুট বোতাম স্পর্শ করে প্রতিনিধিত্ব করে (যেমন 0, 1, 2, 3, 4)
OnTileFocused একটি টাইল নির্বাচনকারী ব্যবহারকারীকে প্রতিনিধিত্ব করে (যেমন অ্যাম্বার হাইলাইট করা)
OnNewGameClicked হল স্ব-ব্যাখ্যামূলক
অনস্টার্ট এবং অনস্টপ হল লাইফসাইকেল ইভেন্ট যা আমার কম্পোজেবলগুলি গুরুত্ব দেয় না, তবে এগুলি অ্যাক্টিভিটিতে ব্যবহৃত হয় যা কম্পোজেবলগুলির জন্য একটি ধারক হিসাবে কাজ করে

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

কিভাবে আপনার সফটওয়্যার আর্কিটেকচার সংযুক্ত করবেন

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

কম্পোজ সহ অ্যান্ড্রয়েডের জন্য, আমার বর্তমান পদ্ধতিটি হল একটি খুব 3য় পক্ষের ন্যূনতম পদ্ধতি ব্যবহার করা যা সাধারণত প্রতিটি বৈশিষ্ট্যে (স্ক্রিন) এই জিনিসগুলি থাকে:

একটি (প্রেজেন্টেশন) লজিক ক্লাস একটি ইভেন্ট হ্যান্ডলার হিসাবে
ভিউ রেন্ডার করার জন্য প্রয়োজনীয় ডেটা সঞ্চয় করার জন্য একটি ভিউ মডেল (নামটি বোঝায়)
একটি ক্রিয়াকলাপ যা একটি ধারক হিসাবে কাজ করে (একটি ঈশ্বর বস্তু নয়)
ভিউ গঠন করতে কম্পোজেবল

মডেল-ভিউ-যাই হোক

যতক্ষণ না আপনি উদ্বেগের বিচ্ছেদ প্রয়োগ করছেন ততক্ষণ আপনি কী ব্যবহার করেন তা আমি চিন্তা করি না। এইভাবে আমি এই স্থাপত্যে পৌঁছেছি, একই ক্লাসে কী করা উচিত এবং কী করা উচিত নয় তা জিজ্ঞাসা করে।

আপনি আপনার ভিউমডেল, একটি ফ্র্যাগমেন্ট বা একটি কার্যকলাপ আপনার ইভেন্ট হ্যান্ডলার হতে চান না কেন, সেগুলিকে একইভাবে সেট আপ করা যেতে পারে:ফাংশনের প্রকারগুলি!

আপনার পছন্দের ক্লাসের মধ্যে, একটি ইভেন্ট হ্যান্ডলার ফাংশন সেট আপ করুন যা আপনার সিল করা ক্লাসকে তার যুক্তি হিসাবে গ্রহণ করে:

class ActiveGameLogic(
    private val container: ActiveGameContainer?,
    private val viewModel: ActiveGameViewModel,
    private val gameRepo: IGameRepository,
    private val statsRepo: IStatisticsRepository,
    dispatcher: DispatcherProvider
) : BaseLogic<ActiveGameEvent>(dispatcher),
    CoroutineScope {
    //...
    override fun onEvent(event: ActiveGameEvent) {
        when (event) {
            is ActiveGameEvent.OnInput -> onInput(
                event.input,
                viewModel.timerState
            )
            ActiveGameEvent.OnNewGameClicked -> onNewGameClicked()
            ActiveGameEvent.OnStart -> onStart()
            ActiveGameEvent.OnStop -> onStop()
            is ActiveGameEvent.OnTileFocused -> onTileFocused(event.x, event.y)
        }
    }
    //...
}

এই পদ্ধতিটি খুব সংগঠিত এবং এটি একটি একক এন্ট্রি পয়েন্টের মাধ্যমে এই 3য় পক্ষের লাইব্রেরি বিনামূল্যে ক্লাসের প্রতিটি ইউনিট পরীক্ষা করা সহজ করে তোলে৷

যাইহোক, আমরা এখনও সম্পন্ন করা হয় না. স্বাভাবিকভাবেই, এই ইভেন্ট হ্যান্ডলার ফাংশনের একটি রেফারেন্স পেতে আমাদের একটি উপায় প্রয়োজন, onEvent , আমাদের Composables. আমরা একটি ফাংশন রেফারেন্স ব্যবহার করে এটি করতে পারি :

class ActiveGameActivity : AppCompatActivity(), ActiveGameContainer {
    private lateinit var logic: ActiveGameLogic

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val viewModel = ActiveGameViewModel()

        setContent {
            ActiveGameScreen(
                onEventHandler = logic::onEvent,
                viewModel
            )
        }

        logic = buildActiveGameLogic(this, viewModel, applicationContext)
    }

  	//...
}

আমি নিশ্চিত আপনাদের মধ্যে কেউ কেউ ভাবছেন কেন আমি একটি কার্যকলাপ ব্যবহার করছি। বিস্তারিত উত্তরের জন্য আপনি আমাকে একটি লাইভ স্ট্রিম প্রশ্নোত্তর সময় জিজ্ঞাসা করতে পারেন।

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

সুনির্দিষ্টভাবে বলতে গেলে, আপনি যেভাবে কোটলিনে একটি ফাংশনের রেফারেন্স করেন তা হল শ্রেণী/ইন্টারফেসের নাম প্রদান করে (বা এটি এড়িয়ে যান যদি এটি একটি শীর্ষ-স্তরের ফাংশন হয় ), তারপর দুটি কোলন , এবং কোনও আর্গুমেন্ট বা বন্ধনী ছাড়াই ফাংশনের নাম :

onEventHandler = logic::onEvent

জেটপ্যাক কম্পোজ অনক্লিক মডিফায়ার দিয়ে কিভাবে onClickListener প্রতিস্থাপন করবেন

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

@Composable
fun ActiveGameScreen(
    onEventHandler: (ActiveGameEvent) -> Unit,
    viewModel: ActiveGameViewModel
) {
//...
}

সঠিকভাবে ফাংশন টাইপ সিনট্যাক্স পাওয়া কিছুটা কঠিন হতে পারে, কিন্তু বুঝতে হবে যে এটি সত্যিই একটি ফাংশনের একটি রেফারেন্স, যা একটি ক্লাসের রেফারেন্স থেকে এতটা আলাদা নয়।

আপনার যেমন ঈশ্বরের বস্তু তৈরি করা উচিত নয়, তেমনি আপনার দৈত্যাকার কম্পোজেবল তৈরি করা উচিত নয়:

আপনার UI কে সবচেয়ে ছোট যুক্তিসঙ্গত অংশে ভেঙে দিন
এগুলিকে একটি কম্পোজযোগ্য ফাংশনে মোড়ানো
প্রতিটি কম্পোজেবলের জন্য যার সাথে যুক্ত একটি UI মিথস্ক্রিয়া আছে, এটি আপনার ইভেন্ট হ্যান্ডলার ফাংশনের একটি রেফারেন্স দিতে হবে

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

@Composable
fun SudokuInputButton(
    onEventHandler: (ActiveGameEvent) -> Unit,
    number: Int
) {
    Button(
        onClick = { onEventHandler.invoke(ActiveGameEvent.OnInput(number)) },
        modifier = Modifier
            .requiredSize(56.dp)
            .padding(2.dp)
    ) {
        Text(
            text = number.toString(),
            style = inputButton.copy(color = MaterialTheme.colors.onPrimary),
            modifier = Modifier.fillMaxSize()
        )
    }
}

ঘটনাটি আসলে লজিক ক্লাসে পাস করতে, আমাদের অবশ্যই invoke ব্যবহার করতে হবে ফাংশন, যা ফাংশন প্রকারের সংজ্ঞা অনুসারে আর্গুমেন্ট গ্রহণ করবে (যা একটি ActiveGameEvent গ্রহণ করে এই ক্ষেত্রে)।

এই মুহুর্তে, আপনি এই সুন্দর এবং আধুনিক প্রোগ্রামিং ভাষার সম্পূর্ণ সুবিধা নিয়ে কোটলিনে UI ইন্টারঅ্যাকশন ইভেন্টগুলি পরিচালনা করতে প্রস্তুত (রচনা করুন বা না করুন)৷

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

৷

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

৷

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