AppBar背景图片铺满全屏，需限制至TabView底部的问题求助

嘿，我来帮你解决这个AppBar背景图的问题！你说的情况我太熟悉了——直接给AppBarLayout设置background的话，图片会默认拉伸铺满整个CoordinatorLayout，完全盖过下方内容对吧？别担心，咱们用个简单的办法就能让背景图乖乖待在AppBar（包括TabView）的范围内，不会越界。

方案一：用ImageView作为AppBar的背景层（最推荐） #

AppBarLayout本质是垂直方向的LinearLayout，所以我们可以把背景图放在AppBarLayout的最底层，然后把Toolbar和TabLayout叠在它上面。这样ImageView只会占据AppBarLayout本身的高度，绝对不会跑到下方内容区域去。

修改后的XML代码如下：

<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:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <!-- 背景图ImageView，放在最底部，适配AppBar的尺寸 -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/your_bg_image"
            android:scaleType="centerCrop" <!-- 可选：根据需求换fitXY/centerInside等 -->
            android:adjustViewBounds="true"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@android:color/transparent" <!-- 设为透明，让背景图透出来 -->
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent" <!-- 同样设透明 -->
            app:tabIndicatorColor="@color/white"
            app:tabSelectedTextColor="@color/white"/>

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

    <!-- 下方的内容容器，记得加behavior让它跟着AppBar滚动 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

关键点说明： #

• ImageView作为AppBarLayout的子View，match_parent的宽高会自动贴合AppBar的实际高度，不会超出
• Toolbar和TabLayout设置透明背景，这样背景图能完整显示在它们下方
• scaleType可以根据你的需求调整：比如centerCrop是裁剪居中（保证图片填满区域），fitXY是拉伸铺满，centerInside是保持图片比例居中显示

方案二：用Inset Drawable限制背景范围（适配性较差，不推荐） #

如果你一定要用AppBarLayout的background属性，可以通过Inset Drawable把图片限制在指定范围内，但这个方法需要固定底部的偏移值，适配不同屏幕时容易出问题。

1. 先在res/drawable下创建inset_bg.xml：

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="60dp"> <!-- 这里的数值是TabView下方的高度，也就是你不想显示图片的区域 -->
    <bitmap
        android:src="@drawable/your_bg_image"
        android:scaleType="centerCrop"/>
</inset>

2. 然后给AppBarLayout设置这个背景：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/inset_bg"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <!-- 你的Toolbar和TabLayout -->
</android.support.design.widget.AppBarLayout>

这个方法的问题是insetBottom是固定值，如果TabLayout高度变化或者屏幕尺寸不同，背景图的显示范围就会出错，所以更推荐方案一。

内容的提问来源于stack exchange，提问作者user9547680