对齐2张图像，使第一张图像作为第二张图像的边框

Question

我正试图找到一种方法来对齐2张图像。第一个图像是边界图像（如宝丽来），第二个是图像。图片应该从边框的角落开始（距离真实边框图像的左边和顶部大约20dp）但是这个距离会随着你的屏幕而变化......

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >

                <ImageView
                    android:id="@+id/image"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" />

                <ImageView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:src="@drawable/border" />
            </RelativeLayout>

这就是我现在所得到的：

最难的是图像不应弹出边框图像，整个视图背后的背景（边框+图像）是可变的！

Answer 1

我认为你应该让你的边框图片成为9补丁： http://developer.android.com/guide/developing/tools/draw9patch.html

Answer 2

最好的办法是使用“边框”图像作为布局的背景图，然后将图像放在该布局上：

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/polaroid_background"
    android:padding="20dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

我刚才没有对此进行测试，但这与您的操作大致相同。

Answer 3

我不得不处理类似的问题，back_img，img，text。我可以通过风格（针对每种不同的屏幕尺寸）以非常糟糕的方式处理它，但是我发现它是唯一有效的...

我设置了一个LinearLayout并将3个imgs放在另一个LinearLayout

中

LinearLayoutLine  //wrap content\\
   LinearLayoutImg1 //wrap content + marginRight\\
      Img11
      Img12
      Text13
   /LinearLayoutImg1

   LinearLayoutImg2
      Img21
      Img22
      Text23
   /LinearLayoutImg2
/LinearLayoutLine

在样式中，类似这样：

    <style name="img1">
        <item name="android:layout_width">85dp</item>
        <item name="android:layout_height">85dp</item>
        <item name="android:layout_marginLeft">1dp</item>
        <item name="android:layout_marginRight">2dp</item>
        <item name="android:layout_marginTop">1dp</item>
        <item name="android:layout_marginBottom">1dp</item>
        <item name="android:gravity">center</item>
        <item name="android:scaleType">fitXY</item>
    </style>

    <!--  imatge del tema -->
    <style name="img2">
        <item name="android:layout_width">82.6dp</item>
        <item name="android:layout_height">82.6dp</item>
        <item name="android:layout_marginLeft">-87dp</item>
        <item name="android:layout_marginRight">0dp</item>
        <item name="android:layout_marginTop">0dp</item>
        <item name="android:layout_marginBottom">0dp</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="text" parent="@android:style/TextAppearance.Small">
        <item name="android:layout_width">66dp</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:lines">1</item>
        <item name="android:gravity">center</item>
        <item name="android:layout_marginBottom">-25.3dp</item>
        <item name="android:layout_marginLeft">-75dp</item>
        <item name="android:textStyle">normal</item>
        <item name="android:textSize">10.5sp</item>
        <item name="android:textColor">@color/blanc</item>
    </style>

所以，你设置Img1大小有一点余量（我发现有时你需要Imgs中的边距），第二个有负IMG1宽度+ rightMargin，如果需要，还有文本。