Le Tutoriel de Android ImageView

Qu'est-ce que ImageView?
Afficher l'image à partir de la ressource d'image
Afficher l'image à partir de URL
Afficher l'image à partir du fichier
Phụ lục: Thiết kế giao diện

1. Qu'est-ce que ImageView?

ImageView est une vue utilisée pour afficher des images, dans lesquelles les fichiers d'image peuvent être fournis sur une application, un périphérique ou une URL.

Utilisation des Image assets et des Icon assets d'Android Studio

2. Afficher l'image à partir de la ressource d'image

We will start with a simple example, an ImageView displaying the image in the "drawable" directory of the project.

Créez un projet nommé AndroidImageView.

File > New > New Project > Empty Activity
- Name: AndroidImageView
- Package name: org.o7planning.androidimageview
- Language: Java

Vous evez quelques fichiers d'image pour utiliser dans cet exemple:


triceratops_1.png	triceratops_2.png

Copiez ces images et collez dans le dossier drawable du projet.

L'interface de l'application:

If you are interested in the steps to design this application interface, please see the appendix at the end of the article.

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. Afficher l'image à partir de URL

Vous pouvez également afficher les images d'une URL vers ImageView. Le principe est que vous devez télécharger le fichier image à partir de l'URL, puis l'afficher sur 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);
}

En obtenant des données provenant de sources d'URL liées à la programmation de réseau en Android, vous pouvez trouver des exemples qui affichent des images d'une URL sur ImageView dans les instructions de documentation pour programmer Android ici:

Le Tutoriel de Android Networking

4. Afficher l'image à partir du fichier

Vous pouvez également afficher un fichier image sur l'appareil à ImageView, comme les images dans la carte mémoire. Tout d'abord, vous devez autoriser à lire et à écrire des données sur le périphérique:

Ajoutez la configuration suivante dans 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. Phụ lục: Thiết kế giao diện

Add components to the interface:

Set ID, Text for components on the interface.

Tutoriels de programmation Android

Tutoriels de programmation Flutter

Le Tutoriel de Android ImageView

1. Qu'est-ce que ImageView?

2. Afficher l'image à partir de la ressource d'image

3. Afficher l'image à partir de URL

4. Afficher l'image à partir du fichier

5. Phụ lục: Thiết kế giao diện

Tutoriels de programmation Android

Tutoriels de programmation Android

Articles les plus récents