是否可以在 CoordinatorLayout 内轻松地将视图的内容居中放置在 AppBarLayout 下方？

Question

是否可以在 CoordinatorLayout 内轻松地将视图的内容居中放置在 AppBarLayout 下方？

and*_*per 7 android android-collapsingtoolbarlayout android-appbarlayout

背景

假设您有一个带有 CoordinatorLayout 和 AppBarLayout 的滚动活动，其中顶部标题可以在底部滚动时折叠（可能有 RecyclerView 或 NestedScrollView）。

像这样的东西：

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

问题

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

我试过的

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

编码

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

滚动活动.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);
    }
}

Run Code Online (Sandbox Code Playgroud)

res/layout/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>

Run Code Online (Sandbox Code Playgroud)

res/menu/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>

Run Code Online (Sandbox Code Playgroud)

问题

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

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

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

Answer 1

fma*_*oni 1

我认为app:layout_behavior="@string/appbar_scrolling_view_behavior"从 ViewAnimator 中删除应该可以解决问题。或者，如果这不起作用，则将 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>

Run Code Online (Sandbox Code Playgroud)

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

更新2

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

通过该行为，它以 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>

Run Code Online (Sandbox Code Playgroud)

更新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>

Run Code Online (Sandbox Code Playgroud)

希望能帮助到你

归档时间：	8 年，4 月前
查看次数：	2022 次
最近记录：	5 年，2 月前