Jak zachować proporcje na przyciskach obrazu w systemie Android?

Question

Mam 5 kwadratowych przycisków ImageButtons, które chcę ułożyć obok siebie w dolnej części ekranu. Mam każdy jeden zestaw (różne identyfikatory) jako:

 <ImageButton 
     android:id="@+id/box1" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:adjustViewBounds="true" 
     android:scaleType="fitXY" 
     android:layout_weight="1" 
     android:layout_margin="1dp" 
     /> 

i mam tła przypisano w głównej java tak:

int[] imageIds = new int[] {R.id.box1,R.id.box2,R.id.box3,R.id.box4,R.id.box5}; 
    for(int i = 0; i<5; i++){ 
     imageButtons[i] = (ImageButton) findViewById(imageIds[i]); 
     imageButtons[i].setBackgroundResource(R.drawable.blank); 
    } 

Co chciałbym mieć to zrobić, to skalowanie szerokości do pasują do siebie równo na dole ekranu (co teraz jest w porządku), ale mają wysokość automatycznie skalowaną tak, aby pasowała również do szerokości. czy to możliwe? Nie chcę używać setImageSource, ponieważ wtedy umieszcza on obramowanie wokół przycisku image.

Answer 1

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/layoutButtons"> 

    <com.package.SquareButton   
     android:layout_height="fill_parent" 
     android:layout_width="0dip"   
     android:layout_weight="1" 

     <ImageView 
     android:id="@+id/box1" 
     android:layout_gravity="center" 
     android:adjustViewBounds="true" 
     android:scaleType="centerInside" 
     android:layout_height="wrap_content" 
     android:layout_width="0dp"   
     android:layout_weight="1" 
     android:layout_marginLeft="5dp" 
     android:layout_marginRight="5dp"/> 

     </com.package.SquareButton> 

     <com.package.SquareButton   
     android:layout_height="fill_parent" 
     android:layout_width="0dip"   
     android:layout_weight="1" 

     <ImageView 
     android:id="@+id/box2" 
     android:layout_gravity="center" 
     android:adjustViewBounds="true" 
     android:scaleType="centerInside" 
     android:layout_height="fill_parent" 
     android:layout_width="fill_parent"   
     android:layout_marginLeft="5dp" 
     android:layout_marginRight="5dp"/> 

</com.package.SquareButton> 

    .........   
</LinearLayout> 

a następnie dodać do tej klasy przycisk niestandardowy:

public class SquareButton extends LinearLayout { 

    public SquareButton(Context context) { 
     super(context); 
    } 

    public SquareButton(Context context, AttributeSet attrs) { 
     super(context, attrs); 
    } 

    // This is used to make square buttons. 
    @Override 
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
     super.onMeasure(widthMeasureSpec, widthMeasureSpec); 
    } 
} 

Answer 2

Zamiast

android:scaleType="fitXY" 

zastosowanie:

android:scaleType="centerInside" 

Edit1: Spróbuj tego:

<LinearLayout 
      android:orientation="vertical" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:id="@+id/layoutToInflateButtons" 
      > 
    <ImageButton 
     android:id="@+id/box1" 
     android:layout_gravity="center" 
     android:adjustViewBounds="true" 
     android:scaleType="centerInside"   
     android:layout_weight="1"   
     android:layout_margin="1dp" 
     />   
    </LinearLayout> 

Answer 3

Jestem pewien, że chcesz mieć, że 5 przyciski szerokości równej /wysokość. Jeśli jest to przypadek następnie podjąć LinearLayout i umieścić wszystkie te 5 przycisków z layout_width="0dip" i layout_weight="1"

Na przykład:

<LinearLayout 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:id="@+id/layoutButtons"> 

    <ImageButton 
     android:id="@+id/box1" 
     android:layout_gravity="center" 
     android:adjustViewBounds="true" 
     android:scaleType="centerInside" 
     android:layout_height="wrap_content" 
     android:layout_width="0dip"   
     android:layout_weight="1"/> 

    <ImageButton 
     android:id="@+id/box2" 
     android:layout_gravity="center" 
     android:adjustViewBounds="true" 
     android:scaleType="centerInside" 
     android:layout_height="wrap_content" 
     android:layout_width="0dip"   
     android:layout_weight="1"/>  

    .........   
</LinearLayout> 

Answer 4

miałem podobny ból głowy, próbując dostać moje przyciski w sposób rząd. Rozwiązanie znalazłem w użyciu ImageButton i właściwość android:srcsetImageSource (w kodzie) w połączeniu z android:background="@null"

Jak rozumiem tło przycisku obrazu nie zostanie dotknięte przez adjustViewBounds, to tylko imageView który ustawiasz w android:src.

Domyślnym zachowaniem jest wówczas podanie kwadratowego przycisku z obrazem w jego środku. Możesz to zmienić, ustawiając tło na @null, które pozostawia tylko obraz.

Następnie można użyć albo LinearLayout lub tabeli do rozmieszczenia przycisków. Zrobiłem wszystko w XML i wykorzystałem następujący układ, aby utworzyć rząd dwóch przycisków u dołu ekranu, które skalują się w górę lub w dół, zachowując proporcje przy różnych rozmiarach ekranów urządzeń. Mam nadzieję że to pomoże.

<TableLayout  
    android:id="@+id/tableLayout2" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_alignParentBottom="true" 
    android:layout_marginBottom="20dip" 
    android:stretchColumns="*"> 

    <TableRow> 

    <ImageButton 
     android:id="@+id/button_one" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center" 
     android:layout_weight="0.5" 
     android:adjustViewBounds="true" 
     android:scaleType="fitCenter" 
     android:onClick="clickOne" 
     android:background="@null" 
     android:src="@drawable/button_one_drawable" /> 

    <ImageButton 
     android:id="@+id/button_two" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:layout_gravity="center" 
     android:layout_weight="0.5" 
     android:adjustViewBounds="true" 
     android:scaleType="centerInside" 
     android:onClick="clickTwo" 
     android:background="@null" 
     android:src="@drawable/button_two_drawable" /> 

    </TableRow>  
</TableLayout> 

Answer 5

Ustaw szerokość ImageButtons do fill_parent i używać scaletype fitStart dla obrazów że uścisk lewego marginesu, a fitEnd dla te po prawej. Powinien załatwić sprawę, przynajmniej jeśli chodzi o przykładowy obraz. Możesz mieć pewne problemy z odstępem, jeśli szerokość proporcjonalna obrazów przekracza szerokość ekranu, ale powinna działać dla ciebie.

Answer 6

Po sprawdzeniu przykładowej aplikacji Google I/O z tego roku odkryłem, że Google używa wartości wymiarów do określania wysokości lub szerokości varios w zależności od typu ekranu. Aby uzyskać szczegółowe informacje, sprawdź kod źródłowy z http://code.google.com/p/iosched/.

Można określić wysokość przycisku na exemple w wartościach xhdpi lub wartościach sw720dp jak:

<resources> 
    <dimen name="button_height">50dp</dimen> 
</resources> 

I wtedy można po prostu użyć tego DIMEN wartości przy określaniu wysokości:

android:layout_height="@dimen/button_height" 

Answer 7

ViewGroup.LayoutParams params = imageButtonName.getLayoutParams(); 
// Changes the height(or width) and width(or height) to the specified 
params.height = layout.getWidth(); 

Answer 8

Zajrzyj do tworzenia niestandardowego przycisku ImageButton. Podoba mi się to, ponieważ jest to jedna klasa. Oto przycisk dostosowujący jego wysokość w oparciu o współczynnik proporcji obrazu. Wyobrażam sobie, można dostosować do własnych potrzeb:

public class AspectImageButton extends ImageButton { 


public AspectImageButton(Context context) { 
    super(context); 
    // TODO Auto-generated constructor stub 
    this.getDrawable(); 

} 

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

    int width = getMeasuredWidth(); 

    Drawable d=this.getDrawable(); //grab the drawable 

    float fAspectRatio=(float)d.getIntrinsicWidth()/(float)d.getIntrinsicHeight(); 

    float fHeight=(float)width/fAspectRatio;//get new height 

    setMeasuredDimension(width, (int)fHeight); 
} 

public AspectImageButton(Context context, AttributeSet attrs) { 
    super(context, attrs); 

    // TODO Auto-generated constructor stub 
} 

public AspectImageButton(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 

    // TODO Auto-generated constructor stub 
} 

}

następnie w xml po prostu używać go tak:

<com.package.AspectImageButton 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:src="@drawable/home_1b" 
       android:background="@null" 
       android:scaleType="fitXY" 
       android:adjustViewBounds="true" /> 

Answer 9

Można użyć procentach w stosunku Układ Google, który pomaga zarządzać widok współczynnik proporcji.

Można go używać jak to

 <android.support.percent.PercentRelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

     <ImageButton 
      android:id="@+id/box1" 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      android:adjustViewBounds="true" 
      android:scaleType="fitXY" 
      app:layout_aspectRatio="100%" 
      android:layout_weight="1" 
      /> 
    </android.support.percent.PercentFrameLayout> 

współczynnik proporcji 100% sprawi, szerokość taka sama jak wysokość.

przykład:

android:layout_width="300dp" 
app:layout_aspectRatio="178%" 

szerokości 178% wysokości. Jest to format, layout_aspectRatio spodziewa

Można go przeczytać w szczegółach here