Vì vậy, trong build.gradletập tin của bạn , thêm điều này:
compile 'com.android.support:design:27.1.1'
Lưu ý về AndroidX: Google đang giới thiệu các thư viện mở rộng AndroidX mới để thay thế các Thư viện hỗ trợ cũ hơn. Để sử dụng AndroidX, trước tiên hãy đảm bảo bạn đã cập nhật gradle.propertiestệp của mình , được chỉnh sửa build.gradleđể đặt compileSdkVersionthành 28(hoặc cao hơn) và sử dụng dòng sau thay vì dòng trước compile.
implementation 'com.google.android.material:material:1.0.0'
Tiếp theo, trong bạn themes.xmlhoặc styles.xmlhoặc bất cứ điều gì, hãy chắc chắn rằng bạn thiết lập this- nó color-- giọng của ứng dụng của bạn và màu sắc của FAB bạn trừ khi bạn ghi đè lên nó (xem dưới đây):
<item name="colorAccent">@color/floating_action_button_color</item>
Trong XML của bố cục:
<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>
Hoặc nếu bạn đang sử dụng thư viện tài liệu AndroidX ở trên, thay vào đó bạn sẽ sử dụng thư viện này:
<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>
Bạn có thể thấy nhiều tùy chọn hơn trong các tài liệu (tài liệu vật liệu ở đây) ( setRippleColor, v.v.), nhưng một trong những lưu ý là:
app:fabSize="mini"
Một điều thú vị khác-- để thay đổi màu nền của chỉ một FAB, hãy thêm:
app:backgroundTint="#FF0000"
(ví dụ để thay đổi nó thành màu đỏ) thành XML ở trên.
Dù sao, trong mã, sau khi chế độ xem Hoạt động / Đoạn bị thổi phồng ....
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
Quan sát:
- Nếu bạn có một trong các nút trên "đường may" chia hai chế độ xem (ví dụ: sử dụng RelativeLayout) với lề bố cục dưới cùng âm để chồng lên đường viền, bạn sẽ nhận thấy một vấn đề: thực sự kích thước của FAB rất khác nhau về kẹo mút so với kẹo mút trước. Bạn thực sự có thể thấy điều này trong trình chỉnh sửa bố cục hình ảnh của AS khi bạn lật giữa các API-- nó đột nhiên "phồng ra" khi bạn chuyển sang dùng kẹo mút trước. Lý do cho kích thước thêm dường như là bóng mở rộng kích thước của chế độ xem theo mọi hướng. Vì vậy, bạn phải tính đến điều này khi bạn điều chỉnh tỷ suất lợi nhuận của FAB nếu nó gần với các công cụ khác.
Đây là một cách để loại bỏ hoặc thay đổi phần đệm nếu có quá nhiều:
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);
}
Ngoài ra, tôi sẽ lập trình đặt FAB trên "đường nối" giữa hai khu vực trong RelativeLayout bằng cách lấy chiều cao của FAB, chia cho hai và sử dụng nó làm phần bù lề. Nhưng myFab.getHeight () đã trả về số 0, ngay cả sau khi chế độ xem bị thổi phồng, dường như. Thay vào đó, tôi đã sử dụng ViewTreeObserver để chỉ lấy chiều cao sau khi đặt ra và sau đó đặt vị trí. Xem mẹo này
ở đây . Nó trông như thế này:
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);
}
});
}
Không chắc chắn nếu đây là cách đúng đắn để làm điều đó, nhưng nó dường như làm việc.
- Dường như bạn có thể làm cho không gian bóng của nút nhỏ hơn bằng cách giảm độ cao.
Nếu bạn muốn FAB trên một "đường may", bạn có thể sử dụng layout_anchorvà layout_anchorGravityđây là một ví dụ:
<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"/>
Hãy nhớ rằng bạn có thể tự động bật nút nhảy ra khi Snackbar xuất hiện bằng cách gói nó trong Bộ điều phối .
Hơn:
