Android中的展开和折叠工具栏 [英] Expanding And Collapsing Toolbar In Android
问题描述
我正在使用折叠工具栏来实现扩展和折叠工具栏,但是当我的工具栏折叠时我卡住了,我想显示其他工具栏.我看过这么一段代码,但是找不到我的解决方案. 我还看到了一个了不起的开发人员之一的解决方案 https://github.com/saulmm/CoordinatorLayoutExample 但无法正确找到我的解决方案
I am implementing expanding and collapsing toolbar with the help of collapsing toolbar but I am stuck when my toolbar is collapsed I want to show different toolbar. I have seen so piece of code but cannot be able to find my solution. I have also seen the solution of one of the amazing developer https://github.com/saulmm/CoordinatorLayoutExample but cannot be able to find out my solution properly
这是我已经实现的代码
activity_collapsing_toolbar.xml
activity_collapsing_toolbar.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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="176dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@color/base_color_theme_new"
android:gravity="center_horizontal"
app:layout_collapseMode="parallax">
<RelativeLayout
android:id="@+id/rl_class_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="26dp"
android:gravity="center">
<LinearLayout
android:id="@+id/ll_class"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@drawable/rounded_white_circle"
android:gravity="center">
<ImageView
android:id="@+id/iv_class_image"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_gravity="center"
android:padding="8dp"
android:src="@drawable/class_4" />
</LinearLayout>
</RelativeLayout>
<TextView
android:id="@+id/tv_class_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/rl_class_image"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="MATHEMATICS"
android:textSize="17sp" />
<TextView
android:id="@+id/tv_videos_test"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/tv_class_name"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="20 VIDEOS | 5 TESTS"
android:textSize="10sp" />
</RelativeLayout>
<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.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="@drawable/rounded_corners_for_list"
android:fillViewport="true"
app:behavior_overlapTop="10dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<!--<include layout="@layout/activity_chapters" />-->
<com.chalklit.widget.NonScrollListView
android:id="@+id/lv_modules_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:divider="@null"
android:scrollbars="none"></com.chalklit.widget.NonScrollListView>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
CollapsingToolbarActivity.java
CollapsingToolbarActivity.java
private CollapsingToolbarLayout collapsingToolbarLayout = null;
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_collapsing_toolbar);
final Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.inflateMenu(R.menu.menu_main);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbarLayout.setTitle(" ");
collapsingToolbarLayout.setContentScrimColor(getResources().getColor(R.color.base_color_theme_new));
collapsingToolbarLayout.setStatusBarScrimColor(getResources().getColor(R.color.base_color_theme_new));
}
推荐答案
这是另一种不使用自定义CoordinatorLayoutBehavior
的方法.
Here's another approach that doesn't use a custom CoordinatorLayoutBehavior
.
它使用来自AppBarLayout
的OnOffsetChangedListener
.
这是一个片段:
class OnOffsetChangedListener implements AppBarLayout.OnOffsetChangedListener {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
final int scrollRange = appBarLayout.getTotalScrollRange();
float offsetFactor = (float) (-verticalOffset) / (float) scrollRange;
...
这将向您展示如何找到总滚动范围,然后找到总滚动范围与当前滚动位置之间的比率.这就是您需要弄清楚如何缩放和放置工具栏视图的方法.
This shows you how to find the total scroll range and then find the ratio between the total scroll range and the current scroll position. This is what you need to figure out how to scale and position your toolbar views.
对于自定义布局(如我一样),您可以覆盖onAttachedToWindow
并在其中添加侦听器:
For a custom layout (like I did), you can override onAttachedToWindow
and add the listener there:
// Add an OnOffsetChangedListener if possible
final ViewParent parent = getParent();
if (parent instanceof AppBarLayout) {
if (mOnOffsetChangedListener == null) {
mOnOffsetChangedListener = new OnOffsetChangedListener();
}
((AppBarLayout) parent).addOnOffsetChangedListener(mOnOffsetChangedListener);
}
我发现这种方法比创建自定义行为要简单一些.
I found this approach to be a little simpler than creating a custom behavior.
我在GitHub上创建了一个示例项目.该应用程序如下所示:
I created an example project on GitHub. The app looks like this:
您可以在 https://github.com/klarson2/Collapsing-Image a>
这篇关于Android中的展开和折叠工具栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!