Có một cách tiếp cận tốt hơn để thực hiện menu FAB hoạt hình mà không cần sử dụng bất kỳ thư viện hoặc để viết mã xml lớn cho hình ảnh động. hy vọng điều này sẽ giúp ích trong tương lai cho những người cần một cách đơn giản để thực hiện điều này.
Chỉ cần sử dụng animate().translationY()chức năng, bạn có thể làm động bất kỳ chế độ xem lên hoặc xuống như tôi đã làm trong mã dưới đây, kiểm tra mã hoàn chỉnh trong github . Trong trường hợp bạn đang tìm kiếm cùng một mã trong kotlin, bạn có thể kiểm tra mã kotlin repo Menu hoạt hình FAB .
trước tiên hãy xác định tất cả FAB của bạn tại cùng một vị trí để chúng chồng lên nhau, hãy nhớ trên FAB phải là bạn muốn nhấp và hiển thị khác. ví dụ:
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_btn_speak_now" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_menu_camera" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab1"
android:layout_width="@dimen/standard_45"
android:layout_height="@dimen/standard_45"
android:layout_gravity="bottom|end"
android:layout_margin="@dimen/standard_21"
app:srcCompat="@android:drawable/ic_dialog_map" />
<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"
app:srcCompat="@android:drawable/ic_dialog_email" />
Bây giờ trong lớp java của bạn chỉ cần xác định tất cả FAB của bạn và thực hiện nhấp chuột như hiển thị bên dưới:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab1 = (FloatingActionButton) findViewById(R.id.fab1);
fab2 = (FloatingActionButton) findViewById(R.id.fab2);
fab3 = (FloatingActionButton) findViewById(R.id.fab3);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if(!isFABOpen){
showFABMenu();
}else{
closeFABMenu();
}
}
});
Sử dụng animation().translationY()để tạo hiệu ứng FAB của bạn, tôi thích bạn sử dụng thuộc tính của phương thức này trong DP vì chỉ sử dụng int sẽ có hiệu lực tương thích màn hình với độ phân giải cao hơn hoặc độ phân giải thấp hơn. như hình dưới đây:
private void showFABMenu(){
isFABOpen=true;
fab1.animate().translationY(-getResources().getDimension(R.dimen.standard_55));
fab2.animate().translationY(-getResources().getDimension(R.dimen.standard_105));
fab3.animate().translationY(-getResources().getDimension(R.dimen.standard_155));
}
private void closeFABMenu(){
isFABOpen=false;
fab1.animate().translationY(0);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
}
Bây giờ hãy xác định thứ nguyên được đề cập ở trên bên trong res-> giá trị-> dimens.xml như được hiển thị bên dưới:
<dimen name="standard_55">55dp</dimen>
<dimen name="standard_105">105dp</dimen>
<dimen name="standard_155">155dp</dimen>
Đó là tất cả hy vọng giải pháp này sẽ giúp những người trong tương lai, những người đang tìm kiếm giải pháp đơn giản.
EDITED
Nếu bạn muốn thêm nhãn qua FAB thì chỉ cần lấy linearLayout ngang và đặt FAB với textview làm nhãn và làm động các bố cục nếu tìm thấy bất kỳ vấn đề nào khi thực hiện điều này, bạn có thể kiểm tra mã mẫu của tôi trong github, tôi đã xử lý tất cả khả năng tương thích ngược các vấn đề trong mã mẫu đó. kiểm tra mã mẫu của tôi để tìm FABMothy trong Github
để đóng FAB trên Backpress, ghi đè onBackPress () như hiển thị bên dưới:
@Override
public void onBackPressed() {
if(!isFABOpen){
this.super.onBackPressed();
}else{
closeFABMenu();
}
}
Ảnh chụp màn hình cũng có tiêu đề với FAB, vì tôi lấy nó từ ứng dụng mẫu của tôi hiện tại ingithub
