Question

我有一张图片（.png），分为3件top，middle，bottom。（提到的部分是相同大小的不）。

我想要实现的目标是让layout原始图像从上面的3部分组合 - 但middle部分也应显示textview } 超过它。

从某种意义上说，我已经掌握了上述大部分内容，但是使用我当前的layout - 当textview的文本超过某个长度（水平或垂直）时，图像会被破坏，因为中间和底部之间存在间隙（垂直过量）或middle部分与top和bottom（水平过剩）相关。

实际上我想要实现的是textview将始终与基础middle imageview保持相同的大小。

我的layout代码如下（代码将用于android 4.0 +）：

<?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="#88666666"
android:id="@+id/top_layout">
  <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
           android:orientation="vertical"
           android:paddingTop="25dp" >
<ImageView
android:id="@+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/quotetops" />

<RelativeLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/quotemiddles" />

<TextView
        android:id="@+id/mytext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true"
        android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"        
         />
</RelativeLayout>

<ImageView
android:id="@+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>

感谢。

Answer 1

为LinearLayout

的所有三个孩子执行此操作

android:layout_width="wrap_content"
android:layout_height="0dp"
android:weight="1dp"

for middle element为RelativeLayout

的子项执行此操作

android:layout_width="match_parent"
android:layout_height="match_parent"

你也可以抛弃RelativeLayout，因为它是多余的。您的最终布局文件应如下所示

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:paddingTop="25dp"
    android:background="#88666666"
    android:id="@+id/top_layout">
    <ImageView
        android:id="@+id/ivTop"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:paddingTop="0dp"
        android:layout_marginRight="15dp"
        android:clickable="false"
        android:paddingLeft="20dip"
        android:scaleType="center"
        android:src="@drawable/quotetops" />

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="0dp">

        <ImageView
            android:id="@+id/ivMiddle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_alignParentRight="true"
            android:paddingTop="0dp"
            android:layout_marginRight="15dp"
            android:clickable="false"
            android:paddingLeft="20dip"
            android:scaleType="center"
            android:src="@drawable/quotemiddles" />

        <TextView
            android:id="@+id/mytext"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_marginTop="20dp"
            android:layout_centerHorizontal="true"
            android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"
            />
    </FrameLayout>

    <ImageView
        android:id="@+id/ivBottom"
        android:layout_width="wrap_content"
        android:layout_weight="1"
        android:layout_height="0dp"
        android:layout_alignParentRight="true"
        android:paddingTop="0dp"
        android:layout_marginRight="15dp"
        android:clickable="false"
        android:paddingLeft="20dip"
        android:scaleType="center"
        android:src="@drawable/quotebottoms" />
</LinearLayout>

Answer 2

最后，使用android:layout_align...并引用middle imageview解决了这个问题。

（我也从中间android:layout_alignParentRight="true"删除了不必要的imageview - 但这不是主要问题）

所以，最终的布局变成了：

<?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="#88666666"
android:id="@+id/top_layout">
  <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
           android:orientation="vertical"
           android:paddingTop="25dp" >
<ImageView
android:id="@+id/ivTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/quotetops" />

<RelativeLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivMiddle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/quotemiddles" />

<TextView
        android:id="@+id/mytext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:layout_centerHorizontal="true"
    android:text="ajsdhaj\n\n\n\n\n\n\nhdjajhsdjfhsdjdfjsdjfksdjfkjkfj\ndkfjkdjfkj"    
       android:layout_alignLeft="@+id/ivMiddle"
        android:layout_alignRight="@+id/ivMiddle"
        android:layout_alignTop="@+id/ivMiddle"
        android:layout_alignBottom="@+id/ivMiddle"     
         />
</RelativeLayout>

<ImageView
android:id="@+id/ivBottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingTop="0dp"
android:layout_marginRight="15dp"
android:clickable="false"
android:paddingLeft="20dip"
android:scaleType="center"
android:src="@drawable/quotebottoms" />
</LinearLayout>
</RelativeLayout>

Android：保持叠加文本视图大小与基础imageview相同

2 个答案: