ดังนั้นในbuild.gradleไฟล์ของคุณเพิ่ม:
compile 'com.android.support:design:27.1.1'
AndroidX หมายเหตุ: Google กำลังแนะนำไลบรารีส่วนขยาย AndroidXใหม่เพื่อแทนที่ไลบรารีสนับสนุนที่เก่ากว่า หากต้องการใช้ AndroidX, เป็นครั้งแรกให้แน่ใจว่าคุณอัปเดตของคุณgradle.propertiesไฟล์แก้ไขbuild.gradleชุดcompileSdkVersionไป28(หรือสูงกว่า) และใช้บรรทัดต่อไปนี้แทนก่อนหน้านี้compileหนึ่ง
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 ด้านบน
อย่างไรก็ตามในโค้ดหลังจากมุมมองของกิจกรรม / แฟรกเมนต์นั้นสูงเกินจริง ....
FloatingActionButton myFab = (FloatingActionButton) myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
doMyThing();
}
});
ข้อสังเกต:
- หากคุณมีหนึ่งในปุ่มเหล่านั้นที่อยู่บน "ตะเข็บ" ที่แยกสองมุมมอง (โดยใช้ตัวอย่างเช่น RelativeLayout) พร้อมกับพูดว่าขอบด้านล่างของเลย์เอาท์เชิงลบเพื่อซ้อนทับขอบคุณจะสังเกตเห็นปัญหา: ขนาดของ FAB นั้นจริงแตกต่างกันมากเมื่อเทียบกับ lollipop กับ pre-lollipop คุณสามารถเห็นสิ่งนี้ในเครื่องมือแก้ไขเลย์เอาท์แบบวิชวลของเอเอสเมื่อคุณสลับไปมาระหว่าง APIs - มัน 'ดึงออกมา' เมื่อคุณสลับไปที่ pre-lollipop เหตุผลที่ขนาดพิเศษดูเหมือนจะเป็นเพราะเงาขยายขนาดของมุมมองในทุกทิศทาง ดังนั้นคุณต้องพิจารณาสิ่งนี้เมื่อคุณปรับระยะขอบของ 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 โดยใช้โปรแกรมใน "ตะเข็บ" ระหว่างสองพื้นที่ใน RelativeLayout โดยคว้าความสูงของ FAB หารด้วยสองและใช้สิ่งนั้นเป็นออฟเซ็ตระยะขอบ แต่ myFab.getHeight () กลับมาเป็นศูนย์แม้หลังจากมุมมองที่สูงเกินจริงก็ดูเหมือน แต่ฉันใช้ 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"/>
โปรดจำไว้ว่าคุณจะสามารถมีการกระโดดปุ่มออกจากทางเมื่อSnackbarขึ้นมาโดยการตัดไว้ในCoordinatorLayout
มากกว่า:
