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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了自定义ImageView类与屏幕中的其他元素重叠相关的知识,希望对你有一定的参考价值。

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

enter image description here

顶部的大白色空间是帖子的图像,我通过复制我在网上找到的代码实现,创建了一个扩展ImageView和修改某些东西的类,使图像100%宽,因为以前我无法实现它。

它有效,但图像与其他元素重叠:

enter image description here

这是我复制和改编的代码:

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>
答案

自定义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>

OUTPUT

没有静态高度

enter image description here

静态高度

enter image description here

以上是关于自定义ImageView类与屏幕中的其他元素重叠的主要内容,如果未能解决你的问题,请参考以下文章

实现 css 自定义错误与其他表单字段重叠

自定义视图布局线覆盖 API 16 中的其他元素

如何在屏幕底部对齐视图,但也在相对布局中的其他视图下方对齐

UITableView中的自定义单元类与静态单元格

使用自定义适配器更改 ListView 中特定行中的 ImageView

使用自定义适配器更改ListView中特定行中的ImageView