自定义 ImageView class 与屏幕中的其他元素重叠

Question

我正在构建一个访问 WordPress 网站 API 以列出 post 的应用程序，其预览如下：

上面的大白space是post的形象，我是复制网上找的一段代码实现的，创建一个class扩展[=13] =] 并修改了一些东西，使图像 100% 宽，因为以前我无法实现它。

有效，但图像与其他元素重叠：

这是我复制并改编的代码：

public class ProportionalImageView extends AppCompatImageView {

  public ProportionalImageView(Context context) {
    super(context);
  }

  public ProportionalImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public ProportionalImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    Drawable d = getDrawable();

    if (d != null) {
      int w = MeasureSpec.getSize(widthMeasureSpec);
      int h = w * d.getIntrinsicHeight() / d.getIntrinsicWidth();
      setMeasuredDimension(w, h);
    }

    else super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  }
}

当然，我想要实现的是使图像 100% 宽但保持比例并且不重叠。

我的布局文件，每个方块：

<?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="280dp"
  android:layout_marginBottom="32sp"
  android:background="@android:color/white">

  <skillpoint.com.skillpoint.ProportionalImageView
    android:id="@+id/imgImageUrl"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:adjustViewBounds="true" />

  <View
    android:layout_width="match_parent"
    android:layout_height="2dp"
    android:layout_below="@+id/imgImageUrl"
    android:background="@color/colorAccent" />

  <TextView
    android:id="@+id/tvTitle"
    style="@style/Post.Preview"
    android:layout_below="@+id/imgImageUrl"
    android:text="Lorem Ipsum"
    android:textColor="@color/colorTextColorPrimaryDark"
    android:textSize="22sp" />

  <TextView
    android:id="@+id/tvDate"
    style="@style/Post.Preview"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/tvTitle"
    android:layout_margin="0dp"
    android:text="00/00/0000"
    android:textColor="@color/colorTextColorPrimaryDark"
    android:textSize="12sp" />

  <TextView
    android:id="@+id/tvContent"
    style="@style/Post.Preview"
    android:layout_below="@+id/tvDate"
    android:text="Lorem ipsum dolor sit amet"
    android:textColor="@color/colorTextColorSecondaryDark"
    android:textSize="13sp" />

</RelativeLayout>

Answer 1

Custom ImageView class is overlapping other elements in screen

因为你的 RelativeLayout 有静态高度只需将它更改为 android:layout_height="wrap_content" 你的问题将得到解决检查下面的图像

使用

android:layout_height="wrap_content"

而不是

android:layout_height="280dp"

试试这个从您的 RelativeLayout

中删除静态高度

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="visible">


    <com.example.user33.workingtestapp.ProportionalImageView
        android:id="@+id/imgImageUrl"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/disha" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:layout_below="@+id/imgImageUrl"
        android:background="@color/colorAccent" />

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imgImageUrl"
        android:text="Lorem Ipsum"
        android:textColor="#ff00"
        android:textSize="22sp" />

    <TextView
        android:id="@+id/tvDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/tvTitle"
        android:layout_margin="0dp"
        android:text="00/00/0000"
        android:textSize="12sp" />

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvDate"
        android:text="Lorem ipsum dolor sit amet"
        android:textSize="13sp" />

</RelativeLayout>

输出

无静高

静态高度

自定义 ImageView class 与屏幕中的其他元素重叠

Custom ImageView class is overlapping other elements in screen

android

imageview

overlap