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 tonuSMALL_IMAGE
: küçük boyutlu ve renklendirilemezLARGE_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
Kotlin
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 ) } }
Java
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:
Kotlin
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) } }
Java
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
veIcon
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.
Kotlin
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) } } }
Java
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 tonuSMALL_IMAGE
: küçük boyutlu ve renklendirilemezLARGE_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.
Kotlin
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 } } } }
Java
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.
Kotlin
fun createSliceWithRange(sliceUri: Uri): Slice { return list(context, sliceUri, ListBuilder.INFINITY) { inputRange { title = "Ring Volume" inputAction = volumeChangedPendingIntent max = 100 value = 30 } } }
Java
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:
Kotlin
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) } } }
Java
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:
Kotlin
fun seeMoreActionSlice(sliceUri: Uri) = list(context, sliceUri, ListBuilder.INFINITY) { // [START_EXCLUDE] // [END_EXCLUDE] setSeeMoreAction(seeAllNetworksPendingIntent) // [START_EXCLUDE] // [END_EXCLUDE] }
Java
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:
Kotlin
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" ) } }
Java
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.