Android浮動操作按鈕: RapidFloatingActionButton

Android浮動操作按鈕的快速解決方案,這不僅僅是個按鈕,而是一個能顯示菜單的按鈕。
Android浮動操作按鈕: RapidFloatingActionButton

使用說明:


依賴

Gradle(檢查最新版本):


compile 'com.github.wangjiegulu:RapidFloatingActionButton:x.x.x'


xxx是代表版本號,


Maven(檢查最新版本):

<dependency>
    <groupId>com.github.wangjiegulu</groupId>
    <artifactId>RapidFloatingActionButton</artifactId>
    <version>x.x.x</version>
</dependency>

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.RapidFloatingActionButton>)的最外層布局添加<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>  。


屬性

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的drawable圖片,默認 drawable i時 "+"圖標。

  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.mipmap.ico_test_d)
                        .setIconNormalColor(0xffd84315)
                        .setIconPressedColor(0xffbf360c)
                        .setWrapper(0)
        );
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("tiantian.china.2@gmail.com")
                        .setResId(R.mipmap.ico_test_c)
                        .setIconNormalColor(0xff4e342e)
                        .setIconPressedColor(0xff3e2723)
                        .setLabelColor(Color.WHITE)
                        .setLabelSizeSp(14)
                        .setLabelBackgroundDrawable(ABShape.generateCornerShapeDrawable(0xaa000000, ABTextUtil.dip2px(context, 4)))
                        .setWrapper(1)
        );
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("WangJie")
                        .setResId(R.mipmap.ico_test_b)
                        .setIconNormalColor(0xff056f00)
                        .setIconPressedColor(0xff0d5302)
                        .setLabelColor(0xff056f00)
                        .setWrapper(2)
        );
        items.add(new RFACLabelItem<Integer>()
                        .setLabel("Compose")
                        .setResId(R.mipmap.ico_test_a)
                        .setIconNormalColor(0xff283593)
                        .setIconPressedColor(0xff1a237e)
                        .setLabelColor(0xff283593)
                        .setWrapper(3)
        );
        rfaContent
                .setItems(items)
                .setIconShadowRadius(ABTextUtil.dip2px(context, 5))
                .setIconShadowColor(0xff888888)
                .setIconShadowDy(ABTextUtil.dip2px(context, 5))
        ;
        rfabHelper = new RapidFloatingActionHelper(
                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();
    }
}

 

RFAB要實現展開效果還需要一個對RapidFloatingActionContent的實現,用來設置RFAB展開時的內容。

這里有一個RapidFloatingActionContent的快速實現方案:RapidFloatingActionContentLabelList。你可以添加一些item(RFACLabelItem,當然我們不建議添加過多的item),同時為每個item設置顏色,圖標,陰影,背景圖片,文字大小,文字顏色以及動畫效果。

想預覽此效果,可以查看 The top picture effects 或者 Inbox of Google


最后,你需要RapidFloatingActionButtonHelper來將他們聯系在一起。


關于展開樣式:


如果你并不喜歡RapidFloatingActionContentLabelList,你可以擴展自己的內容樣式。繼承com.wangjie.rapidfloatingactionbutton.RapidFloatingActionContent,初始化內容布局和樣式,觸發setRootView(xxx); 方法。如果想要更多的動畫效果,override這些方法:


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


在animatorSet中添加你的動畫。

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

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