آموزش ViewSwitcher در کوتلین

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ViewSwitcher در کوتلین (kotlin) می پردازیم در این نحوه استفاده و پیاده سازی ViewSwitcher می پردازیم از ViewSwitcher به منظور switch کردن بین چند view همراه با انیمیشن استفاده می شود و از viewFactory برای ساخت هر اسلاید استفاده می شود در ادامه با ما همراه باشید.

در ادامه برخی از attribute های این object یا شئی را بررسی می کنیم.
android:animateFirstView : به منظور اضافه کردن انیمیشن برای اولین view استفاده می شود.
android:inAnimation : زمانی که وارد انیمیشمن می شود.
android:outAnimation : زمانی که انیمیشن می خواهد به پایان برسد.

وارد strings.xml که در مسیر res/values قرار شده و کد های زیر را جایگزین کنید.

<resources>
    <string name="app_name">ViewSwitcher - Programchi</string>
    <string name="next">Next</string>
    <string name="no_image">No Image</string>
</resources>

<string name="app_name">ViewSwitcher - Programchi</string>

<string name="no_image">No Image</string>

</resources>

وارد layout خود شده در اینجا نام آن برابر با activity_main.xml است و کدهای زیر را در آن قرار دهید.

<?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:orientation="vertical">
    <Button
        android:id="@+id/btnNext"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:text="@string/next"/>
    <ViewSwitcher
        android:id="@+id/viewFlipper"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:contentDescription="@string/no_image"
            android:src="@drawable/pomegranate"/>
        <ImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:contentDescription="@string/no_image"
            android:src="@drawable/zespri_kiwi"/>
    </ViewSwitcher>
</LinearLayout>

<?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:orientation="vertical">

<Button

android:id="@+id/btnNext"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:layout_margin="20dp"

android:text="@string/next"/>

<ViewSwitcher

android:id="@+id/viewFlipper"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<ImageView

android:id="@+id/image1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:contentDescription="@string/no_image"

android:src="@drawable/pomegranate"/>

<ImageView

android:id="@+id/image2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="center"

android:contentDescription="@string/no_image"

android:src="@drawable/zespri_kiwi"/>

</ViewSwitcher>

</LinearLayout>

در بالا ابتدا یک ViewSwitcher قرار دادیم سپس یکسری عکس در آن قرار داده ایم و با این کار یک اسلایدر ساده ساختیم البته فعلا در بالا شما عکس ها را ندارید می توانید به صورت تست یکسری عکس در پوشه drawable قرار دهید و برای ImageView های خود تنظیم کنید.
برای اینکه انیمیشن برای آنها قرار دهیم بهتر است از طریق کد این کار انجام شود هرچند امکان لود کردن انیمیشن از api های بالای 19 در xml وجود دارد.
ما در اکتیویتی مربوط به آن کدهای زیر را قرار میدهیم.

package ir.programchi.viewswitcher
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.ViewSwitcher
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val viewSwitcher = findViewById<ViewSwitcher>(R.id.viewFlipper)
        val `in` = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left)
        viewSwitcher.inAnimation = `in`
        val out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right)
        viewSwitcher.outAnimation = out
        val button = findViewById<Button>(R.id.btnNext)
        button?.setOnClickListener {
            viewSwitcher?.showNext()
        }
    }
}

package ir.programchi.viewswitcher

import android.os.Bundle

import android.support.v7.app.AppCompatActivity

import android.view.animation.AnimationUtils

import android.widget.Button

import android.widget.ViewSwitcher

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

val viewSwitcher = findViewById<ViewSwitcher>(R.id.viewFlipper)

val `in` = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left)

viewSwitcher.inAnimation = `in`

val out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right)

viewSwitcher.outAnimation = out

val button = findViewById<Button>(R.id.btnNext)

button?.setOnClickListener {

viewSwitcher?.showNext()

}

در بالا بعد از find کردن ViewSwitcher با استفاده از AnimationUtils انیمیشن را ساختیم در اینجا از انیمیشن های default اندروید استفاده کردیم ولی قبلا انیمیشن های متفاوتی برای شما قرار داده ایم می توانید از آنها استفاده کنید در سایت انیمیشن سرچ کنید.

این آموزش هم به پایان رسید.
موفق و موید باشید.

مطالعه بیشتر