Динамический переключатель изображений в Android

Опубликовано: 10 Января, 2023

Android ImageSwitcher — это виджет пользовательского интерфейса, который обеспечивает плавный эффект анимации перехода к изображениям при переключении между ними для отображения в представлении. В этой статье мы рассмотрим, как создать динамический переключатель изображений в Android. Пример видео приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Note: This Android article covered in both Java and Kotlin languages. 

Пошаговая реализация

Шаг 1. Создайте новый проект в Android Studio.

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio».

Шаг 2: Работа с файлом activity_main.xml

Перейдите к app > res > layout > activity_main.xml и добавьте в него приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.

XML




<?xml version="1.0" encoding="utf-8"?>
<!--on below line we are creating our linear layout-->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idLLContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
</LinearLayout>

Шаг 3: Работа с файлом MainActivity
Перейдите к приложению > java > имени пакета вашего приложения > файлу MainActivity и добавьте приведенный ниже код. В код добавлены комментарии для более подробного ознакомления.
Kotlin



package com.gtappdevelopers.kotlingfgproject
 
import android.graphics.Typeface
import android.os.Bundle
import android.view.ViewGroup
import android.view.animation.AnimationUtils
import android.widget.*
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity : AppCompatActivity() {
 
    // on below line creating a variable.
    lateinit var containerLL: LinearLayout
    val images = arrayOf(R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4)
    var index = 0
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        // on below line we are initializing our variables.
        containerLL = findViewById(R.id.idLLContainer)
 
        // on below line we are creating layout
        // params for text view.
        // and specifying width as match parent
        // and height as wrap content
        val txtLayoutParam = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
 
        // on below line we are creating our dynamic text view
        val headingTV = TextView(this)
 
        // on below line we are setting  for our text view.
        headingTV.text = "Dynamic Image Switcher in Android"
 
        // on below line we are updating text size.
        headingTV.textSize = 20f
 
        // on below line we are updating text color and font
        headingTV.setTextColor(resources.getColor(R.color.black))
        headingTV.typeface = Typeface.DEFAULT_BOLD
 
        // on below line we are adding padding
        headingTV.setPadding(20, 20, 20, 20)
 
        // on below line we are specifying text alignment.
        headingTV.textAlignment = TextView.TEXT_ALIGNMENT_CENTER
 
        // on below line we are adding layout
        // param for heading text view.
        headingTV.layoutParams = txtLayoutParam
 
        // on below line we are creating a simple text switcher.
        val imageSwitcher = ImageSwitcher(this)
 
        // on below line we are setting factor for our text switcher.
        imageSwitcher.setFactory {
            // on below line we are adding a image view in our image switcher.
            val imageView = ImageView(this@MainActivity)
            // on below line we are adding scale and padding to our image view.
            imageView.scaleType = ImageView.ScaleType.FIT_CENTER
            imageView.setPadding(20, 20, 20, 20)
            imageView
        }
 
        // on below line we are setting text for text switcher.
        imageSwitcher.setImageResource(images[index])
 
        // on below line we are creating a variable
        // for our slide in animation
        val imageIn = AnimationUtils.loadAnimation(
            this, android.R.anim.slide_in_left
        )
        // on below line we are setting animation
        // to our text switcher.
        imageSwitcher.inAnimation = imageIn
 
        // on below line we are creating a variable
        // for slide out animation
        val imageOut = AnimationUtils.loadAnimation(
            this, android.R.anim.slide_out_right
        )
         
        // on below line we are setting out
        // animation for text switcher
        imageSwitcher.outAnimation = imageOut
 
        // on below line we are creating a layout params for button
        val buttonParam = LinearLayout.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.WRAP_CONTENT
        )
        // on below line we are adding margin for buttons.
        buttonParam.setMargins(10, 10, 10, 10)
 
        // on below line we are creating a previous button
        // and adding text and style to it on below line
        val prevBtn = Button(this)
        prevBtn.text = "Previous"
        prevBtn.isAllCaps = false
         
        // on below line setting params to it.
        prevBtn.layoutParams = buttonParam
         
        // on below line we are setting text color to it.
        prevBtn.setTextColor(resources.getColor(R.color.white))
         
        // on below line we are adding background color to it.
        prevBtn.setBackgroundColor(resources.getColor(R.color.purple_200))
         
        // on below line we are adding click listener
        prevBtn.setOnClickListener {
            // on below line we are updating index
            index = if (index - 1 >= 0) index - 1 else 3
            imageSwitcher.setImageResource(images[index])
        }
 
        // on below line we are creating a next button
        // and adding text and style to it on below line
        val nextBtn = Button(this)
        nextBtn.text = "Next"
        nextBtn.isAllCaps = false
        
        // on below line setting params to it.
        nextBtn.layoutParams = buttonParam
         
        // on below line we are setting text color to it.
        nextBtn.setTextColor(resources.getColor(R.color.white))
         
        // on below line we are adding background color to it.
        nextBtn.setBackgroundColor(resources.getColor(R.color.purple_200))
         
        // on below line we are adding click listener
        nextBtn.setOnClickListener {
            // on below line we are updating index
            index = if (index + 1 < images.size) index + 1 else 0
            imageSwitcher.setImageResource(images[index])
        }
 
        // on below line we are adding our views
        // to container linear layout
        containerLL.addView(headingTV)
        containerLL.addView(imageSwitcher)
        containerLL.addView(prevBtn)
        containerLL.addView(nextBtn)
 
    }
}
Java



package com.gtappdevelopers.kotlingfgproject;
 
import android.graphics.Typeface;
import android.os.Build;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
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.LinearLayout;
import android.widget.TextView;
import android.widget.ViewSwitcher;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
 
    // on below line we are creating variables.
    private LinearLayout containerLL;
    int images[] = {R.drawable.img1, R.drawable.img2, R.drawable.img3, R.drawable.img4};
    int index = 0;
 
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // on below line we are initializing our variables.
        containerLL = findViewById(R.id.idLLContainer);
 
        // on below line we are creating layout params for text view.
        // and specifying width as match parent and height as wrap content
        LinearLayout.LayoutParams txtLayoutParam = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
        );
         
        // on below line we are adding gravity
        txtLayoutParam.gravity = Gravity.CENTER;
 
        // on below line we are creating our dynamic text view
        TextView headingTV = new TextView(this);
 
        // on below line we are setting  for our text view.
        headingTV.setText("Dynamic Image Switcher in Android");
 
        // on below line we are updating text size.
        headingTV.setTextSize(20f);
 
        // on below line we are updating text color and font
        headingTV.setTextColor(getResources().getColor(R.color.black));
        headingTV.setTypeface(Typeface.DEFAULT_BOLD);
 
        // on below line we are adding padding
        headingTV.setPadding(20, 20, 20, 20);
 
        // on below line we are specifying text alignment.
        headingTV.setTextAlignment(View.TEXT_ALIGNMENT_CENTER);
 
        // on below line we are adding layout param
        // for heading text view.
        headingTV.setLayoutParams(txtLayoutParam);
 
        // on below line we are creating a simple text switcher.
        ImageSwitcher imageSwitcher = new ImageSwitcher(this);
 
        // on below line we are setting factor for our text switcher.
        imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() {
            @Override
            public View makeView() {
                // on below line we are adding a image view in our image switcher.
                ImageView imageView = new ImageView(MainActivity.this);
                 
                // on below line we are adding scale and padding to our image view.
                imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
                imageView.setPadding(20, 20, 20, 20);
                return imageView;
            }
        });
 
        // on below line we are setting text for text switcher.
        imageSwitcher.setImageResource(images[index]);
 
        // on below line we are creating a variable
        // for our slide in aniamtion
        Animation imageIn = AnimationUtils.loadAnimation(
                this, android.R.anim.slide_in_left
        );
         
        // on below line we are setting animation
        // to our text switcher.
        imageSwitcher.setInAnimation(imageIn);
 
        // on below line we are creating a variable
        // for slide out animation
        Animation imageOut = AnimationUtils.loadAnimation(
                this, android.R.anim.slide_out_right
        );
         
        // on below line we are setting out
        // animation for text switcher
        imageSwitcher.setOutAnimation(imageOut);
 
        // on below line we are creating a layout params for button
        LinearLayout.LayoutParams buttonParam = new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT
        );
         
        // on below line we are adding margin for buttons.
        buttonParam.setMargins(10, 10, 10, 10)
 
        // on below line we are creating a previous button
        // and adding text and style to it on below line
        Button prevBtn = new Button(this);
        prevBtn.setText("Previous");
        prevBtn.setAllCaps(false);
         
        // on below line setting params to it.
        prevBtn.setLayoutParams(buttonParam);
         
        // on below line we are setting text color to it.
        prevBtn.setTextColor(getResources().getColor(R.color.white));
         
        // on below line we are adding background color to it.
        prevBtn.setBackgroundColor(getResources().getColor(R.color.purple_200));
         
        // on below line we are adding click listener
        prevBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are updating index
                if (index - 1 >= 0) {
                    index = index - 1;
                } else {
                    index = 3;
                }
                imageSwitcher.setImageResource(images[index]);
            }
        });
 
        // on below line we are creating a next button
        // and adding 
            

                            

                    
                                            Picked
                                            Java
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ

                

                                            

                            
Количество чисел между L и R, взаимно простых с P

                            
27 Февраля, 2023

                        

                                            

                            
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.

                            
27 Февраля, 2023

                        

                                            

                            
Найдите все факторы заданного числа и их побитовое XOR

                            
27 Февраля, 2023

                        

                                            

                            
Показать самое длинное имя

                            
27 Февраля, 2023

                        

                                            

                            
Форматирование лицензионного ключа

                            
27 Февраля, 2023

                        

                                            

                            
Когда я должен использовать список против LinkedList

                            
27 Февраля, 2023

                        

                                            

                            
Реализовать быструю сортировку с первым элементом в качестве опорного

                            
27 Февраля, 2023

                        

                                            

                            
Алгоритм хеш-сортировки

                            
27 Февраля, 2023