私のアプリでフローティングアクションボタンメニューを作成しようとしています。これは、マテリアル設計ガイドラインで示すアクティブ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 ...
ノーマル:
そして選択:
をあなたが見ることができるように、材料設計指針は、選択した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>
'xml'レイアウトを投稿していただけますか? –
@SanjayKakadiyaが私のXMLを追加しました。 –