Динамический переключатель изображений в Android
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 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
РЕКОМЕНДУЕМЫЕ СТАТЬИ |