2017-02-27 8 views
0

私のアプリでフローティングアクションボタンメニューを作成しようとしています。これは、マテリアル設計ガイドラインで示すアクティブFABの一種であるGoogleカレンダーアプリでFAB、次のようになります。GoogleカレンダーのようなAndroidのフルスクリーンブロック表示FAB

こちらをご覧ください: フローティング操作ボタンにフォーカスに色を変える」の下https://material.io/guidelines/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button

選ばれた時に持ち上げる」と述べた。 2つのビデオがあります。右のメニューは、このメニューの外観を示しています。私は、このグレーの背景を完璧に動作しますが、私はachiveことができないことであるボタンなどのメニューがあり、そのアクションとタスクバーがブロック(警告のような)全体のUI ...

ノーマル:

normal

そして選択:

selected

をあなたが見ることができるように、材料設計指針は、選択したFAB全体UIをブロックする必要があることを教えてくれる。しかし、私は...どのように

を知らないので、私は現時点で持っているもの:

<?xml version="1.0" encoding="utf-8"?> 
<layout> 

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

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_alignParentTop="true" 
      android:id="@+id/fab_background" 
      android:visibility="gone"> 

     </RelativeLayout> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/global_fab_mini" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:layout_marginBottom="90dp" 
      android:layout_marginRight="24dp" 
      android:src="@drawable/ic_credentials_light" 
      android:theme="@style/Base.Widget.AppCompat.ImageButton" 
      android:visibility="gone" 
      app:backgroundTint="@color/cool_grey" 
      app:fabSize="mini" /> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/global_fab" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:layout_margin="@dimen/fab_margin" 
      android:src="@drawable/ic_add_light" 
      android:theme="@style/Base.Widget.AppCompat.ImageButton" 
      app:fabSize="normal" 
      android:visibility="visible" /> 

    </RelativeLayout> 
</layout> 

このFABは、対応のViewGroupクラスがあります。 私は2つのFabを保持しているglobal_fab.xmlがあります。

package de.mycompany.ui.view; 

import android.content.Context; 
import android.databinding.DataBindingUtil; 
import android.util.AttributeSet; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.animation.Animation; 
import android.view.animation.AnimationUtils; 
import android.widget.FrameLayout; 

import com.mycompany.package.android.R; 
import com.mycompany.package.android.databinding.GlobalFabBinding; 

public class GlobalFABView extends FrameLayout implements IGlobalFABView { 

    private GlobalFabBinding globalFABViewBinding; 
    private Listener listener; 

    private boolean fabMenuOpen = false; 

    public GlobalFABView(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     init(context); 
    } 

    public GlobalFABView(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     init(context); 
    } 

    private void init(Context context) { 
     globalFABViewBinding = DataBindingUtil.inflate(LayoutInflater.from(context), R.layout.global_fab, this, false); 

     addView(globalFABViewBinding.getRoot()); 

     this.globalFABViewBinding.globalFab.setOnClickListener(this::globalFabClicked); 
     this.globalFABViewBinding.fabBackground.setOnClickListener(this::backgroundClicked); 
    } 

    private void globalFabClicked(View v) { 
     this.listener.mainFabClicked(); 
    } 
    private void backgroundClicked(View v) { 
     this.listener.backgroundClicked(); 
    } 

    @Override 
    public void show() { 
    } 

    @Override 
    public void hide() { 
    } 

    @Override 
    public void setListener(Listener listener) { 
     this.listener = listener; 
    } 

    @Override 
    public void toggleFabMenu() { 
     Animation fabAnimation = AnimationUtils.loadAnimation(this.getContext(), this.fabMenuOpen ? 
       R.anim.global_fab_close : 
       R.anim.global_fab_open); 
     final boolean fabMenuOpen = this.fabMenuOpen; 
     if (!fabMenuOpen) { 
      globalFABViewBinding.globalFabMini.setVisibility(VISIBLE); 
     } 
     globalFABViewBinding.fabBackground.setVisibility(
       fabMenuOpen ? GONE : VISIBLE 
     ); 
     fabAnimation.setAnimationListener(new Animation.AnimationListener() { 
      @Override 
      public void onAnimationStart(Animation animation) { 
       // Nothing to do. 
      } 

      @Override 
      public void onAnimationEnd(Animation animation) { 
       if (fabMenuOpen) { 
         globalFABViewBinding.globalFabMini.setVisibility(GONE); 
        globalFABViewBinding.globalFab.setSelected(!fabMenuOpen); 
       } 
      } 

      @Override 
      public void onAnimationRepeat(Animation animation) { 
       // Nothing to do. 
      } 
     }); 
     globalFABViewBinding.globalFabMini.startAnimation(fabAnimation); 
     this.fabMenuOpen = !fabMenuOpen; 
    } 
} 

私のメニューは問題なく開いたり閉じたりします(これには2つのanim xmlがあります)。 Background RelativeLayout(+id/fab_background)は、「どこでもクリックしてメニューを閉じる」イベントを処理するためのものです。

今、私は私がそれをしたい任意のactivtyにこれを追加します。

<RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      tools:context=".MainActivity" 
      android:id="@+id/fab_holder"> 

      <include layout="@layout/app_bar_with_progress_bar" android:id="@+id/appbar"/> 

      <de.mycompany.ui.view.HomeView 
       android:id="@+id/home_view" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_below="@+id/appbar" /> 

      <de.mycompany.ui.view.GlobalFABView 
       android:id="@+id/global_fab_view" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" /> 

     </RelativeLayout> 
+0

'xml'レイアウトを投稿していただけますか? –

+0

@SanjayKakadiyaが私のXMLを追加しました。 –

答えて

0

OK、私はこれを得ました。

画面全体に新しいレイヤーを配置するために、透明な新しいアクティビティを開始する必要があります。 メニューを保持するアクティビティを作成しました。私の通常のアクティビティには、フローティングアクションボタンが1つだけ追加されました。これをクリックするとアニメーションなしでMenuActivityが開きますので、フローティングアクションボタンメニューの外観をアニメーション表示できます。私はラベルや背景と私の工場のミニを移動遷移アニメーションのフェードアニメーションを持っているアニメーションで

public void toggleFabMenu() { 
     Animation fabAnimation =  AnimationUtils.loadAnimation(this.getContext(), this.fabMenuOpen ? 
       R.anim.global_fab_close : 
       R.anim.global_fab_open); 
     Animation labelAnimation = AnimationUtils.loadAnimation(this.getContext(), this.fabMenuOpen ? 
       R.anim.global_fab_labels_close : 
       R.anim.global_fab_labels_open); 
     Animation backgroundAnimation = AnimationUtils.loadAnimation(this.getContext(), this.fabMenuOpen ? 
       R.anim.global_fab_menu_background_close : 
       R.anim.global_fab_menu_background_open); 
     final boolean fabMenuOpen = this.fabMenuOpen; 
     if (!fabMenuOpen) { 
      globalFABViewBinding.globalFabMini.setVisibility(VISIBLE); 
      globalFABViewBinding.fabMiniLabel.setVisibility(VISIBLE); 
      globalFABViewBinding.fabMainLabel.setVisibility(VISIBLE); 
      globalFABViewBinding.fabBackground.setVisibility(VISIBLE); 
     } 
     fabAnimation.setAnimationListener(new Animation.AnimationListener() { 
      @Override 
      public void onAnimationStart(Animation animation) { 
       if (fabMenuOpen) { 
        globalFABViewBinding.globalFabMini.setVisibility(GONE); 
        globalFABViewBinding.fabMiniLabel.setVisibility(GONE); 
        globalFABViewBinding.fabMainLabel.setVisibility(GONE); 
         globalFABViewBinding.globalFab.setSelected(!fabMenuOpen); 
       } 
      } 

      @Override 
      public void onAnimationEnd(Animation animation) { 
       if (fabMenuOpen) { 
        globalFABViewBinding.fabBackground.setVisibility(GONE); 
        listener.menuDisappeared(); 
       } 
      } 

      @Override 
      public void onAnimationRepeat(Animation animation) { 
       // Nothing to do. 
      } 
     }); 
     globalFABViewBinding.globalFabMini.startAnimation(fabAnimation); 
     globalFABViewBinding.fabMiniLabel.startAnimation(labelAnimation); 
     globalFABViewBinding.fabMainLabel.startAnimation(labelAnimation); 
     globalFABViewBinding.fabBackground.startAnimation(backgroundAnimation); 

     this.fabMenuOpen = !fabMenuOpen; 
    } 

:私はこの機能を持っている私の活動に

<?xml version="1.0" encoding="utf-8"?> 
<layout xmlns:android="http://schemas.android.com/apk/res/android"> 

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

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:id="@+id/fab_background" 
      android:background="@color/fab_menu_background" 
      android:visibility="gone"> 

     </RelativeLayout> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/global_fab_mini" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:layout_marginBottom="90dp" 
      android:layout_marginRight="24dp" 
      android:src="@drawable/ic_credentials_light" 
      android:theme="@style/Base.Widget.AppCompat.ImageButton" 
      android:visibility="gone" 
      app:backgroundTint="@color/cool_grey" 
      app:fabSize="mini" /> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/global_fab" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentRight="true" 
      android:layout_margin="@dimen/fab_margin" 
      android:src="@drawable/ic_add_light" 
      android:theme="@style/Base.Widget.AppCompat.ImageButton" 
      app:fabSize="normal" 
      android:visibility="visible" /> 

     <TextView 
      android:text="@string/fab_mini_label" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="15dp" 
      android:id="@+id/fab_mini_label" 
      android:background="@drawable/fab_label_background" 
      android:gravity="center" 
      android:paddingLeft="8dp" 
      android:paddingRight="8dp" 
      android:layout_marginRight="4dp" 
      android:elevation="2dp" 
      android:textSize="14dp" 
      android:layout_alignBottom="@+id/global_fab" 
      android:layout_toStartOf="@+id/global_fab" 
      android:visibility="gone"/> 

     <TextView 
      android:text="@string/fab_main_label" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/fab_main_label" 
      android:background="@drawable/fab_label_background" 
      android:gravity="center" 
      android:paddingLeft="8dp" 
      android:paddingRight="8dp" 
      android:elevation="2dp" 
      android:textSize="14dp" 
      android:layout_marginBottom="41dp" 
      android:layout_above="@+id/fab_mini_label" 
      android:layout_alignStart="@+id/fab_mini_label" 
      android:visibility="gone" /> 

    </RelativeLayout> 
</layout> 

:これが私の活動のレイアウトでありますそれが属する場所にボタンを押します。

ステータスバー上でさえも背景に合わせるというトリックはできません。だから私たちは回避策を見つける必要があり、これはあまり明らかではありません。まず、アクティビティをフルスクリーンにすると思ったが、ステータスバーが消えてしまった。だから私たちはそこにステータスバーを置かなければならないが、我々はそれを透明にする必要がある。そこで、ステータスバーの色を見て、バックグラウンドを横取りすることができます。これを行うには、新しいテーマを作成しました:

<style name="Theme.Transparent" parent="AppTheme"> 
    <item name="android:windowIsTranslucent">true</item> 
    <item name="android:windowBackground">@android:color/transparent</item> 
    <item name="android:windowContentOverlay">@null</item> 
    <item name="android:windowNoTitle">true</item> 
    <item name="android:immersive">false</item> 
    <item name="android:backgroundDimEnabled">false</item> 
    <item name="android:windowAnimationStyle">@null</item> 
    <item name="colorPrimaryDark">@android:color/transparent</item> 
</style> 

はい。これはまさに私が欲しいものです。

関連する問題