Resize Imageview based on the parent height

2019-07-07 05:35发布

问题:

I have a layout as defined below

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:orientation="vertical" >


        <ImageView
            android:id="@+id/movieImageView"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_centerVertical="true"
            android:paddingBottom="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:src="@drawable/blank_96_1382x" /> 

        <TextView
            android:id="@+id/movieTypeView"
            android:layout_width="75dp"
            android:layout_height="wrap_content"
            android:layout_below="@+id/movieImageView"
            android:layout_alignLeft="@+id/movieImageView"
            android:maxLines="1"
            android:text="Tv Series"
            android:textColor="@color/gray"
            android:textSize="12sp" 
            android:gravity="center"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:visibility="gone"
            android:textStyle="bold" />

   <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"    
            android:orientation="vertical"
            android:layout_centerVertical="true"
            android:layout_marginBottom="5dp"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@id/movieImageView"
            android:layout_marginLeft="5dp">

                <TextView
                    android:id="@+id/movieTitleView"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"                        
                    android:maxLines="3"
                    android:text="Shutter Island starring leonardo di caprio"
                    android:textColor="@color/white"
                    android:textSize="17sp"
                    android:textStyle="bold"
                    android:typeface="sans" />


        ...
</RelativeLayout>

It would look like this

I want the imageview to shrink based on the contents on the left side of the imageview. For instance if few fields are missing and sum of heights of fields is less than image height then it should shrink (as shown below) .

If sum of heights of the fields on left side of image is greater than specified image height then it should retain the specified height as below

I tried extending imageview and change height/ width of image view reatining the aspect ratio of image as explained here custom image view. But problem is, parent height returned by MeasureSpec.getSize(heightMeasureSpec) does not return the exact height occupied by fields on the left side (since that will be available only after onMeasure of all child is returned). So this approach did not take me anywhere.

How can I achieve this desired behavior ?

回答1:

You should align imageView with the textviews in a linearlayout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true" >

    <LinearLayout
        android:id="@+id/lnrTextViews"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#cee"
            android:gravity="center"
            android:maxLines="1"
            android:paddingBottom="3dp"
            android:paddingTop="3dp"
            android:text="Tv Series"
            android:textColor="#fff"
            android:textSize="12sp"
            android:textStyle="bold"
            android:visibility="visible" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#f00"
            android:gravity="center"
            android:maxLines="1"
            android:paddingBottom="3dp"
            android:paddingTop="3dp"
            android:text="Tv Series"
            android:textColor="#fff"
            android:textSize="12sp"
            android:textStyle="bold"
            android:visibility="visible" />
    </LinearLayout>

    <ImageView
        android:id="@+id/movieImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/lnrTextViews"
        android:layout_alignTop="@id/lnrTextViews"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:paddingBottom="5dp"
        android:src="@drawable/songs" />

</RelativeLayout>

Copy paste this code and add some different sized image and extra textviews.



回答2:

This needs to be done using code. You need to call those size APIs a few milliseconds after the screen renders. So, if you call it 100 milliseconds after, using postDelayed method of any view that has been rendered, you will get the sizes.



回答3:

try like this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding_top = "10dp"
android:padding_bottom = "10dp"
android:padding_left = "10dp"
android:orientation="vertical" >


    <ImageView
        android:id="@+id/movieImageView"
        android:layout_width="75dp"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:paddingBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:src="@drawable/blank_96_1382x" /> 


回答4:

Try this...

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <LinearLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        >

        <ImageView 
            android:id="@+id/ivOne"
            android:src="@drawable/ic_launcher"
            android:layout_width="90dp"  
            android:layout_height="90dp"  // you can check by changing the values.
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            android:padding="5dp"

            />

    </LinearLayout>

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center|center_horizontal">

        <EditText 
            android:id="@+id/etOne"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Text:"
            android:textColorHint="#4584a1"
            android:layout_margin="10dp"
            android:textColor="#4584a1"
            >

        </EditText>

       <EditText 
            android:id="@+id/etTwo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Text"
            android:textColorHint="#4584a1"
            android:layout_margin="10dp"
            android:textColor="#4584a1"
            >

        </EditText>

    </LinearLayout>   

   </LinearLayout> 

I hope it will help.