浮动动作按钮

时间:2015-04-19 05:00:53

标签: android button floating-action-button

我一直在尝试使用浮动操作按钮。我尝试使用这里建议的一些资源,链接很棒;但是,由于依赖问题,我无法使用很多。我试图解决它,但它变得更加混乱。长话短说,我使用以下代码作为绕过我的捆绑中的依赖的方法。我按下了按钮;但是,我无法弄清楚如何在单击按钮时显示选项。我尝试使用clicklistener和其他方法,但我总是遇到错误。

public class FloatingActionButton extends View {

Context context;
Paint mButtonPaint;
Paint mDrawablePaint;
Bitmap mBitmap;
boolean mHidden = false;

public FloatingActionButton(Context context) {
    super(context);
    this.context = context;
    init(Color.WHITE);
}

public void init(int color) {
    setWillNotDraw(false);
    setLayerType(View.LAYER_TYPE_SOFTWARE, null);

    mButtonPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    mButtonPaint.setColor(color);
    mButtonPaint.setStyle(Paint.Style.FILL);
    mButtonPaint.setShadowLayer(10.0f, 0.0f, 3.5f, Color.argb(100, 0, 0, 0));
    mDrawablePaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    invalidate();
}

@Override
protected void onDraw(Canvas canvas) {
    setClickable(true);
    canvas.drawCircle(getWidth() / 2, getHeight() / 2, (float) (getWidth() / 2.6), mButtonPaint);
    canvas.drawBitmap(mBitmap, (getWidth() - mBitmap.getWidth()) / 2,
            (getHeight() - mBitmap.getHeight()) / 2, mDrawablePaint);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
    if (event.getAction() == MotionEvent.ACTION_UP) {
        setAlpha(1.0f);
    } else if (event.getAction() == MotionEvent.ACTION_DOWN) {
        setAlpha(0.6f);
    }
    return super.onTouchEvent(event);
}

public void setColor(int color) {
    init(color);
}

public void setDrawable(Drawable drawable) {
    mBitmap = ((BitmapDrawable) drawable).getBitmap();
    invalidate();
}

public void hide() {
    if (!mHidden) {
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1, 0);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1, 0);
        AnimatorSet animSetXY = new AnimatorSet();
        animSetXY.playTogether(scaleX, scaleY);
        animSetXY.setInterpolator(new AccelerateInterpolator());
        animSetXY.setDuration(100);
        animSetXY.start();
        mHidden = true;
    }
}

public void show() {
    if (mHidden) {
        ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 0, 1);
        ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 0, 1);
        AnimatorSet animSetXY = new AnimatorSet();
        animSetXY.playTogether(scaleX, scaleY);
        animSetXY.setInterpolator(new OvershootInterpolator());
        animSetXY.setDuration(200);
        animSetXY.start();
        mHidden = false;
    }
}

public boolean isHidden() {
    return mHidden;
}

public static class Builder {
    private FrameLayout.LayoutParams params;
    private final Activity activity;
    int gravity = Gravity.BOTTOM | Gravity.RIGHT; // default bottom right
    Drawable drawable;
    int color = Color.WHITE;
    int size = 0;
    float scale = 0;

    /**
     * Constructor using a context for this builder and the
     * {@link com.williammora.openfeed.widgets.FloatingActionButton} it creates
     * @param context
     */
    public Builder(Activity context) {
        scale = context.getResources().getDisplayMetrics().density;
        // The calculation (value * scale + 0.5f) is a widely used to convert to dps to pixel
        // units based on density scale
        // see <a href="http://developer.android.com/guide/practices/screens_support.html">
        // developer.android.com (Supporting Multiple Screen Sizes)</a>
        size = (int) (72 * scale + 0.5f); // default size is 72dp by 72dp
        params = new FrameLayout.LayoutParams(size, size);
        params.gravity = gravity;

        this.activity = context;
    }

    public Builder withGravity(int gravity) {
        this.gravity = gravity;
        return this;
    }


    public Builder withMargins(int left, int top, int right, int bottom) {
        params.setMargins((int) (left * scale + 0.5f), (int) (top * scale + 0.5f),
                (int) (right * scale + 0.5f), (int) (bottom * scale + 0.5f));
        return this;
    }


    public Builder withDrawable(final Drawable drawable) {
        this.drawable = drawable;
        return this;
    }
    public Builder withColor(final int color) {
        this.color = color;
        return this;
    }


    public Builder withSize(int size) {
        size = (int) (size * scale + 0.5f);
        params = new FrameLayout.LayoutParams(size, size);
        return this;
    }
    public FloatingActionButton create() {
        final FloatingActionButton button = new FloatingActionButton(activity);
        button.setColor(this.color);
        button.setDrawable(this.drawable);
        params.gravity = this.gravity;
        ViewGroup root = (ViewGroup) activity.findViewById(android.R.id.content);
        root.addView(button, params);
        return button;
    }
}

 }



FloatingActionButton mFab = new FloatingActionButton.Builder(this)
    .withColor(getResources().getColor(R.color.primaryColorDark))
    .withDrawable(getResources().getDrawable(R.drawable.ic_launcher))
    .withSize(72)
    .withMargins(0, 0, 16, 16)
    .create();

MainActivity

     FloatingActionButton mFab = new FloatingActionButton.Builder(this)
    .withColor(getResources().getColor(R.color.primaryColorDark))
    .withDrawable(getResources().getDrawable(R.drawable.ic_launcher))
    .withSize(72)
    .withMargins(0, 0, 16, 16)
    .create();

4 个答案:

答案 0 :(得分:2)

只需将compile 'com.android.support:design:22.2.1'放入您的模块应用依赖项中。

在你的xml中:

<android.support.design.widget.FloatingActionButton
        style="@style/<your_style>"
        android:src="@drawable/<your_icon_src>"
        app:layout_anchor="@id/<if using along with list put your listID here>"
        app:layout_anchorGravity="bottom|right|end"
        android:id="@+id/fab"
        />

在你的java:

FloatingActionButton fab = (FloatingActionButton)findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

答案 1 :(得分:1)

您现在不必创建FAB,它已经可用,只需遵循此Link

你需要添加

<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>

FloatingActionButton myFab = (FloatingActionButton)  myView.findViewById(R.id.myFAB);
myFab.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        doMyThing();
    }
}); 

中的代码

有关详细信息,请访问: FloatingActionButton example with Support Library

答案 2 :(得分:1)

现在无需自己创建FloatingActionButton。新com.android.support:design:23.0.1可以为您做到这一点。请按照以下步骤操作。

1.在Android Studio compile 'com.android.support:design:23.0.1'中的相关性中添加此行build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:design:23.0.1'
}

2.使用以下xml文件创建FloatingActionButton

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/YourEventsLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!--Add other elements here-->

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_margin="16dp"
            android:src="@drawable/ic_add_white_24dp"
            app:elevation="6dp"
            app:fabSize="normal"
            app:pressedTranslationZ="12dp" />

</android.support.design.widget.CoordinatorLayout>
  1. MainActivity方法集onCreatesetOnClickListener如下

    FloatingActionButton fab; fab =(FloatingActionButton)getView()。findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener(){             @覆盖             public void onClick(查看v){               //在这做你想做的             }         });

答案 3 :(得分:1)

enter image description here

这是您创建浮动操作按钮的方法。

<强>的build.gradle

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:23.0.0'
    compile 'com.android.support:design:23.0.1'
}

<强> activity_main.xml中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/viewOne"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:background="@android:color/holo_blue_light"
                android:orientation="horizontal"/>

            <LinearLayout
                android:id="@+id/viewTwo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="0.4"
                android:background="@android:color/holo_orange_light"
                android:orientation="horizontal"/>

        </LinearLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:clickable="true"
            android:src="@drawable/ic_done"
            app:layout_anchor="@id/viewOne"
            app:layout_anchorGravity="bottom|right|end"
            app:backgroundTint="#FF0000"
            app:rippleColor="#FFF" />

    </android.support.design.widget.CoordinatorLayout>

</RelativeLayout>

<强> MainActivity.java

package com.ahotbrew.floatingactionbutton;

import android.support.design.widget.FloatingActionButton;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        FloatingActionButton FAB = (FloatingActionButton) findViewById(R.id.fab);
        FAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Would you like a coffee?", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

希望完整的例子可以帮助某人。

示例来自http://www.ahotbrew.com/android-floating-action-button/ 它还显示了如果感兴趣的话如何将按钮放在其他位置。