Question

背景

假设你有一个滚动活动，使用CoordinatorLayout和AppBarLayout，你有一个顶部标题，在底部滚动时可以折叠（可能有一个RecyclerView或NestedScrollView）。

这样的事情：

现在，您需要在内容出现之前，在底部区域（显示文本的位置）的中心放置一个加载视图（例如，一个ProgressBar和一个TextL在LinearLayout中）。

问题

我使用ViewAnimator在状态之间切换，但是如果我选择将加载视图居中，它会显示在中心下方，因为底部区域占用的空间更多（正如您可以滚动）。 / p>

我尝试了什么

我已经进行了两种解决方案，效果很好： 1.获取加载视图及其父级的大小，并使用它来计算加载视图的上边距 2.将加载视图的底部填充设置为上部区域大小的一半（在这种情况下为90dp，这是上部区域的180dp的一半）。这有点容易，但如果活动中的任何内容的UI或底部区域的父级的UI发生变化，则会破坏位于中心的修复。

代码

几乎与IDE向导中的那个相同，但是在这里：

ScrollingActivity.java

public class ScrollingActivity extends AppCompatActivity {
    private ViewAnimator mViewAnimator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scrolling);
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
        mViewAnimator = findViewById(R.id.viewAnimator);
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            mViewAnimator.showNext();
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

RES /布局/ activity_scrolling.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"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context="com.example.user.myapplication.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent"
            android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" app:toolbarId="@+id/toolbar">

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

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

    <ViewAnimator
        android:id="@+id/viewAnimator" android:layout_width="match_parent" android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:id="@+id/loader" android:layout_width="match_parent" android:layout_height="match_parent"
            android:gravity="center" android:orientation="vertical">

            <ProgressBar
                android:layout_width="wrap_content" android:layout_height="wrap_content"/>

            <TextView
                android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="loading"/>

        </LinearLayout>

        <android.support.v4.widget.NestedScrollView
            android:id="@+id/contentView" android:layout_width="match_parent" android:layout_height="match_parent">

            <TextView
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:layout_margin="@dimen/text_margin" android:text="@string/large_text"/>

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

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

RES /菜单/ menu_scrolling.xml

<menu 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" tools:context="com.example.user.myapplication.ScrollingActivity">
    <item
        android:id="@+id/action_settings" android:orderInCategory="100" android:title="click"
        app:showAsAction="always"/>
</menu>

问题

事情是，我可以自己计算一些东西，但我想知道是否有一种不同的，简单的方法来做到这一点。也许是我不知道的某种旗帜？

我问这个是因为真实应用程序中的底部区域更复杂（上面的示例用于演示问题），有片段甚至是带有多个片段的TabLayout和ViewPager，所以它有点奇怪为此目的计算那些片段中父Activity的内容。

不仅如此，我还在底部有一个tabLayout（属于活动），这使得考虑更加烦人。

Answer 1

我认为从ViewAnimator中删除app:layout_behavior="@string/appbar_scrolling_view_behavior"应该可以解决问题。或者，如果在没有behvariour的情况下将ViewAnimator包装在RelativeLayout中，那么ViewGroup会落后于AppBarLayout，因此您的视图将居中。

更新1（不工作）

测试了我对2个观点的建议并且有效：

<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:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
tools:context="com.example.user.myapplication.ScrollingActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="@dimen/app_bar_height"
    android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout" android:layout_width="match_parent" android:layout_height="match_parent"
        android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed" app:toolbarId="@+id/toolbar">

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

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

<android.support.v4.widget.NestedScrollView
    android:id="@+id/contentView" android:layout_width="match_parent" android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <TextView
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin" android:text="@string/large_text"/>

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

<LinearLayout
    android:id="@+id/loader" android:layout_width="match_parent" android:layout_height="match_parent"
    android:gravity="center" android:orientation="vertical" android:visibility="gone">

    <ProgressBar
        android:layout_width="wrap_content" android:layout_height="wrap_content"/>

    <TextView
        android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="loading"/>

</LinearLayout>

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

根据您的逻辑，只需在视图中交换@ + id / loader和@ + id / contentView的可见性，这应该有效，但遗憾的是您错过了ViewAnimator的动画。

更新2

我用这个代码测试了它（刚刚改变了你自己的自定义样式）并且它将加载器集中在整个视图中。只需尝试在“@ + id / loader”中添加/删除app:layout_behavior="@string/appbar_scrolling_view_behavior"，这样您就可以看到加载器的位置发生变化：

根据行为，它以AppBarLayout下面的区域为中心。

没有它，它以屏幕为中心。

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.user.myapplication.ScrollingActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar" 
        android:layout_width="match_parent" 
        android:layout_height="180dp" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout" 
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" 
            app:toolbarId="@+id/toolbar">

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

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

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/contentView" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:layout_margin="10dp" 
            android:text="@string/large_text"/>

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

    <LinearLayout
        android:id="@+id/loader" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:gravity="center" 
        android:orientation="vertical" 
        android:visibility="gone">

        <ProgressBar
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="loading"/>

    </LinearLayout>

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

更新3

显然当CollapsingToolbarLayout 扩展时，它会向下推动它下方的视图（如果它有app:layout_behavior="@string/appbar_scrolling_view_behavior"）同时考虑到内部工具栏的高度，这就是为什么当它处于此状态，该视图的内容不居中。

因此，在这种情况下解决此方法的一种方法是，我们想要居中的视图具有透明背景并且仅占据区域的中心是利用app:behavior_overlapTop / setOverlayTop(int)并将该视图与具有高度的AppBarLayout重叠工具栏（?attr/actionBarSize）：

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.user.myapplication.ScrollingActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:toolbarId="@+id/toolbar">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/contentView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="@string/large_text" />
    </android.support.v4.widget.NestedScrollView>
    <LinearLayout
        android:id="@+id/loader"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone"
        app:behavior_overlapTop="?attr/actionBarSize"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        <ProgressBar
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"/>

        <TextView
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:text="loading"/>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

希望有所帮助

Answer 2

尝试自定义行为。

class ViewBelowAppBarBehavior @JvmOverloads constructor(
        context: Context? = null, attrs: AttributeSet? = null) : CoordinatorLayout.Behavior<View>(context, attrs) {

    override fun layoutDependsOn(parent: CoordinatorLayout?, child: View?, dependency: View?) = dependency is AppBarLayout

    override fun onDependentViewChanged(parent: CoordinatorLayout?, child: View?, dependency: View?): Boolean {
        val appBar = dependency as AppBarLayout
        // т.к. y - отрицательное число
        val currentAppBarHeight = appBar.height + appBar.y 
        val parentHeight = parent?.height ?: 0
        val placeHolderHeight = (parentHeight - currentAppBarHeight).toInt()
        child?.layoutParams?.height = placeHolderHeight
        child?.requestLayout()
        return false
    }
}

Answer 3

有关@Yarh答案的更详细的解释，这非常完美：

首先创建您自己的布局行为（在我的情况下，我是从AppBarLayout.ScrollingViewBehavior派生的，以保留原始行为）

class AdaptiveHeightScrollingViewBehavior(
    context: Context,
    attrs: AttributeSet
) : AppBarLayout.ScrollingViewBehavior(context, attrs) {

    override fun onDependentViewChanged(parent: CoordinatorLayout, child: View, dependency: View): Boolean {
        (dependency as? AppBarLayout)?.let { appBar ->
            val appBarHeight = appBar.height + appBar.y
            child.layoutParams.height = (parent.height - appBarHeight).toInt()
            child.requestLayout()
        }
        return super.onDependentViewChanged(parent, child, dependency)
    }
}

然后在布局中仅使用ViewPager / FragmentContainer / ViewGroup上的行为或其他任何行为，只需确保其与AppBarLayout的同级

<androidx.viewpager.widget.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="com.sample.behavior.AdaptiveHeightScrollingViewBehavior" />

是否可以轻松将AppBarLayout下面的视图内容置于CoordinatorLayout内？

背景

问题

我尝试了什么

代码

问题

3 个答案: