FloatingActionButton增強(qiáng)版一個(gè)按鈕跳出多個(gè)按鈕第三方開源之FloatingActionButton
更新時(shí)間：2015年12月08日 11:14:18 作者：Z2
這篇文章主要介紹了FloatingActionButton增強(qiáng)版一個(gè)按鈕跳出多個(gè)按鈕第三方開源之FloatingActionButton 的相關(guān)資料,需要的朋友可以參考下
FloatingActionButton項(xiàng)目在github上的主頁：https://github.com/futuresimple/android-floating-action-button
FloatingActionButton使用簡單，而且可以自定義顏色、大小、背景圖片
項(xiàng)目構(gòu)造：
下面是demo的代碼（主要見sample）：
布局：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background" >
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/pink_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="dp"
fab:fab_colorNormal="@color/pink"
fab:fab_colorPressed="@color/pink_pressed"
fab:fab_icon="@drawable/ic_fab_star" />
<TextView
style="@style/menu_labels_style"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/pink_icon"
android:layout_centerHorizontal="true"
android:layout_marginBottom="dp"
android:text="Text below button" />
<com.getbase.floatingactionbutton.AddFloatingActionButton
android:id="@+id/semi_transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/pink_icon"
android:layout_centerHorizontal="true"
android:layout_marginBottom="dp"
fab:fab_colorNormal="@color/blue_semi_transparent"
fab:fab_colorPressed="@color/blue_semi_transparent_pressed"
fab:fab_plusIconColor="@color/white" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/setter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/semi_transparent"
android:layout_centerHorizontal="true"
android:layout_marginBottom="dp" />
<com.getbase.floatingactionbutton.AddFloatingActionButton
android:id="@+id/normal_plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="dp"
android:layout_marginLeft="dp"
android:layout_marginStart="dp"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_plusIconColor="@color/half_black" />
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/right_labels"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/normal_plus"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="dp"
android:layout_marginStart="dp"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_addButtonSize="mini"
fab:fab_labelStyle="@style/menu_labels_style"
fab:fab_labelsPosition="right" >
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_title="Label on the right" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_size="mini"
fab:fab_title="Another one on the right" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="dp"
android:layout_marginEnd="dp"
android:layout_marginRight="dp"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_labelStyle="@style/menu_labels_style" >
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/action_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_title="Action A" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/action_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_title="Action with a very long name that won\'t fit on the screen" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="dp"
android:layout_marginRight="dp"
android:layout_marginTop="dp"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_addButtonSize="mini"
fab:fab_expandDirection="down"
fab:fab_labelStyle="@style/menu_labels_style" >
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_size="mini" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/button_remove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_title="Click to remove" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/button_gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/action_enable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_title="Set bottom menu enabled/disabled" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginEnd="dp"
android:layout_marginRight="dp"
android:layout_marginTop="dp"
android:layout_toLeftOf="@+id/multiple_actions_down"
android:layout_toStartOf="@+id/multiple_actions_down"
fab:fab_addButtonColorNormal="@color/white"
fab:fab_addButtonColorPressed="@color/white_pressed"
fab:fab_addButtonPlusIconColor="@color/half_black"
fab:fab_addButtonSize="mini"
fab:fab_addButtonStrokeVisible="false"
fab:fab_expandDirection="left" >
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_size="mini" />
<com.getbase.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_size="mini" />
</com.getbase.floatingactionbutton.FloatingActionsMenu>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="@+id/setter_drawable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/setter"
android:layout_centerHorizontal="true" />
</RelativeLayout>
JAVA代碼：
package com.getbase.floatingactionbutton.sample;
import com.getbase.floatingactionbutton.FloatingActionButton;
import com.getbase.floatingactionbutton.FloatingActionsMenu;
import android.app.Activity;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
findViewById(R.id.pink_icon).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, "Clicked pink Floating Action Button", Toast.LENGTH_SHORT).show();
}
});
FloatingActionButton button = (FloatingActionButton) findViewById(R.id.setter);
button.setSize(FloatingActionButton.SIZE_MINI);
button.setColorNormalResId(R.color.pink);
button.setColorPressedResId(R.color.pink_pressed);
button.setIcon(R.drawable.ic_fab_star);
button.setStrokeVisible(false);
final View actionB = findViewById(R.id.action_b);
FloatingActionButton actionC = new FloatingActionButton(getBaseContext());
actionC.setTitle("Hide/Show Action above");
actionC.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
actionB.setVisibility(actionB.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);
}
});
final FloatingActionsMenu menuMultipleActions = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
menuMultipleActions.addButton(actionC);
final FloatingActionButton removeAction = (FloatingActionButton) findViewById(R.id.button_remove);
removeAction.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((FloatingActionsMenu) findViewById(R.id.multiple_actions_down)).removeButton(removeAction);
}
});
ShapeDrawable drawable = new ShapeDrawable(new OvalShape());
drawable.getPaint().setColor(getResources().getColor(R.color.white));
((FloatingActionButton) findViewById(R.id.setter_drawable)).setIconDrawable(drawable);
final FloatingActionButton actionA = (FloatingActionButton) findViewById(R.id.action_a);
actionA.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
actionA.setTitle("Action A clicked");
}
});
// Test that FAMs containing FABs with visibility GONE do not cause crashes
findViewById(R.id.button_gone).setVisibility(View.GONE);
final FloatingActionButton actionEnable = (FloatingActionButton) findViewById(R.id.action_enable);
actionEnable.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
menuMultipleActions.setEnabled(!menuMultipleActions.isEnabled());
}
});
FloatingActionsMenu rightLabels = (FloatingActionsMenu) findViewById(R.id.right_labels);
FloatingActionButton addedOnce = new FloatingActionButton(this);
addedOnce.setTitle("Added once");
rightLabels.addButton(addedOnce);
FloatingActionButton addedTwice = new FloatingActionButton(this);
addedTwice.setTitle("Added twice");
rightLabels.addButton(addedTwice);
rightLabels.removeButton(addedTwice);
rightLabels.addButton(addedTwice);
}
}
colors：
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="black_semi_transparent">#B2000000</color> <color name="background">#e5e5e5</color> <color name="half_black">#808080</color> <color name="white">#fafafa</color> <color name="white_pressed">#f1f1f1</color> <color name="pink">#e91e63</color> <color name="pink_pressed">#ec407a</color> <color name="blue_semi_transparent">#805677fc</color> <color name="blue_semi_transparent_pressed">#80738ffe</color> </resources>
您可能感興趣的文章:
- C#中Action和Func的區(qū)別
- 使用.NET中的Action及Func泛型委托深入剖析
- SQL Function 自定義函數(shù)詳解
- 深入理解(function(){... })();
- Javascript自執(zhí)行匿名函數(shù)(function() { })()的原理淺析
- JavaScript function函數(shù)種類詳解
- js立即執(zhí)行函數(shù): (function ( ){})( ) 與 (function ( ){}( )) 有什么區(qū)別?
- JavaScript獲取function所有參數(shù)名的方法
- seajs加載jquery時(shí)提示$ is not a function該怎么解決
- javascript中$(function() {});寫與不寫有哪些區(qū)別
- jQuery中$(function() {});問題詳解
- PHP register_shutdown_function()函數(shù)的使用示例
- 詳解Python中的裝飾器、閉包和functools的教程
- 用JS動(dòng)態(tài)改變表單form里的action值屬性的兩種方法
- 動(dòng)態(tài)設(shè)置form表單的action屬性的值的簡單方法
- 詳解在Java的Struts2框架中配置Action的方法
- php實(shí)現(xiàn)表單多按鈕提交action的處理方法
- Android 廣播大全 Intent Action 事件詳解
- Codeigniter框架的更新事務(wù)（transaction）BUG及解決方法
- 詳解Func<T>與Action<T>區(qū)別
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了ListView仿微信聊天界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
Android提高之MediaPlayer播放網(wǎng)絡(luò)視頻的實(shí)現(xiàn)方法
這篇文章主要介紹了Android的MediaPlayer播放網(wǎng)絡(luò)視頻的實(shí)現(xiàn)方法,是一個(gè)非常實(shí)用的功能,需要的朋友可以參考下2014-08-08
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)記事本功能的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Android自定義ViewGroup實(shí)現(xiàn)朋友圈九宮格控件
在我們的實(shí)際應(yīng)用中,經(jīng)常需要用到自定義控件,比如自定義圓形頭像，自定義計(jì)步器等等,這篇文章主要給大家介紹了關(guān)于Android自定義ViewGroup實(shí)現(xiàn)朋友圈九宮格控件的相關(guān)資料,需要的朋友可以參考下2021-07-07
android 多點(diǎn)觸摸圖片縮放的具體實(shí)現(xiàn)方法
2013-06-06
Android SharedPreference存儲(chǔ)文件三步走
SharedPreferences是安卓平臺(tái)上一個(gè)輕量級(jí)的存儲(chǔ)類，用來保存應(yīng)用的一些常用配置，比如Activity狀態(tài)，Activity暫停時(shí)，將此activity的狀態(tài)保存到SharedPereferences中；當(dāng)Activity重載，系統(tǒng)回調(diào)方法onSaveInstanceState時(shí)，再從SharedPreferences中將值取出2023-01-01
Kotlin中的對(duì)象表達(dá)式和對(duì)象聲明的具體使用
這篇文章主要介紹了Kotlin中的對(duì)象表達(dá)式和對(duì)象聲明的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要介紹了Android打包上傳AAR文件到Maven倉庫的示例，幫助大家更好的理解和學(xué)習(xí)使用Android開發(fā)，感興趣的朋友可以了解下2021-03-03
ViewDragHelper實(shí)現(xiàn)QQ側(cè)滑效果
這篇文章主要為大家詳細(xì)介紹了ViewDragHelper實(shí)現(xiàn)QQ側(cè)滑效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
兩個(gè)surfaceView實(shí)現(xiàn)切換效果
這篇文章主要為大家詳細(xì)介紹了兩個(gè)surfaceView實(shí)現(xiàn)切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11