Benutzerdefinierte Image Klasse überlappt andere Elemente in Bildschirm

Question

ich eine App bin der Aufbau, die ein Wordpress-Website API greift auf die Beiträge zur Liste, die eine Vorschau wie diese hat:

Die große weiße Fläche auf dem Oben ist das Bild des Posts, das ich durch Kopieren eines Codes, den ich online gefunden habe, erstellt habe, um eine Klasse zu erstellen, die ImageView erweitert und etwas verändert, wodurch das Bild 100% breiter wird, weil ich es vorher nicht erreichen konnte.

Es funktioniert, aber das Bild überlappt, die anderen Elemente:

Dies ist der Code, den ich kopiert habe und angepasst:

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); 
    } 
} 

Was ich will, ist erreichen mache das Bild 100% breit, aber behalte den Anteil und überschneide dich natürlich nicht.

Meine Layout-Datei für jedes Quadrat:

<?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

Benutzerdefinierte ImageView Klasse überlappt andere Elemente in Bildschirm

Weil Ihre RelativeLayout statische Höhe es Sie Ausgabe ändern, nur hat android:layout_height="wrap_content" wird gelöst werden, überprüfen Sie die folgenden Bilder

Verwenden Sie

android:layout_height="wrap_content" 

statt

android:layout_height="280dp" 

Versuchen Sie, diese statische Höhe entfernen von Ihrem 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

ohne statische Höhe

mit statischen Höhe