Widget einfache Komponentenbildansicht (ImageView)

Bildansicht

ImageView erbt von der View-Komponente und wird hauptsächlich zum Anzeigen von Bildressourcen (wie Bildern usw.) verwendet. ImageView kann auch die angezeigte Größe definieren. Darüber hinaus leitet ImageView auch ImageButton, ZoomButton und andere Komponenten ab. Die von Image View unterstützten XML-Attribute und -Methoden sind in der folgenden Tabelle aufgeführt.

XML-Attribute und -Methoden von ImageView

XML-Attribute	Entsprechende Methode	Bedienungsanleitung
android: ViewBounds anpassen	setAdjust ViewBounds (boolean)	Gibt an, ob das Seitenverhältnis beibehalten werden soll. Muss zusammen mit maxWidth und MaxHeight verwendet werden, hat die Verwendung allein keine Auswirkung
android: cropToPadding	setCropToPadding (boolean)	Gibt an, ob der angegebene Bereich abgefangen und stattdessen leer verwendet werden soll. Die Einstellung alleine hat keine Auswirkung, sie muss zusammen mit scrollY verwendet werden
android: maxHeight	setMaxHeight (int)	Legen Sie die maximale Höhe der Ansicht fest. Es ist ungültig, sie alleine zu verwenden. Sie muss zusammen mit der Methode setAdjustViewBounds () verwendet werden. Wenn Sie eine feste Größe des Bilds festlegen und das Seitenverhältnis des Bildes beibehalten möchten, müssen Sie die folgenden Einstellungen vornehmen: setAdjust ViewBounds auf true setzen, die Eigenschaften max Width und MaxHeight festlegen, layout_width und layout_height auf setzen wrap_content
Android: max Breite	setMax Width (int)	Legen Sie die maximale Breite der Ansicht fest. Die Verwendung ist die gleiche wie bei Android: maxHeight
android: src	setImageResource (int)	Legen Sie das in der Bildansicht angezeigte Zeichenobjekt fest
android: scaleType	setScaleType (Image View.ScaleType)	Legen Sie fest, wie das angezeigte Bild gezoomt oder verschoben werden soll, um es an die Größe der Bildansicht anzupassen

Das android: scaleType-Attribut von ImageView kann die folgenden Attributwerte angeben

• Matrix: Verwenden Sie zum Zeichnen eine Matrix.
• fitXY: Dehnen Sie das Bild (nicht maßstabsgetreu), um die Breite und Höhe der Ansicht zu füllen.
• fitStart: Dehnen Sie das Bild proportional. Die gestreckte Höhe des Bildes entspricht der Höhe der Ansicht und wird auf der linken Seite der Ansicht angezeigt.
• fitCenter: Dehnen Sie das Bild proportional, die gestreckte Höhe des Bildes entspricht der Höhe der Ansicht und wird in der Mitte der Ansicht angezeigt.
• fitEnd: Dehnen Sie das Bild proportional, die gestreckte Höhe des Bildes entspricht der Höhe der Ansicht und wird auf der rechten Seite der Ansicht angezeigt.
• Mitte: Zeigen Sie das Bild entsprechend der Originalgröße an. Wenn die Breite und Höhe des Bildes größer als die Breite und Höhe der Ansicht sind, wird der mittlere Teil des Screenshots angezeigt.
• centerCrop: Vergrößern Sie das Originalbild proportional, bis es der Breite und Höhe einer Seite der Ansicht entspricht.
• centerInside: Wenn die Breite und Höhe des Originalbilds der Breite und Höhe der Ansicht entspricht, wird sie in der Mitte entsprechend der Originalbildgröße angezeigt. Andernfalls wird das Originalbild auf die Breite und Höhe der Ansicht gezoomt und in der Mitte angezeigt.

Darüber hinaus bietet die Komponente die folgenden Methoden, um das von ImageView angezeigte Bild zu steuern

• sctlmageBitmap (Bitmap): Verwenden Sie die Bitmap-Bitmap, um das von ImageView angezeigte Bild festzulegen.
• setImageDrawable (Drawable): Verwenden Sie das Drawable-Objekt, um das von ImageView angezeigte Bild festzulegen.
• setImageResource (int): Verwenden Sie die Bildressourcen-ID, um das von ImageView angezeigte Bild festzulegen.
• setImagURI (Uri): Verwenden Sie den URI des Bildes, um das von ImageView angezeigte Bild festzulegen.

Code-Demo

Das folgende Beispiel zeigt die Verwendung von ImageView. Durch Klicken auf die Schaltfläche "Nächste Seite / Vorherige Seite" kann das Bild umgeschaltet werden

Der entsprechende Code für die Layoutdatei lautet wie folgt

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical"
    >
    <!-- 图片及文字 1 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:scaleType="fitCenter"
            android:src="@drawable/one" />
        <TextView
            android:id="@+id/photoTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="佐佐木希" />
    </LinearLayout>
    <!-- 分页 2 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">
        <ImageButton
            android:id="@+id/backImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="140dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/back"/>
        <ImageButton
            android:id="@+id/forwardImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/forward" />
    </LinearLayout>
</LinearLayout>

Der Code wird wie folgt erklärt: Eine ImageView-Komponente wird auf Beschriftung 1 definiert, um das Bild anzuzeigen. Durch Festlegen des Attributs android; scaleType = "fitCenter" wird die Höhe des gestreckten Bildes als Höhe der Ansicht verwendet Wird in der Mitte der Ansicht angezeigt. Definiert eine TextView-Komponente zur Anzeige des Bildnamens. Beschriftung 2 definiert zwei ImageButton-Komponenten, mit denen die Bilder "Vorherige Seite" und "Nächste Seite" angezeigt werden.

Das Folgende zeigt den Effekt des Bildens von Bildern in Aktivität: Wenn der Benutzer auf die Schaltfläche "Zurück / Weiter" klickt, werden die entsprechenden Bilder auf dem Bildschirm angezeigt

Die entsprechende Implementierung des Aktivitätscodes lautet wie folgt

package com.qst.demo2;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class ImageViewDemoActivity extends AppCompatActivity {
    
    
    //定义变量 1
    //图片对应的ImageView
    ImageView flagImageView;
    TextView flagTxt;
    ImageButton backImgeBtn;   //上一页
    ImageButton forwardImageBtn; //下一页
    //图片数组   2
    int [] flag = {
    
    R.drawable.one, R.drawable.two, R.drawable.three};
    String[] flagNames = {
    
    "佐佐木希", "胡歌", "霉霉"};
    //当前页 默认第一页
    int currentPage = 0;
    @Override //重写方法
    public void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState); //调用父类onCreate创建Activity
        setContentView(R.layout.imageview_demo); //设置布局
        //初始化组件 3
        flagImageView = (ImageView) findViewById(R.id.photoImageView);
        flagTxt = (TextView) findViewById(R.id.photoTxt);
        //上一页，下一页
        backImgeBtn = (ImageButton) findViewById(R.id.backImageBtn);
        forwardImageBtn = (ImageButton) findViewById(R.id.forwardImageBtn);
        //注册监听器
        backImgeBtn.setOnClickListener(onClickListener);
        forwardImageBtn.setOnClickListener(onClickListener);
    }
    //定义单击事件监听器 4
    private View.OnClickListener onClickListener = new View.OnClickListener() {
    
     //创建对象
        @Override   //重写接口方法
        public void onClick(View v) {
    
    
            switch (v.getId()) {
    
    
                case R.id.backImageBtn:
                    if (currentPage == 0) {
    
    
                        Toast.makeText(ImageViewDemoActivity.this,
                                "第一页，前面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    //上翻一页
                    currentPage--;
                    //设置图片
                    flagImageView.setImageResource(flag[currentPage]);
                    //设置图片名字
                    flagTxt.setText(flagNames[currentPage]);
                    break;
                case R.id.forwardImageBtn:
                    if (currentPage == (flag.length-1)) {
    
    
                        Toast.makeText(ImageViewDemoActivity.this,
                                "最后一页，后面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    currentPage++;   //下翻一页
                    flagImageView.setImageResource(flag[currentPage]);  //设置图片
                    flagTxt.setText(flagNames[currentPage]);  //设置图片名字
                    break;
                default:
                    break;
            }
        }
    };
}

Der Code wird wie folgt erklärt: Label 1 deklariert die Attributvariablen des ImageView-Typs bzw. des ImageButton-Typs, Label 2 definiert zwei Arrays und initialisiert sie, wobei sie jeweils die Bildressource und den Bildnamen darstellen. Label 3 wird zum Initialisieren des deklarierten at verwendet Beschriften Sie 1 Attributvariablen und legen Sie Listener für backImageBtn- und forwardImageBtn-Objekte fest, um ihre jeweiligen Klickereignisse abzuhören. Label 4 definiert einen Listener vom Typ OnClickListener, der Schaltflächenklickereignisse verarbeitet, wenn auf die Schaltfläche entsprechend dem Klick geklickt wird. Die Schaltflächen unterscheiden sich, um unterschiedliche Anzeigen anzuzeigen Bilder und Bildnamen.

Deklarieren Sie die Aktivität in der Manifestdatei AndroidMainfest.xml

Nach dem Ausführen des Aktivitätscodes hat dies folgende Auswirkungen