2017-03-17 6 views
0

Ich bin neu in der Android-Entwicklung und versuche mit dem GridLayout Zeilen mit 3 Spalten zu erstellen, jede Spalte mit einem Bildausschnitt. In diesem Fall verwende ich ein quadratisches Bild, das in Photoshop erstellt wurde, ganz rot, nur zum Testen.Bild vertikal und horizontal innerhalb eines Rasterlayouts skalieren

Dies ist xml ich derzeit verwenden:

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:id="@+id/activity_menu" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="me.andrewlarsen.testapp.MenuActivity"> 

    <GridLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:rowCount="2" 
     android:columnCount="3" 
     android:gravity="center" 
     android:layout_alignParentTop="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignParentStart="true"> 


     <ImageView 
      android:layout_gravity="fill" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:srcCompat="@mipmap/redblock" 
      android:layout_row="0" 
      android:layout_column="0" 
      android:layout_columnWeight="1" 
      android:layout_rowWeight="1" 
      android:scaleType="fitXY" 
      android:id="@+id/imageView1" /> 

     <ImageView 
      android:layout_gravity="fill" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:srcCompat="@mipmap/redblock" 
      android:layout_row="0" 
      android:layout_column="1" 
      android:layout_columnWeight="1" 
      android:layout_rowWeight="1" 
      android:scaleType="fitXY" 
      android:id="@+id/imageView2" /> 

     <ImageView 
      android:layout_gravity="fill" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:srcCompat="@mipmap/redblock" 
      android:layout_row="0" 
      android:layout_column="2" 
      android:layout_columnWeight="1" 
      android:layout_rowWeight="1" 
      android:scaleType="fitXY" 
      android:id="@+id/imageView3" /> 

     <ImageView 
      android:layout_gravity="fill" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:srcCompat="@mipmap/redblock" 
      android:layout_row="1" 
      android:layout_column="0" 
      android:layout_columnWeight="1" 
      android:layout_rowWeight="1" 
      android:id="@+id/imageView4" /> 

     <ImageView 
      android:layout_gravity="fill" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:srcCompat="@mipmap/redblock" 
      android:layout_row="1" 
      android:layout_column="1" 
      android:layout_columnWeight="1" 
      android:layout_rowWeight="1" 
      android:id="@+id/imageView5" /> 

     <ImageView 
      android:layout_gravity="fill" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:srcCompat="@mipmap/redblock" 
      android:layout_row="1" 
      android:layout_column="2" 
      android:layout_columnWeight="1" 
      android:layout_rowWeight="1" 
      android:id="@+id/imageView6" /> 

    </GridLayout> 
</RelativeLayout> 

Die xml oben zu einem Resultat wie folgt aussehen:

enter image description here

So wie Sie I 2 bekam sehen Zeilen, die sich voneinander unterscheiden. Auf allen 3 Spalten in der ersten Zeile habe ich hinzugefügt android: scaleType = "fitXY" aber es skaliert nur horizontal, nicht vertikal.

Ich möchte es in beiden Richtungen vergrößern, so dass das Ergebnis ein Quadrat nur größer wäre.

Ich versuche, es so aussehen zu lassen:

enter image description here

Wenn ich android bin mit: Scaletype = „fitXY“ Ich würde das Bild erwartet sowohl in X-Richtung vergrößern (horizontal) und Y-Richtung (vertikal) jedoch nicht.

Schätzen Sie alle Hilfe, die ich bekommen kann.

+0

Dies liegt daran, Ihre Ansichten Kinder werden die Polsterungen der Eltern erben. Ie .: Die RelativeLayout's. –

+0

Das ist wahr, aber selbst wenn ich das Padding aus dem Relative Layout entferne, skaliert das Bild nicht vertikal, sondern nur horizontal. So bekomme ich das gleiche Ergebnis, aber mit weniger Polsterung. –

+1

Ein grober Trick wäre, das Bild als ** Hintergrund ** anstelle von ** src ** zu verwenden. Hintergrundbilder werden immer in beiden Größen skaliert. Und Sie müssen kein 'scaleType' angeben –

Antwort

1

Problem gelöst hatte zu verwenden:

android:adjustViewBounds="true" 

in jedem Element imageview

0

Versuchen Sie, Gewichte (Android: Layout_columnWeight = "1" und Android: layout_rowWeight = "1"), und welche Größe Ihres redblock? Wenn möglich, sende dein Bild.

+0

Alle Spalten entferntWeight und rowWeight, und das ist das Ergebnis: https://i.gyazo.com/78f071157774cc9dc6ba68283e968a9f.png das Bild, das ich verwende, ist 100x100 mit rotem Hintergrund, in Farbe erstellt. Ich weiß, dass es beim Hochskalieren an Qualität verlieren würde, aber es sollte trotzdem möglich sein, in beide Richtungen zu skalieren. –

Verwandte Themen