codestory

Die Anleitung zu Android ImageSwitcher

  1. Die Überblick über ImageSwitcher
  2. Das Beispiel mit Android ImageSwitcher
  3. Anhang: Die Interface entwerfen

1. Die Überblick über ImageSwitcher

Das ist das Foto einer Applikation, die ImageSwitcher benutzen:
    • TODO: More infos

    2. Das Beispiel mit Android ImageSwitcher

    Erstellen Sie ein Project mit dem Name von AndroidImageSwitcher:
    • File > New Project > Empty Activity
    Sie brauchen einige Fotos zur Teilnahme an dem Beispiel
    image1.png
    image2.png
    image3.png
    Kopieren Sie die oben Fotos in dem Ordner drawable.
    Das Interface der Applikation
    Wenn Sie an den Schritten zum Entwerfen der Benutzerinterface dieser Anwendung interessiert sind, lesen Sie bitte den Anhang am Ende des Artikels.
    main_actvity.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">
    
        <ImageSwitcher
            android:id="@+id/imageSwitcher"
            android:layout_width="0dp"
            android:layout_height="279dp"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:layout_marginTop="27dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    
        <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/imageSwitcher">
    
            <Space
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
    
            <Button
                android:id="@+id/button_previous "
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="Previous" />
    
            <Button
                android:id="@+id/button_next"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:text="Next" />
    
            <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.androidimageswitcher;
    
    import android.os.Bundle;
    import android.app.ActionBar.LayoutParams;
    import android.graphics.Color;
    import android.util.Log;
    import android.view.View;
    import android.view.animation.Animation;
    import android.view.animation.AnimationUtils;
    import android.widget.Button;
    import android.widget.ImageSwitcher;
    import android.widget.ImageView;
    import android.widget.Toast;
    import android.widget.ViewSwitcher.ViewFactory;
    
    import androidx.appcompat.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity {
    
        private ImageSwitcher imageSwitcher;
        private Button buttonPrevious;
        private Button buttonNext;
    
        private final String[] imageNames={"image1", "image2", "image3"};
        private int currentIndex;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            setContentView(R.layout.activity_main);
    
            buttonPrevious = (Button) findViewById(R.id.button_previous);
            buttonNext = (Button) findViewById(R.id.button_next);
    
            imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);
    
            // Animation when switching to another image.
            Animation out= AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
            Animation in= AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
    
            // Set animation when switching images.
            imageSwitcher.setInAnimation(in);
            imageSwitcher.setOutAnimation(out);
    
            //
            imageSwitcher.setFactory(new ViewFactory() {
    
                // Returns the view to show Image
                // (Usually should use ImageView)
                @Override
                public View makeView() {
                    ImageView imageView = new ImageView(getApplicationContext());
    
                    imageView.setBackgroundColor(Color.LTGRAY);
                    imageView.setScaleType(ImageView.ScaleType.CENTER);
    
                    ImageSwitcher.LayoutParams params= new ImageSwitcher.LayoutParams(
                            LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
                    imageView.setLayoutParams(params);
                    return imageView;
                }
            });
    
            this.currentIndex=0;
            this.showImage(this.currentIndex);
    
            buttonPrevious.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    previousImage();
                }
            });
    
            buttonNext.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    nextImage();
                }
            });
        }
    
    
        private void previousImage()  {
            if(currentIndex > 0) {
                currentIndex--;
            }else  {
                Toast.makeText(getApplicationContext(), "No Previous Image", Toast.LENGTH_SHORT).show();
                return;
            }
            this.showImage(currentIndex);
        }
    
        private void nextImage()  {
            if(currentIndex < this.imageNames.length-1) {
                currentIndex++;
            }else  {
                Toast.makeText(getApplicationContext(), "No Next Image", Toast.LENGTH_SHORT).show();
                return;
            }
            this.showImage(currentIndex);
        }
    
    
        private void showImage(int imgIndex)  {
            String imageName= this.imageNames[imgIndex];
    
            int resId= getDrawableResIdByName(imageName);
            if(resId!=  0) {
                this.imageSwitcher.setImageResource(resId);
            }
        }
    
        // Find Image ID corresponding to the name of the image (in the drawable folder).
        public int getDrawableResIdByName(String resName)  {
            String pkgName = this.getPackageName();
            // Return 0 if not found.
            int resID = this.getResources().getIdentifier(resName , "drawable", pkgName);
            Log.i("MyLog", "Res Name: " + resName + "==> Res ID = " + resID);
            return resID;
        }
    
    }
    Starten Sie die Applikation:

    3. Anhang: Die Interface entwerfen

    Ich weiß nicht, warum ImageSwitcher im Entwurfsfenster von Android Studio 3.6.x nicht verfügbar ist, sodass Sie es nicht in die Interface ziehen können. Der beste Weg ist, den folgenden XML-Code zur Datei activity_main.xml hinzuzufügen, und Sie erhalten ImageSwitcher auf der Interface.
    <ImageSwitcher
            android:layout_width="100dp"
            android:layout_height="100dp" />
    Legen Sie ID, Text für die Komponenten in die Interface fest.

    Anleitungen Android

    Show More