向上滚动 CollapsingToolbarLayout 时移动 FloatingActionButton
Moving FloatingActionButton when scrolling up CollapsingToolbarLayout
我有一个带有 CollapsingToolbarLayout、一个 RecyclerView 和一个 FloactingActionButton 的布局。
我的想法是当用户向下滚动 RecyclerView 时展开我的工具栏并在向上滚动时收回它。
但是当我向上滚动我的 RecyclerView 时，AppBarLayout 缩回并且我的 FloactingActionButton 消失。
我想在屏幕的其他地方再次显示它，例如按钮。
我该怎么做？
这是我的屏幕：
向下滚动之前 - 我的 FloactingActionButton 在那里。
向下滚动后 - FloactingActionButton 没有剩余空间，因此它会关闭。我只想在屏幕底部显示它。
我的布局代码 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" />
我的代码 Activity
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);
}
}
}
}
您可以轻松地为您的项目创建任何行为。您需要为 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));
}
}
使用浮动操作按钮并按照我的设置设置属性。在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" />
我有一个带有 CollapsingToolbarLayout、一个 RecyclerView 和一个 FloactingActionButton 的布局。
我的想法是当用户向下滚动 RecyclerView 时展开我的工具栏并在向上滚动时收回它。
但是当我向上滚动我的 RecyclerView 时，AppBarLayout 缩回并且我的 FloactingActionButton 消失。
我想在屏幕的其他地方再次显示它，例如按钮。
我该怎么做？
这是我的屏幕：
向下滚动之前 - 我的 FloactingActionButton 在那里。
向下滚动后 - FloactingActionButton 没有剩余空间，因此它会关闭。我只想在屏幕底部显示它。
我的布局代码 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" />
我的代码 Activity
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);
}
}
}
}
您可以轻松地为您的项目创建任何行为。您需要为 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));
}
}
使用浮动操作按钮并按照我的设置设置属性。在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" />