Dilim şablonları

Bu dokümanda, Android Jetpack'teki şablon oluşturucuların Dilimler oluşturmak için nasıl kullanılacağı hakkında ayrıntılı bilgiler verilmektedir.

Dilim şablonunuzu tanımlayın

Dilimler, ListBuilder kullanılarak oluşturulur. ListBuilder bir listede görüntülenen farklı satır türlerini eklemenizi sağlar. Bu bölümde, söz konusu satır türlerinin her biri ve nasıl oluşturuldukları açıklanmaktadır.

Dilim İşlemi

Dilim şablonunun en temel öğesi SliceAction öğesidir. SliceAction, PendingIntent ile birlikte bir etiket içerir ve aşağıdakilerden biridir:

• Simge düğmesi
• Varsayılan açma/kapatma
• Özel açma/kapatma düğmesi (açık/kapalı durumda olan bir çekilebilir)

SliceAction, bu bölümün geri kalanında açıklanan şablon oluşturucular tarafından kullanılır. SliceAction öğesinde, resmin işlem için nasıl sunulacağını belirleyen resim modu tanımlanabilir:

• ICON_IMAGE: küçük boyut ve renk tonu
• SMALL_IMAGE: küçük boyutlu ve renklendirilemez
• LARGE_IMAGE: en büyük boyut ve renklendirilemez

Başlık Oluşturucu

Çoğu durumda, şablonunuz için HeaderBuilder kullanarak bir başlık ayarlamanız gerekir. Üstbilgiler aşağıdakileri destekleyebilir:

• Başlık
• Alt başlık
• Özet alt başlığı
• Birincil işlem

Bazı örnek başlık yapılandırmaları aşağıda gösterilmiştir. Gri kutularda potansiyel simge ve dolgu konumlarının gösterildiğine dikkat edin:

Farklı yüzeylerde başlık oluşturma

Dilim gerektiğinde, görüntüleme yüzeyi Dilimin nasıl oluşturulacağını belirler. Oluşturmanın, barındırma yüzeyleri arasında biraz farklılık gösterebileceğini unutmayın.

Daha küçük biçimlerde, varsa genellikle yalnızca başlık görüntülenir. Başlık için özet belirttiyseniz alt başlık metni yerine özet metni gösterilir.

Şablonunuzda başlık belirtmediyseniz genellikle bunun yerine ListBuilder öğenize eklenen ilk satır gösterilir.

HeaderBuilder örneği - Başlık içeren basit liste Dilim

fun createSliceWithHeader(sliceUri: Uri) =
    list(context, sliceUri, ListBuilder.INFINITY) {
        setAccentColor(0xff0F9D) // Specify color for tinting icons
        header {
            title = "Get a ride"
            subtitle = "Ride in 4 min"
            summary = "Work in 1 hour 45 min | Home in 12 min"
        }
        row {
            title = "Home"
            subtitle = "12 miles | 12 min | $9.00"
            addEndItem(
                IconCompat.createWithResource(context, R.drawable.ic_home),
                ListBuilder.ICON_IMAGE
            )
        }
    }

public Slice createSliceWithHeader(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }

    // Construct the parent.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .setAccentColor(0xff0F9D58) // Specify color for tinting icons.
            .setHeader( // Create the header and add to slice.
                    new HeaderBuilder()
                            .setTitle("Get a ride")
                            .setSubtitle("Ride in 4 min.")
                            .setSummary("Work in 1 hour 45 min | Home in 12 min.")
            ).addRow(new RowBuilder() // Add a row.
                    .setPrimaryAction(
                            createActivityAction()) // A slice always needs a SliceAction.
                    .setTitle("Home")
                    .setSubtitle("12 miles | 12 min | $9.00")
                    .addEndItem(IconCompat.createWithResource(getContext(), R.drawable.ic_home),
                            SliceHints.ICON_IMAGE)
            ); // Add more rows if needed...
    return listBuilder.build();
}

Başlıklarda SliceActions

Dilim başlıklarında SliceActions da görüntülenebilir:

fun createSliceWithActionInHeader(sliceUri: Uri): Slice {
    // Construct our slice actions.
    val noteAction = SliceAction.create(
        takeNoteIntent,
        IconCompat.createWithResource(context, R.drawable.ic_pencil),
        ICON_IMAGE,
        "Take note"
    )

    val voiceNoteAction = SliceAction.create(
        voiceNoteIntent,
        IconCompat.createWithResource(context, R.drawable.ic_mic),
        ICON_IMAGE,
        "Take voice note"
    )

    val cameraNoteAction = SliceAction.create(
        cameraNoteIntent,
        IconCompat.createWithResource(context, R.drawable.ic_camera),
        ICON_IMAGE,
        "Create photo note"
    )

    // Construct the list.
    return list(context, sliceUri, ListBuilder.INFINITY) {
        setAccentColor(0xfff4b4) // Specify color for tinting icons
        header {
            title = "Create new note"
            subtitle = "Easily done with this note taking app"
        }
        addAction(noteAction)
        addAction(voiceNoteAction)
        addAction(cameraNoteAction)
    }
}

public Slice createSliceWithActionInHeader(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Construct our slice actions.
    SliceAction noteAction = SliceAction.create(takeNoteIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_pencil),
            ListBuilder.ICON_IMAGE, "Take note");

    SliceAction voiceNoteAction = SliceAction.create(voiceNoteIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_mic),
            ListBuilder.ICON_IMAGE,
            "Take voice note");

    SliceAction cameraNoteAction = SliceAction.create(cameraNoteIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_camera),
            ListBuilder.ICON_IMAGE,
            "Create photo note");


    // Construct the list.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .setAccentColor(0xfff4b400) // Specify color for tinting icons
            .setHeader(new HeaderBuilder() // Construct the header.
                    .setTitle("Create new note")
                    .setSubtitle("Easily done with this note taking app")
            )
            .addRow(new RowBuilder()
                    .setTitle("Enter app")
                    .setPrimaryAction(createActivityAction())
            )
            // Add the actions to the ListBuilder.
            .addAction(noteAction)
            .addAction(voiceNoteAction)
            .addAction(cameraNoteAction);
    return listBuilder.build();
}

Satır Oluşturucu

RowBuilder kullanarak bir içerik satırı oluşturabilirsiniz. Bir satır, aşağıdakilerden herhangi birini destekleyebilir:

• Başlık
• Alt başlık
• Başlangıç öğesi: SliceAction, Simge veya zaman damgası
• Bitiş öğeleri: SliceAction, Simge veya zaman damgası
• Birincil işlem

Satır içeriğini, aşağıdaki kısıtlamalara tabi olarak, çeşitli şekillerde birleştirebilirsiniz:

• Başlangıç öğeleri Dilimin ilk satırında gösterilmez
• Bitiş öğeleri SliceAction ve Icon nesnenin karışımı olamaz
• Bir satır yalnızca bir zaman damgası içerebilir

İçeriklerin örnek satırları aşağıdaki resimlerde gösterilmektedir. Gri kutularda olası simge ve dolgu konumlarının gösterildiğine dikkat edin:

RowBuilder örneği: Kablosuz bağlantıyı açma/kapatma

Aşağıdaki örnekte, birincil işlem ve varsayılan açma/kapatma seçeneği bulunan bir satır gösterilmektedir.

fun createActionWithActionInRow(sliceUri: Uri): Slice {
    // Primary action - open wifi settings.
    val wifiAction = SliceAction.create(
        wifiSettingsPendingIntent,
        IconCompat.createWithResource(context, R.drawable.ic_wifi),
        ICON_IMAGE,
        "Wi-Fi Settings"
    )

    // Toggle action - toggle wifi.
    val toggleAction = SliceAction.createToggle(
        wifiTogglePendingIntent,
        "Toggle Wi-Fi",
        isConnected /* isChecked */
    )

    // Create the parent builder.
    return list(context, wifiUri, ListBuilder.INFINITY) {
        setAccentColor(0xff4285) // Specify color for tinting icons / controls.
        row {
            title = "Wi-Fi"
            primaryAction = wifiAction
            addEndItem(toggleAction)
        }
    }
}

public Slice createActionWithActionInRow(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Primary action - open wifi settings.
    SliceAction primaryAction = SliceAction.create(wifiSettingsPendingIntent,
            IconCompat.createWithResource(getContext(), R.drawable.ic_wifi),
            ListBuilder.ICON_IMAGE,
            "Wi-Fi Settings"
    );

    // Toggle action - toggle wifi.
    SliceAction toggleAction = SliceAction.createToggle(wifiTogglePendingIntent,
            "Toggle Wi-Fi", isConnected /* isChecked */);

    // Create the parent builder.
    ListBuilder listBuilder = new ListBuilder(getContext(), wifiUri, ListBuilder.INFINITY)
            // Specify color for tinting icons / controls.
            .setAccentColor(0xff4285f4)
            // Create and add a row.
            .addRow(new RowBuilder()
                    .setTitle("Wi-Fi")
                    .setPrimaryAction(primaryAction)
                    .addEndItem(toggleAction));
    // Build the slice.
    return listBuilder.build();
}

Izgara Oluşturucu

GridBuilder kullanarak bir içerik tablosu oluşturabilirsiniz. Izgara aşağıdaki resim türlerini destekleyebilir:

• ICON_IMAGE: küçük boyut ve renk tonu
• SMALL_IMAGE: küçük boyutlu ve renklendirilemez
• LARGE_IMAGE: en büyük boyut ve renklendirilemez

Izgara hücresi, CellBuilder kullanılarak oluşturulur. Bir hücre en fazla iki satırlık metni ve bir resmi destekleyebilir. Hücre boş olamaz.

Izgara örnekleri aşağıdaki resimlerde gösterilmektedir:

GridRowBuilder örneği: Yakındaki restoranlar

Aşağıdaki örnekte, resim ve metin içeren bir ızgara satırı gösterilmektedir.

fun createSliceWithGridRow(sliceUri: Uri): Slice {
    // Create the parent builder.
    return list(context, sliceUri, ListBuilder.INFINITY) {
        header {
            title = "Famous restaurants"
            primaryAction = SliceAction.create(
                pendingIntent, icon, ListBuilder.ICON_IMAGE, "Famous restaurants"
            )
        }
        gridRow {
            cell {
                addImage(image1, LARGE_IMAGE)
                addTitleText("Top Restaurant")
                addText("0.3 mil")
                contentIntent = intent1
            }
            cell {
                addImage(image2, LARGE_IMAGE)
                addTitleText("Fast and Casual")
                addText("0.5 mil")
                contentIntent = intent2
            }
            cell {
                addImage(image3, LARGE_IMAGE)
                addTitleText("Casual Diner")
                addText("0.9 mi")
                contentIntent = intent3
            }
            cell {
                addImage(image4, LARGE_IMAGE)
                addTitleText("Ramen Spot")
                addText("1.2 mi")
                contentIntent = intent4
            }
        }
    }
}

public Slice createSliceWithGridRow(Uri sliceUri) {
      if (getContext() == null) {
          return null;
      }
      // Create the parent builder.
      ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
              .setHeader(
                      // Create the header.
                      new HeaderBuilder()
                              .setTitle("Famous restaurants")
                              .setPrimaryAction(SliceAction
                                      .create(pendingIntent, icon, ListBuilder.ICON_IMAGE,
                                              "Famous restaurants"))
              )
              // Add a grid row to the list.
              .addGridRow(new GridRowBuilder()
                      // Add cells to the grid row.
                      .addCell(new CellBuilder()
                              .addImage(image1, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Top Restaurant")
                              .addText("0.3 mil")
                              .setContentIntent(intent1)
                      ).addCell(new CellBuilder()
                              .addImage(image2, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Fast and Casual")
                              .addText("0.5 mil")
                              .setContentIntent(intent2)
                      )
                      .addCell(new CellBuilder()
                              .addImage(image3, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Casual Diner")
                              .addText("0.9 mi")
                              .setContentIntent(intent3))
                      .addCell(new CellBuilder()
                              .addImage(image4, ListBuilder.LARGE_IMAGE)
                              .addTitleText("Ramen Spot")
                              .addText("1.2 mi")
                              .setContentIntent(intent4))
                      // Every slice needs a primary action.
                      .setPrimaryAction(createActivityAction())
              );
      return listBuilder.build();
  }

Aralık Oluşturucu

RangeBuilder ile ilerleme çubuğu veya kaydırma çubuğu gibi giriş aralığı içeren bir satır oluşturabilirsiniz.

İlerleme ve kaydırma çubuğu örnekleri aşağıdaki resimlerde gösterilmektedir:

RangeBuilder örneği - Kaydırma Çubuğu

Aşağıdaki örnekte, InputRangeBuilder kullanarak hacim kaydırıcısı içeren bir Dilim'in nasıl oluşturulacağı gösterilmektedir. İlerleme satırı oluşturmak için addRange() değerini kullanın.

fun createSliceWithRange(sliceUri: Uri): Slice {
    return list(context, sliceUri, ListBuilder.INFINITY) {
        inputRange {
            title = "Ring Volume"
            inputAction = volumeChangedPendingIntent
            max = 100
            value = 30
        }
    }
}

public Slice createSliceWithRange(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Construct the parent.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            .addRow(new RowBuilder() // Every slice needs a row.
                    .setTitle("Enter app")
                      // Every slice needs a primary action.
                    .setPrimaryAction(createActivityAction())
            )
            .addInputRange(new InputRangeBuilder() // Create the input row.
                    .setTitle("Ring Volume")
                    .setInputAction(volumeChangedPendingIntent)
                    .setMax(100)
                    .setValue(30)
            );
    return listBuilder.build();
}

Geciken içerik

SliceProvider.onBindSlice() üzerinden Dilim'i mümkün olduğunca hızlı bir şekilde iade etmeniz gerekir. Zaman alan aramalar, titreme ve ani yeniden boyutlandırma gibi ekran sorunlarına yol açabilir.

Hızlı yüklenemeyen Dilim içeriğiniz varsa oluşturucuda içeriğin yüklenmekte olduğunu not ederken Dilinizi yer tutucu içerikle oluşturabilirsiniz. İçerik gösterilmeye hazır olduğunda Dilim URI'nizi kullanarak getContentResolver().notifyChange(sliceUri, null) çağrısı yapın. Bu işlem, Dilimi yeni içerikle tekrar oluşturabileceğiniz başka bir SliceProvider.onBindSlice() çağrısıyla sonuçlanır.

Geciken içerik örneği: İşe gidiş geliş

Aşağıdaki "İşe gidin" satırında, işe gidiş mesafesi dinamik olarak belirlenir ve bu bilgi hemen kullanılamayabilir. Örnek kod, içerik yüklenirken yer tutucu olarak boş bir alt başlığın kullanımını gösterir:

fun createSliceShowingLoading(sliceUri: Uri): Slice {
    // We’re waiting to load the time to work so indicate that on the slice by
    // setting the subtitle with the overloaded method and indicate true.
    return list(context, sliceUri, ListBuilder.INFINITY) {
        row {
            title = "Ride to work"
            setSubtitle(null, true)
            addEndItem(IconCompat.createWithResource(context, R.drawable.ic_work), ICON_IMAGE)
        }
    }
}

public Slice createSliceShowingLoading(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    // Construct the parent.
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            // Construct the row.
            .addRow(new RowBuilder()
                    .setPrimaryAction(createActivityAction())
                    .setTitle("Ride to work")
                    // We’re waiting to load the time to work so indicate that on the slice by
                    // setting the subtitle with the overloaded method and indicate true.
                    .setSubtitle(null, true)
                    .addEndItem(IconCompat.createWithResource(getContext(), R.drawable.ic_work),
                            ListBuilder.ICON_IMAGE)
            );
    return listBuilder.build();
}

private SliceAction createActivityAction() {
    return SliceAction.create(
            PendingIntent.getActivity(
                    getContext(),
                    0,
                    new Intent(getContext(), MainActivity.class),
                    0
            ),
            IconCompat.createWithResource(getContext(), R.drawable.ic_home),
            ListBuilder.ICON_IMAGE,
            "Enter app"
    );
}

Diliminizdeki devre dışı kaydırmayı işleme

Dilim şablonunuzu sunan yüzey, şablon içinde kaydırmayı desteklemeyebilir. Bu durumda, içeriğinizin bir kısmı görüntülenmeyebilir.

Örneğin, kablosuz ağların listesini gösteren bir dili düşünün:

Kablosuz ağ listesi uzunsa ve kaydırma devre dışıysa kullanıcıların listedeki tüm öğeleri görebileceğinden emin olmak için bir Daha fazla göster düğmesi ekleyebilirsiniz. Bu düğmeyi aşağıdaki örnekte gösterildiği gibi addSeeMoreAction() kullanarak ekleyebilirsiniz:

fun seeMoreActionSlice(sliceUri: Uri) =
    list(context, sliceUri, ListBuilder.INFINITY) {
        // [START_EXCLUDE]
        // [END_EXCLUDE]
        setSeeMoreAction(seeAllNetworksPendingIntent)
        // [START_EXCLUDE]
        // [END_EXCLUDE]
    }

public Slice seeMoreActionSlice(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY);
    // [START_EXCLUDE]
    listBuilder.addRow(new RowBuilder()
            .setTitle("Hello")
            .setPrimaryAction(createActivityAction())
    );
    // [END_EXCLUDE]
    listBuilder.setSeeMoreAction(seeAllNetworksPendingIntent);
    // [START_EXCLUDE]
    // [END_EXCLUDE]
    return listBuilder.build();
}

Bu, aşağıdaki resimde gösterildiği gibi görünür:

Daha fazla göster'e dokunulduğunda seeAllNetworksPendingIntent gönderilir.

Alternatif olarak, özel bir mesaj veya satır sağlamak isterseniz bir RowBuilder ekleyebilirsiniz:

fun seeMoreRowSlice(sliceUri: Uri) =
    list(context, sliceUri, ListBuilder.INFINITY) {
        // [START_EXCLUDE]
        // [END_EXCLUDE]
        seeMoreRow {
            title = "See all available networks"
            addEndItem(
                IconCompat.createWithResource(context, R.drawable.ic_right_caret), ICON_IMAGE
            )
            primaryAction = SliceAction.create(
                seeAllNetworksPendingIntent,
                IconCompat.createWithResource(context, R.drawable.ic_wifi),
                ListBuilder.ICON_IMAGE,
                "Wi-Fi Networks"
            )
        }
    }

public Slice seeMoreRowSlice(Uri sliceUri) {
    if (getContext() == null) {
        return null;
    }
    ListBuilder listBuilder = new ListBuilder(getContext(), sliceUri, ListBuilder.INFINITY)
            // [START_EXCLUDE]
            .addRow(new RowBuilder()
                    .setTitle("Hello")
                    .setPrimaryAction(createActivityAction())
            )
            // [END_EXCLUDE]
            .setSeeMoreRow(new RowBuilder()
                    .setTitle("See all available networks")
                    .addEndItem(IconCompat
                                    .createWithResource(getContext(), R.drawable
                                            .ic_right_caret),
                            ListBuilder.ICON_IMAGE)
                    .setPrimaryAction(SliceAction.create(seeAllNetworksPendingIntent,
                            IconCompat.createWithResource(getContext(), R.drawable.ic_wifi),
                            ListBuilder.ICON_IMAGE,
                            "Wi-Fi Networks"))
            );
    // [START_EXCLUDE]
    // [END_EXCLUDE]
    return listBuilder.build();
}

Bu yöntemle eklenen satır veya işlem yalnızca aşağıdaki koşullardan biri karşılandığında gösterilir:

• Diliminizin sunucusu, görünümde kaydırmayı devre dışı bıraktı
• Kullanılabilir alanda satırlarınızın tümü gösterilemiyor

Şablonları birleştirme

Birden fazla satır türünü birleştirerek zengin ve dinamik bir Dilim oluşturabilirsiniz. Örneğin, bir Dilim başlık satırı, tek resimli bir tablo ve iki hücre metin içeren bir ızgara içerebilir.

Burada, başlık satırı ve üç hücre içeren bir ızgara içeren bir Dilim görüyorsunuz.