Eyalet sahipleri ve kullanıcı arayüzü durumu

Kullanıcı arayüzü katmanı kılavuzunda, tek yönlü veri akışı (UDF) kullanıcı arayüzü katmanı için Kullanıcı Arayüzü Durumunun oluşturulması ve yönetilmesi.

Ayrıca UDF yönetimi için özel bir sınıfa delege etmenin avantajları da vurgulanmaktadır. bir durum söz konusu. Bir eyalet sahibini ViewModel veya düz bir sınıf. Bu dokümanda durum daha ayrıntılı olarak ele alınmaktadır kullanıcı arayüzü katmanında oynadıkları role değineceğiz.

Bu belgenin sonunda, bir projeyi yönetmek için kullanıcı arayüzü katmanındaki uygulama durumu; yani kullanıcı arayüzü durumu üretim ardışık düzenidir. Siz şunları anlayabilmeli ve bilmelidir:

• Kullanıcı arayüzü katmanındaki kullanıcı arayüzü durumu türlerini anlayın.
• Kullanıcı arayüzü katmanındaki bu kullanıcı arayüzü durumları üzerinde çalışan mantık türlerini anlayın.
• Bir eyalet sahibinin uygun uygulamasını nasıl seçeceğinizi öğrenin; örneğin, ViewModel veya basit bir sınıf.

Kullanıcı arayüzü durumu üretim ardışık düzeninin öğeleri

Kullanıcı arayüzü durumu ve bunu oluşturan mantık, kullanıcı arayüzü katmanını tanımlar.

Kullanıcı arayüzü durumu

Kullanıcı arayüzü durumu, kullanıcı arayüzünü açıklayan özelliktir. İki tür kullanıcı arayüzü vardır eyalet:

• Ekran kullanıcı arayüzü durumu, ekranda görüntülemeniz gereken ifadedir. Örneğin, NewsUiState sınıfı, gerekli haber makalelerini ve diğer bilgileri içerebilir oluşturmak istiyorum. Bu durum genellikle öğenin diğer katmanlarıyla uygulama verileri içerdiğinden hiyerarşik olarak yapılandırılmıştır.
• Kullanıcı arayüzü öğesi durumu, öğelerin dışında kalan kullanıcı arayüzü öğelerinin nasıl oluşturulduğunu etkiler. Kullanıcı arayüzü öğeleri gösterilebilir veya gizlenebilir. yazı tipi, yazı tipi boyutu veya yazı tipi rengine sahip olduğundan emin olun. Android Görünümlerinde, Görünüm doğası gereği durum bilgili olduğu için bu durumu yönetir. Son olarak da veya sorgulayabilir. get ve metni için TextView sınıfının set yöntemlerini. Jetpack'te Oluşturma, durum composable'ın dışındadır ve hatta kaldırılabilir composable'ın yakın çevresinden çağrıda bulunan composable'a bir işlev veya durum tutucuyu ifade eder. Şu konum için ScaffoldState buna bir örnektir: Scaffold composable.

Mantık

Uygulama verileri ve kullanıcı etkinlikleri, kullanıcı arayüzüne neden olduğundan kullanıcı arayüzü durumu statik bir özellik değildir zamanla değişecek. Mantık, değişikliğin ayrıntılarını belirler. ve kullanıcı arayüzü durumunun hangi kısımlarının değiştiği, neden değiştiği biraz farklıdır.

Bir uygulamadaki mantık, iş mantığı veya kullanıcı arayüzü mantığı olabilir:

• İş mantığı, uygulama için ürün şartlarının uygulanmasıdır. dışı verilerdir. Örneğin, kullanıcı haber okuyucu uygulamasındaki bir makaleye yer işareti koyduğunda düğmeye dokunur. Yer işaretini bir dosyaya veya veritabanına kaydetmek için bu mantık genellikle alan adına veya veri katmanlarına yerleştirilir. Eyalet sahibi genellikle gösterdikleri yöntemleri çağırarak bu mantığı bu katmanlara delege eder.
• Kullanıcı arayüzü mantığı, ekranda kullanıcı arayüzü durumunun nasıl gösterileceğiyle ilgilidir. Örneğin, Örneğin, kullanıcı bir seçim yaptığında doğru arama çubuğu ipucunu liste içinde belirli bir öğeye gitmek için kaydırma mantığı veya gezinme mantığı Kullanıcı bir düğmeyi tıkladığında belirli bir ekrana yönlendirilir.

Android yaşam döngüsü ile kullanıcı arayüzü durumu ve mantığı türleri

Kullanıcı arayüzü katmanı, biri bağımlı, diğeri ise kullanıcı arayüzünden bağımsız olmak üzere iki bölümden oluşur. yaşam döngüsü boyunca geçerlidir. Bu ayırma, her bir bölüm için kullanılabilecek veri kaynaklarını belirler Dolayısıyla farklı türlerde kullanıcı arayüzü durumu ve mantığı gerekir.

• Kullanıcı arayüzü yaşam döngüsünden bağımsız: Kullanıcı arayüzü katmanının bu kısmı verilerle ilgilenir. Uygulamanın katmanlarını (veri veya alan katmanları) üretme ve işletme tarafından tanımlanan mantığıyla başlayalım. Kullanıcı arayüzünde yaşam döngüsü, yapılandırma değişiklikleri ve Activity yeniden oluşturma kullanıcı arayüzü durumu üretim ardışık düzeninin etkin olup olmadığını etkileyebilir ancak etkilemez üretilen verilerin geçerliliğini kontrol etmek.
• Kullanıcı arayüzü yaşam döngüsüne bağlıdır: Kullanıcı arayüzü katmanının bu bölümü, kullanıcı arayüzü mantığı ve veya yapılandırma değişikliklerinden doğrudan etkilenir. Bu değişiklikler veri kaynaklarının geçerliliğini doğrudan etkilemeli ve aynı zamanda bu sonucun durumu yalnızca yaşam döngüsü etkin olduğunda değişebilir. Örnekler Buna çalışma zamanı izinleri ve yapılandırmaya bağlı kaynakları alma dahildir yardımcı olabilir.

Yukarıdakiler, aşağıdaki tabloyla özetlenebilir:

Kullanıcı arayüzü durumu üretim ardışık düzeni

Kullanıcı arayüzü durumu üretim ardışık düzeni, kullanıcı arayüzü üretmek için atılan adımları ifade eder durumu. Bu adımlarda, en az 100 farklı modelde tanımlanan mantık türlerinin tamamen kullanıcı arayüzünüzün ihtiyaçlarına bağlıdır. Bazı kullanıcı arayüzleri hem Kullanıcı Arayüzü Yaşam Döngüsü'nden bağımsız hem de Kullanıcı Arayüzü Yaşam Döngüsü'ne bağlı olabilir ya da hiçbirini kullanamazsınız.

Yani kullanıcı arayüzü katmanı ardışık düzeninin aşağıdaki permütasyonları geçerlidir:

• Kullanıcı arayüzü durumu, kullanıcı arayüzü tarafından oluşturulur ve yönetilir. Örneğin, yeniden kullanılabilir temel sayaç:

  @Composable
  fun Counter() {
      // The UI state is managed by the UI itself
      var count by remember { mutableStateOf(0) }
      Row {
          Button(onClick = { ++count }) {
              Text(text = "Increment")
          }
          Button(onClick = { --count }) {
              Text(text = "Decrement")
          }
      }
  }
  

• Kullanıcı arayüzü mantığı → Kullanıcı arayüzü. Örneğin, bir kullanıcının şunları yapmasına olanak tanıyan bir düğmeyi gösterme veya gizleme listenin en üstüne atlar.

  @Composable
  fun ContactsList(contacts: List<Contact>) {
      val listState = rememberLazyListState()
      val isAtTopOfList by remember {
          derivedStateOf {
              listState.firstVisibleItemIndex < 3
          }
      }
  
      // Create the LazyColumn with the lazyListState
      ...
  
      // Show or hide the button (UI logic) based on the list scroll position
      AnimatedVisibility(visible = !isAtTopOfList) {
          ScrollToTopButton()
      }
  }
  

• İş mantığı → Kullanıcı arayüzü. Geçerli kullanıcının fotoğrafını tıklayın.

  @Composable
  fun UserProfileScreen(viewModel: UserProfileViewModel = hiltViewModel()) {
      // Read screen UI state from the business logic state holder
      val uiState by viewModel.uiState.collectAsStateWithLifecycle()
  
      // Call on the UserAvatar Composable to display the photo
      UserAvatar(picture = uiState.profilePicture)
  }
  

• İş mantığı → Kullanıcı arayüzü mantığı → Kullanıcı arayüzü. Ekrandaki ekranda doğru bilgileri gösterir.

  @Composable
  fun ContactsList(viewModel: ContactsViewModel = hiltViewModel()) {
      // Read screen UI state from the business logic state holder
      val uiState by viewModel.uiState.collectAsStateWithLifecycle()
      val contacts = uiState.contacts
      val deepLinkedContact = uiState.deepLinkedContact
  
      val listState = rememberLazyListState()
  
      // Create the LazyColumn with the lazyListState
      ...
  
      // Perform UI logic that depends on information from business logic
      if (deepLinkedContact != null && contacts.isNotEmpty()) {
          LaunchedEffect(listState, deepLinkedContact, contacts) {
              val deepLinkedContactIndex = contacts.indexOf(deepLinkedContact)
              if (deepLinkedContactIndex >= 0) {
                // Scroll to deep linked item
                listState.animateScrollToItem(deepLinkedContactIndex)
              }
          }
      }
  }
  

Kullanıcı arayüzü durumu üretimine her iki mantığın da uygulandığı durumlarda ardışık düzende iş mantığının her zaman kullanıcı arayüzü mantığından önce uygulanması gerekir. Uygulamaya çalışılıyor kullanıcı arayüzü mantığından sonraki iş mantığı, iş mantığının kullanıcı arayüzüne bağlı olduğu anlamına gelir. mantığıyla başlayalım. Aşağıdaki bölümlerde bunun neden bir sorun olduğu ele alınmaktadır: ve bunların durumları hakkında bilgi edindiniz.

Devlet sahipleri ve sorumlulukları

Eyalet sahiplerinin sorumluluğu, uygulamanın okuyabilmesi için durumu depolamaktır. Mantığın gerekli olduğu durumlarda, aracı işlevi görür ve aynı mantığı barındıran veri kaynaklarına yönlendirir. Bu şekilde devlet başkanının mantığın uygun veri kaynağına devredilmesini sağlar.

Bunun sonucunda da şu faydalar elde edilir:

• Basit kullanıcı arayüzleri: Kullanıcı arayüzü yalnızca durumunu bağlar.
• Sürdürülebilirlik: Durum sahibinde tanımlanan mantık yinelenebilir en iyi uygulamaları paylaşacağız.
• Test edilebilirlik: Kullanıcı arayüzü ve durum üretim mantığı test edilebilir. bağımsız olarak değiştirebilirsiniz.
• Okunabilirlik: Kodun okuyucuları kullanıcı arayüzü arasındaki farklılıkları net bir şekilde görebilir. sunum kodu ve kullanıcı arayüzü durumu üretim kodu.

Boyutu veya kapsamı ne olursa olsun, her kullanıcı arayüzü öğesinin doğrudan ilgili eyalet sahibiyle iletişime geçiyorum. Ayrıca, bir eyalet sahibi şu özelliklere sahip olmalıdır: kullanıcı arayüzü durumunun değişmesine neden olabilecek herhangi bir kullanıcı işlemini kabul edip ve sonuçtaki durum değişikliğini üretmelidir.

Eyalet sahiplerinin türleri

Kullanıcı arayüzü durumu ve mantığı türlerine benzer olarak, iki tür durum sahibi vardır. kullanıcı arayüzü yaşam döngüsüyle ilişkilerine göre tanımlanan kullanıcı arayüzü katmanında:

• İş mantığı durum tutucusu.
• Kullanıcı arayüzü mantığı durum tutucusu.

Aşağıdaki bölümlerde, devlet sahibi olan içerik üreticilerin, iş mantığı durum sahibiyle başlayın.

İş mantığı ve durum sahibi

İş mantığı durumu sahipleri, kullanıcı etkinliklerini işler ve verilerden veya alandan veri dönüştürür kullanıcı arayüzü durumuna ayarlayın. Projeniz sırasında optimum kullanıcı deneyimi uygulama yapılandırmasında ve uygulama yapılandırmalarında yapılan değişiklikleri göz önünde bulundurarak aşağıdaki özelliklere sahip olması gerekir:

Örneğin, "Now Android" uygulama:

İş mantığının devlet sahibi olarak, AuthorViewModel, bu durumda kullanıcı arayüzü durumunu oluşturur:

@HiltViewModel
class AuthorViewModel @Inject constructor(
    savedStateHandle: SavedStateHandle,
    private val authorsRepository: AuthorsRepository,
    newsRepository: NewsRepository
) : ViewModel() {

    val uiState: StateFlow<AuthorScreenUiState> = …

    // Business logic
    fun followAuthor(followed: Boolean) {
      …
    }
}

AuthorViewModel öğesinin, daha önce belirtilen özelliklere sahip olduğuna dikkat edin:

İş mantığı durum sahibi olarak ViewModel

ViewModels'in Android geliştirmedeki avantajları, onları Android'de iş mantığına erişim sağlayarak uygulama verilerini hazırlayarak sunumda gösterilir. Bu avantajlar arasında şunlar yer alır:

• ViewModelleri tarafından tetiklenen işlemler, yapılandırma değişikliklerinden sonra da yürürlükte kalır.
• Gezinme ile entegrasyon:
  • Gezinme, ekran arka yığındayken ViewModel'leri önbelleğe alır. Bu yüklediğinizde anında kullanılabilir olmasını sağlamak için hedefinize dönebilirsiniz. Bu, tek bir web sitesiyle durum tutucusu oluşturabilirsiniz.
  • ViewModel, hedef arkadan dışarı doğru itildiğinde de temizlenir otomatik olarak temizlenmesini sağlar. Bu projenin yürütülmesi sırasında tamamlanması gereken yeni bir ekrana gitme gibi birden çok nedeni vardır. başka sebepler var.
• Hilt gibi diğer Jetpack kitaplıklarıyla entegrasyon.

Kullanıcı arayüzü mantığı ve durum tutucu

Kullanıcı arayüzü mantığı, kullanıcı arayüzünün sağladığı veriler üzerinde çalışan bir mantıktır. Bu, kullanıcı arayüzü öğelerinde API veya izinler API'si gibi kullanıcı arayüzü veri kaynaklarında Resources. Kullanıcı arayüzü mantığından yararlanan devlet sahipleri genellikle şu özellikleri kullanın:

• Kullanıcı arayüzü durumunu oluşturur ve kullanıcı arayüzü öğelerinin durumunu yönetir.
• Activity yeniden oluşturma işleminden sonra atlatılamaz: Kullanıcı arayüzünde barındırılan durum sahipleri mantık çoğu zaman kullanıcı arayüzünün kendisinden gelen veri kaynaklarına bağlıdır ve yapılandırma değişiklikleri sırasında bu bilgileri, bir hataya neden olmamasına olabilir. Durum sahiplerinin yapılandırma genelinde devamlılık sağlamak için verilere ihtiyacı varsa onlar da hayatta kalmak için daha uygun başka bir bileşene devredilmesi gerekiyor. Activity rekreasyon. Örneğin, Jetpack Compose'da Özelleştirilebilir kullanıcı arayüzü öğesi durumları remembered işlevleriyle oluşturulan işlevler genellikle rememberSaveable Activity yeniden oluşturma genelinde durumu koruma. Bu tür işlevlere örnekler rememberScaffoldState() ve rememberLazyListState() dahildir.
• Kullanıcı arayüzü kapsamlı veri kaynaklarına referanslar içeriyor: Aşağıdaki gibi veri kaynakları yaşam döngüsü API'lerine ve kaynaklarına kullanıcı arayüzü mantığı olarak güvenli bir şekilde başvuruda bulunulabilir ve bunlar, kullanıcı arayüzü ile aynı yaşam döngüsüne sahiptir.
• Birden fazla kullanıcı arayüzünde yeniden kullanılabilir. Aynı kullanıcı arayüzü mantığının farklı örnekleri uygulamanın farklı bölümlerinde yeniden kullanılabilir. Örneğin, Yeşil Ofis’in çip grubu için kullanıcı girişi etkinliklerini yönetmeye yarayan tutucu (aramada kullanılabilir) sayfası ve ayrıca "alıcı" için de alanına sahip olmanız gerekir.

Kullanıcı arayüzü mantık durumu tutucusu genellikle düz bir sınıfla uygulanır. Bu çünkü kullanıcı arayüzü mantık durumunun oluşturulmasından kullanıcı arayüzünün kendisi sorumludur. tutucu ve kullanıcı arayüzü mantık durumu tutucusu, kullanıcı arayüzüyle aynı yaşam döngüsüne sahiptir. Örneğin Jetpack Compose'da eyalet sahibi Beste'nin ve bestenin yaşam döngüsünü takip eder.

Bu, aşağıdaki örnekte Şimdi Android örneğinde:

Android'de Now örneği, cihazın ekran boyutuna göre nasıl gezineceğinizi belirleyin. Daha küçük ekranlarda daha büyük ekranlara erişebilirsiniz.

NiaApp composable işlevi iş mantığına bağlı değildir, yönetilebilir NiaAppState adlı bir düz sınıf durum sahibi tarafından:

@Stable
class NiaAppState(
    val navController: NavHostController,
    val windowSizeClass: WindowSizeClass
) {

    // UI logic
    val shouldShowBottomBar: Boolean
        get() = windowSizeClass.widthSizeClass == WindowWidthSizeClass.Compact ||
            windowSizeClass.heightSizeClass == WindowHeightSizeClass.Compact

    // UI logic
    val shouldShowNavRail: Boolean
        get() = !shouldShowBottomBar

   // UI State
    val currentDestination: NavDestination?
        @Composable get() = navController
            .currentBackStackEntryAsState().value?.destination

    // UI logic
    fun navigate(destination: NiaNavigationDestination, route: String? = null) { /* ... */ }

     /* ... */
}

Yukarıdaki örnekte, NiaAppState ile ilgili aşağıdaki ayrıntılar: Önemli:

• Activity yeniden oluşturmada hayatta kalamaz: NiaAppState, remembered konumunda Beste'yi, bir Özelleştirilebilir işleviyle oluşturarak rememberNiaAppState oluşturma adımlarını uygulayın. Activity yeniden oluşturulduktan sonra önceki örnek kaybolur ve tüm mevcut haliyle yeni bir örnek oluşturulur yeni yapılandırma konfigürasyonuna uygun olması için Activity yeniden oluşturuldu. Bu bağımlılıklar yeni veya eski deneyimden seçeneğini belirleyin. Örneğin rememberNavController(), NiaAppState oluşturucusu ve rememberSaveable için delege eder Activity yeniden oluşturma genelinde durumu koruyun.
• Kullanıcı arayüzü kapsamlı veri kaynaklarına referanslar içeriyor: navigationController, Resources ve diğer benzer yaşam döngüsü kapsamlı türler aynı yaşam döngüsü kapsamına sahip oldukları için NiaAppState içinde güvenle tutulabilirler.

Durum sahibi için ViewModel ve düz sınıf arasında seçim yapma

Yukarıdaki bölümlerde, ViewModel ve düz sınıf durumu arasında seçim yapın. değeri, kullanıcı arayüzü durumuna uygulanan mantık ve veri kaynaklarına mantığa göre hareket eder.

Özet olarak, aşağıdaki şemada, durum sahiplerinin kullanıcı arayüzündeki konumu gösterilmektedir Eyalet üretim ardışık düzeni:

Sonuç olarak, kullanıcı arayüzü durumunu en yakın durum sahiplerini kullanarak üretmeniz gerekir: nerede tüketildiğine bağlıdır. Daha resmi olmayan bir şekilde, mümkün olan en iyi sonucu verir. İşletmelere erişmeniz gerekiyorsa bir ekrana geçilebildiği sürece kullanıcı arayüzü durumunun devam etmesi gerekir. Activity eğlencesında bile ViewModel mükemmel bir seçimdir adımları uygulayın. Daha kısa ömürlü kullanıcı arayüzü durumu ve Kullanıcı arayüzü mantığı, yaşam döngüsü yalnızca kullanıcı arayüzüne bağlı olan sade bir sınıftır. yeterlidir.

Eyalet sahipleri birleştirilebilir

Devlet sahipleri, söz konusu bağımlılıklar geçerli olduğu sürece veya daha kısa olmaları gerekir. Bu tür içeriğe ilişkin bazı örnekler:

• bir kullanıcı arayüzü mantık durumu tutucusu başka bir kullanıcı arayüzü mantık durumu sahibine bağlı olabilir.
• ekran düzeyi durum tutucusu, bir kullanıcı arayüzü mantık durumu sahibine bağlı olabilir.

Aşağıdaki kod snippet'i, Compose'daki DrawerState özelliğinin başka bir dahili durum sahibi, SwipeableState ve bir uygulamanın kullanıcı arayüzü mantığı durum sahibi şuna bağlı olabilir: DrawerState:

@Stable
class DrawerState(/* ... */) {
  internal val swipeableState = SwipeableState(/* ... */)
  // ...
}

@Stable
class MyAppState(
  private val drawerState: DrawerState,
  private val navController: NavHostController
) { /* ... */ }

@Composable
fun rememberMyAppState(
  drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
  navController: NavHostController = rememberNavController()
): MyAppState = remember(drawerState, navController) {
  MyAppState(drawerState, navController)
}

Durum tutucudan daha uzun süren bir bağımlılığa örnek olarak kullanıcı arayüzü mantığı durum tutucusu farklı olabilir. Bu da gösterim sayısının daha kısa ömürlü durum sahibinin yeniden kullanılabilirliğini ve daha fazla mantığa erişmesini sağlar gerekenden çok daha fazla bilgi edindiniz.

Daha kısa süreli durum sahibi, daha üst düzey bir kişiden belirli bilgilere ihtiyaç duyuyorsa yerine, yalnızca ihtiyaç duyduğu bilgileri parametre olarak iletin. örneğinin iletilmesini sağlar. Örneğin, aşağıdaki kod snippet'inde kullanıcı arayüzü mantığı durumu tutucu sınıfı parametre olarak ihtiyacı olan her şeyi alır tüm ViewModel örneğini bir örnek olarak aktarmak yerine, desteklenmektedir.

class MyScreenViewModel(/* ... */) {
  val uiState: StateFlow<MyScreenUiState> = /* ... */
  fun doSomething() { /* ... */ }
  fun doAnotherThing() { /* ... */ }
  // ...
}

@Stable
class MyScreenState(
  // DO NOT pass a ViewModel instance to a plain state holder class
  // private val viewModel: MyScreenViewModel,

  // Instead, pass only what it needs as a dependency
  private val someState: StateFlow<SomeState>,
  private val doSomething: () -> Unit,

  // Other UI-scoped types
  private val scaffoldState: ScaffoldState
) {
  /* ... */
}

@Composable
fun rememberMyScreenState(
  someState: StateFlow<SomeState>,
  doSomething: () -> Unit,
  scaffoldState: ScaffoldState = rememberScaffoldState()
): MyScreenState = remember(someState, doSomething, scaffoldState) {
  MyScreenState(someState, doSomething, scaffoldState)
}

@Composable
fun MyScreen(
  modifier: Modifier = Modifier,
  viewModel: MyScreenViewModel = viewModel(),
  state: MyScreenState = rememberMyScreenState(
    someState = viewModel.uiState.map { it.toSomeState() },
    doSomething = viewModel::doSomething
  ),
  // ...
) {
  /* ... */
}

Aşağıdaki şemada, kullanıcı arayüzü ile farklı kullanıcılar arasındaki bağımlılıkları önceki kod snippet'inin durum sahiplerini içerir:

Örnekler

Aşağıdaki Google örnekleri, devlet sahiplerinin kullanıcı arayüzü katmanı. Uygulamadaki bu rehberliği görmek için bu yöntemleri inceleyin: