Android浮动按钮和背景覆盖

时间:2015-10-22 13:54:31

标签: android material-design

我已经搜索但没有找到任何关于如何使用背景的浮动按钮的教程或库,如下面在Skype中使用的那样。

我使用这些有关制作浮动按钮的教程来学习本教程。

https://github.com/codepath/android_guides/wiki/Floating-Action-Buttonshttps://www.bignerdranch.com/blog/floating-action-buttons-in-android-l/https://github.com/codepath/android_guides/wiki/Design-Support-Library

编辑请阅读!

根据@Simon,我能够使用https://github.com/futuresimple/android-floating-action-button库来实现浮动按钮布局。但是我现在因为无法在库函数中设置相对布局背景颜色而陷入困境,因为我无法设置背景暗淡。

请参阅下面的浮动按钮的Java代码,我已经删除了其他按钮,让Skype看起来很像。

public class FloatButtonActivity extends Activity {

    RelativeLayout brl;

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

        //final View actionB = findViewById(R.id.action_b);

        ShapeDrawable drawable = new ShapeDrawable(new OvalShape());
        drawable.getPaint().setColor(getResources().getColor(R.color.white));


        /* Button 3 */
        final FloatingActionButton actionA = (FloatingActionButton) findViewById(R.id.action_a);
        actionA.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(FloatButtonActivity.this, "Clicked on this button 3", Toast.LENGTH_LONG).show();


            }
        });

        /* Button 2 */
        final FloatingActionButton actionB = (FloatingActionButton) findViewById(R.id.action_b);
        actionB.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(FloatButtonActivity.this, "Clicked on this button 2", Toast.LENGTH_LONG).show();
            }
        });


        /* Button 1 */
        FloatingActionButton actionC = new FloatingActionButton(getBaseContext());
        actionC.setTitle("Button 1");
        actionC.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(FloatButtonActivity.this, "Clicked on this button 1", Toast.LENGTH_LONG).show();
            }
        });

        final FloatingActionsMenu menuMultipleActions = (FloatingActionsMenu) findViewById(R.id.multiple_actions);
        menuMultipleActions.addButton(actionC);

    }

}

这是下面的XML布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fab="http://schemas.android.com/apk/res-auto"
    android:background="@color/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<RelativeLayout
    android:id="@+id/floatbutton_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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_alignParentRight="true"
        android:layout_alignParentEnd="true"
        fab:fab_addButtonColorNormal="@color/white"
        fab:fab_addButtonColorPressed="@color/white_pressed"
        fab:fab_addButtonPlusIconColor="@color/half_black"
        fab:fab_labelStyle="@style/menu_labels_style"
        android:layout_marginBottom="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginEnd="16dp">

        <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_title="Button 3"
            fab:fab_colorPressed="@color/white_pressed"/>

        <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_title="Button 2"
            fab:fab_colorPressed="@color/white_pressed"/>

    </com.getbase.floatingactionbutton.FloatingActionsMenu>


</RelativeLayout>

</RelativeLayout>

问题:

有一个FloatingActionsMenu操作类,其OnClickListener设置为初始化按钮的toggle()。 我不允许在类中设置背景颜色,因为它不是具有相对布局的活动。请问我该怎么做?

mAddButton.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        toggle(); //This calls the other float buttons
        Log.d("MSG: ", "In FloatingActionsMenu Class");
      }
    });

但我想要了解skype的APP中正在做什么

我希望能够逐步了解如何实现以下目标。

enter image description here

1 个答案:

答案 0 :(得分:3)

所以有一些库可以做到这一点,这里有一个这样的库完全符合你的要求:https://github.com/futuresimple/android-floating-action-button

但是,如果您想以旧时尚的方式进行,您也可以按照以下步骤实现:

  1. 您可以创建一个带有onClickListener的FAB按钮。一旦用户点击FAB,屏幕就会变暗。您可以通过windowManager类在窗口上获取处理程序,然后将标志设置为FLAG_DIM_BEHIND(WindowManager.LayoutParams.FLAG_DIM_BEHIND)来实现。执行此操作的代码是:
  2. &#13;
    &#13;
            WindowManager wm = (WindowManager) getActivity().getSystemService(Context.WINDOW_SERVICE);
            WindowManager.LayoutParams p = (WindowManager.LayoutParams) parent.getLayoutParams();
            p.flags = WindowManager.LayoutParams.FLAG_DIM_BEHIND;
            p.dimAmount = 0.4f;
            wm.updateViewLayout(parent, p);
    &#13;
    &#13;
    &#13;

    1. 您需要通过设置每个图标的translateY动画来设置其他FAB的动画,以便它能够飞行&#34;单击主FAB后立即向上。

    2. 然后,您可以为屏幕上现在显示的每个新FAB设置onClickListeners,以便在用户点击它们时它们具有逻辑。

    3. 这可能是一些工作,所以如果你采用旧时尚的方式做好一些研究的准备 - 我会使用图书馆,而不是很少思考。

      其他指南中有关于FAB的更多信息:https://guides.codepath.com/android/Floating-Action-Buttons