Hareketli eylem düğmemin diğer bileşenleri engellemesini nasıl önleyebilirim?


22

Google’ın yeni Materyal Tasarımı, bu ekrandaki ana eylem için kullanıcıya dikkat çekmek için değişken eylem düğmelerinin kullanılmasını önerir. Bir liste görünümünde buna oldukça fazla örnek var.

Şimdi, liste görünümünüzün ekranı doldurmak için yeterli öğeye sahip olduğunu ve kaydırma yapmayı imkansız hale getirdiğini varsayalım. Liste öğeleriniz, kullanıcının bir anahtar veya favori bir yıldız gibi etkileşime girebileceği belirli bir bileşene sahipse, kayan eylem düğmesinin bu bileşeni engellemesi olasıdır. Bu olayı nasıl ele almalıyız?

EDIT: Bu aslında her zaman listenin son maddesi ile olur. İşte 'favori yıldızın' doğru kullanılamadığı bir örnek. Aynı zamanda, bu örnekteki zaman gibi içeriği engelliyor.

kullanıcı arabirimini engelleyen değişken eylem düğmesi örneği

Yanıtlar:


14

Bununla başa çıkmanın farklı yolları var.

  1. Düğmenin altına hayati içerik koymayın

    Bu en belirgin yaklaşım ve muhtemelen en genel olanıdır. Mümkün olduğunda, diğer düğmeler, ana içerik vb. Gibi önemli bir şeyin işlem düğmesinin altında olmadığından emin olmak için tasarımınızı yapılandırın.

    Doldurma ya da boş bir giriş kullanarak fazladan boşluk ekleyebilirsiniz, içeriği biçimlendirerek önemli olmayan şeyler düğmenin nerede olamayacağı ya da başka bir şey olamaz - istediğiniz içeriğe ve tasarıma bağlıdır.

  2. Düğmenin yerini değiştir

    İşlem düğmesinin sağ altta olması gerekmez. Tasarımınıza bağlı olarak, başka bir yere yerleştirmek daha mantıklı olabilir. Bence aşağıdaki örnekler oldukça başarılı.

    Google, materyal tasarım rehberini yeni güncelledi ve sadece bir animasyonun yanı sıra farklı yerlerde kullanıldığını ve boyutlandırıldığını gösteren hareketli eylem düğmesi için bir sayfa hazırladı (aşağıda bahsetti).

Reddit News Pro'dan ilk görüntü . Mark DiSciullo'dan ikinci görüntü .

  1. Düğmeye her zaman gösterme

    Bazen eylem düğmesi her zaman görülmesi gereken hayati değildir. Bu gibi durumlarda, kaydırmada veya aşağı kaydırırken gizlemek mantıklı olabilir. Bunu ve nasıl yaptığınız içeriğe ve tasarıma bağlıysa, hiçbir uygulama tüm uygulamalar için doğru değildir.

    Google’ın güncellenmiş kuralları , aşağıdaki resimdeki gibi kaydırmak yerine , her şeyi ölçekleyerek düğmenin içeri ve dışarı animasyonunu gösterir .

Yüzen İşlemden Görüntü .


8

Biraz basit olabilir ve en zarif çözüm olmayabilir, ancak: listenin sonuna boş bir 'sahte' giriş ekleyin, böylece kullanıcı son girişten daha fazla kaydırma yapabilir.


1
Gmail uygulaması kullandığı için bu "resmi" bir çözüm olarak görülebilir.
Vicky Chijwani

1
Ayrıca, kukla bir giriş yerine "belirttiğin gibi inelegant geliyor" yerine "listenin en alt kısmındayken" diyebilirsin.
Vicky Chijwani


2

Kabul edilen cevapta "Düğmenin yerini değiştir" fikrini zıplatarak, malzeme tasarım kılavuzlarının Kaydırma teknikleri bölümünde bu fikrin olası bir uygulaması vardır.

Yani, hareketli eylem düğmesi içerik ile esnek alan içeren bir uygulama çubuğu arasındaki kenarı keser . Kaydırırken:

Esnek alan sadece araç çubuğu kalana kadar küçülür. Sayfanın en üstüne kaydırırken, esnek alan yeniden yerine gelir.

Yüzen eylem düğmesi, genişleyen bir malzeme parçası olarak ekran üzerinde hareket eder.

https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-behavior

uygulama çubuğu ve içerik arasında fab


1

Bunu, RecyclerView.Adapter'ın onBindViewHolder yönteminde, listedeki son öğenin alt kenar boşluğunu, kayan eylem düğmesinin üzerinde kaydırılması için 72dp olarak ayarlamak için kullandım.

Bu, listede sahte bir giriş gerektirmez.

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}

Benim için çalışıyor :).
OWADVL
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.