web-dev-qa-db-ja.com

フラグメント内に完全に表示されないフローティングアクションボタン

FrabmentでRecyclerViewとともにFABボタンを使用しています。このフラグメントは、TabViewPagerのインスタンスです。 FABボタンに問題があります。 RecyclerViewとfabボタンをFrameLayout内に配置しました。FABボタンは右下に配置されています。今私が直面している問題は、FABボタンが完全に見えないことです。下のスクリーンショットに示すように、半分の部分が非表示になっています。誰でもこの問題を解決するのに役立ちますか？前もって感謝します。

FAB with RecyclerView inside FrameLayout

注： FABは、スクロールされると適切に位置合わせされます。問題は、それが理想的な場合にのみ発生します（スクロールが完了する前）。

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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">

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recyclerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="end|bottom"
        Android:layout_margin="10dp"
        app:backgroundTint="@color/red"
        Android:src="@drawable/ic_done"/>
</FrameLayout>

tabviewpagerlayout.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout        xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">


    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appBarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />


        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content" />

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</Android.support.design.widget.CoordinatorLayout>
androidandroid-fragmentsfloating-action-buttonandroiddesignsupportandroid-coordinatorlayout
46
Chandru

CoordinatorLayout内でFABを移動する必要があります。このようなもの：

<Android.support.design.widget.CoordinatorLayout>

    <Android.support.design.widget.AppBarLayout>

        <Android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways" />

        <Android.support.design.widget.TabLayout/>

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_gravity="end|bottom"/>

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

次に、この方法でviewPager内にRecyclerViewを追加できます。

Adapter adapter = new Adapter(getSupportFragmentManager());
adapter.addFragment(new RecyclerViewFragment(), "Tab1");
viewPager.setAdapter(adapter);

ここで、RecyclerViewFragmentレイアウトは次のとおりです。

 <Android.support.v7.widget.RecyclerView
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/recyclerView"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"/>
10
Gabriele Mariotti

選択されているタブが何であってもFABを表示/非表示にする必要があるのは、許容できる解決策ではありません。すべてのレイアウトの組み合わせを試しましたが、FABをアクティビティレイアウトに移動することが唯一の解決策でした。しかし、ボタンが1つのタブにのみ必要な場合はどうでしょうか？これが現在機能する唯一の方法ですが、このバージョンはバグが多すぎるため、デザインライブラリの更新を期待しています。とにかく、一番下の行は、FABはCoordinatorLayoutの直接の子孫でなければならないので、折りたたみツールバーによって押し下げられないことです...

17
Bojan Ilievski
  1. FloatingActionButtonが完全に見えないという同じ問題があり、画面の下部にありました。下にスクロールすると表示されます。
  2. また、下にスクロールするとタブが非表示になりましたが、常に表示されるようにしたいので、app:layout_scrollFlags="scroll|enterAlways"を削除して修正しました。 スクロールダウン時にタブが非表示にならないようにする方法？ のJDevへのクレジット
    これにより、FloatingActionButtonの問題も解決され、現在表示されています。
6
cgr

私はちょうど同じ問題に遭遇しました。残念ながら、私はあなたのための答えはありませんが、いくつかのアドオンポイントがあります。

ボタンが押し下げられているのではなく、フラグメント全体が押し下げられています。私はこれまでテストしていませんが、フラグメントページのサイズを確認できる方法があれば、本来のように画面の下部で終了しないことがわかります。

考えられる解決策として、サイズ「？attr/actionBarSize」のパディングを下部に追加することを考えています。

これをテストし、終了したらポストバックします

update：80 dpの境界線を使用したため、 スクリーンショット を取得しますショット、wth）

回避策：

<Android.support.design.widget.CoordinatorLayout
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:id="@+id/rootLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        >
        <Android.support.design.widget.AppBarLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <include
                layout="@layout/toolbar"/>

        </Android.support.design.widget.AppBarLayout>

        <FrameLayout
            Android:id="@+id/fragment_root"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:background="@drawable/border"
            Android:layout_marginTop="?attr/actionBarSize"
            >
            <!--Android:paddingBottom="?attr/actionBarSize"-->
            <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:background="@drawable/border"></LinearLayout>
            <fragment
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:name="com.derek.hianthy.mydiary.ui.BaseFragment"
                tools:layout="@layout/layout"
                Android:background="@drawable/border"
                />

        </FrameLayout>
        <Android.support.design.widget.FloatingActionButton
            Android:id="@+id/fabBtn"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom|right"
            Android:layout_marginBottom="@dimen/fab_margin_bottom"
            Android:layout_marginRight="@dimen/fab_margin_right"
            Android:src="@drawable/ic_action_add"
            app:borderWidth="0dp"
            app:fabSize="normal"
            Android:layout_alignParentBottom="true"
            Android:layout_alignParentRight="true"
            Android:layout_alignParentTop="false"
            Android:layout_alignParentLeft="false" />

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

notic app：layout_behavior = "@ string/appbar_scrolling_view_behavior"は削除されました。 結果

4
Derek Zhu

FABを収容アクティビティに移動することで、ガブリエレが提案したことをやった。また、onTabSelectedでFABのcolor/clickListenerを更新する必要があります。

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        ...

        setFloatingActionButtonForImagesTab();

    }

    ...

    @Override
    public void onTabSelected(final TabLayout.Tab tab) {
    switch (tab.getPosition()) {
        case 0:
            setFloatingActionButtonForImagesTab();
            break;
        case 1:
            setFloatingActionButtonForMusicTab();
            break;
        case 2:
            setFloatingActionButtonForVideoTab();
            break;
        }
    }

    ...

}

そして、セットアップ関数で色を設定し、リスナーをクリックするだけです：

private void setFloatingActionButtonForImagesTab() {
    myViewPager.setCurrentItem(0);
    floatingActionButton.setBackgroundTintList(getResources().getColorStateList(R.color.purple));
    floatingActionButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(coordinatorLayout, "images", Snackbar.LENGTH_LONG)
                .show();
        }
    });
}

上記のsetCurrentItemの呼び出しに注意してください。 TabLayout.OnTabSelectedListenerを実装する必要があります。

4
Adam Johns

少し遅れるかもしれませんが、私にとって最良の選択肢は、コンテンツとフローティングボタンを含むフラグメントを含む別のフラグメントを作成することです。このコードは私のアプリケーションで非常にうまく機能します：

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="domain.ItemsFragment">


    <fragment
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:name="com.lucyapp.client.ItemFragment"
        Android:id="@+id/fragment"
        tools:layout="@layout/fragment_item_list" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="bottom|end"
        Android:layout_margin="@dimen/fab_margin"
        Android:src="@Android:drawable/ic_dialog_email" />

</FrameLayout>
3
speedingdeer

このソリューションは私のために働いた。次のコードを使用して、CustomBehaviorという新しいクラスを作成します。

public class CustomBehavior extends CoordinatorLayout.Behavior<ViewPager> {

private int mActionBarHeight;

public CustomBehavior(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);
    init(context);
}

public CustomBehavior(Context context) {
    init(context);
}

private void init(Context context) {
    TypedValue tv = new TypedValue();
    if (context.getTheme().resolveAttribute(Android.R.attr.actionBarSize, tv, true)) {
        mActionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, context.getResources().getDisplayMetrics());
    }
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, ViewPager child, View dependency) {
    return dependency instanceof AppBarLayout;
}

public boolean onDependentViewChanged(CoordinatorLayout parent, ViewPager child, View dependency) {
    offsetChildAsNeeded(parent, child, dependency);
    return false;
}

private void offsetChildAsNeeded(CoordinatorLayout parent, View child, View dependency) {
    if (child instanceof ViewPager) {
        ViewPager viewPager = (ViewPager) child;
        View list = viewPager.findViewById(R.id.recycler_view);
        if (list != null) {
            final CoordinatorLayout.Behavior behavior =
                    ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
            if (behavior instanceof AppBarLayout.Behavior) {
                final AppBarLayout.Behavior ablBehavior = (AppBarLayout.Behavior) behavior;
                AppBarLayout appBarLayout = (AppBarLayout) dependency;
                ViewCompat.setTranslationY(list, ablBehavior.getTopAndBottomOffset()
                        + appBarLayout.getTotalScrollRange()
                        + mActionBarHeight);
            }
        }
    }
}

}

ここで、XMLファイルのビューページャーウィジェットにカスタム動作クラスを割り当てます

<Android.support.v4.view.ViewPager
    Android:id="@+id/viewpager"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="yourpackage.CustomBehavior"
    />
1
ignacio_gs

私は、フラグメントでFABを表示する必要があるという同じ問題を抱えていました。私がやったことは、ツールバーから行を削除しただけです

app:layout_scrollFlags="scroll|enterAlways"

レイアウトを確認できます

<?xml version="1.0" encoding="utf-8"?>
<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/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:paddingTop="@dimen/appbar_padding_top"
        Android:background="@color/white"
        app:elevation="0dp"
        Android:elevation="0dp"
        >

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar_main"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_weight="1"
            Android:background="@color/white"
            app:title="@string/app_name">

        </Android.support.v7.widget.Toolbar>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs_main"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            >


        </Android.support.design.widget.TabLayout>

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</Android.support.design.widget.CoordinatorLayout>
0
Shantanu Patil

私は同じ問題に直面しています。ページャーの1番目のフラグメントFABボタンが画面の下に表示され、そのショーをスクロールしています。しかし、いくつかの発見の後、私は書いていることがわかりました

app:layout_behavior="@string/appbar_scrolling_view_behavior"

coordinatorLayoutのViewPagerで。したがって、このスクロール動作を削除すると、FABの位置の問題は解決されます。

実装が正しく動作していることを確認してください：

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

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

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <Android.support.v7.widget.Toolbar
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay">

            <LinearLayout
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:orientation="vertical">

                <TextView
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:gravity="center_horizontal"
                    Android:text="@string/app_name"
                    Android:textColor="@color/textPrimary"
                    Android:textSize="18sp" />

                <TextView
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content"
                    Android:gravity="center_horizontal"
                    Android:text="@string/str_toolbar_subtittle"
                    Android:textColor="@color/textPrimary"
                    Android:textSize="14sp" />
            </LinearLayout>
        </Android.support.v7.widget.Toolbar>

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tabs"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom"
            Android:background="?attr/colorPrimary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabSelectedTextColor="@color/errorColor"
            app:tabTextColor="@color/white" />

    </Android.support.design.widget.AppBarLayout>

    <Android.support.v4.view.ViewPager
        Android:id="@+id/viewpager"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/app_bar" />

</Android.support.design.widget.CoordinatorLayout>
0
Nikhil Jogdand