Question

我正在构建一个应用程序来访问WordPress网站API以列出帖子，其中包含以下预览：

顶部的大白色空间是帖子的图像，我通过复制我在网上找到的代码实现，创建了一个扩展ImageView并修改某些东西的类，使图像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

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

由于您的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类与屏幕中的其他元素重叠

1 个答案: