Bir kartın veya iletişim kutusunun yapısını biçimlendirme

Bu sayfada, bir kart veya iletişim kutusundaki widget'ların nasıl biçimlendirileceği ve yapılandırılacağı açıklanmaktadır mesajını alırsınız.

Chat uygulamaları için JSON kart mesajları tasarlayıp önizlemek üzere Kart Oluşturucu'yu kullanın:

Kart Oluşturucu'yu açın

Ön koşullar

Etkileşimli özellikler için etkinleştirilmiş bir Google Chat uygulaması. Bir aşağıdaki hızlı başlangıç kılavuzlarından birini kullanarak oluşturmak istediğiniz uygulama mimarisinde:

Kartları ve iletişim kutularını sütunlarda göster

İlgili içeriği oluşturmak için kullanılan columns widget'ı Bir kartta veya iletişim kutusunda en fazla 2 sütun gösterir. Ekleyebileceğiniz: ekleyebilirsiniz. widget'lar ilk sıraya alındıklarında belirtiliyor. 2'den fazla sütun eklemek veya satırları kullanmak için grid widget'ını kullanın.

Her bir sütunun yüksekliği, uzun sütuna göre belirlenir. Örneğin, ilk sütun ikinci sütundan daha uzunsa, her iki sütunda da yüksekliğini görebilirsiniz. Her sütun farklı bir sayı içerebileceği için durumda satır tanımlayamaz veya widget'ları sütunlar arasında hizalayamazsınız.

Aşağıdaki örnekte, şu özelliklere sahip bir columns widget'ı içeren bir kart gösterilmektedir: 2 metin sütunu. Yalnızca sütun düzenini görüntülemek ve kodu daraltmak için Daralt'ı tıklayın. Aşağıdaki örnekte olduğu gibi alan kısıtlı olduğunda ikinci sütun ilk sütunun altında sarmalanır.

Bir sütunun genişliğini tanımlama

Sütunlar yan yana görüntülenir. Her sütunun genişliğini özelleştirebilirsiniz. her bir arama terimi için horizontalSizeStyle alanı. Kullanıcının ekran genişliği çok darsa ikinci sütun ilk sütunun altına yerleştirilir:

  • Web'de, ekran genişliği şundan küçük veya bu değere eşitse ikinci sütun sarmalanır: 480 piksel.
  • iOS cihazlarda, ekran genişliği 300 nk'e eşittir.
  • Android cihazlarda, ekran genişliği şundan daha azsa ikinci sütun sarmalanır: veya 320 dp'ye eşit olmalıdır.

Aşağıdaki örnekte, şu özelliklere sahip bir columns widget'ı içeren bir kart gösterilmektedir: Sütunlarda 4 öğe bulunan 2 metin sütunu. Sütunlardaki her öğe Metnin ne kadar alanını işlemek için horizontalSizeStyle uygulandı her bir sütunu doldurur:

  • İlk metin paragrafında %30'dan fazla dolgu yapılmaması için FILL_MINIMUM_SPACE kullanılıyor genişliğine göre değişiklik gösterir.
  • İkinci metin paragrafı, mevcutFILL_AVAILABLE_SPACE boşluk ekleyin. Bu örnekte, müşterinin isteğine bağlı olarak dokunun.
  • Üçüncü metin paragrafı horizontalSizeStyle öğesini tanımlamaz, bu nedenle varsayılan olarak kullanabilirsiniz.
  • Dördüncü metin paragrafında %30'dan fazla doldurmamak için FILL_MINIMUM_SPACE kullanılıyor genişliğine göre değişiklik gösterir.

Bir sütunun yatay hizalamasını tanımlama

Widget'ları bir sütunun soluna, sağına veya ortasına yatay olarak hizalayabilirsiniz. tanımlamak horizontalAligment alanı. horizontalAlignment alanı tanımlanmamışsa widget'lar sol sütunda.

Aşağıdaki örnekte, bir sütundaki metni yatay olarak sola hizalar:

Aşağıdaki örnekte, ortadaki bir sütun içindeki metni yatay olarak hizalar:

Aşağıdaki örnekte, bir sütundaki metni yatay olarak sağa hizalar:

Bir sütunun dikey hizalamasını tanımlama

Widget'ları bir sütunun üst, alt veya ortasına dikey olarak hizalayabilirsiniz. tanımlamak verticalAlignment alanı. verticalAlignment alanı tanımlanmamışsa bir sütundaki widget'lar hizalanır dokunun.

Aşağıdaki örnekte, bir sütundaki metin dikey olarak en üste hizalanır:

Aşağıdaki örnek, ortadaki bir sütun içindeki metni dikey olarak hizalar:

Aşağıdaki örnekte, en alttaki sütun içindeki metni dikey olarak hizalar:

Widget'lar arasına yatay ayırıcı ekleyin

İlgili içeriği oluşturmak için kullanılan divider widget'ı bir kartın genişliğini kapsayan yatay bir çizgi görüntüler widget'ların dikey olarak yığılmasına olanak tanır. Çizgi, birbirinden farklı şekillerde Kullanıcılar widget'ları birbirinden ayırt ederek kartları kolayca tarayabilirler anlıyoruz.

Aşağıda, diğer reklam öğesi türleri arasında divider widget'ından oluşan bir kart widget'lar:

Öğe koleksiyonunu içeren bir tablo görüntüleme

İlgili içeriği oluşturmak için kullanılan grid widget'ı öğe koleksiyonunu içeren bir ızgara görüntüler. Izgara, istenilen sayıda emin olmaktır. Satır sayısı, öğelerin sütunlara bölünmesiyle belirlenir. 10 öğe ve 2 sütun içeren bir ızgarada 5 satır vardır. 11 öğe ve 2 öğe içeren bir tablo sütununda 6 satır var.

Widget, kullanıcıların tek tip veri girmesine yardımcı olan önerileri destekler ve değişim üzerine yapılan işlemlerdir. Actions metin girişi alanında bir değişiklik gerçekleştiğinde (ör. kullanıcı ekleme işlemi veya metin siliniyor.

Aşağıdaki örnekte, tek bir öğe içeren 2 sütunlu bir ızgara gösterilmektedir:

Izgarada metnin resimle birlikte nerede görüneceğini tanımlayın

İlgili içeriği oluşturmak için kullanılan gridItemLayout alan her bir gridItem içinde metnin yukarıda mı, yoksa altında mı görüneceğini tanımlamanızı sağlar ızgarada görebilirsiniz. gridItemLayout tanımlanmazsa metin varsayılan olarak ızgaradaki öğenin altında görünür

Aşağıdaki örnekte, metin ve resim içeren 3 sütunlu bir ızgara tıklayın. İlk ızgara, resmin üzerinde görünecek metni tanımlar, ikinci ızgara ızgara, resmin altında görünecek metni tanımlar, üçüncü ızgara ise metnin konumu.

Kullanıcı arayüzü öğelerine kenarlık ekleyin

column veya grid widget'ında görünen öğeler için şunlara kenarlık ekleyebilirsiniz: tanımlayarak bu kullanıcı arayüzü öğelerini borderType alanı ve borderStyle alanına dokunun. Herhangi bir borderStyle alanı tanımlanmamışsa varsayılan olarak kenarlık gösterilmez. Şunları yapabilirsiniz: bir widget'taki tüm öğelere uygulanacak bir borderType tanımlayın veya stili uygulayın otomatik olarak ekler.

Aşağıdaki örnekte, her ızgarada bir resim içeren 2 sütunlu bir ızgara verilmiştir. kenarlık türü, stil ve renk, kapsamdaki tüm öğelere uygulanacak şekilde ızgara.

Aşağıdaki örnekte, her ızgarada bir resim ve kenarlık stili ve türü ayrı ayrı tanımlanır. İlk resmin STROKE olarak tanımlanmış bir sınırı var. İkinci resmin kenarlığı NO_BORDER Üçüncü resimde tanımlı bir kenarlık yoktur.

Sorun giderme

Bir Google Chat uygulaması veya card bir hata döndürürse Chat arayüzünde "Bir sorun oluştu" mesajı gösteriliyor. veya "İsteğiniz işlenemiyor." Chat kullanıcı arayüzü herhangi bir hata mesajı görüntülenmiyor ancak Chat uygulaması veya kart beklenmeyen bir sonuç veriyorsa; Örneğin karttaki bir mesajda görünür.

Chat kullanıcı arayüzünde hata mesajı görüntülenmese de Hataları düzeltmenize yardımcı olmak için açıklayıcı hata mesajları ve günlük verileri sunulur Chat uygulamaları için hata günlük kaydı etkinleştirildiğinde. Görüntüleme konusunda yardım için ve hataları düzeltme ile ilgili daha fazla bilgi edinmek için Google Chat hatalarını giderme ve düzeltme