Yapılandırma değişikliklerini işleme

Duyarlı kullanıcı arayüzü ve gezinme

Kullanıcılarınıza mümkün olan en iyi gezinme deneyimini sunmak için genişlik, yükseklik ve görünüm özelliklerine göre uyarlanmış bir gezinme kullanıcının cihazından en küçük genişlikte olmalıdır. Bir alt uygulama çubuğunda her zaman mevcut veya daraltılabilir gezinme çekmecesi, bir demiryolu, veya mevcut ekran alanına dayalı olarak tamamen yeni bir şey de uygulamasının benzersiz bir tarzı vardır.

Ray, gezinme çekmeceleri ve alt uygulama çubuğu örnekleri
Şekil 1. Ray, gezinme çekmecesi ve alt uygulama çubuğunu kullanın.

Materyal tasarım ürün mimarisi rehberi duyarlı bir kullanıcı arayüzü oluşturmak için ek bağlam ve dikkat edilmesi gereken ortamdaki değişikliklere dinamik olarak uyum sağlayan bir kullanıcı arayüzü. Bu proje bağlamında çevresel değişiklikler de dahil olmak üzere, genişlik, yükseklik, yön ve kullanıcının dil tercihi. Bu çevresel özellikler toplu olarak Buna cihazın yapılandırması denir.

Çalışma zamanında bu özelliklerden biri veya daha fazlası değiştiğinde Android OS yanıt verir. - uygulamanızın etkinliklerini ve parçalarını yok edip yeniden oluşturma. Dolayısıyla, Android'de duyarlı bir kullanıcı arayüzünü desteklemek için yapabileceğiniz en iyi şey, kaynak yapılandırması niteleyicileri ve uygun olduğunda sabit kodlu düzen boyutlarının kullanılmasını önleyin.

Duyarlı bir kullanıcı arayüzünde genel gezinme uygulama

Duyarlı kullanıcı arayüzünün bir parçası olarak genel gezinmeyi uygulamak gezinme grafiğinizi barındıran etkinliktir. Uygulamalı bir örnek için dışarıda Gezinme codelab'i Codelab, NavigationView kullanır. dokunarak gezinme menüsünü Şekil 2'de gösterildiği gibi görüntüleyin. Cihazda çalışırken en az 960 dp genişlikte oluşturulursa bu NavigationView her zaman ekranda görebilirsiniz.

gezinme codelab'i her zaman görünür olan bir gezinme görünümü kullanır cihaz genişliği en az 960 dp olduğunda
Şekil 2. Gezinme codelab'i, Gezinme menüsünü görüntülemek için NavigationView tuşlarına basın.

Diğer cihaz boyutları ve yönleri; DrawerLayout veya BottomNavigationView gerekir.

gezinme için kullanılan bir alt gezinme görünümü ve bir çekmece düzeni daha küçük cihaz düzenlerinde gerektiğinde menü
Şekil 3. Gezinme codelab'i, Gösterilecek BottomNavigationView ve DrawerLayout daha küçük boyutlu cihazlarda gezinme menüsüne gidin.

Her biri ayrı ayrı düzenleyebileceğiniz üç farklı düzen oluşturarak bu davranışı uygulayabilirsiniz. düzeni temel alarak istenen gezinme öğelerini ve görünüm hiyerarşisini Mevcut cihaz yapılandırması.

Her bir düzenin geçerli olduğu yapılandırma, dizine göre belirlenir. düzen dosyasının yerleştirildiği yapıyı kullanabilirsiniz. Örneğin, NavigationView düzen dosyası res/layout-w960dp dizininde bulundu.

<!-- res/layout-w960dp/navigation_activity.xml -->
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.example.android.codelabs.navigation.MainActivity">

   <com.google.android.material.navigation.NavigationView
       android:id="@+id/nav_view"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_alignParentStart="true"
       app:elevation="0dp"
       app:headerLayout="@layout/nav_view_header"
       app:menu="@menu/nav_drawer_menu" />

   <View
       android:layout_width="1dp"
       android:layout_height="match_parent"
       android:layout_toEndOf="@id/nav_view"
       android:background="?android:attr/listDivider" />

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentTop="true"
       android:layout_toEndOf="@id/nav_view"
       android:background="@color/colorPrimary"
       android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />

   <androidx.fragment.app.FragmentContainerView
       android:id="@+id/my_nav_host_fragment"
       android:name="androidx.navigation.fragment.NavHostFragment"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_below="@id/toolbar"
       android:layout_toEndOf="@id/nav_view"
       app:defaultNavHost="true"
       app:navGraph="@navigation/mobile_navigation" />
</RelativeLayout>

Alt gezinme görünümü res/layout-h470dp dizininde bulunur:

<!-- res/layout-h470dp/navigation_activity.xml -->
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical"
   tools:context="com.example.android.codelabs.navigation.MainActivity">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@color/colorPrimary"
       android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />

   <androidx.fragment.app.FragmentContainerView
       android:id="@+id/my_nav_host_fragment"
       android:name="androidx.navigation.fragment.NavHostFragment"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"
       app:defaultNavHost="true"
       app:navGraph="@navigation/mobile_navigation" />

   <com.google.android.material.bottomnavigation.BottomNavigationView
       android:id="@+id/bottom_nav_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:menu="@menu/bottom_nav_menu" />
</LinearLayout>

Çekmece düzeni, res/layout dizininde bulunur. Bu dizini şunun için kullanın: yapılandırmaya özel niteleyici içermeyen varsayılan düzenler:

<!-- res/layout/navigation_activity.xml -->
<androidx.drawerlayout.widget.DrawerLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:id="@+id/drawer_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.example.android.codelabs.navigation.MainActivity">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

       <androidx.appcompat.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@color/colorPrimary"
           android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar" />

       <androidx.fragment.app.FragmentContainerView
           android:id="@+id/my_nav_host_fragment"
           android:name="androidx.navigation.fragment.NavHostFragment"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:defaultNavHost="true"
           app:navGraph="@navigation/mobile_navigation" />
   </LinearLayout>

   <com.google.android.material.navigation.NavigationView
       android:id="@+id/nav_view"
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       app:menu="@menu/nav_drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>

Android, bir öncelik sırası karar verirken göz önünde bulundurmanız gerekir. Bu örneğe özel olarak: -w960dp (veya kullanılabilir genişlik >= 960 dp), -h470dp değerine (veya kullanılabilir) göre önceliklidir yükseklik >= 470). Cihaz yapılandırması bu ikisinden biriyle eşleşmiyorsa koşullarını değiştirdikten sonra varsayılan düzen kaynağı (res/layout/navigation_activity.xml) kullanılıyor.

Gezinme etkinliklerini işlemede, yalnızca karşılık gelen etkinlikleri bağlamanız gerekir mevcut olan widget'lara otomatik olarak eklenmesini sağlar.

Kotlin

class MainActivity : AppCompatActivity() {

   private lateinit var appBarConfiguration : AppBarConfiguration

   override fun onCreate(savedInstanceState: Bundle?) {
      super.onCreate(savedInstanceState)
      setContentView(R.layout.navigation_activity)
      val drawerLayout : DrawerLayout? = findViewById(R.id.drawer_layout)
      appBarConfiguration = AppBarConfiguration(
                  setOf(R.id.home_dest, R.id.deeplink_dest),
                  drawerLayout)

      ...

      // Initialize the app bar with the navigation drawer if present.
      // If the drawerLayout is not null here, a Navigation button will be added
      // to the app bar whenever the user is on a top-level destination.
      setupActionBarWithNavController(navController, appBarConfig)

      // Initialize the NavigationView if it is present,
      // so that clicking an item takes
      // the user to the appropriate destination.
      val sideNavView = findViewById<NavigationView>(R.id.nav_view)
      sideNavView?.setupWithNavController(navController)

      // Initialize the BottomNavigationView if it is present,
      // so that clicking an item takes
      // the user to the appropriate destination.
      val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav_view)
      bottomNav?.setupWithNavController(navController)

      ...
    }

    ...
}

Java

public class MainActivity extends AppCompatActivity {

   private AppBarConfiguration appBarConfiguration;

   @Override
   protected void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.navigation_activity);
       NavHostFragment host = (NavHostFragment) getSupportFragmentManager()
               .findFragmentById(R.id.my_nav_host_fragment);
       NavController navController = host.getNavController();

       DrawerLayout drawerLayout = findViewById(R.id.drawer_layout);
       appBarConfiguration = new AppBarConfiguration.Builder(
               R.id.home_dest, R.id.deeplink_dest)
               .setDrawerLayout(drawerLayout)
               .build();

       // Initialize the app bar with the navigation drawer if present.
       // If the drawerLayout is not null here, a Navigation button will be added to
       // the app bar whenever the user is on a top-level destination.
       NavigationUI.setupActionBarWithNavController(
               this, navController, appBarConfiguration);


       // Initialize the NavigationView if it is present,
       // so that clicking an item takes
       // the user to the appropriate destination.
       NavigationView sideNavView = findViewById(R.id.nav_view);
       if(sideNavView != null) {
           NavigationUI.setupWithNavController(sideNavView, navController);
       }

       // Initialize the BottomNavigationView if it is present,
       // so that clicking an item takes
       // the user to the appropriate destination.
       BottomNavigationView bottomNav = findViewById(R.id.bottom_nav_view);
       if(bottomNav != null) {
           NavigationUI.setupWithNavController(bottomNav, navController);
       }

   }
}

Açık bir şekilde belirtilmediği sürece cihaz yapılandırması değişirse ayarlanmamışsa Android, önceki yapılandırmadaki etkinliği kendi etkinliğiyle birlikte kaldırır. görünüm. Daha sonra etkinliği yeni yapılandırma. Etkinliğin kaldırılması ve yeniden oluşturulması, ardından onCreate() içindeki uygun genel gezinme öğelerini otomatik olarak bağlar.

Bölünmüş görünüm düzenlerinin alternatiflerini değerlendirin

Bölünmüş görünüm düzenleri veya ana/ayrıntı düzenleri önceden kullanılıyordu. tabletler ve diğer büyük ekranlar için tasarım yapmanın çok popüler ve önerilen bir yoludur cihazlar.

Android tabletlerin kullanıma sunulmasından bu yana cihaz ekosistemi büyüdü pek çok yolu vardır. Büyük web sitelerinin tasarım alanını önemli ölçüde etkileyen ekranlı cihazlarda çoklu pencere modları, özellikle de ChromeOS cihazlardakiler gibi tamamen yeniden boyutlandırılabilen serbest biçimli pencereler Bu da uygulamanızın her ekranında önemli ölçüde daha fazla ekrana göre gezinme yapınızı değiştirmek yerine duyarlı hale getirme seçin.

Bölünmüş görünüm düzen arayüzü uygulamak için kullanıyorsanız diğer alternatifleri değerlendirin.

Hedef adları

Grafiğinizde android:label kullanarak hedef adları sağlarsanız özelliği kullanıyorsanız, içeriğinizin yine de yerelleştirilmesini sağlamak.

<navigation ...>
    <fragment
        android:id="@+id/my_dest"
        android:name="com.example.MyFragment"
        android:label="@string/my_dest_label"
        tools:layout="@layout/my_fragment" />
    ...

Kaynak değerleri kullanıldığında hedefleriniz otomatik olarak en uygun olan değere sahiptir kaynak sayısını artırır.