부동 작업 버튼이 다른 구성 요소를 차단하지 못하게하려면 어떻게합니까?


22

Google의 새로운 머티리얼 디자인은 플로팅 액션 버튼을 사용하여 해당 화면의 주요 액션에 대한 사용자의주의를 끌 것을 권장합니다. 목록보기에는 이것에 대한 많은 예가 있습니다.

이제 목록보기에 화면을 채우는 데 충분한 항목이있어 스크롤 할 수 없다고 가정하십시오. 목록 항목에 사용자가 상호 작용할 수있는 특정 구성 요소 (예 : 스위치 또는 선호하는 별)가있는 경우 부동 작업 단추가이 구성 요소를 차단했을 수 있습니다. 이 사건을 어떻게 처리해야합니까?

편집 : 이것은 실제로 항상 목록의 마지막 항목에서 발생합니다. 다음은 'favorite-star'를 올바르게 사용할 수없는 예입니다. 또한이 예제의 시간과 같은 콘텐츠를 차단하고 있습니다.

플로팅 액션 버튼 차단 UI의 예

답변:


14

이를 처리 할 수있는 몇 가지 방법이 있습니다.

  1. 버튼 아래에 중요한 내용을 두지 마십시오

    이것이 가장 명백한 접근법이며 아마도 가장 일반적인 접근법 일 것입니다. 가능하면 다른 버튼, 주요 내용 등과 같이 동작 버튼 아래에 중요한 것이 없도록 디자인을 구성하십시오.

    패딩이나 빈 항목을 사용하여 내용을 서식 지정하여 내용의 서식을 지정하여 중요하지 않은 내용이 버튼이 위치하지 않거나 다른 내용이되도록 할 수 있습니다. 내용과 원하는 디자인에 따라 다릅니다.

  2. 버튼 재배치

    작업 버튼이 오른쪽 하단에있을 필요는 없습니다. 디자인에 따라 다른 위치에 배치하는 것이 더 합리적 일 수 있습니다. 아래 예제는 꽤 잘한다고 생각합니다.

    Google은 머티리얼 디자인 가이드를 업데이트하고 플로팅 액션 버튼 페이지를 만들었습니다.이 버튼 은 애니메이션과 함께 다른 위치에서 사용되며 크기가 아래에 표시됩니다.

Reddit News Pro의 첫 번째 이미지 . Mark DiSciullo의 두 번째 이미지 .

  1. 항상 버튼을 표시하지 마십시오

    때때로 액션 버튼이 항상 중요하지 않은 경우도 있습니다. 이런 경우에는 스크롤하거나 아래로 스크롤하는 동안 숨길 수 있습니다. 그렇게하는 방법과 방법이 내용과 디자인에 따라 결정되는 경우 모든 응용 프로그램에 대한 답은 없습니다.

    Google의 업데이트 된 가이드 라인은 아래 이미지처럼 슬라이딩하는 대신 전체 크기를 조정하여 버튼움직이고 움직이는 애니메이션 버전을 보여줍니다 .

플로팅 액션의 이미지 .


8

약간 단순하지만 가장 우아한 솔루션은 아니지만 목록 끝에 빈 '더미'항목을 추가하면 사용자가 마지막 항목보다 더 스크롤 할 수 있습니다.


1
Gmail 앱에서 사용하기 때문에 "공식"솔루션으로 간주 될 수 있습니다.
Vicky Chijwani

1
또한 더미 항목이 아닌 "목록의 맨 아래에 패딩"이라고 부를 수 있습니다 (알아 두지 않는 것처럼 들립니다).
Vicky Chijwani


2

승인 된 답변에서 "버튼 재배치"아이디어를 취소하면 머티리얼 디자인 가이드 라인 의 스크롤 기법 부분에 해당 아이디어를 구현할 수 있습니다.

즉, 플로팅 작업 버튼 은 컨텐츠와 유연한 공간이있는 앱 바 사이의 가장자리끊습니다 . 스크롤 할 때 :

툴바 만 남을 때까지 유연한 공간이 줄어 듭니다. 페이지 맨 위로 스크롤하면 유연한 공간이 다시 제자리로 커집니다.

플로팅 액션 버튼은 확장 재료로 화면에 애니메이션으로 표시됩니다.

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

앱 바와 콘텐츠 사이의 팹


1

나는 이것을 RecyclerView.Adapter의 onBindViewHolder 메소드에서 사용하여 목록의 마지막 항목의 아래쪽 여백을 72dp로 설정하여 부동 작업 버튼 위로 스크롤되도록했습니다.

이것은 목록에 더미 항목이 필요하지 않습니다.

@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();
    }
}

나를 위해 작동 :).
OWADVL
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.