维持imageView背景的长宽比

时间:2019-01-10 08:27:51

标签: android android-layout

我正在尝试创建imageView的矩阵,以便用户可以选择一些图像。 我将图像作为“ BackgroundResource”加载到视图中有两个原因:

  1. 这是我在Java类上加载jpg文件的最简单的方法
  2. 选择图像后,我想向用户提供一些反馈,在背景上添加src,使我可以选择添加选中的符号。

唯一的问题是,很难在背景中保持图像比率。我所有的图片都是jpg文件,我希望背景图片的尺寸为 120dpX120dp ,但要保持宽高比,

我尝试过的事情:

  • 更改ScaleType中的ImageView
  • RelativeLayout周围加上ImageView

这是我的布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".LockScreenActivity">

<TextView
    android:id="@+id/titleText"
    android:layout_width="270dp"
    android:layout_height="50dp"
    android:layout_marginTop="16dp"
    android:text="Select 3 images"
    android:textAlignment="center"
    android:textSize="36sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.504"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<ImageView
    android:id="@+id/img1"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:scaleType="centerCrop"
    app:layout_constraintEnd_toStartOf="@+id/img2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/titleText" />

<ImageView
    android:id="@+id/img2"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:layout_marginBottom="8dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/titleText"
    app:layout_constraintVertical_bias="0.0" />

<ImageView
    android:id="@+id/img3"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/img2"
    app:layout_constraintTop_toBottomOf="@+id/titleText" />

<ImageView
    android:id="@+id/img5"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    android:scaleType="centerInside"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/img2" />

<ImageView
    android:id="@+id/img6"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/img5"
    app:layout_constraintTop_toBottomOf="@+id/img3" />

<ImageView
    android:id="@+id/img7"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toStartOf="@+id/img8"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/img4" />

<ImageView
    android:id="@+id/img8"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/img5" />

<ImageView
    android:id="@+id/img9"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/img8"
    app:layout_constraintTop_toBottomOf="@+id/img6" />

<ImageView
    android:id="@+id/img4"
    android:layout_width="120dp"
    android:layout_height="120dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintEnd_toStartOf="@+id/img5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/img1" />

<Button
    android:id="@+id/submit"
    android:layout_width="76dp"
    android:layout_height="45dp"
    android:layout_marginTop="8dp"
    android:layout_marginEnd="50dp"
    android:layout_marginBottom="8dp"
    android:text="OK"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/img8"
    app:layout_constraintVertical_bias="0.673" />

<Button
    android:id="@+id/backBtn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="50dp"
    android:layout_marginEnd="8dp"
    android:text="Back"
    app:layout_constraintBaseline_toBaselineOf="@+id/submit"
    app:layout_constraintEnd_toStartOf="@+id/submit"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

这是我的Java代码,用于设置imageBackground-我所有的背景图片的格式均为“ img” + i-> i在range(1,numOfImages)中:

    private void updateImageView(ArrayList<String> images) {
    for (int i = 1; i <= images.size(); i++) {
        int drawableResourceId = 
        this.getResources().getIdentifier(images.get(i-1), "drawable", 
        this.getPackageName());
        int id = getResources().getIdentifier("img" +i, "id", 
        this.getPackageName());
        ImageView img = findViewById(id);
        img.setBackgroundResource(drawableResourceId);
        img.setTag(images.get(i-1));
        img.setImageResource(android.R.color.transparent);
    }
}

如何在此结构中保持比率?

最简单的方法就是使所有图像的高度和宽度相同吗?(添加一些透明的高度或宽度填充)

1 个答案:

答案 0 :(得分:0)

使用我从您那里修改过的XML布局。在您可以关联的布局绑定中存在一些问题。因此由于绑定,出现了布局问题。还要从活动中删除最后一行代码。 `

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <TextView
        android:id="@+id/titleText"
        android:layout_width="270dp"
        android:layout_height="50dp"
        android:layout_marginTop="16dp"
        android:text="Select 3 images"
        android:textAlignment="center"
        android:textSize="36sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.504"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <ImageView
        android:id="@+id/img1"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/blue_bg_shape"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toStartOf="@+id/img2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleText" />

    <ImageView
        android:id="@+id/img2"
        android:layout_width="121dp"
        android:layout_height="120dp"
        android:layout_marginStart="1dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="1dp"
        android:background="@drawable/bird"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toStartOf="@+id/img3"
        app:layout_constraintStart_toEndOf="@+id/img1"
        app:layout_constraintTop_toBottomOf="@+id/titleText" />

    <ImageView
        android:id="@+id/img3"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img2"
        app:layout_constraintTop_toBottomOf="@+id/titleText" />

    <ImageView
        android:id="@+id/img5"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="1dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="1dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toStartOf="@+id/img6"
        app:layout_constraintStart_toEndOf="@+id/img4"
        app:layout_constraintTop_toBottomOf="@+id/img2" />

    <ImageView
        android:id="@+id/img6"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img5"
        app:layout_constraintTop_toBottomOf="@+id/img3" />

    <ImageView
        android:id="@+id/img7"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toStartOf="@+id/img8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img4" />

    <ImageView
        android:id="@+id/img8"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="1dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="1dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toStartOf="@+id/img9"
        app:layout_constraintStart_toEndOf="@+id/img7"
        app:layout_constraintTop_toBottomOf="@+id/img5" />

    <ImageView
        android:id="@+id/img9"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/img8"
        app:layout_constraintTop_toBottomOf="@+id/img6" />

    <ImageView
        android:id="@+id/img4"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/arrow_down_minimize_orange"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toStartOf="@+id/img5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img1" />

    <Button
        android:id="@+id/submit"
        android:layout_width="76dp"
        android:layout_height="45dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="50dp"
        android:layout_marginBottom="8dp"
        android:text="OK"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/img8"
        app:layout_constraintVertical_bias="0.673" />

    <Button
        android:id="@+id/backBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="50dp"
        android:layout_marginEnd="8dp"
        android:text="Back"
        app:layout_constraintBaseline_toBaselineOf="@+id/submit"
        app:layout_constraintEnd_toStartOf="@+id/submit"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

`