betacode

Руководство Android ImageView

  1. Что такое ImageView?
  2. Отображение изображения из ресурса изображений
  3. Отображение изображения из URL
  4. Отображение файла изображения
  5. Приложение: Дизайн интерфейса

1. Что такое ImageView?

ImageView это view, который используется для отображения изображений, формат файлов изображения могут быть файлы из приложений, устройств или из URL.

2. Отображение изображения из ресурса изображений

Мы начнем с простого примера, ImageView отображает изображение в папке "drawable" у project.
Создать project c названием AndroidImageView.
  • File > New > New Project > Empty Activity
    • Name: AndroidImageView
    • Package name: org.o7planning.androidimageview
    • Language: Java
Вам нужны несколько изображений для примера:
triceratops_1.png
triceratops_2.png
Скопировать изображения и вставить в папку drawable в project.
Интерфейс приложения:
Если вас интересуют простые шаги дизайна интерфейса данного приложения, смотрите приложение в конце данной статьи.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="375dp"
        android:layout_height="207dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="17dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_launcher_foreground"
        tools:ignore="VectorDrawableCompat" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView">

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Show Image 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Show Image 2" />

        <Space
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" />
    </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package org.o7planning.androidimageview;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {


    private ImageView imageView;
    private Button button1;
    private Button button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        this.imageView = (ImageView) this.findViewById(R.id.imageView);

        this.button1 = (Button) this.findViewById(R.id.button1);
        this.button2 = (Button) this.findViewById(R.id.button2);

        this.button1.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                showImage1();
            }
        });

        this.button2.setOnClickListener(new Button.OnClickListener() {

            @Override
            public void onClick(View v) {
                showImage2();
            }
        });
    }


    private void showImage1() {
        this.imageView.setImageResource(R.drawable.triceratops_1);
    }

    private void showImage2() {
        this.imageView.setImageResource(R.drawable.triceratops_2);
    }

}

3. Отображение изображения из URL

Вы так же можете отобрахить изображение из URL на ImageView. Правило это вам нужно скачать избражения из URL затем отобразить на ImageView:
URL url = new URL(imageUrl);
HttpURLConnection httpConn = (HttpURLConnection) url.openConnection();

httpConn.connect();
int resCode = httpConn.getResponseCode();

if (resCode == HttpURLConnection.HTTP_OK) {
  InputStream in = httpConn.getInputStream();
  Bitmap bitmap = BitmapFactory.decodeStream(in);

  this.imageView.setImageBitmap(bitmap);
}
Получение данных из URL связанно с программированиеи сети в Android, вы можете найти пример отображения изображения взятого из URL на ImageView в статье инструкции по программированию сети Android по данной ссылке:

4. Отображение файла изображения

Вы так же можете отобразить файл изображения с устройства на ImageView, например файл находится в памяти. Для начала, вам нужно авторизировать чтение и запись данных на устройстве:

Добавить следующую конфигурацию в AndroidManifest.xml:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
File imgFile = new  File("/sdcard/Images/mypicture.png");

if(imgFile.exists()) {

   Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath());

   this.imageView.setImageBitmap(myBitmap);

}
  • TODO

5. Приложение: Дизайн интерфейса

Добавьте компоненты в интерфейс:
Настройте ID, Text для компонентов на интерфейсе.

Pуководства Android

Show More

Pуководства Android

Show More

Новейшие статьи

    Show More