https://virgool.ir/feed/@cornerdroidاینجا جاییکه در مورد مسائل و اخبار اندرویدی حرف میزنیم. cornerdroid@gmail.com / کانال: https://t.me/AndroidCornerfa2026-11-11 12:51:16https://files.virgool.ir/upload/users/2769830/avatar/C7pfte.jpghttps://virgool.ir/@cornerdroidhttps://virgool.ir/@cornerdroid/discovering-kotlin-concepts-yp3e0jzxt38fتو این پست کُدامون رو با اینا تمیز‌تر میکنیم: * This keyword * Destructuring declaration * Function iteral* The benefits of getterاستفاده از this برای اشاره کردن به کلاس استفاده شدهبه این کد نگاه کنید:private fun isCurrentlyConnected(connectivityManager: ConnectivityManager?): Boolean { if (connectivityManager == null) { return false } else { val network = connectivityManager.activeNetwork if (network != null) { val capabilities = connectivityManager.getNetworkCapabilities(network) return capabilities?.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET) ?: false } else { return false } } }اگه یکم دقت کنین این ساختار یه extension function تو کاتلینه چون یه کلاس رو بعنوان پارامتر دریافت کرده (اینجوری تو جاوا می‌نویسیم) تو کاتلین اینجوری میشه با extension function.private fun ConnectivityManager?.isCurrentlyConnected(): Boolean { if (this == null) { return false } else { val network = this.activeNetwork if (network != null) { val capabilities = getNetworkCapabilities(network) return capabilities?.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET) ?: false } else { return false } } }خب یکم ساده‌تر شد. باز میتونه ساده‌تر بشه، اگه بیایم این if-else های تودرتو رو با when condition عوض کنیم (چون همه‌ی شرط ها یک کاندیشن رو درنظر دارن درنتیجه میشه از when استفاده کرد). اینجوری:private fun ConnectivityManager?.isCurrentlyConnected(connectivityManager: ConnectivityManager?) = when (connectivityManager) { null -> false else -> connectivityManager.activeNetwork ?.let(::getNetworkCapabilities) ?.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET) ?: false }الان بهتر شد. خب باز میتونیم بهترش کنیم، چون داریم یه extension function برای کلاس ConnectivityManager می‌نویسیم پس تو این block، ما به instance کلاسی که براش extension مینویسم، دسترسی داریم و میتونیم با استاده از کیبورد "this" به این instance دسترسی داشته باشیم.private fun ConnectivityManager?.isCurrentlyConnected() = when (this) { null -> false else -> activeNetwork ?.let(::getNetworkCapabilities) ?.hasCapability(NetworkCapabilities.NET_CAPABILITY_INTERNET) ?: false }دلیل‌اش هم اینه که اگه شما بیاین این کد رو دیکامپایل کنین و بایت‌کدهاش رو نگاه کنید، میبینید که extension function تو کاتلین میاد (مثلا اینجا) ConnectivityManager رو به عنوان پارامتر میگیره و برای همین بهش دسترسی داریم.برای مثال بیشتر:fun <T> CheckboxState.TriState<T>.asToggleableState() = when (this) { is CheckboxState.TriState.Exclude -> ToggleableState.Indeterminate is CheckboxState.TriState.Include -> ToggleableState.On is CheckboxState.TriState.None -> ToggleableState.Off }د: destructuring declarationفرض کنید ما این سه تا متغیر رو داریم:val chapters = remember(state) { state.processedChapters } val listItem = remember(state) { state.chapterListItems } val isAnySelected = remember(state) { state.isAnySelected }اینجا کدمون ساده هستش ولی چون داریم همش با یه state کار میکنیم، اگه این کار رو بکنیم بنظرم ساده‌تر بشه:val (chapters, listItem, isAnySelected) = remember(state) { Triple( first = state.processedChapters, second = state.chapterListItems, third = state.isAnySelected, ) }نکته: Triple یه کلاسه تو لایبرری استاندارد کاتلین که میتونه سه object رو براتون hold کنه.چ: Function Literalبه این کد نگاه کنید:val isAdult : Boolean = user.age> 18 val isValidUser : Boolean = isAdult && user.isActiveیک کاری رو داره با فراخوانی یک object تکراری انجام میده. که میتونید با استفاده از lambda assignment این‌کار رو ساده تر کنید. اینجوری:val isValidUser: (User) -> Boolean = { user -> user.age > 18 && user.isActive }با این کار، خیلی چیزا رو میتونید encapsulate هم بکنید.استفاده از فانکشن get(همون getter)این قسمت ربطی به تمیزکاری نداره، ولی قطعا performance رو تحت تاثیر قرار میده. چرا و کِی باید از get استفاده کنیم؟ بیاید با یه مثال اینو بگم:// first way val trackers = trackerManager.trackers.filter { it.isLoggedIn } // the second way val trackers get() = trackerManager.trackers.filter { it.isLoggedIn }توی روش اول ما مستقیما trackers رو Initializ کردیم، ولی تو روش دوم از مقدار رو ریختیم توی getter متغیر.روش دوم چند مزیت داره:ی- Lazy Initialization: شما وقتی از فانکشن get استفاده میکنید، وقتی مقداردهی میشه متغیر، که این متغیر صدا زده بشه- درنتیجه getter اش هم صدا زده میشه: پس همین اول کاری مقدار دهی نمیشه. این میتونه خیلی خوب باشه وقتی مثلا دارید یه کار نسبتا سنگینی می‌کنید.د- Dynamic Calculation: اگه مقدارهایی دارید که هِی درحال تغییر ان، میتونید این تغییرهارو تو بدنه get اعمال کنید.3- میتویند مقدار هارو تغییر بدید یا فیلترشون کنین(Filtering or Transformation) یا Encapsulate شون کنین و ... .Android CornerAndroid CornerTue, 26 Mar 2024 22:47:40 +0330https://virgool.ir/@cornerdroid/exception-handling-savgyuhx9a4aاین چند روز مشغول یه پروژه‌‌ی kmp هستم که برای decstop ،ios و android خروجی میده. تو این پروژه‌ها خیلی مهمه که تا حد ممکن کدها رو تو ماژول shared (commonMain) قرار داد تا هی کد تکراری ننویسیم تو هر ماژول(پلتفرم) یا به‌اصطلاح باید اصل DRY پیروی کنیم. یه موضوع مهمی که برخوردم بهش بحث exception handling بود. معمولا وقتی که از compose و برای بحث async از kotlin flow استفاده میکنین، میایم برای responseمون یه دیتا کلاس wrapper ایجاد میکنیم و توش error ها و loading و ... رو هندل می‌کنیم. اینجوری: interface HomeRepository { fun getPhotos( page: Int?, perPage: Int?, orderBy: String? ): Flow<DataState<List<Photo>>> }اینجا wrapper مون کلاس DataState هستش:data class DataState<T>( val message: String? = null, val data: T? = null, val isLoading: Boolean = false, val type: Type? = Type.SIMPLE ) { enum class Type { SIMPLE, AUTH } companion object { fun <T> error( message: String, type: Type? ): DataState<T> { return DataState( message = message, type = type ) } fun <T> data ( data : T? = null ) : DataState<T>{ return DataState( data = data ) } fun <T> loading() = DataState<T>(isLoading = true) } }اینم repository impl:override fun getPhotos( page: Int?, perPage: Int?, orderBy: String? ): Flow<DataState<List<Photo>>> = flow { emit(DataState.loading()) try { val photos = photoService.getPhotos( page = page, per_page = perPage, order_by = orderBy ) emit(DataState.data(photos)) } catch (e: Exception) { emit( DataState.error( message = e.message ?: "Unknown Error", type = DataState.Type.SIMPLE ) ) } }و داخل viewModel:@HiltViewModel class HomeViewModel @Inject constructor( private val savedStateHandle: SavedStateHandle, private val homeRepository: HomeRepository ) : FrameViewModel() { val state: MutableState<HomeState> = mutableStateOf(HomeState()) init { homeRepository.getPhotos( page = state.value.page, perPage = 25, orderBy = state.value.orderBy, ) . { state.value = state.value.copy(isLoading = true) } .onCompletion { if (it == null) { state.value = state.value.copy(isLoading = false) } else { Log.e("dlfjask", "there is a problem") } } .onEach { dataState -> // state.value = state.value.copy(isLoading = dataState.isLoading) Log.i(TAG, "photos: $dataState.isLoading") dataState.data?.let { photos -> state.value = state.value.copy(photos = photos) Log.i(TAG, "photos: $photos") } }.catch { Log.e(TAG, "error: $it") }.launchIn(viewModelScope)خب این کد الان کار میکنه ولی چندین جا کدهای تکراری داریم. خب یه روش دیگه که بنظرم بهتره اینه که: اول یه extension function برای اینترفیس Flow می‌نویسیم تا همه error ها و loading ها رو یکجا تو یه مکان داشته باشیم و بتونیم بعدا هندل کنیم:sealed interface Result<out T> { data class Success<T>(val data: T) : Result<T> data class Error(val exception: Throwable? = null) : Result<Nothing> data object Loading : Result<Nothing> } fun <T> Flow<T>.asResult(): Flow<Result<T>> { return this .map<T, Result<T>> { Result.Success(it) } . { emit(Result.Loading) } .catch { emit(Result.Error(it)) } }خب دیگه نمی‌خواد wrap کنیم response مون رو. این میشه repository: interface PhotoRepository { fun getPhotos() : Flow<List<Photo>> }این هم repository impl: fun getPhotos(sortBy: PhotoSortField = NONE): Flow<List<Photo>> { return combine( userDataRepository.userData, photoRepository.getPhoto(), ) { userData, photos -> val followedPhotos = photos .map { pohto -> FollowablePhoto( photo = pohto, isFollowed = pohto.id in userData.followedPhoto, ) } when (sortBy) { NAME -> followedPhotos.sortedBy { it.photo.name } else -> followedPhotos } } } }خب تا اینجا که کاری به هندل کردن ارور نداشتیم. هندل کردن ارورها و لودینگ‌ها رو تو viewmodel انجام میدیم. خب یه فانکشن می‌نویسیم برای state های اون صفحه‌مون:private fun photoUiState( photoId: String, userDataRepository: UserDataRepository, photosRepository: photosRepository, ): Flow<photoUiState> { // Observe the followed photos, as they could change over time. val followedphotoIds: Flow<Set<String>> = userDataRepository.userData .map { it.followedPhoto } // Observe photo information val photoStream: Flow<photo> = photosRepository.getphoto( id = photoId, ) return combine( followedphotoIds, photoStream, ::Pair, ) .asResult() .map { followedphotoToPhotoResult -> when (followedPhotoTophotoResult) { is Result.Success -> { val (followedphotos, photo) = followedphotoTophotoResult.data val followed = followedphotos.contains(photoId) photoUiState.Success( followablephoto = Followablephoto( photo = photo, isFollowed = followed, ), ) } is Result.Loading -> { photoUiState.Loading } is Result.Error -> { photoUiState.Error } } } } اینم از viewmodel مون:val photoUiState: StateFlow<photoUiState> = photoUiState( photoId = photoArgs.photoId, userDataRepository = userDataRepository, photosRepository = photosRepository, ) .stateIn( scope = viewModelScope, started = SharingStarted.WhileSubscribed(5_000), initialValue = photoUiState.Loading, ) خب این هم از این. نکته: روش‌های دیگه‌ای هم هستن مثل RxBus یا استفاده از shared flow برای پیاده‌سازی مکانیزمی شبیه Event Bus.خب امیدوارم خوشتون اومده باشه. اگه نظری داشتین درباره کد می‌تونین بپرسین.Android CornerAndroid CornerWed, 27 Dec 2023 19:28:11 +0330https://virgool.ir/@cornerdroid/اخبار-هفته-sh6znxvurmvrAndroid Corner ? نسخه‌ی Compose Multiplatform 1.5.0تغییرات این نسخه هیجان‌انگیزه. کلا تغییرات KMP برای من خیلی جذابه(:کامپوز برای دسکتاپ stableه، برای iOS تو حالت alpha و برای وب هم تو حالت experimental قرار داره.این نسخه براساس Jetpack Compose 1.5 هستش که تمرکزاش روی performanceه. همچنین تو این نسخه، از نسخه 1.1 Material Design 3 میتونید استفاده کنید که یه‌سری امکانات جدید داره.پشتیبانی Compose Multiplaform از dialog ها، popup ها و windowInsetاز حالا به بعد دیگه نیاز ندارین برای همه پلتفرم‌ها کد‌های جداگانه بنویسین برای ساخت Dialog و Popup DropdownMenu و AlertDialog. با داشتن یکدیگر تیکه کد برای مثلا AlertDialog، تو همه پلتفرم‌ها ازش استفاده کنید:Composable fun CommonDialog() { var isDialogOpen by remember { mutableStateOf(false) } Button( = { isDialogOpen = true }) { Text("Open") } if (isDialogOpen) { AlertDialog( onDismissRequest = { }, confirmButton = { Button( = { isDialogOpen = false }) { Text("OK") } }, title = { Text("Alert Dialog") }, text = { Text("Lore ipsum") }, ) } } ? ? از طریق windowInset هم میتونین محتواتون رو با system ui یکی کنید یه همچین چیزی: ? پیشرفت های iOS1- پیمایش یا اسکرول‌کردن طبیعی: تو این نسخه اسکرول‌کردن توی iOS مثل اسکرول‌کردن بومی خود iOS شده. مثلا:@Composable fun NaturalScrolling() { val items = (1..30).map { "Item $it" } LazyColumn { items(items) { Text( text = it, fontSize = 30.sp, modifier = Modifier.padding(start = 20.dp) ) } } }اینجوری میشه، مثل اپلیکیشن‌های native: ? 2- پشتیبانی از Dynamic Type: این ویژگی Dynamic Type تو iOS به کاربر امکان میده تا فونت سایز دلخواه‌اش رو تنظیم کنه. کاربر می‌تونه تو setting و اون text size گوشی رو حالت دلخواه از max تا min تنظیم کنن.@Composable fun DynamicType() { Text("This is some sample text", fontSize = 30.sp) }اینجوری: ? پشتیبانی از high-refresh rate display: توی ورژن‌های قبلی ماکزیمم فریم‌ریت 60 FPS بوده که منجر به کُند و لَگی بودن ui (تو دستگاه‌های با صفحه 120Hz) میشد. ولی تو این نسخه فریم‌ریت تا 120 فریم در ثانیه پشتیبانی می‌شه.3- ساده‌شدن مدیریت resource ها: دیگه لازم نیست asset های پوشه resource توی iOS رو توی یه bundle کپی کنید‌.4- و یه‌سری بهبودی‌هایی توی TextField و صفحه کلید داشتیم.پیشرفت‌های دسکتاپ1- پایدارشدن فریمورک تست برای تست کردن ui بدون محدودیت:@Composable fun App() { var searchText by remember { mutableStateOf("cats") } val searchHistory = remember { mutableStateListOf<String>() } Column(modifier = Modifier.padding(30.dp)) { TextField( modifier = Modifier.testTag("searchText"), value = searchText, onValueChange = { searchText = it } ) Button( modifier = Modifier.testTag("search"), = { searchHistory.add("You searched for: $searchText") } ) { Text("Search") } LazyColumn { items(searchHistory) { Text( text = it, fontSize = 20.sp, modifier = Modifier.padding(start = 10.dp).testTag("attempt") ) } } } }نتیجه این کد، این میشه: ? خب بیاین با JUnit تست‌اش کنیم:class SearchAppTest { @get:Rule val compose = createComposeRule() @Test fun `Should display search attempts`() { compose.setContent { App() } val testSearches = listOf("cats", "dogs", "fish", "birds") for (text in testSearches) { compose.onNodeWithTag("searchText").performTextReplacement(text) compose.onNodeWithTag("search").performClick() } val lastAttempt = compose .onAllNodesWithTag("attempt") .assertCountEquals(testSearches.size) .onLast() val expectedText = "You searched for: ${testSearches.last()}" lastAttempt.assert(hasText(expectedText)) } }2- این نسخه، پشتیبانیِ آزمایشی رو برای بهبود رندرکردن پنل‌های کامپوز توی کامپوننت‌های Swing رو هم ارائه میده. این مانع از مشکلات رندر انتقالی(transition) هنگام نمایش، پنهان یا تغییر اندازه پنل‌ها می شود.fun main() { System.setProperty("compose.swing.render.on.graphics", "true") SwingUtilities.invokeLater { val composePanel = ComposePanel().apply { setContent { Box(modifier = Modifier.background(Color.Black).fillMaxSize()) } } val popup = object : JComponent() { ... } val rightPanel = JLayeredPane().apply { add(composePanel) add(popup) ... } val leftPanel = JPanel().apply { background = CYAN } val splitter = JSplitPane(..., leftPanel,rightPanel) JFrame().apply { add(splitter) setSize(600, 600) isVisible = true } } }لوگوی جدید برای ربات اندروید(Bugdroid)گوگل لوگوی جدیدی رو برای برند اندروید معرفی کرده و میگه که از این به بعد قراره همه جا ببینیدش: ? آخرین ARTwork روی صدها میلیون دستگاهبروزرسانی های سیستم گوگل‌پلی برای android runtime، یه سری بهبودی هایی رو به همراه داشته البته برای اندروید 12 به بالا و گفته‌که android go هم بزودی از این آپدیت بهره‌مند میشه:1- پیشرفت‌های عملکرد: این بروز‌رسانی‌ها شامل بهینه‌سازی در زمان اجرا و کامپایلر هستش که باعث بهبود زمان startup برنامه، سرعت اجرای برنامه و استفاده از حافظه می شود.2- رفع مشکلات امنیتی: همچنین ماژولار بودن ART اجازه می‌ده تا اصلاحات امنیتی به سرعت در دستگاه های اندرویدی قراربگیرن که درنتیجه باعث میشه آسیب پذیری ها را pacth کنند.3- سازگاری سریع‌تر با ویژگی‌های جدید جاوا: این بروزرسانی سرعت پشتیبانی از نسخه‌های جدیدتر Java / OpenJDK رو به دستگاه های Android فراهم می‌کنه و به ما این امکان رو می‌ده تا از جدیدترین ویژگی های زبان استفاده کنیم.برای خوندن جزییات مقاله.ی: Library releasesآخرین نسخه از Dagger and Hilt — v2.48 شامل نسخه alpha از KSP processor هست. الان دیگه با خیال راحت میتونید از kapt به ksp مهاجرت کنید‌‌.یه‌سری تغییرات هم داشته که اینجا میتونین ببینین.برای استفاده از ksp این رو دنبال کنید.برای مهاجرت‌تون این مقاله رو بخونید.اینا رو هم بخونین ضرری نداره:1. بخش article های این لینک رو هم ببینید جالبه.2. این لینک.کانال:Android Corner / ایمیل: cornerdroid@gmail.comAndroid CornerAndroid CornerTue, 19 Sep 2023 08:58:03 +0330https://virgool.ir/@cornerdroid/yagni-dry-and-kiss-principles-zghpfij81bj9Android Corner ? سناریوهای کمی هستن که در نگاه اول میتونه حل کردنشون سخت باشه. ولی چرا اون سناریوها رو پیچیده‌تر میکنیم؟!استفاده از سه اصل YAGNI, KISS و DRY ما رو به کدی تمیز، ساده و قابل‌فهم‌ می‌رسونه و مهم‌تر از همه اینه‌که نمی‌ذاره درآینده مورد عنایت برنامه‌نویس‌های دیگه قرار‌بگیریم⁦(:ی: DRYمخفف: “Don’t Repeat Yourself”. یادتون باشه هروقت دارید یه کد تکراری می‌نویسید یه جای کار اشتباهه. پس هروقت به‌کد تکراری بَرخوردید اونو به یک موجودیت، entity یا functionality واحد تبدیل کنید. مثلا تو مثال پایین، دوبار یه چیز رو تکرار کردیم:// Without DRY class LoginActivity : AppCompatActivity() {   private fun validateInput(username: String, password: String): Boolean {     if(username.isEmpty()) {       return false     }     if(password.length < 6) {       return false     }     return true   }   fun onLoginClick() {     val username = usernameInput.text     val password = passwordInput.text     if(!validateInput(username, password)) {       showError("Invalid input")       return     }     // login user   }   fun onSignupClick() {     val username = usernameInput.text     val password = passwordInput.text     if(!validateInput(username, password)) {       showError("Invalid input")       return     }     // signup user   }پس میایم اون کد رو به یک functionality توی یک مکان واحد تبدیل میکنیم. اینجوری:// With DRY principle class LoginActivity : AppCompatActivity() { private fun validateInput(username: String, password: String): Boolean {   // validation logic } private fun validateAndLogin(username: String, password: String) {   if (!validateInput(username, password)) {     showError("Invalid input")     return   }   // login user } private fun validateAndSignup(username: String, password: String) {   if (!validateInput(username, password)) {     showError("Invalid input")     return   }   // signup user } fun onLoginClick() {   val username = usernameInput.text   val password = passwordInput.text   validateAndLogin(username, password) } fun onSignupClick() {   val username = usernameInput.text   val password = passwordInput.text   validateAndSignup(username, password) }د: KISSمخفف: “Keep It Simple, Stupid”. این اصل میگه سعی کنید همیشه کدهای ساده و قابل‌فهم بنویسید چون هرچقدر‌ که کدتون ساده‌تر باشه نگهداری‌اش درآینده ساده‌تره. ? س: YAGNIمخفف: “You Aren’t Gonna Need It”. این اصل میگه تمرکزتون رو روی نیازهای فعلی محصول بزارید. هرچیز اضافی تو پروژه، ناقض این اصله. مثلا تو اندروید، نمی‌دونم چه‌کاریه که همه می‌خوان از معماری MVVM پیروی کنن. شما میتونین یه پروژه کوچیک رو با MVP پیاده‌سازی کنین. بعضی پروژه‌ها اصلا معماری نیاز ندارن، فرض کنین یه پروژه‌ای دارید که می‌خواین 4 تا request بزنین به سرور، خب برای این پروژه چرا باید بیایم کارای اضافی انجام بدیم مثل ساختن repository و.... ? امیدوارم این اصل‌ها رو یادگرفته باشید و از این به‌بعد بتونید تو پروژه‌هاتون استفاده کنید.کانال:Android Corner / ایمیل: cornerdroid@gmail.comAndroid CornerAndroid CornerTue, 19 Sep 2023 08:50:29 +0330https://virgool.ir/@cornerdroid/آموزش-composeقسمت-سوم-v6lqrswsfigcState and Jetpack Compose AndroidCornerآدرسصفحهوبیکهمیخواهیدنمایشدهیدراPasteکنید به هرمقدار(value) ای که ممکنه باگذشت زمان تو برنامه‌تون تغییر کنه، بهش میگن State. این تعریف خیلی کلی هست و میتونه هرچیزی رو دَربَربگیره از یک دیتابیس room گرفته تا یه متغیر توی یک کلاس.چند نمونه از state تو برنامه های اندرویدی:* یه Snackbar ای که نشون میده: اینترنت برقرار نشد مثلا. مقدار این snackbar با برقرار شدن اینترنت، میتونه تغییر کنه، درنتیجه میگیم: snackbar یه state داره که اگه اینترنت برقرار شد، اون state تغییر میکنه.* یک پست همراه کامنت‌هاش. با تعامل کاربر با کامنت‌ها(حذف، ویرایش یا اضافه‌کردن کامنت)، درنتیجه state کامنت و پست مربوطه‌اش تغییر پیدا میکنه.* انیمیشن Ripple ای که کاربر با زدن رو دکمه به نمایش درمیاد، میتونه نمایانگر تغییر state خود انیمیشن باشه.تو این پست ما ارتباط بین composable و state رو بررسی میکنیم و با API ای که compose دراختیار مون قرار میده میفهمم کجا و چطوری state مون رو ذخیره و استفاده کنیم.نکته: بعضا من اول متن (یک، دو، سه) گذاشتم؛ این فقط برای راست چین کردن متنه و بار معنایی خاصی نداره.یک: State و compositionکامپوز declarative هستش، بنابراین تنها راه برای آپدیت کردنش اینه که یه composable رو با با آرگمان جدید صدا بزنیم. این آرگمان ها نماینده state هستن. هرموقعی که یه state آپدیت بشه، یه recomposition هم صورت میگیره.@Composable private fun HelloContent() {     Column(modifier = Modifier.padding(16.dp)) {         Text(             text = "Hello!",             modifier = Modifier.padding(bottom = 8.dp),             style = MaterialTheme.typography.bodyMedium         )         OutlinedTextField(             value = "",             onValueChange = { },             label = { Text("Name") }         )     } }ببینید مقدار OutlinedTextField یه رشته‌ی خالیه، درنتیجه هرچی کاربر می‌نویسه، چیزی نوشته نمیشه چون رشته خالیه و تغییری نکرده درنتیجه recomposition ای هم اتفاق نمی‌افته. پس باید یه راهی پیدا کنیم تا مقدارهایی که کاربر وارد می‌کنه رو بگیریم و بریزیم توی value اون OutlinedTextField. می‌بینید که مثل XML نیست که مثلا EditText خودشو آپدیت می‌کرد‌‌، اینجا باید خودمون state رو آپدیت کنیم.د: State در composable هافاکنشن‌های composable از remember استفاده می‌کنن برای ذخیره‌کردن یه آبجکت تو حافظه. rem‌‌ember یه مقدار رو محاسبه و ذخیره می‌کنه درطول composition اولیه. این مقدارهای ذخیره‌شده توسط remember، درطول recomposition، برگشت داده‌میشن. تو این مثال، کاربر یه‌چیزی رو تو TextField می‌نویسه، همیشه آخرین مقداری که کاربر وارد کرده تو TextField کرده، remember ذخیره می‌کنه‌ درنتیجه چون اینجا از mutableStateOf استفاده میکنیم برای ذخیره شدن این مقادیر، و کامپوز می‌دونه این mutableState پایدار و stable هستش درنتیجه با هر تغییر recomposition اتفاق می‌افته.این mutableStateOf یه آبجکتی می‌سازه که state اش قابل‌مشاهده هست و از نوعMutableState<T>هستش.interface MutableState<T> : State<T> {     override var value: T }خود MutableState<T> یه observable هست که اومده اینترفیس state که با compose runtime ادغام شده رو implement کرده. درنتیجه هرتغییری در مقدارهای mutableStateOf منجر به شروع به recomposition میشه‌‌ و هر فانکشنی که از اون value استفاده می‌کنه recompose میشه و درنتیجه اون فانکشن ها آپدیت میشن.سه روش برای تعریف آبجکت MutableState:1- val mutableState = remember { mutableStateOf(default) }2- var value by remember { mutableStateOf(default) }3- val (value, setValue) = remember { mutableStateOf(default) }وقتی شما از delegate by استفاده میکنین این پکیج ها import میشه به پروژه‌تون:import androidx.compose.runtime.getValue import androidx.compose.runtime.setValueخب حالا این مقادیر ذخیره‌شده، catch شده، بخاطرسپرده‌شده رو می‌تونین بعنوان پارامتر یه composable استفاده کنید، حتی می‌تونین تو statementها بعنوان logic ازش استفاده کنید. برای مثال تو مثال پایین، وقتی نمی‌خوایین greeting رو وقتی name خالی بود نمایش بدید، از این state ذخیره‌شده توی statement if استفاده میکنیم:@Composable fun HelloContent() {     Column(modifier = Modifier.padding(16.dp)) {         var name by remember { mutableStateOf("") }         if (name.isNotEmpty()) {             Text(                 text = "Hello, $name!",                 modifier = Modifier.padding(bottom = 8.dp),                 style = MaterialTheme.typography.bodyMedium             )         }         OutlinedTextField(             value = name,             onValueChange = { name = it },             label = { Text("Name") }         )     } }همونطور که گفتم ما برای این از remember استفاده میکنیم که state حفظ بشه تا در هر recomposition ای که اتفاق می‌افته بتونیم اونو return کنیم تا درنتیجه composable مون آپدیت بشه با state جدید. اما وقتی که configuration change اتفاق می‌افته، نمی‌تونه state رو حفظ کنه. درنتیجه اینجاست که باید از rememberSaveable استفاده کنیم. این بصورت خودکار مقدارها رو تو یه bundle ذخیره می‌کنه درنتیجه هر مقداری که بشه توی bundle ذخیره کرد رو می‌تونید بهش بدید.احتیاط: استفاده از آبجکت های تغییرپذیر(mutable) مثل ArrayList<T> or mutableListOf() بعنوان state باعث میشه که کاربر داده های نادرست و قدیمی رو ببینه. چون کلا compose آبجکت‌های mutable مثل ArrayList یا data class های mutable رو نمی‌بینه درنتیجه با تغییر مقادیرشون recomposition ای هم اتفاق نمی‌افته چون کلا اینا stable نیستن. بجای استفاده از آبجکت های non-observable mutable، توصیه میشه از یه نگه‌دارنده داده مثل اینState<List<T>> یا listOf()استفاده کنید‌.نوع‌های دیگه‌ای که state ازشون پشتیبانی می‌کنهکامپوز شمارو ملزم نمی‌کنه که حتما باید از MutableState استفاده کنید برای نگه‌داری state. کامپوز از یه‌سری نوع های observable دیگه هم پشتیبانی می‌کنه. این نگه‌دارنده‌های داده باید به State<T>t تبدیل یا ادغام بشن تا کامپوز متوجه تغییرات‌شون بشه. ولی خود کامپوز اومده observable های رایج تو اندروید رو ادغام کرده با state:1- اکستنشن فانکشن collectAsStateWithLifecycle() برای Flowاین فانکشن میاد مقادیر رو به روشی lifecycle-aware از یه Flow جمع می‌کنه که این lifecycle-aware بودنش فایده‌ای زیادی داره. این متد آخرین مقادیر ساطع‌شده رو به‌وسیله state کامپوز برمی‌گردونه.برای ادغام data source های lifecycle-aware ی مثل Flow با compose، این dependency رو به پروژه‌تون اضافه کنید:dependencies {       ...       implementation("androidx.compose.runtime:runtime-livedata:1.4.3") }2- متد collectAsState() برای Flowاین فانکشن مشابه collectAsStateWithLifecycle هستش، چون مقادیر Flow رو جمع‌آوری می‌کنه و تبدیل‌اش می‌کنه به state کامپوز. اما تفاتشون اینه‌که collectAsStateWithLifecycle فقط برای پلتفرم اندرویده، از collectAsState می‌تونید برای پلتفرم‌هایی مثل دسکتاپ مثلا استفاده کنید. dependency خاصی هم نیاز نداره.3- متد observeAsState() برای LiveDataاین متد observe کردن LiveData رو شروع میکنه و مقادیر رو به‌وسیله State بهمون میده. برای انجام این کار اول این dependency رو به پروژه‌تون اضافه کنید.dependencies {       ...       implementation("androidx.compose.runtime:runtime-livedata:1.4.3") }4- متد subscribeAsState() برای Rxjava2این یه اکستنشن فانکشنه که جریان‌های reactive‌(واکنشیِ) Rxjava2 رو به State کامپوز‌ تبدیل می‌کنه. جریان‌ها میتونن Single، Observable یا مثلا Completable باشن. برای استفاده از این ویژگی باید این dependency رو به پروژه‌تون اضافه کنید:dependencies {       ...       implementation("androidx.compose.runtime:runtime-rxjava2:1.4.3") }5- متد subscribeAsState() برای Rxjava3این هم مثل قبلی یه اکستنشن فانکشنه که جریان‌های reactive‌(واکنشیِ) Rxjava2 رو به State کامپوز‌ تبدیل می‌کن. جریان‌ها میتونن Single، Observable یا مثلا Completable باشن. برای استفاده از این ویژگی باید این dependency رو به پروژه‌تون اضافه کنید:dependencies {       ...       implementation("androidx.compose.runtime:runtime-rxjava3:1.4.3") }توجه: بغیر از این فانکشن‌هایی که کامپوز براتون آماده کرده، شما میتونین یه اکستنشن فانکشن برای دیگر observable ها هم بنویسید. اگه اپ شما از یه کلاس observable سفارشی یا کاستوم استفاده می‌کنه، باید بااستفاده از produceState تبدیل‌اش کنین به State<T>t کامپوز.س: Stateful درمقابل statelessوقتی یه composable از remember استفاده می‌کنه برای ذخیره آبجکت، ما میگیم این composable یه internal state برای خودش ایجاد کرده و وقتی یه composable دارای state داخلی هستش، به‌اصطلاح میگیم این composable، خودش رو دارای state کرده یعنی stateful هستش‌. اگه به HelloContent نگاه کنید می‌بینید که State name رو داخل‌خودش نگه‌داری می‌کنه درنتیجه میگیم HelloContent یه internal state داره و stateful هستش. توجه داشته‌باشید، composable هایی که internal state دارن، کمتر قابل‌استفاده‌ی‌مجدد هستن و سخت‌تر میشه تست‌شون کرد.درمقابل‌اش، زمانی که یه فانکشن کامپوزبل، state ای رو داخل‌خودش نگه‌داری نداره، میگیم این فانکشن statless هست. یه راه ساده برای دست‌یابی به یک فانکشن stateless، استفاده از state hoisting هستش.شمایی که می‌خواین یه composable قابل‌استفاده‌مجدد(reusable) بنویسید، باید به هردویِ اینا توجه کنید. اگه کسی که composable مون رو صدا می‌کنه، نیازی به stateاش نداشته باشه، اون‌وقت از composable stateful استفاده کنید. اما اگه اون صداکننده composableمون نیاز به state composable داره از کاپوزِبِل stateless استفاده کنید.لغت state hoisting: یعنی بلندکردن state و دادنش به یه کسی که اونو نیاز داره مثلا صداکننده‌اش(caller). همون لغت‌شو یادبگیرین.چ: State hoistingچ: State hoisting یه پترنِ تا state رو به caller پاس بدیم تا درنتیجه‌اش به کامپوزبلی stateless دست‌بیابیم‌. کُل پیاده‌سازی‌اش هم اینه‌که بجای اینکه بیایم متغیر برای state مون تعریف کنیم، بیایم بعنوان پارامتر تعریفش کنیم، با این اسم‌ها:یک: value: T --» نمایانگر مقدار فعلی برای نمایشدو: onValueChange: (T) -> Unit --» یه رویداد(event) برای درخواست مقدارهایی که تغییر کردن، T همون مقدار جدیده‌.با این‌حال شما محدود به onValueChange نیستید، اگه event های بیشتری دارین می‌تونین با lambdaها تعریف‌شون کنین، مثلا ExpandingCard دوتا event داره onExpand و onCollapse.اِستیتی که پاس داده شده یا hoiste شده، این ویژگی های مهم رو دارن:یک: Single source of truth --» با حرکت دادن state بجای کپی کردنش، مطمئن میشیم که یک منبع حقیقی برای state مون داریم. این باعث باگ کم‌تر میشه.شاید این اصل رو تو بهتر بنویسم بعدی توضیح بدم.دو: Encapsulated --» فقط کامپوزبل های stateful میتونن، state سون رو تغییر بدن.سه: Shareable --» میتونین اِستیت Hoiste شده مثل name رو با چندین composable به اشتراک بذارینچهار: Interceptable --» صداکننده‌ی(caller) کامپوزبل stateless می‌تونند قبل از تغییر state، وقایع یا event ها رو نادیده بگیرن یا تغییرشون بدهند.پنج: Decoupled --» اگه کامپوزبل‌تون stateless باشه، میتونین اون state رو هرجایی که دل‌تون خواست ازش استفاده کنین یا ذخیره کنین مثلا توی viewmodel.مثال پایین رو ببینید. اومدیم name و onValueChange رو از HelloContent حرکت‌دادیم یا hoist کردیم به caller اش یعنی HelloScreen:@Composable fun HelloScreen() {     var name by rememberSaveable { mutableStateOf("") }     HelloContent(name = name, onNameChange = { name = it }) } @Composable fun HelloContent(name: String, onNameChange: (String) -> Unit) {     Column(modifier = Modifier.padding(16.dp)) {         Text(             text = "Hello, $name",             modifier = Modifier.padding(bottom = 8.dp),             style = MaterialTheme.typography.bodyMedium         )         OutlinedTextField(value = name, onValueChange = onNameChange, label = { Text("Name") })     } }photoبه این الگو که توش state میاد پایین و event ها بالا می‌رن، میگن جریان داده یک‌طرفه یا unidirectional data flow. با این الگو، شما میتونید کامپوزبل هایی که state رو نمایش میدن رو از بخش های که اونا رو تغییر یا ذخیره می‌کنن، جدا کنید.نکات کلیدی: وقتی که state رو hoist می‌کنید، سه قانون هستش که بهتون کمک می‌کنه بفهمید که کجا باید state رو قرار بدید:1- اِستیت باید حداقل به پایین‌ترین والد مشترکی که دارن فرستاده بشه. برای مثال:Parent |- Sibling A |- Child A1 |- Sibling Bفرض sibling A و sibling B، دارن یه state مشترک رو میخونن. حالا اگه ما بیایم برای هردو دوتا یه state جداگانه بسازیم بنظرتون چطوره؟ من میگم یه راه حل بهتری هم هست، اونم الگوی بالایی هستش. اینطوری که ما state رو hoist میکنیم به والدشون. بهتر نیست؟2- اِستیت باید hoist بشه به بالاترین سطحی که ممکنه تغییر پیدا کنه.3- اگه دو state در پاسخ به یک event یا action مشترک تغییر کنند، باید hoist شون کنیم به parent composable مشترک.بازیابی state در composeگفتیم که rememberSaveable شبیه به remember هستش با این تفاوت که rememberSaveable چون از saved instance state استفاده می‌کنه درنتیجه تو هر configuration change، توی هر recomposition، یا اگه activity دوباره صدا زده شد، این داده‌ای که توش قرار دادیم رو حفظ می‌کنه.راه‌های ذخیره stateبالا گفتم که هر مقداری که بشه توی bundle ذخیره کرد رو می‌تونید به rememberSaveable بهش بدید ومشکلی نداره. ولی آبجکت‌هایی که نمیشه ذخیره‌شون کرد چی؟بسته‌بندی یا Parcelizeساده‌ترین راه parcelable کردن‌شونه اینطور که شما باید annotation @Parcelize رو به آبجکت‌تون اضافه کنید. اینجوری:@Parcelize data class City(val name: String, val country: String) : Parcelable @Composable fun CityScreen() {     var selectedCity = rememberSaveable {         mutableStateOf(City("Madrid", "Spain"))     } }استفاده از mapSaverاگه به‌ دلایلی @Parcelize براتون مناسب نبود، می‌تونید از mapSaver استفاده کنید برای تعریف قانون‌تون به‌منظور تبدیل یه آبجکت به مجموعه‌ای از مقادیر که سیستم می‌تونه ذخیره کنه.data class City(val name: String, val country: String) val CitySaver = run {     val nameKey = "Name"     val countryKey = "Country"     mapSaver(         save = { mapOf(nameKey to it.name, countryKey to it.country) },         restore = { City(it[nameKey] as String, it[countryKey] as String) }     ) } @Composable fun CityScreen() {     var selectedCity = rememberSaveable(stateSaver = CitySaver) {         mutableStateOf(City("Madrid", "Spain"))     } }استفاده از ListSaverبرای برای هر فیلد نیاز به تعریف key نباشه، میتونین از listSaver استفاده کنید‌ اینجوری:data class City(val name: String, val country: String) val CitySaver = listSaver<City, Any>(     save = { listOf(it.name, it.country) },     restore = { City(it[0] as String, it[1] as String) } ) @Composable fun CityScreen() {     var selectedCity = rememberSaveable(stateSaver = CitySaver) {         mutableStateOf(City("Madrid", "Spain"))     } }نگه‌دارندگان state در composeبلندکردن یا hoist کردنِ اِستیتی که بالا مثال‌اش رو دیدیم ساده بود و توی خود فانکشن کامپوزبل خودمون مدیریت‌اش کردیم. اما وقتی‌که state‌ها زیاد‌شدن و logic برنامه‌تون پیچیده‌ شد درنتیجه مدیریت‌شون براتون سخته، یه راه‌حل خوب اینه‌که بیاید مسئولیت های منطق و state رو بریزید توی کلاس‌هایی بنام state holders.لغت state holder: این کلاس برای مدیریت منطق و state کامپوزبل ها به کار می‌ره.اینجا پیشنهاد شده دوتا صفحه state hoisting in Compose(اینو فردا کانال میذارم) و State holders and UI State رو بخونید.هنگام تغییر کلیدها، محاسبات را به خاطر بسپاریدخب!! remember اغلب اوقات با نینبن استفاده میشه. اینجوری:var name by remember { mutableStateOf("") }اینجا فانکشن remember مقادیر mutableStateOf رو توی هر recomposition حفظ می‌کنه.بطور کلی فانکشن remember یه lambda رو بعنوان پارامتر میگیره که این لمبدا یه‌سری عملیات/محاسبات انجام میده. وقتی این فانکشن برای اولین بار اجرا میشه، لمبدا رو صدا میزنه و عملیات مربوطه اش رو انجام میده، وقتی تموم شد اونو ذخیره می‌کنه.جدا از ذخیره‌کردن state، شما می‌تونید هر آبجکت یا نتیجه‌ای در composition که انجام‌اش زمانبر، پُرمحاسبه یا expensive هستش برای initialize کردن یا محاسبه کردن به remember بدید. با انجام این کار، دیگه اون عملیات expensive هِی توی هر recomposition تکرار نمیشه. برای مثال ساختن ShaderBrush یه عمل expensive هستش:val brush = remember {     ShaderBrush(         BitmapShader(             ImageBitmap.imageResource(res, avatarRes).asAndroidBitmap(),             Shader.TileMode.REPEAT,             Shader.TileMode.REPEAT         )     ) }همونطور که گفتم لمبدا محاسبات رو انجام میده و نتیجه رو remember ذخیره‌ می‌کنه تا زمانی که composable ای که از remember استفاده می‌کنه از ui حذف بشه. با این‌حال، ممکنه بخوایم این مقدار ذخیره شده دوباره ارزیابی بشه و اون lambda دوباره اجرا بشه. اینجاست که key ها وارد می‌شن. remember بجز این lambda یه پارامتر دیگه هم می‌تونه بگیره بنام key یا keys. اگه مقدار key تغییر کنه بین recomposition ها:1- اول remember نگاه می‌کنه، می‌بینیه که key تغییر کرده.2- بعد remember مقدار ذخیره شده رو نامعتبر(invalid) فرض میکنه3- درنتیجه وقتی که بعدا recompose صورت بگیره، دیگه اون مقدار رو. حفظ نمی‌کنه بلکه lambda دوباره محاسبات رو انجام میده و مقدار جدید رو remember ذخیره می‌کنه.کد پایین رو نگاه کنید. یه ShaderBrush ساخته میشه برای بکگراند box مون. remember یه instance ازش ذخیره می‌کنه. remember این avatarRes رو بعنوان key1 پارامتر میگیره که تصویر پس زمینه انتخاب شده است. اگه avatarRes تغییر کنه، brush با image جدید ریکامپوز میشه و دوباره بکگراند به جعبه اعمال میشه.@Composable private fun BackgroundBanner(     @DrawableRes avatarRes: Int,     modifier: Modifier = Modifier,     res: Resources = LocalContext.current.resources ) {     val brush = remember(key1 = avatarRes) {         ShaderBrush(             BitmapShader(                 ImageBitmap.imageResource(res, avatarRes).asAndroidBitmap(),                 Shader.TileMode.REPEAT,                 Shader.TileMode.REPEAT             )         )     }     Box(         modifier = modifier.background(brush)     ) {         /* ... */     } }تیکه کد بعدی درس فردامونه.ذخیره کردن state با key ها فراتر از recompositionخب. rememberSaveable یه پوشنده() ای روی remember هست. که داده رو توی یه bundle ذخیره می‌کنه. این یه پارامتر input میگیره مثل همون key توی remember عمل می‌کنه. یعنی هروقت input تغییر کنه توی recomposition بعدی lambda هم دوباره اجرا میشه.var userTypedQuery by rememberSaveable(typedQuery, stateSaver = TextFieldValue.Saver) {     mutableStateOf(         TextFieldValue(text = typedQuery, selection = TextRange(typedQuery.length))     ) }خب اینم از این. امیدوارم یادگرفته باشین، چون تو قسمت های بعدی این مفاهیم پایه ای رو نیاز داریم. اگه جایی رو نفهمیدید تو کامنت‌ها به‌اشتراک بذارین.لطفا پست‌ها رو به اشتراک بذارین تا افراد بیشتری بتونن از اینا استفاده کنن و درنتیجه‌اش الکی سرمایه‌شون رو سَر خریدن دوره تلف نکنن.کانال:Android Corner / ایمیل: cornerdroid@gmail.comAndroid CornerAndroid CornerMon, 04 Sep 2023 20:10:25 +0330https://virgool.ir/@cornerdroid/اخبار-هفته-cexoogbhthwwاخبار هفته، قسمت سوم:اَندروید 14 بتا 5چند هفته دیگه اندروید 14 بطور رسمی معرفی میشه، ولی الان beta 5 اش در دسترسه روی Pixel Tablet، Pixel Fold و بقیه خانواده pixel ها و همچنین Android emulator ها. پس برید اپلیکیشن تون رو تست کنید روی اندروید 14 بتا 5 تا از عملکرد برنامه تون مطمئن بشید، تا قبل از اینکه نسخه پایدارِش بیاد.توی Beta 5 چخبره؟شما میتونید با استفاده از این نسخه Android 14، تمام رفتار/ویژگی های android 14 رسمی رو میبینید و خیلی فرصت خوبیه تا اپ تون رو با اندروید 14 سازگار کنید و حتی شما میتونید اپ هاتون برای اندروید 14 منتشر کنید بااا target کردن SDK Version 34. یه سری تغییرات هم داشته:1- دسترسی محدود به عکس ها و ویدیوها: توی اندروید 13 اگه شما از READ_MEDIA_IMAGES و READ_MEDIA_VIDEO برای دسترسی به عکس ها و ویدیوها استفاده میکردید، کاربر با موافقت کردن با این دسترسی ها، شما به کل عکس ها و ویدیوها دسترسی داشتید، ولی تو Android 14، کاربر میتونه دسترس محدودی به عکس ها و ویدیوهاش بده. اگه شما از photo picker استفاده میکردید تا الان، نمیخواد خودتون رو با این ویژگی وقف بدید اما شماهایی که از این استفاده نمی کردید باید بگم که از الان باید READ_MEDIA_VISUAL_USER_SELECTED استفاده کنید.2- محدودیت در استفاده از full-screen Intent notifications: اگه شما از این نوع نوتیفیکیش استفاده میکردید تا قبل از اندروید 14، الان دیگه با اومدن اندروید 14، فقط برنامه‌هایی که قابلیت تماس و زنگ هشدار دارن میتونن از این نوتیفیکیشن استفاده کنن. بعلاوه، Google play store از این به بعد هر برنامه ای که معیار های برنامه زنگ هشدار یا تماس رو ندارن و از پرمیشن USE_FULL_SCREEN_INTENT استفاده میکنن رو لغو میکنه.3- برنامه ریزی هشدارها(Schedule exact alarms) نیاز به مجوز صریح داره: اگه target SDK تون رو اندروید 13 به بالا هستش، از به بعد باید از کاربر درخواست کنین تا مجوزِSCHEDULE_EXACT_ALARMرو برای تنظیم هشدارها رو بهتون بده.4- بزرگ نمایی متن های کوچک: یه ویژگی که اندروید 14 داره اینه که اگه یه فونتی خیلی کوچک بود، کاربر میتونه اون رو تا 200% بزرگ کنه، این قابلیت مخصوصا برای کاربرهای کم‌بینا میتونه جذاب باشه.اینجا میتونین کل تغییرات رو ببینید و اپ تون رو با اندروید 14 سازگار کنید.پلی استور برای دستگاه هایِ بزرگ صفحه(large screen)گوگل میگه که ما توی Google IO سال قبل یه سری تغییرات play store رو به اشتراک گذاشتیم برای large screen ها، از اون موقع به بعد افراد بیشتری جذب large screen ها شدن. و حالااا گوگل اومده یه سری چهارتا ویژگی جدید به play store اضافه کرده تاا کاربرایی که از large screen ها استفاده میکنن راحت‌تر اپلیکیشن های باکیفیت(مخصوص large screen ها) پیدا کنن.1. صفحه لیست جزئیات تازهلیست جزئیات یه سری تغییرات داشته: برای بازی ها، ویدیویی بالای صفحه جزئیات قرار میگیره تا کاربرا یه حسی از gameplay بازی داشته باشن. همچنین صفحه جزئیات اپ/بازی هارو چندسِتونه کردن که باعث میشه محتوای بیشتری از اپ تون قرار بگیره.2. رتبه بندی و بهبود کیفیتگوگل برای اینکه بتونه برنامه هایی که از دستگاه های با صفحات بزرگ پشتیبانی میکنن رو زیاد کنه، اومده چندتا تغییر توی نحوه رتبه بندی ایجاد کرده؛ اینطوریه که اگه برنامه شما ریسپانسیوه و تو large screen ها محتوا خوب نمایش داده میشه، وقتی کاربر رفت جستجو کرد، برنامه شما توی جایگاه بالاتری قرار میگیره. این به کاربرای large screen ها کمک میکنه تا برنامه/بازی هایی که با دستگاه شون سازگاری داره رو پیدا کنن.همچنین میگه سال قبل یه سری هشدارهایی برای لیست جزئیات قرار قرار داده بودیم تا کاربر متوجه بشه که این برنامه از نظر کیفیت و سازگاری مناسب دستگاهش نیست. و یه معیاری رو برای تعیین کیفیت برنامه درنظر میگرن که شامل: پشتیبانی از large screen ها و crash برنامه تون برای کاربرا از یه میزانی بالاتر نره(8 درصد). اگه به اینا توجه نکنید، پلی استور هم به شما توجه نمیکنه(توی جایگاه سرچ و ...). پس حواستون باشه!!این تغییرات از اواخر ماه اوت شروع میشه(الان سپتامبر، احتمالا لحاظ کنن دیگه). میتونین با استفاده از Android Vitals در Play Console یا API Reporting برای نظارت و بهبود این معیارها اقدام کنید.تغییر آخر هم اینکه پلی استور asset های برنامه تون رو توی صفحه home نمایش میده تا کاربرا درک بهتری داشته باشن از آنچه که تو اپ شما تجربه میکنن.3. ناوبری ساده فروشگاهااین چیز خاصی نیست برای ما(دولوپرها)، یه سری تغییرات دادن برای navigate کردن ساده تر و تجربه بهتر مثلا تو large screen ها اومدن یه navigation rail اضافه کردن یا تو صفحه سرچ اومدن دو صفحه رو split کردن.خبرهای کامپوزچندتا API جدید برای compose معرفی شده که کارِتون رو خیلی راحتتر میکنن.یک: 1.1 Jetpack WindowManager پایدار شدجت پک WindowsManager یه کتابخونه مهم برای بهینه سازی برنامه تون برای پشتیبانی از فرم های دستگاه های مختلف هستش.* میتونین با استفاده از این کتابخونه- با کلاس/اینترفیس هایی که داره- برای فرم مختلف دستگاه ها(مثل تاشوها یا همون foldable) اپی سازگار بنویسین.* دوتا activity رو کنار هم نشون بدید. اینو بزارید یکم توضیح بدم.1- اگه برنامه‌تون چندین activity داره، میتونین از activity embedding استفاده کنید، تا اپ تون توی فرم های تاشو خوب به نمایش در بیاد.2- و اگه دارین از معماری single-activity استفاده میکنین، میتونین از یه API بنام SlidingPaneLayout استفاده کنید تا این قابلیت رو به برنامه‌تون اضافه کنید.کامپوز برای کتابخانه های Wear OS و Tiles 1.2 پایدار شدندالان میتونید کامپوز 1.2 رو توی Wear OS و Wear Tiles استفاده کنید، این کار رو خیلی ساده تر میکنه تا شما اپی زیبا و جذاب رو برای ساعت هوشمند بنویسید. جزئیات رو میتونین تو این مقاله ببینید.معرفی Jetpack Emoji Pickerیه راه جدیده برای اضافه کردن ایموجی به برنامه‌تون. برای جزئیات بیشتر، این مقاله چک کنید.این مقالات رو هم بخونین ضرری نداره:* این مقاله* این مقاله* و این مقالهخب اینم از اخبار هفته، اگه براتون مفید بود، لطفا با دوستانتون به اشتراک بذارین چون حمایتتون یه مثل همیشه باعث خوشحالیه.کانال: Android Corner / ایمیل: cornerdroid@gmail.comAndroid CornerAndroid CornerSat, 02 Sep 2023 13:26:13 +0330https://virgool.ir/@cornerdroid/آموزش-composeقسمت-دوم-xfrnses9qdzuقسمت دوم: Lifecycle of composableتو این پست درباره چرخه عمر فانکشن های composable حرف میزنیم و میبینم که چطور compose تصمیم میگیره تا یه composable رو recompose کنه یا نه.چرخه عمرگفتیم که رابط کاربری مون رو با مجموعه ای از composable ها تعریف میکنیم. وقتی که این composable ها برای اولین بار کشیده میشن رو صفحه، ما میگیم composition اتفاق افتاده. و بعد از composition، اگه state ای تغییر کرد، باید اون composable هایی که state(آرگمان) شون تغییر کرده دوباره اجرا بشن با داده جدید، این دوباره اجرا شدنه بعد از composition رو بهش میگیم recomposition. پس به render شدن اولیه میگیم composition و به update های بعدش میگیم recomposition. همینطور که گفتم، ما دیگه getter و setter نداریم تا internal state ویجت هامون رو تغییر بدیم، بجاش هر وقت که ورودی فانکشن های composable تغییر کنن، کامپوز متوجه میشه و recomposition انجام میشه بصورت خودکار.ببصورت کلی اینجوریه:یه فانکشن composable وارد composition میشه و وقتی composition تموم شد، با تغییر پارامتر میتونه هر چندبار recompose بشه.نکته: قاعدتا دفعه اول فقط composition اتفاق میوفته دیگه و recomposition هنوز اتفاق نیافتاده.اگه یه composable چندین بار صدا زده بشه، چندین instance هم ازش تو composition ساخته میشه و هر فراخوانی ای، چرخه عمر خودش رو داره. مثلا:@Composable fun MyComposable() {     Column {         Text("Hello")         Text("World")     } }الان میبینید که فانکشن Text دوبار با پارامتر های مختلف صدا زده شده، پس دو instance ازش ساخته میشه(قرار میگیره). تو عکس هم رنگ های متفاوت نمایانگر instance جداگانه هست.آناتومی یک composable تو compositionهر instance ی از یه composable، با call site اش مشخص میشه. call site جاییکه که یه فانکشن composable صدا زده میشه و هر وقت میگیم که composable چندین instance داره، یعنی توی چندین call site صدا زده شده.کامپوز دقیقا تشخیص میده که کدوم composable فراخوانی شده تو composition و اگه فانکنشن فراخوانی شده باشه تو composition و پارامترش هم تغییری نکرده باشه، دیگه تو recomposition، کامپوز اونو نادیده میگیره(skip میکنه).به مثال زیر نگاه کنید:@Composable fun LoginScreen(showError: Boolean) {     if (showError) {         LoginError()     }     LoginInput() // This call site affects where LoginInput is placed in Composition } @Composable fun LoginInput() { /* ... */ } @Composable fun LoginError() { /* ... */ }توی کد بالا، LoginScreen با یک شرط LoginError رو صدا میزنه و همیشه LoginInput هم فراخوانی میشه. هرکدوم از این فانکشن ها call site مربوط به خودشون رو دارن که با استفاده از این compiler کامپوز میتونه اینا رو از هم تشخیص بده.میبینید که با تغییر state(تغییر مقدار showError)، recomposition اتفاق افتاده و LoginError به درخت اضافه شده. نکته مهم اینه که چون state فانکشنِ LoginInput تغییری نکرده، پس compose میاد اونو نادیده میگیره(skip) و همون instance قبلی خودش رو قرار میده که این عمل باعث افزایش performance میشه.اضافه کردن اطلاعات بیشتر برای داشتن recomposition هوشمندانه تراگه یه composable چندین بار فراخوانی کنیم، چندین بار هم به composition اضافه میشه. اما وقتی که چندین بار یه composable رو از یه call site یکسان فراخوانی کنیم(مثل توی یه loop)، compiler کامپوز نمیتونه اینا رو از هم تشخیص بده، بنابراین کامپوز از یه مکانیسم دیگه برای تشخیص اینا استفاده میکنه بنام ترتیب اجرایی یا execution order که تو بعضی موارد مشکل ساز میشه.به مثال زیر نگاه کنید:@Composable fun MoviesScreen(movies: List<Movie>) {     Column {         for (movie in movies) {             // MovieOverview composables are placed in Composition given its             // index position in the for loop             MovieOverview(movie)         }     } }تو این مثال، چون ما توی یه loop قرار داریم درنتیجه call site توش همه یکسانن پس compose از execution order استفاده میکنه. حالا مثلا اگه یه movie جدید اضافه بشه به پایین لیست، کامپوز میتونه از مابقیِ movie ها دوباره استفاده کنه و دیگه instance جدید برای هرکدوم از اینا نمیسازه:اما اگه لیست تغییر کنه مثلا ترتیب آیتم ها عوض بشه، یا بعضی هاشون حذف بشن یا اضافه بشن به بالا یا وسط لیست، recomposition باید اتفاق بیفته، و چون مکانیسم execution order، ترتیب براش مهمه و توی همه این موارد(حذف، جابجایی) ترتیب آیتم ها عوض شده درنتیجه از هرکدوم یک instance جدید میسازد تو recomposition و جایی مهم میشه که شما یه side-effect داشته باشین مثلا برین یه تصویر رو از سمت از سرور دریافت کنید و درحالی که دارید این کار رو انجام میدید، recomposition اتفاق بیفته و هنوز اون load تصویر انجام نشده باشه، بارگذاری تصویر هم باید cancel بشه و دوباره از سَر گرفته بشه با این recomposition.@Composable fun MovieOverview(movie: Movie) {     Column {         // Side effect explained later in the docs. If MovieOverview         // recomposes, while fetching the image is in progress,         // it is cancelled and restarted.         val image = loadNetworkImage(movie.url)         MovieHeader(image)         /* ... */     } }فرایند composition صفحه MoviesScreen رو نشون میده که برای هر کدوم از MovieOverview یه instance جدید ایجاد کرده(مثلا بخاطر عوض شدن ترتیب). Side effect هم دوباره restart میشه.ولی ما اینو نمیخوایم که برای هرکدوم یه instance جدید بسازه. ما میخوایم مثلا وقتی ترتیب آیتم ها عوض شد، instance هاشون هم تو درخت composition جاشون عوض بشه نه که instance جدید ساخته بشه. برای همین، compose یه راهی رو فراهم میکنه که به runtime میگه یه سری مقادیر رو از قسمت معینی از درخت composition رو با استفاده از کلید(key composable) شناسایی کن.این key میاد تو یه بلاک کد یه سری مقادیر منحصر به فرد(unique) رو میگیره که هویت هر instance(آیتم) رو مشخص میکنه و وقتی recomposition اتفاق افتاد بدلیل تغییر ترتیب لیست، دیگه نمیاد با استفاده از مکانیسم نین برای هرکدوم یه instance جدید بسازه، بللکه میاد نگاه میکنه میبینه که key ای که تعریف کردیم توش یه سری مشخصات از اینکه قبلا اینا instance هاشون موجود بوده تو composition، فقط ترتیب شون عوض شده، پس نمیاد instance جدید بسازه فقط ترتیب instance هاشون رو تو درخت composition تغییر میده. (امیدوارم فهمیده باشین!) اینجوری:@Composable fun MoviesScreenWithKey(movies: List<Movie>) {     Column {         for (movie in movies) {             key(movie.id) { // Unique ID for this movie                 MovieOverview(movie)             }         }     } }میبینید که با مقادیر یونیت این key، کامپوز instance های قبلی رو تشخیص داده و دوباره ازشون استفاده کرده و side effect هم دیگه از سَر گرفته نمیشه و به اجرا شدنش ادامه میده.ببعضی از composable ها، توی خودشون key رو دارن مثل LazyColumn برای آیتم هاش:@Composable fun MoviesScreenLazy(movies: List<Movie>) {     LazyColumn {         items(movies, key = { movie -> movie.id }) { movie ->             MovieOverview(movie)         }     } }اگه ورودی‌ها تغییر نکرده، نادیده بگیر(skipping)اگه یه composable توی composition باشه و ورودی اش هم تغییر نکرده باشه و پایدار باشه(stable) میتونه skip بشه توی recomposition.لغت skip: یعنی compose اونو نادیده بگیره و recompose نشه.لغت stable: یعنی ورودی ها پایداره یعنی تغییر نکرده، درنتیجه recompose نمیشه.یک نوع stable با این قرارداد ها مطابقت داره:1- نتیجه متد equals همیشه یک چیزه برای دو instance، پس compose اینو stable درنظر میگیره.2- همه انواع public property ها stable اند و قاعدتا اگه تغییری کنن composition متوجه اش میشه.کامپایلر کامپوز اینا رو بدون گذاشتن @Stable، پایدار یا stable درنظر میگیره:1- همه primitive تایپ ها: Boolean, Int, Long, Float, Char و غیره.2- رشته ها(Strings)3- لامبدا ها4- هرچی که تو MutableState نگهداری بشه stable هستش با اینکه mutable.اگه یه composable همه ورودی هاش stable باشن و البته تغییری هم نکرده باشن، compose اونو skip میکنه.اگه یه چیزی stable نیست، ولی میخواین compose باهاش مثل stable ها برخورد کنه از annotation @Stable استفاده کنید:// Marking the type as stable to favor skipping and smart recompositions. @Stable interface UiState<T : Result<T>> {     val value: T?     val exception: Throwable?     val hasError: Boolean         get() = exception != null }خب اینم از این، امیدوارم اینا رو یادگرفته باشین. اشکالات، ابهامات و نظراتتون رو تو کامنت ها به اشتراک بذارین.کانال: Android Corner / ایمیل: cornerdroid@gmail.comAndroid CornerAndroid CornerFri, 01 Sep 2023 07:34:23 +0330https://virgool.ir/@cornerdroid/آموزش-composeقسمت-اول-tkhlzxmt5wb1قسمت اول:نکته 1: سعی کنید لغت های تخصصی رو که قرار دادم بلد باشید.نکته 2: هرجایی که جمله نامفهوم بود یا کلمه ای اشتباه املایی داشت(پیش میاد!) حتما با من درمیون بذارین تا اصلاحش کنم.کامپوز یه kit توسعه رابط کاربریِ declarative هستش که پیاده سازی رابط کاربری و نگهداری از اون رو برای شما راحت میکنه.پارادایم اعلانی(declarative)توی سیستم UI قبلی اندروید شما یه درختی از view داشتین که وقتی وضعیت(state) برنامه تغییر میکرد بدلیل مثلا تعامل کاربر، این سلسله مراتب UI هم باید update بشه در پاسخ به تعامل کاربر، پروسه update اینجوری بود که میرفت کل درخت UI رو میگشت با استفاده از متد findViewById و node ها رو با صدا زدن اینا عوض میکرد.button.setText(String)container.addChild(View)img.setImageBitmap(Bitmap)این متدها(همونایی که bold کردم) میان وضعیت داخلی(internal state) ویجت رو تغییر میدن و خییلی راحته که شما یادتون بره مثلا یک ویجت setText کنین و متن رو آپدیت کنین یا اصلا یه node رو تنظیم میکنین روی یک ویجت و اون ویجت هم کلا از درخت UI قبلا حذف شده بوده. بطور کلی پیچیدگیِ نگهداریِ نرمافزار وقتی رشد میکنه که تعداد زیادی view نیاز به آپدیت داشته باشن.لغت node: زیرمجموعه یه view که میتونه تغییر کنه، همون text و image و color و ... منظورشه.این پارادایم تا حد زیادی طراحی رابط کاربری رو ساده تر میکنه. اینطوری کار میکنه که بجای اینکه کل سلسله مراتب UI بگرده که کدوم view آپدیت شده، میاد کل صفحه رو از اول render میکنه و فقط اون تغییرات موردنیاز رو اعمال میکنه. این رویکرد نمیاد مثل UI سیستم سنتی بیاد getter/setter تعریف کنه، بلکه با یه سری فانکشن بنام composable میاد UI رو تعریف میکنه و تغییرات یا داده ها رو بعنوان پارامتر به اینا پاس میدیم.فانکشن composableنکته: ما قبلا به عناصر رابط کاربری مون میگفتیم View، ولی الان به هرچی که view میگفتیم، میگیم Widget(ویجت) و این ویجت ها رو هم با composable فانکشن ها تعریف میکنیم.نکته: قواعد نامگذاری اش هم بصورت PascalCase هستش.گفتیم که رابط کاربری مون رو با مجموعه ای از فانکشن های composable تعریف میکنه. اینا data رو بعنوان پارامتر ورودی میگیرن و عناصر رابط کاربری رو از تغییرات باخبر میکنن. یه نگاه به فانکشن Greeting بندازید:میبینید که این فانکشن یه string میگیره و یه ویجت text ساتِع(emit) میکنه.1- همه composable فانکشن ها باید annotation @composable رو داشته باشن؛ این فانکشن به compiler کامپوز میگه که این فانکشن برای دادن داده ها به رابط کاربریه.2- این فانکشن یه متن رو نشون میده تو UI با استفاده از composable فانکشنِ Text(). فانکشن های composable سلسله مراتب UI رو با استفاده از call کردن composable فانکشن های دیگه میسازند؛ مثل اینجا که ما یه composable فانکشن ساختیم و توش از یه composable فانکش دیگه استفاده کردیم.3- این فانکشن ها چیزی رو return نمی کنن بلکه عنصر های UI رو ساتع یا emit میکنند.4- این فانکشن ها سریع، idempotent و side-effect free(البته اگه شما side-effect ای درست نکنین، تو پست های بعضی دربارش حرف میزنیم) هستن.* این فانکشن ها اگه صد بار هم با همون آرگومنت صدا زده بشن باید یک رفتار رو داشته باشن مگر اینکه از طریق global variable هایی از خارج فانکشن(side-effect) رفتار تابع رو تغییر بدنن.مهاجرت از رویکرد Imperative به declarativeتوی سیستم UI سنتی، هر ویجتی یه internal state خودش رو داره و با getter و setter میتونیم اون state اش رو عوض کنیم(اصطلاحا بهش میگن stateful)ولی توی رویکرد declarative کامپوز ویجت ها stateless(استیتی ندارن) اند و هیچ getter و setter ندارن و وقتی هم میخواین state شون رو عوض کنین بجای set کردن مثلا text میاین اون داده رو تو آرگمانِ فانکشنِ کامپوز قرار میدین.میبینید که (مثلا) از viewmodel یه سری داده ها اومده و داده ها از composable های بالاتر میرسه به پایینتر، اونایی که داده لازم دارن(البته تو آرگومان هاشون) .وقتی که state تغییر کرد، فانکشن composable دوباره صدا زده میشه با داده جدید که سبب میشه عناصر رابط کاربری دوباره کشیده بشن رو صفحه، به این پروسه میگن recomposition.محتوای پویا(Dynamic)چون فانکشن های composable با کاتلین نوشته شدند، شما میتونین از هر ویژگی ای که کاتلین داره تو پیاده سازی UI و فانکشن های composable تون استفاده کنید. مثلا میتونین از حلقه ها، عبارت های شرطی، عملگرها و .. استفاده کنید:@Composable fun Greeting(names: List<String>) { for (name in names) { Text("Hello $name") } }ریکامپوزیش(Recomposition)فریمورک کامپوز بصورت هوشمندانه فقط اون اجزایی رو recompose میکنه که آرگومانشون تغییر کرده.برای مثال این فانکشن رو با یه button درنظر بگیرین:@Composable fun ClickCounter(clicks: Int, : () -> Unit) { Button( = ) { Text("I've been clicked $clicks times") } }هر بار که روی این دکمه کلیک میشه، فرض کنین مقدار clicks هم آپدیت بشه، اون وقت compose میاد این lambda با فانکشن Text که داره دوباره با داده جدید صدا میزنه که گفتیم بهش میگن recomposition و فانکشن های دیگه که به مقدار clicks وابسته نیستن رو recompose نمیکنه یعنی اون فانکشن هارو نادیده میگیره(skip میکنه).یه نکته ای رو هم که باید درنظر داشته باشین درباره فانکشن های کامپوز اینه که این فانکشن ها باید side-effect نداشته باشن(تو پست های بعدی درباره این مفصل صحبت میکنیم). Side-effect تعاریف مختلفی داره از افراد مختلف، ولی تو این مورد: به هر تغییراتی که state بیرونِ فانکشن (composable) رو تغییر بِده، میگیم side effect. اگه side effect داشته باشین، ممکنه توی پروسه recomposition، اونی که میخواین skip بشه، نشه(پست های بعدی).فانکشن های composable باید تو هر فریم دوباره اجرا باشن، پس باید عملکردشون سریع باشه تا وقتی که مثلا یه انیمیشن اجرا میشه تو هر فریم لَگ نزنه و سریع اونو render کنه، پس اگه کارهایی دارین که ممکنه زمانبر باشه برید تو background انجامش بدید.فانکشن های composable می تونن به هر ترتیبی اجرا بشناگه به کد زیر نگاهی بندازین، احتمالا فکر کنید این فانکشن ها به ترتیب اجرا میشن، ولی لزوما اینطور نیست و کامپوز ممکنه اینا رو تو هر ترتیبی اجرا کنه. Compose تشخیص میده کدوم فانکشن اولویت بالاتری داره و اونو اول اجرا میکنه. مثلا یه checkbox ای که هنوز visible نیست تو صفحه رو میندازه تو اولویت آخر قاعدتا که خیلی performance رو بهبود میده.@Composable fun ButtonRow() { MyFancyNavigation { StartScreen() MiddleScreen() EndScreen() } }یه مثال دیگه: فرض کنید compose اول StartScreen اجرا کرد اما وسط اجرا کردنش یهو میبینه که این فانکشن وابسته است(side effect) به MiddleScreen، اون وقت compose قاعدتا میره و MiddleScreen رو اجرا میکنه.فانکشن های composable می تونن بصورت موازی اجرا بشنکامپوز میتونه recomposition رو با اجرا کردن composable ها بصورت موازی بهینه کنه. تو این مورد، compose میاد از core های CPU دستگاه کاربر استفاده میکنه و composable ها رو بصورت موزای با استخری از background thread اجرا میکنه.و برای صدمین بار نباید تو composable فانکشن ها side effect داشته باشیم چون چیزایی که مربوط به UI هستش رو حتما باید توی UI thread اجرا بشه اگه تو background thread اجرا بشه برنامتون crash میکنه.تا اونجایی که ممکنه، recomposition پَرِش میکنهکامپوز فقط اون بخش هایی رو recompose میکنه که state شون(آرگومان هاشون) عوض شده باشه. مثلا اگه یه state یه button تغییر کنه فقط اون recompose میشه، دیگه کاری به قبل و بعدش نداره. برای مثال:/** * Display a list of names the user can click with a header */ @Composable fun NamePicker( header: String, names: List<String>, onNameClicked: (String) -> Unit ) { Column { // this will recompose when [header] changes, but not when [names] changes Text(header, style = MaterialTheme.typography.bodyLarge) Divider() // LazyColumn is the Compose version of a RecyclerView. // The lambda passed to items() is similar to a RecyclerView.ViewHolder. LazyColumn { items(names) { name -> // When an item's [name] updates, the adapter for that item // will recompose. This will not recompose when [header] changes NamePickerItem(name, onNameClicked) } } } } /** * Display a single name the user can click. */ @Composable private fun NamePickerItem(name: String, onClicked: (String) -> Unit) { Text(name, Modifier.clickable( = { onClicked(name) })) }هرکدوم از اینا ممکنه skip بشه توسط کامپوز اگه ورودی شون تغییر نکنه.ریکامپوزیشن خوش بینانه استوقتی پارامتر یه composable تغییر کرد، compose اونو recomose میکنه. این خوش بینانه بودنش یعنی compose انتظار داره قبل از اینکه پارامتر دیگه ای تغییر کنه، recomposition رو انجام بده؛ اگه قبل از تموم شدن recomposition یه پارامتر از یه composable تغییر کنه، اونوقت compose میاد recomposition رو متوقف میکنه و recomposition رو دوباره شروع میکنه با پارامتر جدیده.اینجا هم اگه side effect ای داشته باشین، مشکل براتون پیش میاد. مثلا، فرض کنین که تو پروسه recomposition هستیم و یه composable یه side effect داره، حالا اگه compose بیاد recomposition رو متوقف کنه اون side effect هنوز داره اجرا میشه و فاجعه رخ میده.فانکشن های composable می تونن بصورت مکرر اجرا بشنگفتم که مثلا یه فانکشنی برای اجرای هر فریم از یه انیمیشن دارید، به تعداد فریم ها، همونقدر هم فانکنش composable صدا زده میشه و اگه وظیفه سنگینی مثل خوندن از storage رو به این فانکشن واگذار کنین، احتمالا به خطای not responding بَر بخورید.این قسمت اول بود. امیدوارم خوشتون اومده باشه. اشکالات، ابهامات و نظراتتون رو تو کامنت ها به اشتراک بذارین.کانال: Android Corner ایمیل: cornerdroid@gmail.comAndroid CornerAndroid CornerWed, 30 Aug 2023 18:56:36 +0330https://virgool.ir/@cornerdroid/آموزش-kotlin-multiplatformقسمت-سوم-a6q06pihggcmفصل دو، قسمت اول:ما قراره تو این فصل رابط کاربری اپ اندرویدی مون رو با jetpack compose توسعه بدیم. کامپوز declarative هستش، کد خیلی کمتری نسبت به UI سیستم قبلی اندروید میخواد برای پیاده سازی رابط کاربری، منعطفه و ...نکته: این کتاب بصورت سطحی درباره jetpack compose حرف زده و چون ما یه بخش مجزا برای compose داریم، خیلی روی اینا مانُور نمیدیم و سریع میریم سراغ پیاده سازی UI.اگه پروژه تون رو آماده کردید، برید MainActivity رو باز کنید، بجای setContentView که توش layout xml مون رو inflate میکردیم، setContent قرار گرفته؛ setContent یه extension فانکشن روی کلاس ComponentActivity. این متد قاعدتا composable هستش چون UI مون رو توش قرار میدیم.اپ Time finderخب ما قراره یه اپی رو توسعه بدیم که کاربرا بتونن چندین منطقه زمانی(time zone) رو انتخاب کنن و یه سری زمان های مناسبی رو برای مثلا جلسه پیدا کنن. این صفحه اول اپ مونه:میبینین که تو هر آیتم ما منطقه زمانی محلی، زمان و تاریخ رو داریم و هر کدوم از کاربر ها location خاصی دارن یکی لندنه یکی دیگه لس آنجلس و.. کاربر سعی میکنه تا ساعت مناسبی برای جلسه پیدا کنه تا همه با اون زمان جور بشن.وقتی کاربر بخواد یه منطقه زمانی دیگه رو اضافه کنه، باید رو floating action button کلیک کنه و یه dialog براش ظاهر میشه برای انتخاب هر منطقه زمانی ای که میخواد:صفحه بعدی صفحه جستجو هستش که کاربر میتونه یه ساعت شروع و پایان بذاره برای جلسشون و...:وقت روی دکمه search کلیک کرد یه همچین چیزی میاد:تِم برنامهشما قبلا برای تعریف theme برنامه تون از فایل نین و نینی استفاده میکردید، ولی توی compose میتونین از کلاس MaterialTheme استفاده کنید برای رنگ، فونت و شکل ها.خب، توی ماژول androidApp کنار MainActivity یه پکیج بنام theme بسازید و توش هم یه فایلی بنام Colors.kt درست کنید و اینا رو توش قرار بدید:import androidx.compose.ui.graphics.Color val primaryColor = Color(0xFF1e88e5) val primaryLightColor = Color(0xFF6ab7ff) val primaryDarkColor = Color(0xFF005cb2) val secondaryColor = Color(0xFF26a69a) val secondaryLightColor = Color(0xFF64d8cb) val secondaryDarkColor = Color(0xFF00766c) val primaryTextColor = Color(0xFF000000) val secondaryTextColor = Color(0xFF000000)اینا رنگ های اولیه(primary) و ثانویه(secondary) برنامه تون هستش.خب یه فایل دیگه توی همین پکیج بنام Typography.kt بسازید و اینا رو توش قرار بدید:import androidx.compose.material.Typography import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.TextStyle import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.sp // 1 val typography = Typography( // 2 h1 = TextStyle( // 3 fontFamily = FontFamily.SansSerif, // 4 fontSize = 24. sp, // 5 fontWeight = FontWeight.Bold, // 6 color = Color.White ), h2 = TextStyle( fontFamily = FontFamily.SansSerif, fontSize = 20. sp, color = Color.White ), h3 = TextStyle( fontFamily = FontFamily.SansSerif, fontSize = 12. sp, color = Color.White ), h4 = TextStyle( fontFamily = FontFamily.SansSerif, fontSize = 10. sp, color = Color.White ) )1- متغیر typography یه instance هستش از کلاس تایپوگرافی کامپوز.2- این h1 از پیش تعریف شده رو override میکنیم3- فونت family رو مشخص میکنیم که اینجا فونت مون از خانواده SansSerif هستش.4- اندازه فونت5- وزن(weight) فونت6- اینم رنگ فونتهشما میتونین ویژگی های دیگه مثل فاصله بین حروف(letter spacing) و ... رو برای TextStyle تنظیم کنین.خب یه فایل دیگه تو این پکیج ایجاد کنید به اسن AppTheme.kt و اینا رو اضافه کنید: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 @Composable fun AppTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable() -> Unit) { // TODO: Add Colors }این فانکشن یه پارامتر اختیاری داره برای تنظیم کردن حالت dark و چک میکنه آیا سیستم تو حالت dark هست یا خیر. پارامتر دومی هم یه composable فانکشن برای نشون دادن تم. خب بیاید رنگ هارو برای تم روشن و تیره تنظیم کنیم:val colors = if (darkTheme) { darkColors() .copy( primary = primaryDarkColor, primaryVariant = primaryLightColor, secondary = secondaryDarkColor, secondaryVariant = secondaryLightColor, onPrimary = Color.White, ) } else { lightColors() .copy( primary = primaryColor, primaryVariant = primaryLightColor, secondary = secondaryColor, secondaryVariant = secondaryLightColor, onPrimary = Color.Black, ) } // TODO: Add Themeفانکشن های lightColors و darkColors یه کلاس Colors برگشت میده. این کد ها رو با// TODO: Add Themeعوض کنید:MaterialTheme( colors = colors, typography = typography, content = content )این MaterialTheme رو اعمال میکنه به پروژه با رنگ ها و تایپوگرافی ای که خودمون تنظیم کرده بودیمتایپ هاچندتا تایپ لازم داریم که بعدا توی پروژه ازش استفاده میکنیم. برید توی پوشه UI و یه فایل به اسم یتیمی Types.kt و اینا رو قرار بدید:import androidx.compose.runtime.Composable // 1 typealias OnAddType = (List < String > ) -> Unit // 2 typealias onDismissType = () -> Unit // 3 typealias composeFun = @Composable() -> Unit // 4 typealias topBarFun = @Composable(Int) -> Unit // 5 @Composable fun emptyComposable() {}نکته: توی بهتر بنویسیم بعدی typealias رو توضیح میدم.1- یه نام مستعار به نام onaddType تعریف میکنه که لیستی از رشته ها رو به شما میده و چیزی هم برنمیگردونه.2- نام مستعار برای بستن dialog3- یه composable فاکنشن رو تعریف میکنه4- یه فانکشن که یه integer میگیره5- یه composable خالیصفحه اصلیتوی ماژول androidApp توی پوشه UI یه فایل به اسم MainView.kt بسازید. با ساختن یه سری متغیر و کلاس های helper شروع میکنیم. اول این import ها رو به فایل اضافه کنید(برای ذخیره وقت):import androidx.compose.foundation.layout.padding import androidx.compose.material.BottomNavigation import androidx.compose.material.BottomNavigationItem import androidx.compose.material.FloatingActionButton import androidx.compose.material.Icon import androidx.compose.material.Scaffold import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Add import androidx.compose.material.icons.filled.Language import androidx.compose.material.icons.filled.Place import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.snapshots.SnapshotStateList import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.unit.dp import com.raywenderlich.findtime.android.theme.AppThemeبرای پیگیری دو screen تون،یه sealed کلاس بنام Screen ایجاد کنید:sealed class Screen(val title: String) { object TimeZonesScreen: Screen("Timezones") object FindTimeScreen: Screen("Find Time") }توش دوتا صفحه TimeZonesScreen و FindTimeScreen تعریف کردیم بهمراه title شون. قدم بعدی تعریف یه کلاس برای handle کردن آیتم bottom navigation مون:data class BottomNavigationItem( val route: String, val icon: ImageVector, val iconContentDescription: String )یه مسیر یا route(برای navigate کردن بین صفحه ها بعدا باهاش آشنا میشید)، یه آیکون و محتوای توضیحات داره. قدم بعدی ساختن یه متغیر با دوتا آیتم هستش برای bottom navigation:val bottomNavigationItems = listOf( BottomNavigationItem( Screen.TimeZonesScreen.title, Icons.Filled.Language, "Timezones" ), BottomNavigationItem( Screen.FindTimeScreen.title, Icons.Filled.Place, "Find Time" ) )ااز متریال آیکون و title screen ها استفاده میکنه. خب حالا یه composable بنام MainView بسازید:// 1 @Composable // 2 fun MainView(actionBarFun: topBarFun = { emptyComposable() }) { // 3 val showAddDialog = remember { mutableStateOf(false) } // 4 val currentTimezoneStrings = remember { SnapshotStateList < String > () } // 5 val selectedIndex = remember { mutableStateOf(0) } // 6 AppTheme { // TODO: Add Scaffold } }2- این فانکشن یه فانکشنی میگیره برای topbar (همون toolbar).3- اِستیت(وضعیت) نشون دادن dialog رو نگه میداره.4- استیتی که شامل یه لیستی از منطقه زمانی فعلی رو بصورت رشته نگه میداره.5- برای حفظ وضعیت index انتخاب شده از فانکشن ها remember و mutableStateOf استفاده میکنیم.6- از تمی که ساختیم استفاده میکنه.فک کنم برای این پست کافی باشه. میدونم برنامه این هفته یکم بهم خورده ولی چهارشنبه بجای null این فصل رو تموم میکنیم.و آخر اگه به باگی برخوردید، تو کامنت ها به اشتراک بزارین تا حلش کنیم.کانال Android CornerAndroid CornerAndroid CornerWed, 30 Aug 2023 18:42:10 +0330https://virgool.ir/@cornerdroid/اسکوپ-فانکشن-های-کاتلین-knqavn01kmk4اگه یادتون باشه، ما توی ماژول buildSrc از scope فانکشن with استفاده کردیم. امروز میخوایم scope function ها رو بررسی کنیم و ببینم چطور با استفاده از اینا به کدی تمیز میرسیم.کتابخونه استاندارد Kotlin پنج تا فانکشن داره که بهشون میگن Scope function که هدفشون ایجاد یه محدوده از یه object هستش. وقتی که اینا رو روی یه آبجکت call کنین با lambda، اینا یه محدوده موقت از اون آبجِکته رو براتون میسازن که دیگه شما میتونین بدون نام اون به شیء دسترسی پیدا کنین. این پنج تا فانکشن: let، run، with، apply و also اینا هستن.اصولاً ، این فانکشن ها یه کاری رو انجام میدن: یه بلاک کد رو رو یه شی اجرا میکنن، ولی تفاوتشون اینه که چطوری شیء رو در داخل بلوک(block) در دسترس قرار می دن و نتیجه expression چیه.ببینید scope fun ها درسته که کد شما رو میتونن مختصر تر کنن، ولی نباید بیش از حد از اینا استفاده کنیم، این میتونه خوندن کد شما رو سخت کنه و منجر به خطا شه. همچنین توصیه میشه از این توابع بصورت تو در تو استفاده نکنید و هنگام زنجیر زدن شون مراقب باشید چون به راحتی می میتونید در مورد context object فعلی شون و مقادیر it و this اشتباه بگیرید.قدم اول فرق شون رو بررسی میکنیم و بعد با مثال، نحوه استفاده شون رو میبینیم.تفاوت هااز اونجاییکه scope فانکشن ها از نظر ماهیت شبیه هم هستن، درک تفاوت بینشون مهمه. دو تفاوت اصلی بین هر scope فانکشن وجود داره:1- نحوه ای که اونا به context object اشاره میکنن.2- مقدار برگشتی شون.معنی context object: همون آبجکتی که scope فانکشن رو روش فراخوانی میکنیم.یک: context objectتوی لامبدایِ scope فانکشنمون، بجای اینکه اسم context object مون رو هی تکرار کنیم میایم از it و this استفاده میکنیم؛ حالا هر scope فانکشنی نحوه ارجاع دادنشون به scope فانکشن متفاوته: یه lambda receiver  از this و یه lambda argument از it استفاده میکنه.اولی: thisاسکوپ فانکش های run، with و apply کانتکس آبجکتشون رو بعنوان یه lambda receiver ارجاع میدن با واژه this.داشتن context object بعنوان یه receiver (this) برای lambda هایی پیشنهاد میشه که عموما با member های آبجکت سروکار دارن.val adam = Person("Adam").apply { age = 20 // same as this.age = 20 city = "London" } println(adam)دومی: itاسکوپ فانکش های let و also کانتکس آبجکتشون رو بعنوان یه lambda receiver ارجاع میدن با واژه it.این مثل this نیست که صریحا به مثلا property های context object مون دسترسی داشته باشیم. ولی بهتره وقتی که از شیء بیشتر به عنوان آرگومان در تماس های تابع استفاده کردیم. همچنین این بهتره وقتی که شما از چندین متغیر در بلوک کد تون استفاده می کنید.fun getRandomInt(): Int { return Random.nextInt(100).also { writeToLog("getRandomInt() generated value $it") } } val i = getRandomInt() println(i)دو: مقدار برگشتییک: apply و also خود "context object" رو برمیگردونن.دو: let، run و with "نتیجه lamda" رو بر میگردونن.** کانتکست آبجکت(context object)چون مقدار برگشتی Apply و also خود خود context object هستش. میتونید اونها رو توی زنجیره فراخوانی(call chain) صدا بزنید: می توانید یکی پس از دیگری تماس های عملکرد زنجیره ای را در همان شیء ادامه دهید.Codeببینید، اول ما یه لیست خالی داریم و پاسش میدیم به also و یه message پرینت میکنه و لیست رو پاس میده به apply بعنوان context؛ توی apply به سری اعدا به لیست اضافه میشن و بعد apply این لیست تغییر یافته رو return میکنه و....** نتیجه برگشتیاسکوپ فانکنش های let، run و with نتیجه lambda رو برمیگردونن. میتونید هنگام اختصاص نتیجه به یه متغیر و .. از اینا استفاده کنید.val countEndsWithE = numbers.run { add("four") add("five") count { it.endsWith("e") } } println("There are $countEndsWithE elements that end with e.")میبینین که خط آخر رو برمیگردونه.میتونیم از متد های (مثلا یه لیست) استفاده کنیم و یه temporary scope بسازیم.معنیtemporary scope: مثلا اینجا متد های first و last رو ریختیم تو دوتا متغیر، این متد ها بعد از اجرا شدن این scope function از بین میرن.val numbers = mutableListOf("one", "two", "three") val countEndsWithE = numbers.run { add("four") add("five") count { it.endsWith("e") } } println("There are $countEndsWithE elements that end with e.")کاربرد هاشوناین بخش برای انتخاب مناسب هر scope فانکشن در جای مناسبشه.فانکشن letدسترسیِ context object رو با it بهمون میده.نتیجه لامبدا رو برمیگردونه.1- میتونیم از let برای استفاده کردن یک یا چند فانکشن تو یه زنجیره فراخوانی استفاده کنیم.بدون let اینجوریه:val numbers = mutableListOf("one", "two", "three", "four", "five") val resultList = numbers.map { it.length }.filter { it > 3 } println(resultList)ببینید اینجا اول ما یه لیست string رو اومدیم map کردیم بعد filter و بعد تویه یه متغیر قرار دادیم تا بعدا استفاده کنیم ازش.با let هم اینجوری:val numbers = mutableListOf("one", "two", "three", "four", "five") numbers.map { it.length }.filter { it > 3 }.let { println(it) // and more function calls if needed }ولی وقتی از let استفاده میکنیم دیگه لازم نیست این عملیات رو بریزیم تو یه متغیر. اینجا هم اول ما یه لیست string رو اومدیم map کردیم بعد filter کردیم و هرچی که انجام داده بودیم رو لیست رو ریختیم توی let بجای اینکه بریزیم توی یه متغیر، الان توی let هر چندتا fun ای که میخوایم رو صدا میزنیم و استفاده میکنیم.2- اگه یه تَک فانکش داشتیم میتونیم از "::" استفاده کنیم، اینجوری:val numbers = mutableListOf("one", "two", "three", "four", "five") numbers.map { it.length }.filter { it > 3 }.let(::println)3- با let میتونیم یه محدوده(scope) ای بسازیم که تو اون مقدار های non-null قرار بگیره.(این تو بهتر بنویسم قبلی بود):val str: String? = "Hello" //processNonNullString(str) // compilation error: str can be null val length = str?.let { println("let() called on $it") processNonNullString(it) // OK: 'it' is not null inside '?.let { }' it.length }4- میتونیم بجا اینکه بصورت زنجیروار مثلا اول .first() و context object رو بهمون بده و دنبالش تو let استفاده کنیم. میتونیم بجاش اینجوری کدمون رو ساده تر کنیم:val numbers = listOf("one", "two", "three", "four") val modifiedFirstItem = numbers.first().let { firstItem -> println("The first item of the list is '$firstItem'") if (firstItem.length >= 5) firstItem else "!" + firstItem + "!" }.uppercase() println("First item after modifications: '$modifiedFirstItem'")فانکشن withدسترسیِ context object رو با this بهمون میدهنتیجه لامبدا رو برمیگردونه.1- وقتی که نیازی به استفاده از نتیجه برگشتی ندارین، از with استفاده کنید:val numbers = mutableListOf("one", "two", "three") with(numbers) { println("'with' is called with argument $this") println("It contains $size elements") }2- میتونید بعنوان یه helper هم ازش استفاده کنید اینطوری که یه سری محاسبات انجام بدید و بعدا حالا ازش استفاده کنید.val numbers = mutableListOf("one", "two", "three") val firstAndLast = with(numbers) { "The first element is ${first()}," + " the last element is ${last()}" } println(firstAndLast)فانکشن runدسترسیِ context object رو با this بهمون میده.نتیجه لامبدا رو برمیگردونه.این فانکشن مثل with با این تفاوت که run یه extension فانکشنه.1- وقتی که میخواین هم object ها رو initialize کنین و هم میخواین نتیجه برگشتی رو محاسبه کنید از run استفاده کنید.val service = MultiportService("https://example.kotlinlang.org", 80) val result = service.run { port = 8080 query(prepareRequest() + " to port $port") } // the same code written with let() function: val letResult = service.let { it.port = 8080 it.query(it.prepareRequest() + " to port ${it.port}") }2- میتونیم run رو روی یه آبجکت هم call نکنیم و بعنوان non-extension function ازش استفاده کنیم و همچنان نتیجه lambda رو برمیگردونه. وقتی که میخواین چندین statement رو call کنید تا اجرا بشه تو یه بلاک از استفاده بکنید:val hexNumberRegex = run { val digits = "0-9" val hexDigits = "A-Fa-f" val sign = "+-" Regex("[$sign]?[$digits$hexDigits]+") } for (match in hexNumberRegex.findAll("+123 -FFFF !%*& 88 XYZ")) { println(match.value) }اینجا ما regex رو initialize کردیم و بعنوان نتیجه برگردوندیم.فانکشن applyدسترسیِ context object رو با this بهمون میده.خود آبجکت رو برمیگردونه- هر وقت خواستین که یه سری چیزها رو به خود آبجکت نسبت بدین از apply استفاده کنید:val adam = Person("Adam").apply { age = 32 city = "London" } println(adam)فانکشن alsoدسترسیِ context object رو با it بهمون میده.خود آبجکت رو برمیگردونه.1- هر وقت خواستین یه سری عملیات رو روی خود آبجکتتون انجام بدین از also استفاده کنید.val numbers = mutableListOf("one", "two", "three") numbers .also { println("The list elements before adding new one: $it") } .add("four")خب امیدوارم خوشتون اومده باشه. اگه نظری، پیشنهادی، باگی چیزی بود لطفا تو کامنت ها به اشتراک بذارین.کانال Android CornerAndroid CornerAndroid CornerWed, 30 Aug 2023 10:15:15 +0330https://virgool.ir/@cornerdroid/کاتلین-و-چندین-پلتفرمقسمت-دوم-stuf6ta2wpb4مقدمه و قسمت اول رو میتونین تو کانال Android Corner ببینید.ساخت BuildSrcیکی از ویژگی های خوب نسخه های جدید Gradle، مفهوم BuildSrc هستش. یه ماژوله که می تونید توش ورژن های variable و پلاگینا تون رو تعریف کنید. برای ساختن این ماژول، باید توی پوشه روت پروژه و New ▸ Directory رو بزنید و اسم پوشه رو هم بزارید buildSrc. از اونجایی که این یه ماژوله، نیاز به یه فایل build داره --> پس توش یه فایل بنام build.gradle.kts (دقت کنید پسوندش.kts باشه) و کد زیر رو توش اضافه کنید.repositories { mavenCentral() } plugins { kotlin - dsl }خب حالا gradle رو sync کنید. بعد دوباره کلیک-راست کنید روی buildSrc و src/main/kotlin رو انتخاب کنید. حالا توی پوشه kotlin، یه فایل بنام Dependencies بسازید. تو این فایل variable هایی رو تعریف میکنیم که plugin ها و dependency هامون رو مشخص میکنن. این فایل رو ایجاد میکنیم تا همه ورژن های dependency و plugin ها یکجا باشن و مدیریت شون راحت بشه.همه پلاگینا رو با این کد تعریف کنید:const val androidPlugin = "android" const val androidApp = "com.android.application" const val androidLib = "com.android.library" const val multiplatform = "multiplatform" const val composePlugin = "org.jetbrains.compose" const val cocopods = "native.cocoapods"قدم بعد اضافه کردن ورژن هاست:object Versions { // 1 const val min_sdk = 24 const val target_sdk = 31 const val compile_sdk = 31 // 2 // Plugins const val kotlin = "1.6.10" const val kotlin_gradle_plugin = "1.6.10" const val android_gradle_plugin = "7.0.4" const val desktop_compose_plugin = "1.0.1" const val compose_compiler_version = "1.1.0-rc02" const val compose_version = "1.1.0-rc01" // TODO: Add Other versions } // TODO: Add Deps1- اینا ورژن های sdk ی اندروید رو مشخص میکنن و برای تعداد لایبرری هم حداقل(min) SDK باید 24 باشه.2- ورژن های پلاگین تونه.یه سری ورژن های لایبرری های دیگه هم مونده اونا رو اضافه می کنیم. بجای// TODO: Add Other versionsبنویسید:const val coroutines = "1.5.0-native-mt" const val junit = "4.13.2" const val material = "1.4.0" const val kotlinxDateTime = "0.3.1" const val activity_compose = "1.4.0" const val napier = "2.1.0" const val junit5 = "1.5.10" const val frameworkName = "shared"و بجای// TODO: Add Depsاینو قرار بدید:object Deps { const val android_gradle_plugin = "com.android.tools.build:gradle:${Versions.android_gradle_plugin}" const val kotlin_gradle_plugin = "org.jetbrains.kotlin:kotlin- gradle - plugin: $ { Versions.kotlin_gradle_plugin} " const val junit = "junit:junit:${Versions.junit}" const val material = "com.google.android.material:material:${Versions.material}" const val napier = "io.github.aakira:napier:${Versions.napier}" // TODO: Add Compose }این variable ها برای پلاگین ها و چندتا لایبرری هستش.قدم بعد اضافه کردن کتابخونه های compose. بجای// TODO: Add Composeاینو بنویسید:object Compose { const val ui = "androidx.compose.ui:ui:${Versions.compose_version}" const val uiUtil = "androidx.compose.ui:ui- util: $ { Versions.compose_version } " const val tooling = "androidx.compose.ui:ui- tooling: $ { Versions.compose_version } " const val foundation = "androidx.compose.foundation:foundation:${Versions.compose_version}" const val material = "androidx.compose.material:material:${Versions.compose_version}" const val material_icons = "androidx.compose.material:material- icons - extended: $ { Versions.compose_version }" const val runtime = "androidx.compose.runtime:runtime:${Versions.compose_version}" const val compiler = "androidx.compose.compiler:compiler:${Versions.compose_version}" const val runtime_livedata = "androidx.compose.runtime:runtime- livedata: $ { Versions.compose_version } " const val foundationLayout = "androidx.compose.foundation:foundation- layout: $ { Versions.compose_version } " const val activity = "androidx.activity:activity-compose: $ { Versions.activity_compose } " } // TODO: Add Coroutinesحالا یه سری کتابخونه برای Coroutine رو اضافه میکنیم، بجای :// TODO: Add Coroutinesobject Coroutines { const val common = "org.jetbrains.kotlinx:kotlinx-coroutines- core: $ {Versions.coroutines }" const val android = "org.jetbrains.kotlinx:kotlinx-coroutines- android: $ { Versions.coroutines} " const val test = "org.jetbrains.kotlinx:kotlinx-coroutines- test: $ {Versions.coroutines } " } // TODO: Add JetBrainsحالا باید تعدادی کتابخونه jetbrains برای dataTime و desktop compose رو بجای// TODO: Add JetBrainsاضافه کنیم:object JetBrains { const val datetime = "org.jetbrains.kotlinx:kotlinx- datetime: $ { Versions.kotlinxDateTim }" const val uiDesktop = "org.jetbrains.compose.ui:ui- desktop: $ { Versions.desktop_compose_plugin } " const val uiUtil = "org.jetbrains.compose.ui:ui- util: $ { Versions.desktop_compose_plugin} " }حالا میتونید پروژه sync کنید.فایل build ماژول sharedفایل build.gradle.kts رو باز کنید و اینو جایگزین پلاگین ها بکنید:kotlin(multiplatform) id(androidLib) kotlin(cocopods)الان gradle بصورت خودکار(اتوماتیک) این ثابت(constant) هایی که تعریف کردیم تو buildSrc رو میخونه.تو بخش اندروید هم اینو جایگزین کنید:android { compileSdk = Versions.compile_sdk sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifes t.xml ") defaultConfig { minSdk = Versions.min_sdk targetSdk = Versions.target_sdk } }ورژن ها رو جایگزین کردیم با اونچه که تو buildSrc تعریف کرده بودیم.فایل build.gradle.kts رو توی root باز کنید و اینو جایگزین string های classpath کنید.classpath(Deps.android_gradle_plugin) classpath(Deps.kotlin_gradle_plugin)حالا gradle رو sync کنید تا مطمئن شیم که کار میکنه.فایل build برای ماژول اندرویدفایل androidApp -> build.gradle.kts رو باز کنید و جایگزین کنید اینو بجای بخش plugin:plugins { id(androidApp) kotlin(androidPlugin) }بخش dependencies رو با این جایگیزین کنید:dependencies { // 1 implementation(project(":shared")) // 2 with(Deps) { implementation(napier) implementation(material) } // 3 //Compose with(Deps.Compose) { implementation(compiler) implementation(runtime) implementation(runtime_livedata) implementation(ui) implementation(tooling) implementation(foundation) implementation(foundationLayout) implementation(material) implementation(material_icons) implementation(activity) } }1- این، ماژول shared رو import میکنه.2- این napier رو تعریف میکنه(یه لایبرری multiplatform واسه logging) و کتابخونه material. برای جلوگیری از تکرار کد و خوانایی از with استفاده کردیم(بزودی یه مقاله در مورد scope فانکشن ها تو کانال منتشر میکنم)3- اینا هم که کتابخونه های compose هستش.حالا بخش android رو با این عوض کنید:android { compileSdk = Versions.compile_sdk defaultConfig { applicationId = "com.raywenderlich.findtime.android" minSdk = Versions.min_sdk targetSdk = Versions.target_sdk versionCode = 1 versionName = "1.0" } buildTypes { getByName("release") { isMinifyEnabled = false } } compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = "1.8" } buildFeatures { compose = true } composeOptions { kotlinCompilerExtensionVersion = Versions.compose_compiler_version } }یه بار دیگه پروژه رو sync کنید و اپ رو اجرا کنید تا ببینید همه چیز درسته.شروع ساخت اپ Find Timeاین اپ چیکار میکنه: مثلا فرض کنید چندتا همکار تو ساعت های زمانی متفاوتی کار میکنن، حالا اگه بخوان یه جلسه برگزار کنن، باید بهترین تایم رو پیدا کنن تا با هم هماهنگ بشن. این اپ بهترین زمان ممکن رو پیدا میکنه.ممکنه که این پروژه بنظر ساده بیاد ولی .. کُلللیی چیز بهتون یاد میده که تو پروژه های multiplatform تون میتونین بعدا استفاده کنید.ساخت منطق بیزینس(business logic)یه مزیت که KMP داره اینه میتونیم business logic مون رو یه بار بنویسیم تو ماژول shared و بین همه پلتفرم به اشتراک بزاریمش.برین توی ماژول shared توی androidMain ،commonMain و iosMain، کلاس Platform و Greeting رو پاک کنید و تو ماژول Android و iOS که از این کلاسا استفاده شده هم برین و پاک شون کنید.محاسبات Datetimeما از کتابخونه kotlinx-datetime استفاده میکنیم برای محاسبات bash. فایل shared/build.gradle.kts رو باز کنید، val commonMain رو پیدا کنید و این dependency ها رو اضافه کنید؛ اینجوری:val commonMain by getting { dependencies { // 1 implementation(Deps.JetBrains.datetime) // 2 implementation(Deps.napier) } }و گریدل رو sync کنین.کتابخونه Datetimeلایبرری Kotlinx-DateTime یه کتابخونه مالتی پلتفرمه که کار کردن باهاش ساده است و کمک میکنه محاسبات براساس تاریخ/زمان رو انجام بدیم باهاش. از data type های مختلفی هم استفاده میکنه که:کلاس Instant به ما یه لحظه رو تو زمان نشون میده.کلاس Clock مثل یه ساعت هستش که لحظه فعلی رو به ما میگه.کلاس LocalDateTime به ما یه تاریخ و زمان نشون میده بدون زمان اون منطقه(اگه متوجه نشدید، بعدا تو کد متوجه میشید!!)کلاس LocalDate به ما فقط یه تاریخ میده.کلاس TimeZone و ZoneOffset برای تبدیل کردن Instant و LocalDateTime به کار میره.کلاس DateTimePeriod فاصله زمانی بین دو لحظه رو بهمون میده.کلاس DatePeriod یه زیر کلاسِ DateTimePeriod هستش و تفاوت زمانی دو LocalDate رو بهمون میده.اینام کلاس(enum) Month نمایانگر ماه های ساله.اینام کلاس(enum) DayOfWeek نمایانگر روز های هفته.و اینام کلاس DateTimeUnit یه سری واحد متداول برای محاسبات بهمون میده.کمک کننده منطقه زمانی(Time Zone Helper)قبل دست به کد شدن، برید اینجاا تمام سورس کد های کتاب داخل این ریپازیتوری هستش. ولی برای الان پروژه دوم یعنی02-getting-startedرو سعی کنید build کنید یا از پکیج name مشابه استفاده کنید چونکه این کتاب موقع توضیح دادن از پکیج name این پروژه استفاده کرده و شاید کمی گیج بشید.برید تو پکیجshared/commonMain/و یه interface بنام TimeZoneHelper بسازید:interface TimeZoneHelper { fun getTimeZoneStrings(): List < String > fun currentTime(): String fun currentTimeZone(): String fun hoursFromTimeZone(otherTimeZoneId: String): Double fun getTime(timezoneId: String): String fun getDate(timezoneId: String): String fun search(startHour: Int, endHour: Int, timezoneStrings: List < String > ): List < Int > }هفت function به ترتیب:لیستی از رشته های منطقه زمانی رو برمی گردونه.زمان فرمت شده فعلی رو بهمون میده.شناسه(id) منطقه فعلی رو برمیگردونه.ساعت ها رو از منطقه زمانی معین رپرتاژ برامون برمیگردونه.زمان فرمت شده رو برای یه منطقه زمانی مشخص برمیگردونه.تاریخ فرمت شده رو با توجه به اون منطقه زمانی مشخص برمیگردونه.لیست ساعت هایی که از Starthour شروع می شه و در Endhour به پایان میرسه رو جستجو میکنه.خب حالا باید یه کلاسی بنام TimeZoneHelperImpl رو بسازیم تا این interface رو implement کنه:class TimeZoneHelperImpl: TimeZoneHelper { }متد هارو Implement کنید.خب بیاین با getTimeZoneStrings شروع کنیم. تو بدنه این متد، اینو قرار بدید:return TimeZone.availableZoneIds.sorted()این خط شناسه های(id) منطقه زمانی موجود رو برمی گردونه و اونها رو مرتب می کنه. اگه TimeZone قرمز شد، cursor موس تون رو روش قرار بدید و کلیک راست کنید و لایبرری رو import کنید.قدم بعد باید یه متد بنویسیم برای قالب بندی(فرمت) datetime کلاس LocalDateTime؛ این متد رو پایین کلاس(TimeZoneHelperImpl) قرار بدین:fun formatDateTime(dateTime: LocalDateTime): String { // 1 val stringBuilder = StringBuilder() // 2 var hour = dateTime.hour val minute = dateTime.minute var amPm = " am" // 3 // For 12 if (hour > 12) { amPm = " pm" hour -= 12 } // 4 stringBuilder.append(hour.toString()) stringBuilder.append(":") // 5 if (minute < 10) { stringBuilder.append('0') } stringBuilder.append(minute.toString()) stringBuilder.append(amPm) // 6 return stringBuilder.toString() }1- از StringBuilder برای ساخت، تغییر و کلا مدیریت string ها استفاده میکنیم.2- فقط دوتا property رو از آرگمان این fun گرفتیم.3- اینم چک میکنه اگه ساعت(hour) از 12 بیشتر بود بیا pm نشون بده.4- رشته hour رو میسازه. خط بعدی هم اینو " : " اضافه میکنه به جلوی رشته hour.5- چک میکنه اگه دقیقه کمتر از 10 بود بیا یه صفر بزار اولش. و دقیقه رو میسازه و pm/am رو هم اخرش اضافه میکنه.6- رشته نهایی رو برمیگردونه.حالا بریم سراغ متد currentTime:override fun currentTime(): String { // 1 val currentMoment: Instant = Clock.System.now() // 2 val dateTime: LocalDateTime = currentMoment.toLocalDateTime(TimeZone.currentSystemDefault()) // 3 return formatDateTime(dateTime) }1- زمان فعلی رو به صورت لحظه دریافت میکنه.2- لحظه فعلی رو بر اساس منطقه زمانی کاربر به یک LocalDateTime تبدیل میکنه.3- و در آخر فرمتش میکنیم با متد formatDateTime که قبلا پیاده سازی کردیم.حالا نوبت پیاده سازی متد getTime:override fun getTime(timezoneId: String): String { // 1 val timezone = TimeZone.of(timezoneId) // 2 val currentMoment: Instant = Clock.System.now() // 3 val dateTime: LocalDateTime = currentMoment.toLocalDateTime(timezone) // 4 return formatDateTime(dateTime) }1- منطقه زمانی رو با استفاده از id که بهش دادیم بهمون میده.2- زمان فعلی رو به صورت لحظه بهمون میده.3- لحظه فعلی رو بر اساس منطقه زمانی کاربر به یک LocalDateTime تبدیل میکنه.4- فرمت میکنه!متد getDate هم شبیه getTime. برای getDate اینو بنویسید:override fun getDate(timezoneId: String): String { val timezone = TimeZone.of(timezoneId) val currentMoment: Instant = Clock.System.now() val dateTime: LocalDateTime = currentMoment.toLocalDateTime(timezone) // 1 return "${dateTime.dayOfWeek.name.lowercase().replaceFirstChar { it.uppercase() } }, " + "${dateTime.month.name.lowercase().replaceFirstChar { it.uppercase() } } $ { dateTime.date.dayOfMonth } " }1- این بخش های مختلف DateTime رو میگیره برای ساخت همچین رشته ای :Monday, October 4متد currentTimeZone هم که ساده ست. منطقه زمانی فعلی رو به عنوان یه رشته برمیگردونه:override fun currentTimeZone(): String { val currentTimeZone = TimeZone.currentSystemDefault() return currentTimeZone.toString() }برای متد hoursFromTimeZone هم باید ساعت هارو با توجه منطقه زمانی برگردونیم:override fun hoursFromTimeZone(otherTimeZoneId: String): Double { // 1 val currentTimeZone = TimeZone.currentSystemDefault() // 2 val currentUTCInstant: Instant = Clock.System.now() // Date time in other timezone // 3 val otherTimeZone = TimeZone.of(otherTimeZoneId) // 4 val currentDateTime: LocalDateTime = currentUTCInstant.toLocalDateTime(currentTimeZone) // 5 val currentOtherDateTime: LocalDateTime = currentUTCInstant.toLocalDateTime(otherTimeZone) // 6 return abs((currentDateTime.hour - currentOtherDateTime.hour) * 1.0) }1- منطقه زمانی فعلی رو دریافت میکنیم2- زمان/لحظه فعلی رو دریافت میکنیم.3-یه منطقه زمانی دیگه میسازیم.4- زمان فعلی رو به یک کلاس LocalDateTime تبدیل میکنیم.5- زمان فعلی رو تو منطقه زمانی(otherTimeZone) به یک کلاس LocalDateTime تبدیل میکنیم.6- اختلاف مطلق بین ساعت ها رو برمیگردونیم (نباید منفی باشه).جستجوجستجو کمی سخت تره. با توجه به یه ساعت شروع (مثلا 8 صبح,am)و یه ساعت پایان (مثلا 5 بعد از ظهر,pm) و لیست مناطق زمانی افراد(منظور اوناییه که میخوان هماهنگ بشن)، ما می خوایم یه لیست int که نمایانگر ساعت های (0 تا 23) هست رو دربیاریم که برای همه مناسب باشه. برای مثال: توی لس آنجلس 8صبح am تا 5 بعدازظهر pm میشه این:[8, 9, 10, 11, 12, 13, 14]ولی تو همون رنج (range) ساعتی 8 تا 5 تو نیویورک میشه این:[11, 12, 13, 14, 15, 16, 17]حالا باید یه سری time ها رو بکشیم بیرون از این دوتا تا یه زمان مناسب برای هردو پیدا، مثلا 11،12و.. .خب برای اینکه بفهمیم اون ساعت ای که بین این دو منطقه پیدا کردیم درسته، باید یه متد بنام isValid اضافه کنیم(بعد از متد search قرارش بدین):private fun isValid( timeRange: IntRange, hour: Int, currentTimeZone: TimeZone, otherTimeZone: TimeZone ): Boolean { if (hour!in timeRange) { return false } // TODO: Add Current Time }خب حالا این کد ها رو جاگیزین// TODO: Add Current Timeکنید:// 1 val currentUTCInstant: Instant = Clock.System.now() // 2 val currentOtherDateTime: LocalDateTime = currentUTCInstant.toLocalDateTime(otherTimeZone) // 3 val otherDateTimeWithHour = LocalDateTime( currentOtherDateTime.year, currentOtherDateTime.monthNumber, currentOtherDateTime.dayOfMonth, hour, 0, 0, 0 ) // TODO: Add Conversions1- این برای دریافت لحظه فعلی هستش2- با داشتن یه منطقه زمانی، لحظه رو به یه منطقه زمانی دیگر تبدیل میکنه.3- دریافت کردن LocalDateTime با یک ساعت مشخص. (دقیقه، ثانیه و نانو ثانیه لازم نیست)حالا بجای// TODO: Add Conversionsاین رو قرار بدید:// 1 val localInstant = otherDateTimeWithHour.toInstant(currentTimeZone) // 2 val convertedTime = localInstant.toLocalDateTime(otherTimeZone) Napier.d("Hour $hour in Time Range ${otherTimeZone.id} is $ { convertedTime.hour } ") // 3 return convertedTime.hour in timeRangeلایبرری Napier رو واسه گزارش کردن لازم داریم پس لایبرری اش رو import کنید اگه قرمزه.1- ساعته رو به منطقه زمانی فعلی تبدیل میکنه.2- ساعت منطقه زمانی رو به منطقه زمانی دیگه تبدیل میکنه.3- بررسی میکنه که آیا در محدوده زمانی شما است یا خیر.حالا بجای// TODO: Add Conversionsاین رو قرار بدید:// 1 val localInstant = otherDateTimeWithHour.toInstant(currentTimeZone) // 2 val convertedTime = localInstant.toLocalDateTime(otherTimeZone) Napier.d("Hour $hour in Time Range ${otherTimeZone.id} is $ { convertedTime.hour } ") // 3 return convertedTime.hour in timeRangeلایبرری Napier رو واسه گزارش کردن لازم داریم پس لایبرری هاش رو import کنید اگه قرمزه.1- ساعته رو به منطقه زمانی فعلی تبدیل میکنه.2- ساعت منطقه زمانی رو به منطقه زمانی دیگه تبدیل میکنه.3- بررسی میکنه که آیا در محدوده زمانی شما است یا خیر.خب حالا شما متد isValid رو دارید. پس بیاین متد search رو پیاده سازی کنیم(اندازه isValid سخت نیست!!). فقط باید مناطق و ساعتهای معین رو بررسی کنیم که آیا معتبر هستن یا نه. اینجوری:// 1 val goodHours = mutableListOf < Int > () // 2 val timeRange = IntRange(max(0, startHour), min(23, endHour)) // 3 val currentTimeZone = TimeZone.currentSystemDefault() // 4 for (hour in timeRange) { var isGoodHour = false // 5 for (zone in timezoneStrings) { val timezone = TimeZone.of(zone) // 6 if (timezone == currentTimeZone) { continue } // 7 if (!isValid( timeRange = timeRange, hour = hour, currentTimeZone = currentTimeZone, otherTimeZone = timezone )) { Napier.d("Hour $hour is not valid for time range") isGoodHour = false break } else { Napier.d("Hour $hour is Valid for time range") isGoodHour = true } } // 8 if (isGoodHour) { goodHours.add(hour) } } // 9 return goodHours1- لیست تایم هایی که valid هستن.2- یه محدوده range میسازه.3- زمان فعلی منطقه رو بهمون میده.4- سرتاسر محدوده ساعت رو میگرده5- سراسر محدوده منطقه زمانی رو میگرده تو لیست منطقه زمانی.6- اگه منطقه زمانی مشترک باشه یعنی خوبه.7- بعد از اینکه سراسر محدوده(range) رو گشت و time(ساعت) مناسب رو پیدا کرد، اونو به لیست اضافی میکنه.8-لیست ساعت های مناسب رو return میکنه.خبب! تبریک میگم، شما business logic این اپ رو نوشتین، اگه جایی براتون گنگ بود، برید دوباره اون بخش رو بخونید و یا تو کانال زیر این پست سوالتون رو به اشتراک بزارید تا حلش کنیم.امیدوارم خوشتون بیاد. اگه نظری، پیشنهادی، باگی چیزی بود لطفا تو کامنت ها به اشتراک بذارین.کانال Android CornerAndroid CornerAndroid CornerMon, 21 Aug 2023 21:58:33 +0330https://virgool.ir/@cornerdroid/کاتلین-و-چندین-پلتفرمقسمت-اول-xbqdrfndhudiفصل اول کتاب رو- چون یکم طولانی بود- توی دو قسمت منتشر میکنم. تو این پست، فصل اول(قسمت اول) این کتاب رو بررسی میکنیم و:* درباره build system های KMP حرف میزنیم.AndroidCornerنکته: اگه پست "مقدمه" رو ندیدین، حتما تو کانال Android Corner ببینید.فصل اول قسمت اول:برای شروع کار، ما باید با build system ای که KMP استفاده میکنه آشنا بشیم: build system اندروید و دکستاپ همون gradle ولی iOS از CocoaPods استفاده میکنه.گریدلخود KMP از اسکریپ های kotlin استفاده میکنه برای gradle و اگه ببین پسوند فایلش .kts هست مخفف kotlin script.فایل های Buildتوی پوشه روت build.gradle.kts باز کنید:// 1 buildscript { // 2 repositories { gradlePluginPortal() google() mavenCentral() } // 3 dependencies { classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.5.31") classpath("com.android.tools.build:gradle:7.0.1") } }1- بخش buildscript همه اطلاعات مربوط به پلاگین ها و ورژن هاشون رو تعریف میکنه.2- بخش repositories منبعی که پلاگین ها روش هاست شدن رو تعریف میکنه.3- و توی dependencies هم ما میایم پلاگین ها رو قرار میدیم.اینم هست:// 1 allprojects { // 2 repositories { google() mavenCentral() } }1- بخش AllProjects به این معنیه: که موارد زیر رو برای همه ماژول های این پروژه اعمال کن.2- بخش repositories تمامی مخزن های مورد نیاز برای همه ماژولا رو تعریف می کنه.آخرین بخش:tasks.register("clean", Delete::class) { delete(rootProject.buildDir) }این یه وظیفه Gradle به نام Clean انجام میده که با این کار، پوشه root رو حذف میکنه و در فقط صورت نیاز به build تازه(fresh build) از این استفاده می کنید.حالا androidApp/build.gradle.kts رو باز کنید، این فک کنم براتون آشناست:) توش پلاگین ها، dependency ها و بلاک اندروید(چیزای مخصوص اندروید) قرار داره.اما توی قسمت dependency :dependencies { // 1 implementation(project(":shared")) // 2 implementation("com.google.android.material:material:1.4.0") implementation("androidx.appcompat:appcompat:1.3.1") implementation("androidx.constraintlayout:constraintlayout:2.1.1") }1- این میگه که اندروید وابسته اس به ماژول shared(جاییکه منطق بیزینس و network و database و .. قرار داره)2- اینا هم که dependency های مخصوص اندروید اندفایل build ماژول sharedحالا فایل shared/build.gradle.kts رو باز کنید.اولین بخش پلاگین ها هستن:plugins { kotlin("multiplatform") kotlin("native.cocoapods") id("com.android.library") }* اولی پلاگین برای KMP هستش و میگه که این ماژول یه ماژول برای چند پلتفرمه (multiplatform).* دومی پلاگین CocoaPods برای IOS .* سومی هم که برای اندرویده؛ شما اینو استفاده میکنید به منظور ساخت یه لایبرری اندروید(همون کدهایی که تو shared) برای استفاده تو Android app تون.بخش kotlin:kotlin { // 1 android() // 2 iosX64() // 3 iosArm64() // 4 iosSimulatorArm64() // 5 cocoapods { summary = "Holds Time zone information" homepage = "Link to the Shared Module homepage" ios.deploymentTarget = "14.1" framework { baseName = "shared" } podfile = project.file("../iosApp/Podfile") } ... }این بخش از پلاگین multiplatform استفاده میکنه به منظور پیکربندی این ماژول برای KMP.1- این متد برای هدف قرار دادن اندروید بعنوان پلتفرمیه که داریم براش این پروژه رو مینویسیم.2- متد iOSX64 برای هدف قرار دادن iOS با معماری x86_64 هستش، مثل شبیه سازهای iOS ای که اجرا میشن روی دستگاه های Mac.3- متد iosArm64 هم هدفش دستگاه های IOS ای هستش که مبتنی بر معماری ARM64 هستن.4- این متد هم iosSimulatorArm64 برای هدف قرار دادن شبیه ساز iOS هستش که معماری ARM64 را در دستگاه های x86_64 تقلید می کند.5- این یه سری جزئیات برای ساخت CocoaPods Podfile(توی پوشه ios) تعریف میکنهبخش بعدی sourcsSet:sourceSets { // 1 val commonMain by getting val commonTest by getting { dependencies { implementation(kotlin("test-common")) implementation(kotlin("test-annotations-common")) } } // 2 val androidMain by getting val androidTest by getting { dependencies { implementation(kotlin("test-junit")) implementation("junit:junit:4.13.2") } } // 3 val iosX64Main by getting val iosArm64Main by getting val iosSimulatorArm64Main by getting val iosMain by creating { dependsOn(commonMain) iosX64Main.dependsOn(this) iosArm64Main.dependsOn(this) iosSimulatorArm64Main.dependsOn(this) } }تو این بخش ما، source set هامون رو با variable های از پیش تعریف شده میتونیم تعریف کنیم.1- این commonMain و dependency هایی برای تست کردن تعریف میکنه- برای commonMain چیزی تعریف نکرده.2- این dependency های اندروید رو تعریف میکنه.3- اینجا هم dependency های IOS.بخش بعدی هم اندرویده که شما باهاش آشنا هستید.android { compileSdk = 31 sourceSets["main"].manifest.srcFile("src/androidMain/AndroidManifes t.xml ") defaultConfig { minSdk = 21 targetSdk = 31 } }سیستم عامل iOSخب، iOS برخلاف اندروید از چند سیستم مدیریت dependency استفاده میکنه که یکی از معمول ترینش CocoaPods هستش.اگه برین iOSApp/Podfile رو باز کنید، چیز زیادی نداره:target 'iosApp' do use_frameworks! platform: ios, '14.1' pod 'shared',: path => '../shared' endمهمترین قسمتش :اینه: pod 'shared', :path => '../shared'این قسمت میاد فریمورک shred ای که قراره KMP بسازه رو تعریف میکنه (واقعا یه فریمورک کوچیکه دیگه).خُبب! این قسمت دوم بود. امیدوارم خوشتون اومده باشه، اگه نظری، پیشنهادی، باگی چیزی بود لطفا تو کامنت ها به اشتراک بذارین.کانال تلگرام Android CornerAndroid CornerAndroid CornerMon, 21 Aug 2023 11:53:30 +0330https://virgool.ir/@cornerdroid/کاتلین-و-چندین-پلتفرم-مقدمه-xketf405bhkmتوی سری پست های "کاتلین و چندین پلتفرم" ما کتاب Kotlin Multiplatform by Tutorials رو (بطور خلاصه و مفید) واشکافی میکنیم.میدونم هنوز تو حالت beta قرار داره، ولی برای خود من بشخصه برام جالب و فانه که تکنولوژی های جدید رو دنبال کنم.تو این پست، مقدمه این کتاب رو بررسی میکنیم و درباره اینا حرف میزنیم:* کاتلین multiplatform* کلید واژه های expect و actual* و build اولین پروژه مقدمه:کاتلین روی پلتفرم هایی که jvm رو پشتیبانی میکنن کار میکنه (مثل پروژه های اندروید) و stable هم هست، ولی  برای پلتفرم های دیگه که jvm رو پشتیبانی نمیکنن از کاتلین native استفاده میکنه و هنوز تو حالت beta هستش. کاتلین native کد های کاتلین رو به bytecode های بومی کامپایل میکنه که اجرا میشن روی سیستم عامل های apple، ویندوز و لینوکس. و برای وب هم، کد های کاتلین کامپایل میشه به JavaScript و html که بهش میگن Kotlin-js.معمولا تو پروژه ها چند لایه های مختلف داریم مثل: لایه network، لایه database، منطق بیزینس(business logic) و لایه UI.توی پروژه های kotlin multiplatform، شما یه کد base برای business logic تون خواهید داشت برای همه پلتفرم ها؛ میتونید لایه database رو با لایبرری SQLDelight بنویسید برای همه پلتفرم ها. اما kotlin multiplatform لایه UI رو فراهم میکنه و شما میتونید UI رو برای iOS با Swift بزنید و برای desktop میتونید از compose desktop استفاده کنید و برای اندروید هم که compose هستش. اینکه Kotlin multiplatform بهمون اجازه میده که UI رو با UI system اون پلتفرم بزنیم بنظر من واقعا یه مزیت بزرگه.خب بیاید شروع کنیم:پلاگین kotlin multiplatform رو توی Android Studio نصب کنین. و restart کنین. روی New Project کلیک و Kotlin multiplatform app رو انتخاب کنین.اسم اپلیکیشن اندروید، iOS تونو انتخاب کنین. اسم ماژول shared هم بزارید shared باشه خوبه. و finish رو بزنید تا پروژه build بشه.کلیدواژه های kotlin multiplatformحالا که پروژه رو ساختید لازمه دوتا کلیدواژه های kotlin رو که برای پشتیبانی از KMP(kotlin multiplatform project) اومده رو بدونید: expect و actual.کلیدواژه expect تقریبا مثل abstract class/fun، یعنی ما اینو تو پوشه commonMain* تعریف میکنیم (حالا میتونه expect fun/class باشه) و انتظار داریم که توی هر پلتفرم (androidMain و iosMain) پیاده سازی بشه(مثل abstract class/fun که پیاده سازی شون میکردیم) حالا این پیاده سازی رو هم با کلیدواژه actual تعریف میکنیم.خب حالا بریده توی commonMain و Platform.kt رو باز کنید.expect class Platform() { val platform: String }میبینید که از expect استفاده کرده و این به ما میگه که: توی هر پلتفرم باید یه actual کلاسی بنام Platform داشته باشیم که این کلاس رو پیاده سازی کنه و باید یه variable از نوع string داشته باشه بنام platform(اینم باید actual var باید باشه قاعدتا).حالا برید actual کلاس Platform.kt رو توی Android و iOS باز کنید.actual class Platform actual constructor() { actual val platform: String = "Android ${android.os.Build.VERSION.SDK_INT}" }نکته: توی commoMain هرچی مینویسیم باید کاتلین (خالص) باشه و نباید هیچ dependency یا هرچی که مربوط به پروژه های اندرویدی هست رو قرار بدیم، چون ما داریم برای چند پلتفرم مختلف کد رو به اشتراک میزاریم نه فقط اندروید.حالا اپ رو run کنید و .... شما اولین پروژه multiplatform تون رو با استفاده از kotlin ساختین!نکته: برای خروجی گرفتن iOS باید تو mac از xcode استفاده کنین.خُبب! امیدوارم خوشتون اومده باشه، اگه نظری، پیشنهادی، باگی چیزی بود لطفا تو کامنت ها به اشتراک بذارین.کانال تلگرام Android CornerAndroid CornerAndroid CornerMon, 21 Aug 2023 11:40:48 +0330https://virgool.ir/@cornerdroid/بهتر-بنویسیم-ozixoknif8e6توی سری پست های "بهتر بنویسیم!" یاد میگیریم که چطور با استفاده از ویژگی های جالب کاتلین، کدی تمیز بنویسیم.تا آخر این پست رو بخونین. شاید نکته جالبی پیدا کردین.1- وقتی که بیش از دو شرط دارید از when استفاده کنید:// Don't fun getCategoryByEatableName(eatable: String): String {     if (eatable == "mango" eatable == "banana" eatable == "apple") {         return "FRUIT"     }else if (eatable == "potato" eatable == "tomato" eatable == "onion") {         return "VEGETABLE"     }else if(eatable == "milk" || eatable == "curd") {         return "DAIRY"     }else {         return "UNKNOWN"     } } // Do fun getCategoryByEatableName(eatable: String) =     when(eatable) {         "mango", "banana", "apple" -> "FRUIT"         "potato", "tomato", "onion" -> "VEGETABLE"         "milk", "curd" -> "DAIRY"         else -> "UNKNOWN"     }2- از let به همراه ?. برای property های nullable استفاده کنید:// Don't val user: User? = findUser() if (user != null){ println(user.name) } // Do findUser()?.let { println(it.name) } //or findUser()?.name?.let(::println)3- عملگر Elvis(?:)Without if(user.name != null) { userName = user.name } else { throw IllegalStateException() } With val userName = user.name?: throw IllegalStateException()4- وقتی که میخواین به چندین property شی دسترسی داشته باشید از apply استفاده کنید.class Server { lateinit var host: String var port: Int = 0 var numOfInstance: Int = 1 var isCloudInstance: Boolean = true } // Don't var server = Server() server.host = "sg1234" server.port = 8080 server.numOfInstance = 3 // Do var server = Server().apply { host = "sg1234" port = 8080 numOfInstance = 3 }5- برای map کردن key/value ها از عملگر to استفاده کنید:// Don't val immutableMap = mapOf( Pair("A", 1), Pair("B", 2), Pair("C", 3)) val mutableMap = mutableMapOf( Pair("A", 1), Pair("B", 2), Pair("C", 3)) // Do val immutableMap = mapOf( "A" to 1, "B" to 2, "C" to 3 ) val mutableMap = mutableMapOf( "A" to 1, "B" to 2, "C" to 3 )یه مثال دیگه: var url = "http://localhost:8080/users" var method = "GET" var status = 200 logger.debug(mapOf("url" to url, "method" to method, "status" to status))6- یه راه آسون برای ایجاد کردن یه رشته توی چند خط، اول و آخر string رو این بزارین """ است.// Don't println("Twinkle, Twinkle Little Bat\n" + "How I wonder what you're at!\n" + "Up above the world you fly,\n" + "Like a tea tray in the sky.\n" + "Twinkle, twinkle, little bat!\n" + "How I wonder what you're at!") // Do println(""" Twinkle, Twinkle Little Bat How I wonder what you're at! Up above the world you fly, Like a tea tray in the sky. Twinkle, twinkle, little bat! How I wonder what you're at!""")Android CornerAndroid CornerThu, 17 Aug 2023 23:09:29 +0330https://virgool.ir/@cornerdroid/اخبار-هفته-بخش-دوم-vycwjtnc8nloتو این بخش این خبر هارو پوشش میدیم:گوگل پلی و ویژگی/سیاست های جدیدشاندروید استودیو زرافه ?انیمیشن Lottieگوگل پلیسه تغییر مهم1- الان میتونید لیست جزئیات(store listing) اپلیکیشن تون رو کاملا برای کاربرا تون یا گروه مشخصی از کاربرا شخصی سازی (customize) بکنین. حالا فایدش چیه:مثلا میتونین برای کاربر هایی که تو اپلیکیشن تون فعال نیستند (lapsed users)، یه store listing بخصوص برای اون گروه از کاربرا ایجاد کنین تا اونا دوباره جذب اپلیکیشن بشن.بعد از اینکه برای گروه های مختلف یه store listing شخصی سازی شده قرار دادید، حالا میتونید برای این گروه های مختلف، بر اساس store listing، تبلیغات بخصوصی رو برای هر کدوم از این گروه ها با علاقه مندی های متفاوت قرار بدین.وقتی که تعداد زیادی store listing ساختین، میتونید یه لیست جزئیات پایه(base listing) بسازین و همه store listing ها رو مدیریت کنین. (جزئیات بیشتر)2- هوش مصنوعی و یادگیری ماشین برای store listingاین دو باهم به کمک شما میان، تا محتوای باکیفیت تری توی زمان کمتری برای لیست جزئیات اَپ تون(store listing) بنویسید؛ مثلا، اگه شما دارین یه listing به زبان انگلیسی مینویسین، شما میتونید مثلا موضوع و مخاطب مورد نظرتون رو مینویسین؛ بعد طبق اون، محتوای listing شما تولید میشه.3- آزمایش قیمتیکی دیگه از چیزهایی به Google play console تون اضافه شده، آزمایش کردن قیمت های مختلف از محدوده A تا B برای یه محصول درون برنامه ای در مناطق مختلف. این آزمایشات قیمت گذاری برای محصول درون برنامه ای حداقل 7 روز باید انجام بشه برای به دست آوردن داده های کافی (مثلا تو ایران قیمت ایده آل محصول درون برنامه مون 1.80$ ولی تو UK میشه 2.80$). این آزمایشات هم فقط برای کاربرانی که تو اپ جدید هستند لحاظ میشه. بنظرم ویژگی جالبی و باعث میشه رفتار کاربران رو در مناطق مختلف آنالیز کنین و بر مبنای اون برای محصول تون تصمیم بگیرین، حتما امتحانش کنین اگه اَپی توی Google play دارین.سیاست های جدیدگوگل پلی یه سری سیاست های جدیدی تعریف کرده برای اعتماد بیشتر و شفافیت business تون.این سیاست ها :1- تهیه شماره DUNSاز الان اگه برین یه account جدید ایجاد کنین تو Google play console، نیاز شماره DUNS دارین. با این شماره شما به Google play میگین بیزینس ما معتبره یه جور ارزش اعتباری داره.2- جَلب اعتماد کاربرگوگل پلی داره اسم بخش "Contact details" توی لیست جزئیات (store listing) به "App support" تغییر میده و داره یه بخش جدیدی بنام "About the developer" ایجاد میکنه تا کاربر اطلاعات بیشتری راجب شما بدونن. توی "Contact details" میتونین آدرس ایمیل، وب سایت و شماره تلفن پشتیبانی خودتون رو نشون بدین. و توی "App support" هم میتونین نام ، آدرس و جزئیات تماس را نشان بدین.اندروید استودیوی زرافه ?ما تو این نسخه Android studio:ظاهر و احساس بصری کاملاً جدیدپیشرفت در ویرایش زنده (Live edit)پیش نمایش(preview) انیمیشن های composeاکسپلورر دستگاه (Device Explorer)دستیار جدید برای آپدیت SDK و..امکان استفاده از Kotlin DSL توی gradle build scriptو چیزای بیشتر.پیشرفت های IDE1- رابط کاربری جدید برای Android Studio : رابط کاربری جدید برای اولین بار توی IntelliJ 2022.2 منتشر شد برای پیش نمایش تا کاربرا بتونن بازخوردشون رو بگن و اطمینان ایجاد بشه که این UI جدید میتونه جایگزین UI قبلی بشه.الان اندروید استودیو هم داره از این UI استفاده میکنه با یه سری تغییرات مثل: بهینه سازی toolbar اصلی و tool Windows configuration و عوض شدن آیکونگرافی (iconography)برای استفاده از این رابط کاربری باحال برین توی Settings > Appearance & Behavior > New UI و New UI رو فعال کنین.2- ابزار diagnostic & bug reporting جدید:ببا این ابزار شما راحتر میتونید اپ تون رو debug کنید. این ابزار رو میتونین اینجا پیدا کنین:Help > Collect Logs and Diagnostic Data3- دستگاه اکسپلورر جدیدتوی device explorer، فایل ها و هرچی که مربوط به فایل میشه توی tab فایل قرار داره و همچنین یه tab دیگه بنام process وجود داره که می تونین پروسس های قابل debug رو مال دستگاه متصل شده ببینید.افزایش بهره وری کد زدن با:1- ویرایش زنده (Live edit) رو توی پست قبلی توضیح دادم.2- دستیار  Android SDK Upgradeاین دستیار به شما امکان دیدن مراحل مورد نیاز برای آپدیت کردن targetSdkVersion یا API level ای که اپ تون استفاده میکنه. همچنین مستندات سایت Android Developer رو میگیره و توی پنجره ابزاری که داره نمایش میده و دیگه نیازی نیست که بین مرورگر و IDE تون جا به جا بشین.برای باز کردن Android SDK Upgrade Assistant، برید توی :Tools > Android SDK Upgrade Assistantپیشرفت توی build system1- با اومدن DSL کاتلین برای اسکریپت های Gradle build، چونکه به زبان کاتلینه، هم خوانا تر هم پشتیبانی بهتری توی زمان کامپایل رو ارائه می ده.وقتی توی Android studio giraffe یه پروژه جدید ایجاد میکند، بصورت پیش فرض از DSL کاتلین استفاده میکنه برای اسکریپت های بیلد gradle و دیگه از groovy استفاده نمیکنیم.منابع بیشتر : Gradle Blog, JetBrains Blog2- بارگیری اطلاعات در حین همگام سازی(sync) Gradle: پنجره ابزار synk جدید به شما امکان مشاهده خلاصه ای از زمان صرف شده برای دانلود dependency ها و یک نمای دقیق از بارگیری در هر مخزن است. میتونید با این ویژگی از دانلود غیر منتظره dependency ها جلوگیری کنید.3- الان دیگه میتونید با انتخاب گزینه Make Sellected Modules Build توی نوار ابزار، فقط ماژول فعلی که روی اون کار می کنید رو build کنید. این گزینه جدید خیلی کارآمده، مثلا شما روی یه ماژول کار میکنید و نمیخواید سه ساعت بشینید تا کل پروژه بیلد بشه.انیمیشن های اندرویدی Lottie 6.1 به سمت Multithread شدن میرهاین پست رو maintainer لاتی منتشر کرده و میگه : هر انیمیشنی دو فاز(مرحله) داره، upgrade و draw.فاز upgrade میره کل درخت انیمیشن رو میگرده تا ببینه value های (color, position و ...) عوض شده یا نه؛ اگه عوض شده باشه اونو محاسبه میکنه و پاسش میده به draw و اون رو میکشه. این دو فاز قبلا بصورت asynk توی main thread اجرا میشدن و اون فاز draw حتما باید توی main thread باشه، ولی upgrade که کُندتره میتونه توی background thread اجرا بشه. اگه جزئیات بیشتری میخواید، میتونین مقاله رو توی medium ببینید.خُبب! امیدوارم خوشتون اومده باشه، اگه نظری، پیشنهادی، باگی چیزی بود لطفا تو کامنت ها به اشتراک بذارین.کانال تلگرام Android CornerAndroid CornerAndroid CornerTue, 15 Aug 2023 23:29:02 +0330https://virgool.ir/@cornerdroid/اخبار-oizm62n0katpتوی این پست قراره این خبر هارو پوشش بدیم: ورژن جدید kotlin اندروید استودیو زرافهکامپوزگوگل پلی و large screen هاانیمیشن های Lottieو ...*** چون اخبار یکم زیاد بود اینا رو توی دوتا پست منتشر میکنم.ورژن جدید kotlinاخیرا jetbrains کاتلین 1.9.0 رو ارائه کرد که با خودش یه سری ویژگی های زبانی و بهبود های برای kotlin multiplatform/native به همراه داشته. عملگر ..<: این عملگر برای range گرفتن استفاده میشه ولی با یه شرط که اون محدوده از عدد دوم کوچکتر باشه.مثلا اگه اینو چاپ کنیم 1..<5 میاد برامون از 1 تا 4 چاپ میکنه.ویژگی (property) entries: این property برای enum class هاست و اومده که مشکل متد values رو حل کنه؛ اونم اینکه که شما وقتی میخوای یه لیست از constant های enum کلاس تون داشته باشین، این متد رو call میکنین و این متد به شما یه array جدید از اون constant ها میده- در نتیجه هر بار که call بشه یه array جدید return میکنه و این تو شرایطی میتونه باعث مشکل performance بشه.حالا این property این مشکل رو حل کرده و به شما یه لیست pre-allocated و immutable از اون constant بهتون میده و دیگه هر بار هم یه لیست جدید برنمی گردونه.متد group: این متد برای دریافت محتوای گروه regex استفاده میشه. برای مثال، یه regex ایجاد میکنیم : val regex = """\b(?<city>[A-Za-z\s]+),\s(?<state>[A-Z]{2}):\s(?<areaCode>[0-9]{3})\b""".toRegex()بعد میتونیم به مقدار گروه ها دسترسی داشته باشیم : val match = regex.find(input)!! println(match.groups["city"]?.value) // Austin println(match.groups["state"]?.value) // TX println(match.groups["areaCode"]?.value) کامپایلر جدید کاتلین:این کامپایلر یعنی k2، به گفته jetbrains قراره سرعت compilation رو تا 2 برابر و همچنین سرعت توسعه زبانی کاتلین رو افزایش بده؛ الان فعلا تو حالت beta است ولی میتونین بصورت آزمایشی تستش کنین. K2 توی ورژن 2.0 کاتلین stable میشه!Android CornerAndroid CornerSun, 13 Aug 2023 00:42:02 +0330https://virgool.ir/@cornerdroid/انتخاب-چندگانه-در-compose-yvz6zjnzyhpw توی خیلی از اپ ها شاید دیده باشین که برای انتخاب کردن(selecting) چند آیتم از یه ویژگی باحال استفاده میکنن بنام انتخاب چندگانه (multiple selection)؛ اینجوریه که وقتی کاربر یه آیتم رو یکم نگه داره و بکشه به پایین یا بالا (dragging) همونقدری که بالا یا پایین کشیده، آیتم ها هم انتخاب یا از حالت انتخاب در میان(deselection).یک grid تصویر با قابلیت انتخاب چندگانهقدم هایی که باید برای پیاده سازی این برداریم : پیاده سازی یه grid ساده اضافه کردن وضعیت انتخاب (selection state) به grid مدیریت حرکت (gesture handling) لمس نهایی (final touches) پیاده سازی gridبرای پیاده سازی grid از LazyVerticalGrid استفاده میکنم تا اپ مون توی screen size های مختلف خوب کار کنه؛ اینطوری که توی screen های بزرگتر، ستون های بیشتری باشه و توی screen های کوچکتر ستون کمتری نمایش داده بشه. @Composable private fun PhotoGrid() { val photos by rememberSaveable { mutableStateOf(List(100) { it }) } LazyVerticalGrid( columns = GridCells.Adaptive(minSize = 128.dp), verticalArrangement = Arrangement.spacedBy(3.dp), horizontalArrangement = Arrangement.spacedBy(3.dp) ) { items(photos, key = { it }) { Surface( tonalElevation = 3.dp, modifier = Modifier.aspectRatio(1f) ) {} } } }توی این مثال ما از عکس بعنوان آیتم های grid مون استفاده میکنیم، اما فعلا تا به اضافه کردن عکس ها برسیم، از یه Surface استفاده میکنم. ما الان با این چند خط کُد یه grid عالی داریم که میتونیم scroll کنیم.یک grid ساده برای شروع کار اضافه کردن selection stateما باید بدونیم که الان چه آیتمی انتخاب(select) شده و اگر تو حالت انتخاب(selection) بودیم، میایم با توجه به وضعیت انتخاب (selection mode) آیتم هامون رو منعکس* میکنیم (*مثلا یه آیکون ✅ مثل این میزاریم روی آیتم ها برای منعکس کردن حالت انتخاب شده یا selected)خب، اول بیاید آیتم grid مون رو بسازیم و selection state رو اینجوری براش تعیین کنیم : 1- اگر کاربر در حالت انتخاب نبود، هیچی نشون نده2- وقتی کاربر تو حالت انتخابه ولی آیتم select نشده، بیا یه radioButton نمایش بده 3- وقتی کاربر تو حالت انتخابه و آیتم هم select شده، یه checkmark نمایش بده @Composable private fun ImageItem( selected: Boolean, inSelectionMode: Boolean, modifier: Modifier ) { Surface( tonalElevation = 3.dp, contentColor = MaterialTheme.colorScheme.primary, modifier = modifier.aspectRatio(1f) ) { if (inSelectionMode) { if (selected) { Icon(Icons.Default.CheckCircle, null) } else { Icon(Icons.Default.RadioButtonUnchecked, null) } } } }حالت های مختلف برای انتخاب itemاین composable چون stateless بنابراین state رو درون خودش نگه داری نمیکنه ولی بسادگی میتونیم state رو بهش پاس بدیم از طریق argument و این method با توجه به state ای که ما بهش پاس دادیم به ما پاسخ میده.برای اینکه آیتم ها به حالتهای انتخاب شده (selected) شون پاسخ بدن، grid باید این حالتها را پیگیری کنه. همچنین، کاربر باید با تعامل با آیتم های موجود در grid، مقدار انتخاب شده رو تغییر بده. الان، وقتی که کاربر روی یه آیتم کلیک کنه، به راحتی وضعیت انتخاب شده یه آیتم رو میتونیم اینجوری تغییر بدیم:@Composable private fun PhotoGrid() { val photos by rememberSaveable { mutableStateOf(List(100) { it }) } val selectedIds = rememberSaveable { mutableStateOf(emptySet<Int>()) } // NEW val inSelectionMode by remember { derivedStateOf { selectedIds.value.isNotEmpty() } } // NEW LazyVerticalGrid( columns = GridCells.Adaptive(minSize = 128.dp), verticalArrangement = Arrangement.spacedBy(3.dp), horizontalArrangement = Arrangement.spacedBy(3.dp) ) { items(photos, key = { it }) { id -> val selected = selectedIds.value.contains(id) // NEW ImageItem(selected, inSelectionMode, Modifier.clickable { // NEW selectedIds.value = if (selected) { selectedIds.value.minus(id) } else { selectedIds.value.plus(id) } }) } } }ما الان آیتم های انتخاب شده(selected) رو توی یه set داریم پیگیری میکنیم و کاربر هر زمانیکه خواست روی یه ImageItem کلیک کنه، id همون آیتم از set اضافه یا حذف میشه . ما زمانی تو حالت انتخاب selectionMode هستیم که آیتم های انتخاب شده وجود داشته باشن؛ هر زمانی که set آیدی های انتخاب شده (selected) تغییر کنه، متغیر selected هم بطور اتوماتیک دوباره محاسبه میشه.خب تا الان ما میتونیم آیتم هارو اضافه یا حذف کنیم از selection با کلیک کردن روی اونها: مدیریت حرکت (gesture handling) حالا ما وضعیت انتخاب آیتم ها(selection state) رو داریم، میتونیم حرکتی(gesture) که عناصر باید هنگام اضافه یا حذف شدن از selection داشته باشند رو پیاده سازی کنیم. قاعدتا gesture رو باید به grid اضافه کنیم.برای پیاده سازی این باید این کارا رو بکنیم : با long-pressing یک آیتم، بریم تو حالت selection.بعد از Long-press کردن، بتونیم با drag کردن همه عناصر بین آیتم اصلی و هدف رو اضافه یا حذف کنیم.وقتی توی selection mode هستیم، بتونیم آیتم ها رو با کلیک کردن اضافه یا حذف کنیم از حالت selection.با Long-press کردن روی آیتمی که select شده اتفاقی نَیوفته.مورد دوم یکم چالشی تره؛ چون برای پیاده سازی اون حرکت(gesture) برای grid مون، ما نیاز داریم : وقتی کاربر یه آیتم رو long press میکنه و شروع به حرکت کشیدن و select کردن آیتم ها میکنه، اولا باید بدونیم کاربر از کدوم آیتم شروع به حرکت کرده (initial key) و وقتی کاربر به حرکت (gesture drag) ادامه داد ما باید اون آیتم های فعلی ای که کاربر روی اون drag کرده رو داشته باشیم و به طور مداوم آپدیتش کنیم (current key) تا بدونیم که کدوم آیتم ها select/deselect شده. حالا این اطلاعات(initial key و current key) رو از کجا بیاریم تا توی gesture مون ازش استفاده کنیم؟ lazyGrid توی compose از طریق state اش اطلاعاتی مانند : position و size و .. رو داره و ما میتونیم به این اطلاعات دسترسی داشته باشیم با استفاده از LazyGridState و بعد پاسِش بدیم به gesture handler مون.@Composable private fun PhotoGrid() { val photos by rememberSaveable { mutableStateOf(List(100) { it }) } val selectedIds = rememberSaveable { mutableStateOf(emptySet<Int>()) } val inSelectionMode by remember { derivedStateOf { selectedIds.value.isNotEmpty() } } val state = rememberLazyGridState() // NEW LazyVerticalGrid( state = state, // NEW columns = GridCells.Adaptive(minSize = 128.dp), verticalArrangement = Arrangement.spacedBy(3.dp), horizontalArrangement = Arrangement.spacedBy(3.dp), modifier = Modifier.photoGridDragHandler(state, selectedIds) // NEW ) { //.. } }ما میتونیم از pointerInput و متد detectDragGesturesAfterLongPress استفاده کنیم برای تنظیم و مدیریت drag عمل کشیدن.توضیحی در مورد pointerinput modifier : این modifier حرکت (gesture) لمس، ماوس و قلم رو تشخیص میده و مدیریت میکنه.fun Modifier.photoGridDragHandler( lazyGridState: LazyGridState, selectedIds: MutableState<Set<Int>> ) = pointerInput(Unit) { var initialKey: Int? = null var currentKey: Int? = null detectDragGesturesAfterLongPress( = { offset -> .. }, onDragCancel = { initialKey = null }, = { initialKey = null }, = { change, _ -> .. } ) }خب حالا بیاین on drag start رو پیاده سازی کنیم : on DragStart = { offset -> lazyGridState.gridItemKeyAtPosition(offset)?.let { key -> // #1 if (!selectedIds.value.contains(key)) { // #2 initialKey = key currentKey = key selectedIds.value = selectedIds.value + key // #3 } } }بیاین ببینم چه خبره توش: gridItemKeyAtPosition این متد میاد : 1- با استفاده از position، size و .. grid مون 2- و با استفاده از موقعیت نشانگر (pointer position) که حاوی مختصات x و y هستش که کاربر لمس کرده(همون offset) --> با استفاده از اینا میاد آیتمی که کاربر long press کرده و از اونجا drag کردن رو شروع کرده رو بهمون میده.* اگه اون آیتم رو پیدا کرد و آیتِمِه select نشده باشه هنوز، میاد آیدی آیتم رو واسه initialKey و currentKey سِت میکنه و اون آیتمه(id یا key) رو به لیست انتخاب شده ها اضافه میکنه.خب ما الان باید این اکستنشن فانکشن (gridItemKeyAtPosition) رو برای LazyGridState بنویسیم :// The key of the photo underneath the pointer. Null if no photo is hit by the pointer. fun LazyGridState.gridItemKeyAtPosition(hitPoint: Offset): Int? = layoutInfo.visibleItemsInfo.find { itemInfo -> itemInfo.size.toIntRect().contains(hitPoint.round() - itemInfo.offset) }?.key as? Intاین متد میاد چک میکنه: اگر موقعیت نشانگر(hit point یا همون انگشت کاربر فرض کنین) مختصات x و y اش با مختصات آیتمی توی grid مطابقت داشت، میاد key یا همون id اون آیتم رو return میکنه.خب حالا فقط باید on drag lambda رو آپدیت کنیم؛ این متد : بطور مرتب وقتی که کاربر نشانگر اش(انگشت، قلم، ماوس و..) رو روی screen حرکت میده، صدا زده میشه. on Drag = { change, _ -> if (initialKey != null) { // Add or remove photos from selection based on drag position lazyGridState.gridItemKeyAtPosition(change.position)?.let { key -> if (currentKey != key) { selectedIds.value = selectedIds.value .minus(initialKey!!..currentKey!!) .minus(currentKey!!..initialKey!!) .plus(initialKey!!..key) .plus(key..initialKey!!) currentKey = key } } } }عمل کشیدن (dragging) قاعدتا زمانی انجام میشه که initialKey سِت شده باشه و این lambda میاد براساس initialKey و currentKey، آیتم های select شده رو آپدیت میکنه --> در نتیجه مطمئن میشیم که همه آیتم های بین initialKey و currentKey انتخاب شدند. الان ما میتونیم چندین آیتم رو انتخاب کنیم با drag کردن : خود grid یه رفتاری برای کلیک کردن داره (clickable behavior) ولی ما نمیخوایم اونجوری باشه، میخوایم رفتاری داشته باشیم که هم بتونیم آیتم هارو اضافه/حذف کنیم و هم accessibility و سرویس هایی مثل Talkback گوگل رو ساپورت کنه. ما این کار رو با استفاده از semantic property onLongClick انجام میدیم:ImageItem(inSelectionMode, selected, Modifier .semantics { if (!inSelectionMode) { onLongClick("Select") { selectedIds.value += id true } } } .then(if (inSelectionMode) { Modifier.toggleable( value = selected, interactionSource = remember { MutableInteractionSource() }, indication = null, // do not show a ripple onValueChange = { if (it) { selectedIds.value += id } else { selectedIds.value -= id } } ) } else Modifier) )این Semantic modifier یه سری معنی های اضافه ای به UI تون میده تا سرویس های accessibility مثل Talkback بتونه UI تون رو بفهمه و بدون اینکه کاربر صفحه رو لمس کنه این سرویس(مثلا) میاد مثل یه واسط بین کاربر و UI ما قرار میگیره و برای کاربر توضیح میده و هر عملی که کاربر میخواد رو انجام میده با UI.و با استفاده از toggleable هم مطمئن میشیم اگه کاربری از سرویس Talkback استفاده میکنه، میتونه اطلاعاتی درباره وضعیت انتخاب شده فعلی داشته باشه.پیمایش (scroll) هنگام drag ما میخوایم وقتی کاربر به لبه screen رسید آیتم ها scroll بشن و همچنین هرچقدر که کاربر به لبه نزدیک تر میشه، ما باید سرعت scroll رو هم افزایش بدیم.نتیجه اش یه همچین چیزی میشه : اول، ما باید کنترل کننده drag مون رو تغییر بدیم تا بتونیم سرعت پیمایش رو بر اساس فاصله از بالا یا پایین grid مون تنظیم کنیم : fun Modifier.photoGridDragHandler( lazyGridState: LazyGridState, selectedIds: MutableState<Set<Int>>, autoScrollSpeed: MutableState<Float>, autoScrollThreshold: Float ) = pointerInput(Unit) { //.. detectDragGesturesAfterLongPress( = { offset -> .. }, onDragCancel = { initialKey = null; autoScrollSpeed.value = 0f }, = { initialKey = null; autoScrollSpeed.value = 0f }, = { change, _ -> if (initialKey != null) { // NEW // If dragging near the vertical edges of the grid, start scrolling val distFromBottom = lazyGridState.layoutInfo.viewportSize.height - change.position.y val distFromTop = change.position.y autoScrollSpeed.value = when { distFromBottom < autoScrollThreshold -> autoScrollThreshold - distFromBottom distFromTop < autoScrollThreshold -> -(autoScrollThreshold - distFromTop) else -> 0f } // Add or remove photos from selection based on drag position lazyGridState.gridItemKeyAtPosition(change.position) ?.let { key -> .. } } } } ) }الان این تغییراتی که برای سرعت اسکرول تو کنترل کننده gesture مون انجام دادیم کافی نیست، باید PhotoGrid رو هم آپدیت کنیم تا تغییرات سرعت توی اسکول لحاظ بشه :@Composable private fun PhotoGrid() { //.. // How fast the grid should be scrolling at any given time. The closer the // user moves their pointer to the bottom of the screen, the faster the scroll. val autoScrollSpeed = remember { mutableStateOf(0f) } // Executing the scroll LaunchedEffect(autoScrollSpeed.floatValue) { if (autoScrollSpeed.floatValue != 0f) { while (isActive) { state.scrollBy(autoScrollSpeed.floatValue) delay(10) } } } LazyVerticalGrid( //.. modifier = Modifier.photoGridDragHandler( lazyGridState = state, selectedIds = selectedIds, autoScrollSpeed = autoScrollSpeed, // NEW autoScrollThreshold = with(LocalDensity.current) { 40.dp.toPx() } // NEW ) ) { items(photos, key = { it }) { id -> //.. } } }هر وقت مقدار سرعت اسکرول تغییر کرد، LaunchedEffect با خبر میشه و اونو لحاظ میکنه داخل اسکرول.لمس نهایی (final touche)خب بیاید با یه سری اضافات و اضافه کردن عکس ها، به مثال ایده آل مون برسیم :private class Photo(val id: Int, val url: String) @Composable private fun PhotoGrid() { val photos by rememberSaveable { mutableStateOf(List(100) { Photo(it, randomSampleImageUrl()) }) } .. } /** * A square image that can be shown in a grid, in either selected or deselected state. */ @Composable private fun ImageItem( photo: Photo, inSelectionMode: Boolean, selected: Boolean, modifier: Modifier = Modifier ) { Surface( modifier = modifier.aspectRatio(1f), tonalElevation = 3.dp ) { Box { val transition = updateTransition(selected, label = "selected") val padding by transition.animateDp(label = "padding") { selected -> if (selected) 10.dp else 0.dp } val roundedCornerShape by transition.animateDp(label = "corner") { selected -> if (selected) 16.dp else 0.dp } Image( painter = rememberAsyncImagePainter(photo.url), contentDescription = null, modifier = Modifier .matchParentSize() .padding(padding.value) .clip(RoundedCornerShape(roundedCornerShape.value)) ) if (inSelectionMode) { if (selected) { val bgColor = MaterialTheme.colorScheme.surfaceColorAtElevation(3.dp) Icon( Icons.Filled.CheckCircle, tint = MaterialTheme.colorScheme.primary, contentDescription = null, modifier = Modifier .padding(4.dp) .border(2.dp, bgColor, CircleShape) .clip(CircleShape) .background(bgColor) ) } else { Icon( Icons.Filled.RadioButtonUnchecked, tint = Color.White.copy(alpha = 0.7f), contentDescription = null, modifier = Modifier.padding(6.dp) ) } } } } } fun randomSampleImageUrl() = "https://picsum.photos/seed/${(0..100000).random()}/256/256"خُبب! امیدوارم خوشتون اومده باشه، اگه نظری، پیشنهادی، باگی چیزی بود لطفا تو کامنت ها به اشتراک بذارین. منبعکد هارو یکجا میتونین تو این gist ببینینکانال تلگرام Android CornerAndroid CornerAndroid CornerWed, 09 Aug 2023 18:16:15 +0330