ImageView - czy wysokość dopasowania do szerokości?

Mam widok obrazu. Chcę, aby jego szerokość była wypełniona_parent. Chcę, aby jego wysokość była taka sama, jak szerokość. Na przykład:

<ImageView
  android:layout_width="fill_parent"
  android:layout_height="whatever the width ends up being" />

Czy coś takiego jest możliwe w pliku układu bez konieczności tworzenia własnej klasy widoku?

Dzięki

Aktualizacja: 14 września 2017 r

Zgodnie z poniższym komentarzem biblioteka procentowego wsparcia jest przestarzała od wersji 26.0.0 Android Support Library. Oto nowy sposób na zrobienie tego:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="1:1" />

</android.support.constraint.ConstraintLayout>

Zobacz tutaj

Wycofane:

Zgodnie z tym postem napisanym przez programistów Androida, wszystko, co musisz teraz zrobić, to zawinąć wszystko, co chcesz, w PercentRelativeLayout lub PercentFrameLayout, a następnie określić jego współczynniki

<android.support.percent.PercentRelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        app:layout_widthPercent="100%"
        app:layout_aspectRatio="100%"/>

</android.support.percent.PercentRelativeLayout>

Może to odpowie na twoje pytanie:

<ImageView
    android:id="@+id/cover_image"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true" />

Możesz zignorować scaleTypeatrybut dla tej konkretnej sytuacji.

Można to zrobić za pomocą LayoutParams, aby dynamicznie ustawić wysokość widoków, gdy znasz szerokość widoków w czasie wykonywania. Musisz użyć wątku Runnable, aby uzyskać szerokość widoków w czasie wykonywania, w przeciwnym razie będziesz próbował ustawić wysokość, zanim poznasz szerokość widoku, ponieważ układ nie został jeszcze narysowany.

Przykład tego, jak rozwiązałem swój problem:

final FrameLayout mFrame = (FrameLayout) findViewById(R.id.frame_id);

    mFrame.post(new Runnable() {

        @Override
        public void run() {
            RelativeLayout.LayoutParams mParams;
            mParams = (RelativeLayout.LayoutParams) mFrame.getLayoutParams();
            mParams.height = mFrame.getWidth();
            mFrame.setLayoutParams(mParams);
            mFrame.postInvalidate();
        }
    });

LayoutParams musi być typu widoku nadrzędnego, w którym znajduje się widok. Mój układ FrameLayout znajduje się wewnątrz elementu RelativeLayout w pliku xml.

    mFrame.postInvalidate();

jest wywoływana, aby wymusić ponowne rysowanie widoku w innym wątku niż wątek interfejsu użytkownika

Nie mogłem uzyskać odpowiedzi Davida Chu, aby pracować dla elementu RecyclerView i zorientowałem się, że muszę ograniczyć ImageView do elementu nadrzędnego. Ustaw szerokość ImageView na 0dpi ogranicz jej początek i koniec do elementu nadrzędnego. Nie jestem pewien, czy ustawienie szerokości na wrap_contentlub match_parentdziała w niektórych przypadkach, ale myślę, że jest to lepszy sposób, aby element podrzędny ConstraintLayout wypełnił jego element nadrzędny.

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintDimensionRatio="1:1"/>

</android.support.constraint.ConstraintLayout>

Oto, co zrobiłem, aby mieć ImageButton, który zawsze ma szerokość równą jego wysokości (i unikam głupich pustych marginesów w jednym kierunku ... które uważam za błąd SDK ...):

Zdefiniowałem klasę SquareImageButton, która dziedziczy z ImageButton:

package com.myproject;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageButton;

    public class SquareImageButton extends ImageButton {

        public SquareImageButton(Context context) {
        super(context);


        // TODO Auto-generated constructor stub
    }

    public SquareImageButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub

    }

    public SquareImageButton(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub

    }

    int squareDim = 1000000000;

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);


        int h = this.getMeasuredHeight();
        int w = this.getMeasuredWidth();
        int curSquareDim = Math.min(w, h);
        // Inside a viewholder or other grid element,
        // with dynamically added content that is not in the XML,
        // height may be 0.
        // In that case, use the other dimension.
        if (curSquareDim == 0)
            curSquareDim = Math.max(w, h);

        if(curSquareDim < squareDim)
        {
            squareDim = curSquareDim;
        }

        Log.d("MyApp", "h "+h+"w "+w+"squareDim "+squareDim);


        setMeasuredDimension(squareDim, squareDim);

    }

}

Oto mój xml:

<com.myproject.SquareImageButton
            android:id="@+id/speakButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:scaleType="centerInside"
            android:src="@drawable/icon_rounded_no_shadow_144px"
            android:background="#00ff00"
            android:layout_alignTop="@+id/searchEditText"
            android:layout_alignBottom="@+id/searchEditText"
            android:layout_alignParentLeft="true"
           />

Działa jak marzenie !

W systemie Android 26.0.0 PercentRelativeLayout został wycofany .

Najlepszym sposobem rozwiązania tego problemu jest teraz ConstraintLayout:

<android.support.constraint.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

    <ImageView android:layout_width="match_parent"
               android:layout_height="0dp"
               android:scaleType="centerCrop"
               android:src="@drawable/you_image"                       
               app:layout_constraintDimensionRatio="1:1"/>


</android.support.constraint.ConstraintLayout>

Oto samouczek dotyczący dodawania ConstraintLayoutdo projektu.

Jeśli widok obrazu znajduje się wewnątrz układu ograniczonego, można użyć następujących ograniczeń, aby utworzyć kwadratowy widok obrazu

<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:id="@+id/ivImageView"
    app:layout_constraintDimensionRatio="W,1:1"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

Nie możesz tego zrobić z samym układem, próbowałem. Skończyło się na tym, że napisałem bardzo prostą klasę do obsługi tego, możesz to sprawdzić na githubie. SquareImage.java Jest częścią większego projektu, ale nic, czego nie można naprawić, małe kopiowanie i wklejanie (licencjonowane w ramach Apache 2.0)

Zasadniczo wystarczy ustawić wysokość / szerokość równą innemu wymiarowi (w zależności od tego, w jaki sposób chcesz go skalować)

Uwaga: możesz ustawić go jako kwadratowy bez niestandardowej klasy, używając scaleTypeatrybutu, ale granice widoku wykraczają poza widoczny obraz, co sprawia, że ​​problem jest, jeśli umieszczasz w pobliżu inne widoki.

Aby ustawić ImageView na połowę ekranu, musisz dodać do swojego kodu XML dla ImageView:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:scaleType="fitXY"
    android:adjustViewBounds="true"/>

Aby następnie ustawić wysokość równą tej szerokości, musisz to zrobić w kodzie. W getViewmetodzie swojego GridViewadaptera ustaw ImageViewwysokość równą jego zmierzonej szerokości:

mImageView.getLayoutParams().height = mImageView.getMeasuredWidth();

Dla osób przechodzących teraz, w 2017 roku, najlepszym sposobem na osiągnięcie tego, co chcesz, jest użycie ConstraintLayout w następujący sposób:

<ImageView
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:scaleType="centerCrop"
    app:layout_constraintDimensionRatio="1:1" />

I nie zapomnij dodać ograniczeń we wszystkich czterech kierunkach zgodnie z wymaganiami układu.

Zbuduj responsywny interfejs użytkownika z ConstraintLayout

Ponadto do tej pory PercentRelativeLayout jest przestarzały (zobacz dokumentację systemu Android ).

Oto jak rozwiązałem ten problem:

int pHeight =  picture.getHeight();
int pWidth = picture.getWidth();
int vWidth = preview.getWidth();
preview.getLayoutParams().height = (int)(vWidth*((double)pHeight/pWidth));

podgląd - imageView z szerokością ustawioną na „match_parent” i scaleType na „cropCenter”

picture - Obiekt bitmapowy do ustawienia w src imageView.

U mnie to działa całkiem nieźle.

Nie sądzę, aby można było to zrobić w pliku układu XML i nie sądzę, aby android:scaleTypeatrybut działał tak, jak chcesz.
Jedynym sposobem byłoby zrobienie tego programowo. Możesz ustawić szerokość na fill_parent i albo przyjąć szerokość ekranu jako wysokość, Viewalbo użyć View.getWidth()metody.

W tym przypadku może Ci pomóc funkcja „scaleType” ImageView.

Ten kod zachowa proporcje i umieści obraz na górze:

android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitStart"

Oto świetny post przedstawiający możliwości i wygląd przy użyciu scaleType.

Przykłady skali ImageView typu scaleType

podobało mi się to -

layout.setMinimumHeight(layout.getWidth());