Android
FloatingActionButton

소개

매개 변수

비고

dependencies {
    compile 'com.android.support:design:25.1.0'
}

FAB를 레이아웃에 추가하는 방법

FloatingActionButton을 사용하려면 비고 섹션에서 설명한대로 build.gradle 파일에 종속성을 추가하기 build.gradle 됩니다.

그런 다음 레이아웃에 추가하십시오.

 <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/my_icon" />

예 :

색깔

이보기의 배경색은 기본적으로 테마의 colorAccent입니다.

위의 그림에서 src 가 + 아이콘 (기본적으로 24x24 dp)을 app:backgroundTint="@color/your_colour" 전체 원의 배경색 을 얻으려면 app:backgroundTint="@color/your_colour" 사용할 수 있습니다 app:backgroundTint="@color/your_colour"

사용할 수있는 코드의 색상을 변경하려면,

myFab.setBackgroundTintList(ColorStateList.valueOf(your color in int));

눌려진 상태에서 FAB의 색상을 변경하려면

mFab.setRippleColor(your color in int);

포지셔닝

휴대 전화의 가장자리에서 최소 16dp, 태블릿 / 데스크톱에서 최소 24dp를 배치하는 것이 좋습니다.

참고 : 일단 FloatingActionButton 의 전체 영역을 커버하는 것을 제외하고 src를 설정하면 최상의 결과를 얻으려면 해당 이미지의 크기가 올바른지 확인하십시오.

기본 서클 크기는 56 x 56dp입니다.

미니 서클 크기 : 40 x 40dp

내부 아이콘 만 변경하려면 기본 크기로 24x24 아이콘을 사용하십시오

스 와이프에서 FloatingActionButton 표시 및 숨기기

FloatingActionButton 을 기본 애니메이션으로 표시하거나 숨기려면 show() 및 hide() 메서드를 호출하면됩니다. FloatingActionButton 을 Fragment에 배치하는 대신 Activity 레이아웃에 유지하는 것이 좋습니다. 이렇게하면 표시 및 숨길 때 기본 애니메이션이 작동 할 수 있습니다.

다음은 ViewPager 의 예입니다.

• 3 개의 탭
• 첫 번째 및 세 번째 탭에 대해 FloatingActionButton 표시
• 중간 탭에서 FloatingActionButton 숨기기

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab;
    ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fab = (FloatingActionButton) findViewById(R.id.fab);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        // ...... set up ViewPager ............

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                if (position == 0) {
                    fab.setImageResource(android.R.drawable.ic_dialog_email);
                    fab.show();
                } else if (position == 2) {
                    fab.setImageResource(android.R.drawable.ic_dialog_map);
                    fab.show();
                } else {
                    fab.hide();
                }
            }

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

            @Override
            public void onPageScrollStateChanged(int state) {}
        });

        // Handle the FloatingActionButton click event:
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = viewPager.getCurrentItem();
                if (position == 0) {
                    openSend();
                } else if (position == 2) {
                    openMap();
                }
            }
        });

    }
}

결과:

스크롤시 FloatingActionButton 표시 및 숨기기

Support Library 버전 22.2.1부터는 show() 및 hide() 메소드를 활용하는 FloatingActionButton.Behavior 하위 클래스를 사용하여 스크롤 동작에서 FloatingActionButton 을 표시하거나 숨길 수 있습니다.

이 옵션은 RecyclerView 및 NestedScrollView 와 같이 중첩 스크롤을 지원하는 내부 뷰와 함께 CoordinatorLayout 에서만 작동합니다.

이 ScrollAwareFABBehavior 클래스는 Android 가이드 _⁽ Codepath)에서 가져온 것입니다 _{^{(기여가 필요한 cc-wiki 필요).}}

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
        super();
    }

    @Override
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                                       final View directTargetChild, final View target, final int nestedScrollAxes) {
        // Ensure we react to vertical scrolling
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
                || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
    }

    @Override
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
                               final View target, final int dxConsumed, final int dyConsumed,
                               final int dxUnconsumed, final int dyUnconsumed) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
        if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
            // User scrolled down and the FAB is currently visible -> hide the FAB
            child.hide();
        } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
            // User scrolled up and the FAB is currently not visible -> show the FAB
            child.show();
        }
    }
}

FloatingActionButton 레이아웃 XML에서 지정 app:layout_behavior 의 완전한 클래스 이름을 가진 ScrollAwareFABBehavior :

app:layout_behavior="com.example.app.ScrollAwareFABBehavior"

예를 들어 다음 레이아웃을 사용합니다.

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_layout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="6dp">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:elevation="0dp"
            app:layout_scrollFlags="scroll|enterAlways"
            />

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            app:tabMode="fixed"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:elevation="0dp"
            app:tabTextColor="#d3d3d3"
            android:minHeight="?attr/actionBarSize"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_below="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        app:layout_behavior="com.example.app.ScrollAwareFABBehavior"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

결과는 다음과 같습니다.

FloatingActionButton의 동작 설정

XML로 FAB의 동작을 설정할 수 있습니다.

예 :

<android.support.design.widget.FloatingActionButton    
   app:layout_behavior=".MyBehavior" />

또는 다음을 사용하여 프로그래밍 방식으로 설정할 수 있습니다.

CoordinatorLayout.LayoutParams p = (CoordinatorLayout.LayoutParams) fab.getLayoutParams();
p.setBehavior(xxxx);
fab.setLayoutParams(p);