【问题标题】:Floating Action Button浮动操作按钮
【发布时间】:2015-06-25 21:15:57
【问题描述】:

我一直在尝试使用浮动操作按钮。我尝试使用此处建议的一些资源,并且链接很棒;但是,由于依赖关系的问题,我不能使用很多。我试图修复它,但它变得更加混乱。长话短说,我使用以下代码绕过我的包中的依赖项。我让按钮开始工作;但是,我无法弄清楚单击按钮时如何显示选项。我尝试了 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();

主活动

     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();

【问题讨论】:

    标签: android button floating-action-button


    【解决方案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

    【讨论】:

    • ic_plus_sign 来自哪里?它是兼容库的一部分吗?在任何地方都找不到它。谢谢!
    【解决方案2】:

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

    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/ 如果有兴趣,它还显示了如何将按钮放置在其他位置。

    【讨论】:

      【解决方案3】:

      现在不需要自己创建FloatingActionButton。新的com.android.support:design:23.0.1 可以为您做到这一点。只需按照以下步骤即可。

      1.在Android Studio中build.gradle的依赖项中添加这一行compile 'com.android.support:design:23.0.1'

      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中onCreate方法集setOnClickListener如下

        FloatingActionButton 工厂; fab = (FloatingActionButton) getView().findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @覆盖 公共无效 onClick(查看 v){ //在这里做你想做的 } });

      【讨论】:

        【解决方案4】:

        只需将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) {
        
                    }
                });
        

        【讨论】:

          猜你喜欢
          • 2018-10-18
          • 2015-09-01
          • 2016-11-26
          • 2015-11-08
          • 1970-01-01
          • 2020-01-03
          • 2016-11-27
          • 2017-02-19
          • 2016-07-27
          相关资源
          最近更新 更多