[android] 지원 라이브러리가있는 FloatingActionButton 예제

따라서 build.gradle파일에 다음을 추가하십시오.

compile 'com.android.support:design:27.1.1'

AndroidX 참고 : Google은 이전 지원 라이브러리 를 대체하기 위해 새로운 AndroidX 확장 라이브러리 를 도입 하고 있습니다. AndroidX를 사용하려면 먼저 파일을 업데이트gradle.properties 하고 편집 하여 (또는 그 이상) build.gradle으로 설정 했는지 확인 하고 이전 파일 대신 다음 줄을 사용하십시오 .compileSdkVersion28compile

implementation 'com.google.android.material:material:1.0.0'

다음으로, themes.xml또는 당신의 또는 styles.xml무엇이든, 이것을 설정하십시오-이것이 앱의 악센트 색상과 그것을 재정의하지 않는 한 FAB의 색상입니다 (아래 참조).

        <item name="colorAccent">@color/floating_action_button_color</item>

레이아웃의 XML에서 :

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <android.support.design.widget.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

또는 위의 AndroidX 재질 라이브러리를 사용하는 경우 대신 다음을 사용하십시오.

<RelativeLayout
 ...
 xmlns:app="http://schemas.android.com/apk/res-auto">

       <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/myFAB"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:srcCompat="@drawable/ic_plus_sign"
            app:elevation="4dp"
            ... />

</RelativeLayout>

문서 (여기서 문서) ( setRippleColor, 등) 에서 더 많은 옵션을 볼 수 있지만 참고 사항 중 하나는 다음과 같습니다.

    app:fabSize="mini"

하나의 FAB의 배경색을 변경하려면 다음을 추가하십시오.

    app:backgroundTint="#FF0000"

(예 : 빨간색으로 변경) 위의 XML로 변경하십시오.

어쨌든 코드에서 Activity / Fragment의 뷰가 팽창 된 후 ….

    FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
    myFab.setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
            doMyThing();
        }
    });

관찰 :

• 예를 들어 경계가 겹치도록 음의 하단 레이아웃 여백이있는 두 개의보기 (예 : RelativeLayout 사용)를 분할하는 “완벽한”단추 중 하나가있는 경우 FAB의 크기는 실제로 문제가됩니다. 롤리팝과 롤리팝의 차이 가 매우 큽니다. API를 전환 할 때 AS의 시각적 레이아웃 편집기에서 실제로 이것을 볼 수 있습니다. 롤리팝 이전으로 전환하면 갑자기 “퍼프 아웃”됩니다. 추가 크기의 이유는 그림자가 모든 방향으로보기의 크기를 확장하기 때문입니다. 따라서 FAB의 여백이 다른 항목에 가까워지면 조정해야 할 때이 점을 고려해야합니다.

• 패딩이 너무 많으면 패딩을 제거하거나 변경하는 방법은 다음과 같습니다.

  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
      RelativeLayout.LayoutParams p = (RelativeLayout.LayoutParams) myFab.getLayoutParams();
      p.setMargins(0, 0, 0, 0); // get rid of margins since shadow area is now the margin
      myFab.setLayoutParams(p);
  }
  

• 또한 FAB의 높이를 잡고 2를 나누어 마진 오프셋으로 사용하여 RelativeLayout에서 두 영역 사이의 “심”에 FAB을 프로그래밍 방식으로 배치하려고했습니다. 그러나 myFab.getHeight ()는 뷰가 팽창 된 후에도 0을 반환했습니다. 대신 ViewTreeObserver를 사용하여 배치 한 후에 만 ​​높이를 얻은 다음 위치를 설정했습니다. 여기이 팁을 참조
  하십시오 . 다음과 같이 보였습니다 :

      ViewTreeObserver viewTreeObserver = closeButton.getViewTreeObserver();
      if (viewTreeObserver.isAlive()) {
          viewTreeObserver.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
              @Override
              public void onGlobalLayout() {
                  if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
                      closeButton.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                  } else {
                      closeButton.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                  }
                  // not sure the above is equivalent, but that's beside the point for this example...
                  RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) closeButton.getLayoutParams();
                  params.setMargins(0, 0, 16, -closeButton.getHeight() / 2); // (int left, int top, int right, int bottom)
                  closeButton.setLayoutParams(params);
              }
          });
      }
  

  이것이 올바른 방법인지 확실하지 않지만 작동하는 것 같습니다.

• 높이를 줄이면 버튼의 그림자 공간을 더 작게 만들 수 있습니다.

• “심”에 FAB을 사용하려는 경우 다음을 사용할 수 있습니다 . 예는 다음 layout_anchor과 layout_anchorGravity같습니다.

  <android.support.design.widget.FloatingActionButton
      android:layout_height="wrap_content"
      android:layout_width="wrap_content"
      app:layout_anchor="@id/appbar"
      app:layout_anchorGravity="bottom|right|end"
      android:src="@drawable/ic_discuss"
      android:layout_margin="@dimen/fab_margin"
      android:clickable="true"/>
  

스낵바 가 CoordinatorLayout 에 싸여서 스낵바 가 나올 때 자동으로 버튼에서 벗어날 수 있습니다 .

더:

• Google의 디자인 지원 라이브러리 페이지
• FloatingActionButton 문서
• Google I / O 2015의 “Material Now”강연 -17m22에 소개 된 지원 디자인 라이브러리
• 디자인 지원 라이브러리 샘플 / 쇼케이스

답변

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
ColorStateList rippleColor = ContextCompat.getColorStateList(context, R.color.fab_ripple_color);
fab.setBackgroundTintList(rippleColor);

/res/color/fab_ripple_color.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/fab_color_pressed" />
    <item android:state_focused="true" android:color="@color/fab_color_pressed" />
    <item android:color="@color/fab_color_normal"/>
</selector>

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_action_add"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    app:fabSize="normal"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:pressedTranslationZ="12dp"
    app:rippleColor="@android:color/transparent"/> <!-- set to transparent color -->

...
android:layout_marginRight="24dp"
android:layout_marginBottom="24dp" />

        ...
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:elevation="6dp"
        app:pressedTranslationZ="12dp"
        ...

        android:layout_gravity="end|bottom"

<android.support.design.widget.FloatingActionButton   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/somedrawable"
    android:layout_gravity="right|bottom"
    app:borderWidth="0dp"
    app:rippleColor="#ffffff"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" />

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_add" 
/>

<android.support.design.widget.FloatingActionButton
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   app:srcCompat="@drawable/ic_add"
 />