Floating Action Button的快速實現

ec3y 9年前發布 | 66K 次閱讀 Android Android開發 移動開發

RapidFloatingActionButton 是 Floating Action Button 的快速實現,RapidFloatingActionButton(以下簡稱RFAB)

Floating Action Button的快速實現 Floating Action Button的快速實現 Floating Action Button的快速實現

使用方式:

依賴:
AndroidBucket:基礎工具包
AndroidInject:注解框架

activity_main.xml:

<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout
      xmlns:rfal="http://schemas.android.com/apk/res-auto"
      android:id="@+id/activity_main_rfal"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      rfal:rfal_frame_color="#ffffff"
      rfal:rfal_frame_alpha="0.7"
      >
  <com.wangjie.rapidfloatingactionbutton.RapidFloatingActionButton
          xmlns:rfab="http://schemas.android.com/apk/res-auto"
          android:id="@+id/activity_main_rfab"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentRight="true"
          android:layout_alignParentBottom="true"
          android:layout_marginRight="15dp"
          android:layout_marginBottom="15dp"
          android:padding="8dp"
          rfab:rfab_size="normal"
          rfab:rfab_drawable="@drawable/rfab__drawable_rfab_default"
          rfab:rfab_color_normal="#37474f"
          rfab:rfab_color_pressed="#263238"
          rfab:rfab_shadow_radius="7dp"
          rfab:rfab_shadow_color="#999999"
          rfab:rfab_shadow_dx="0dp"
          rfab:rfab_shadow_dy="5dp"
          />
</com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>

在需要增加RFAB最外層使用<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>,按鈕使用<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionButton>

屬性解釋

RapidFloatingActionLayout:

rfal_frame_color: 展開RFAB時候最外覆蓋層的顏色,默認是純白色
  rfal_frame_alpha: 展開RFAB時候最外覆蓋層的透明度(0 ~ 1),默認是0.7

RapidFloatingActionButton:

rfab_size: RFAB的尺寸大小,只支持兩種尺寸(Material Design規范):
          normal: 直徑56dp
          mini: 直徑40dp
  rfab_drawable: RFAB中間的圖標,默認是一個"+"圖標
  rfab_color_normal: RFAB背景的普通狀態下的顏色。默認是白色
  rfab_color_pressed: RFAB背景的觸摸按下狀態的顏色。默認顏色是"#dddddd"
  rfab_shadow_radius: RFAB的陰影半徑。默認是0,表示沒有陰影
  rfab_shadow_color: RFAB的陰影顏色。默認是透明,另外如果rfab_shadow_radius為0,則該屬性無效
  rfab_shadow_dx: RFAB的陰影X軸偏移量。默認是0
  rfab_shadow_dy: RFAB的陰影Y軸偏移量。默認是0

MainActivity:

@AILayout(R.layout.activity_main)
public class MainActivity extends AIActionBarActivity implements RapidFloatingActionContentLabelList.OnRapidFloatingActionContentListener {

    @AIView(R.id.activity_main_rfal)
    private RapidFloatingActionLayout rfaLayout;
    @AIView(R.id.activity_main_rfab)
    private RapidFloatingActionButton rfaBtn;
    private RapidFloatingActionButtonHelper rfabHelper;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        RapidFloatingActionContentLabelList rfaContent = new RapidFloatingActionContentLabelList(context);
        rfaContent.setOnRapidFloatingActionContentListener(this);
        List<RFACLabelItem> items = new ArrayList<>();
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("Github: wangjiegulu")
                        .setResId(R.drawable.ic_launcher)
                        .setIconNormalColor(0xffd84315)
                        .setIconPressedColor(0xffbf360c)
                        .setWrapper(0)
        );
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("tiantian.china.2@gmail.com")
                        .setResId(R.drawable.ic_launcher)
                        .setIconNormalColor(0xff4e342e)
                        .setIconPressedColor(0xff3e2723)
                        .setWrapper(1)
        );
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("WangJie")
                        .setResId(R.drawable.ic_launcher)
                        .setIconNormalColor(0xff056f00)
                        .setIconPressedColor(0xff0d5302)
                        .setWrapper(2)
        );
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("Compose")
                        .setResId(R.drawable.ic_launcher)
                        .setIconNormalColor(0xff283593)
                        .setIconPressedColor(0xff1a237e)
                        .setWrapper(3)
        );
        rfaContent
                .setItems(items)
                .setIconShadowRadius(ABTextUtil.dip2px(context, 5))
                .setIconShadowColor(0xff999999)
                .setIconShadowDy(ABTextUtil.dip2px(context, 5))
        ;

        rfabHelper = new RapidFloatingActionButtonHelper(
                context,
                rfaLayout,
                rfaBtn,
                rfaContent
        ).build();

    }

    @Override
    public void onRFACItemLabelClick(int position, RFACLabelItem item) {
        Toast.makeText(getContext(), "clicked label: " + position, Toast.LENGTH_SHORT).show();
        rfabHelper.toggleContent();
    }

    @Override
    public void onRFACItemIconClick(int position, RFACLabelItem item) {
        Toast.makeText(getContext(), "clicked icon: " + position, Toast.LENGTH_SHORT).show();
        rfabHelper.toggleContent();
    }
}

除了xml中設置的RapidFloatingActionLayout和RapidFloatingActionButton之外,還需要RapidFloatingActionContent的實現類來填充和指定RFAB的內容和形式。
這里提供了一個快速的RapidFloatingActionContent的實現解決方案:RapidFloatingActionContentLabelList。你可以加入多個item(RFACLabelItem,當然,不建議加太多的item,導致超過一個屏幕),然后設置每個item的顏色、圖標、陰影甚至動畫。
它的效果可參考最上面的效果圖片或者Google的Inbox的效果。
除此之外,你還需要使用RapidFloatingActionButtonHelper來把以上所有零散的組件組合起來。

關于擴展:

如果你不喜歡默認提供的RapidFloatingActionContentLabelList,理論上你可以擴展自己的內容樣式。方法是繼承com.wangjie.rapidfloatingactionbutton.RapidFloatingActionContent,然后初始化內容布局和樣式,并調用父類的setRootView(xxx);方法即可。如果你需要增加動畫,可以重寫如下方法:

public void onExpandAnimator(AnimatorSet animatorSet);
public void onCollapseAnimator(AnimatorSet animatorSet);

把需要的Animator增加到animatorSet中即可
另外,作者也會不定期增加更多的RapidFloatingActionContent的擴展

項目主頁:http://www.baiduhome.net/lib/view/home/1430895846663

 本文由用戶 ec3y 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!