android - Android App Background：使用多张图片

Question

我有一个背景图像，它被分成三个单独的图像：

backgroundTop.png
backgroundMiddle.png
backgroundBottom.png

我将如何在 Android 应用程序中实现背景，其中顶部图像显示在应用程序顶部，底部图像显示在底部，中间图像平铺在两者之间？这当然取决于屏幕上加载了多少内容——就像在网页中一样。

换句话说，中间图像平铺的总次数将取决于屏幕上的内容。

我在这里看到了一种从单个图像中实现平铺背景的解决方案：How to make android app's background image repeat

如果您使用的是单张图片，这可以正常工作，但不适用于多张图片。

链接到下面的例子，所以你知道我的意思：

http://rockfreaks.net/images/reviewPageTop.png

http://rockfreaks.net/images/reviewPageMiddle.png

http://rockfreaks.net/images/reviewPageBottom.png

Answer 1

Think you can try combining layer list drawable (it's possible to set insets for layers) with a tiled bitmap drawable that is placed as a middle layer and positioned with appropriate insets.

Something like this:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@drawable/page_top" />
  <item 
     android:insetTop="@dimen/page_top_height"
     android:insetBottom="@dimen/page_bottom_height"
     >
    <bitmap
        android:src="@drawable/page_middle_tile"
        android:tileMode="repeat"
        />
  </item>
  <item android:drawable="@drawable/page_bottom" />
</layer-list>

But it all depends on your layout indeed.

Answer 2

Set the background as the middle image and tile it. (like in the example you show)

Create a header view that you insert at the top of each page.

Create a footer view that you insert at the bottom of each page.

And have your content in the middle.

I've made it a flat file here, but you can easily imagine refactoring it into includes, or whatever your application needs.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00FF00" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:layout_alignParentTop="true"
        android:background="#FF0000" />

    <!-- Your content -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dip"
        android:layout_alignParentBottom="true"
        android:background="#0000FF" />

</RelativeLayout>

• Red = Header
• Green = Tiles (which would be inherited from your Theme)
• Blue = Footer

Answer 3

Try something like this :

Top and bottom in two layouts with android:gravity="TOP" and "BOTTOM". These two layouts are set up with android:background="@drawable/xxx.png"

For the center, either use your solution or maybe use a ScrollView.