向上滚动CollapsingToolbarLayout时移动FloatingActionButton

时间：2015-11-11 20:43:25

标签： android android-layout floating-action-button android-collapsingtoolbarlayout

我有一个使用CollapsingToolbarLayout，RecyclerView和FloactingActionButton的布局。

当用户向下滚动RecyclerView并在向上滚动时收回它时，我的想法是扩展我的工具栏。

但是当我向上滚动我的RecyclerView时，AppBarLayout缩回并且我的FloactingActionButton消失了。

我想在屏幕上的其他地方再次显示它，如botton。

我该怎么做？

这是我的屏幕：

向下滚动之前 - 我的FloactingActionButton就在那里。

enter image description here

向下滚动 - FloactingActionButton没有剩余空间，因此它被忽略了。我只想在屏幕上显示它。

enter image description here

我的布局XML代码：

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="192dp">

    <android.support.design.widget.CollapsingToolbarLayout
        android:elevation="4dp"
        android:id="@+id/collapsing_toolbar"
        android:background="@color/primary"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>


<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.FloatingActionButton
    style="@style/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    app:layout_anchor="@id/app_bar_layout"
    app:layout_anchorGravity="bottom|right|end" />

我的活动代码

public class MainActivityRecycler extends AppCompatActivity implements OnDataSelected {

private CollapsingToolbarLayout collapsingToolbarLayout;


public void onDataSelected(View view, int position) {
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_recycler);
    setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
    collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbarLayout.setTitle("Collapsing");
    //collapsingToolbarLayout.setExpandedTitleColor(getResources().getColor(android.R.color.transparent));

    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    ArrayList<String> details = new ArrayList<String>();
    details.add("Main Facilities");
    details.add("Restaurants");
    details.add("Shops");
    details.add("Motel");
    details.add("Forecourt");
    DetailsAdapter mAdapter = new DetailsAdapter(this, null, details);
    recyclerView.setAdapter(mAdapter);
    recyclerView.setItemAnimator(new DefaultItemAnimator());
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}



class DetailsAdapter extends RecyclerView.Adapter<DetailsAdapter.ViewHolder> {

    private List<String> cars;
    private Context context;
    private OnDataSelected onDataSelected;

    public DetailsAdapter(Context context, OnDataSelected onDataSelected, List<String> cars) {
        this.context = context;
        this.onDataSelected = onDataSelected;
        this.cars = cars;
    }

    @Override
    public DetailsAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);

        ViewHolder viewHolder = new ViewHolder(view);
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        String car = cars.get(position);
        holder.textViewTitleCar.setText(car);
    }

    @Override
    public int getItemCount() {
        return cars.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {

        public TextView textViewTitleCar;

        public ViewHolder(View view) {
            super(view);
            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    treatOnDataSelectedIfNecessary(v, getAdapterPosition());
                }
            });

            textViewTitleCar = (TextView) view.findViewById(R.id.info_text);
        }
    }

    private void treatOnDataSelectedIfNecessary(View view, int position) {
        if (onDataSelected != null) {
            onDataSelected.onDataSelected(view, position);
        }
    }
}

}

2 个答案:

答案 0 :(得分：0)

您可以轻松为项目创建任何行为。您需要为AppBarLayout实现ScrollListener。自定义行为的更多示例 - Github

我希望能够正确理解和帮助。

public class FlexibleSpaceExampleActivity extends AppCompatActivity
    implements AppBarLayout.OnOffsetChangedListener {
    private static final int PERCENTAGE_TO_SHOW_IMAGE = 20;
    private View mFab;
    private int mMaxScrollSize;
    private boolean mIsImageHidden;

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

        mFab = findViewById(R.id.flexible_example_fab);

        Toolbar toolbar = (Toolbar) findViewById(R.id.flexible_example_toolbar);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override public void onClick(View v) {
                onBackPressed();
            }
        });

        AppBarLayout appbar = (AppBarLayout) findViewById(R.id.flexible_example_appbar);
        appbar.addOnOffsetChangedListener(this);
    }

    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
        if (mMaxScrollSize == 0)
            mMaxScrollSize = appBarLayout.getTotalScrollRange();

        int currentScrollPercentage = (Math.abs(i)) * 100
            / mMaxScrollSize;

        if (currentScrollPercentage >= PERCENTAGE_TO_SHOW_IMAGE) {
            if (!mIsImageHidden) {
                mIsImageHidden = true;

                ViewCompat.animate(mFab).scaleY(0).scaleX(0).start();
                /**
                * Realize your any behavior for FAB here!
                **/
            }
        }

        if (currentScrollPercentage < PERCENTAGE_TO_SHOW_IMAGE) {
            if (mIsImageHidden) {
                mIsImageHidden = false;
                ViewCompat.animate(mFab).scaleY(1).scaleX(1).start();
                /**
                * Realize your any behavior for FAB here!
                **/
            }
        }
    }

    public static void start(Context c) {
        c.startActivity(new Intent(c, FlexibleSpaceExampleActivity.class));
    }
}

答案 1 :(得分：0)

使用浮动操作按钮并设置我设置的属性。在collapsingToolbarLayout中显示FAB非常容易。

<android.support.design.widget.AppBarLayout
    android:id="@+id/activity_main_appbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    tools:ignore="InconsistentLayout">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/activity_main_collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#2196f3"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        tools:ignore="InconsistentLayout">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/paris"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />
        <android.support.v7.widget.Toolbar
            android:id="@+id/activity_main_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/activity_main_nested_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:ignore="InconsistentLayout">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/activity_main_recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:src="@drawable/ic_call_black_24dp"
    app:layout_anchor="@id/activity_main_appbar"
    app:layout_anchorGravity="bottom|right|end" />

相关问题
最新问题