Notice: Constant DISALLOW_FILE_EDIT already defined in /home/nouriin/public_html/wp-config.php on line 107
آموزش ساخت انیمیشن با MotionLayout همراه با RecyclerView | محمد نوری

آموزش ساخت انیمیشن با MotionLayout همراه با RecyclerView

motion-layout-with-recyclerview-animation
اندروید

آموزش ساخت انیمیشن با MotionLayout همراه با RecyclerView

MotionLayout قابلیتی هستش که طی 2 سال اخیر برای اندروید توسط گوگل معرفی شده.

MotionLayout چیست؟

با این قابلیت خیلی راحت میتونی انیمیشن‌های فوق‌العاده جذابی رو برای اپلیکیشنت درست کنی.

انیمیشن‌هایی که کاربر رو موقع کار کردن واقعا به وجد میاره😉

برای اینکه بتونی از این قابلیت‌ها استفاده کنی، باید لایه‌ت رو با ConstraintLayout درست کرده بشی.

اگه راجب ConstraintLayout اطلاعاتی نداری، توصیه میکنم توی دوره‌ای که درست کردم شرکت کنی.

یک دوره جامع برای ConstraintLayout درست کردم که کاملا رایگان هستش، میتونی توسط لینک کمکی انتهای همین صفحه توی این دوره به رایگان شرکت کنی.

نحوه استفاده

برای استفاده از MotionLayout ابتدا باید dependency مربوط به ConstraintLayout رو به پروژه اضافه کنی.

implementation 'androidx.constraintlayout:constraintlayout:2.0.4'

بعد از اضافه کردن کد بالا به app/build.gradle پروژه رو sync کن.

نمایش ویدیو آموزش

کدهای استفاده شده در آموزش

توی ویدیو من از یکسری از کدها استفاده کردم تا بتونم پروژه رو درست کنم.

کدهایی مثل : AdapterActivityXML که در ادامه این پست میتونید به اون کدهای دسترسی داشته باشید.

کدهای activity.kt : 

class MotionLayoutPage : AppCompatActivity() {

    private var houseAdapter: HouseAdapter = HouseAdapter(housesData())

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_motion_layout_1)

        rvMain.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
        rvMain.adapter = houseAdapter

    }

    private fun housesData(): MutableList<HouseModel> = arrayListOf(
        HouseModel(
            "عنوان مطلب 1",
            "محل نمایش توضیحات مطلب 1",
            R.drawable.house1
        ),
        HouseModel(
            "عنوان مطلب 2",
            "محل نمایش توضیحات مطلب 2",
            R.drawable.house2
        ),
        HouseModel(
            "عنوان مطلب 3",
            "محل نمایش توضیحات مطلب 3",
            R.drawable.house3
        ),
        HouseModel(
            "عنوان مطلب 4",
            "محل نمایش توضیحات مطلب 4",
            R.drawable.house4
        ),
        HouseModel(
            "عنوان مطلب 5",
            "محل نمایش توضیحات مطلب 5",
            R.drawable.house5
        )
    )
}

کدهای activity.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"
    android:background="#292929"
    tools:context=".motionlayout_1.MotionLayoutPage">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

کدهای HouseAdaper.kt : 

class HouseAdapter constructor(private val items: MutableList<HouseModel>) :
    RecyclerView.Adapter<HouseAdapter.ViewHolder>() {

    lateinit var context: Context

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val inflater = LayoutInflater.from(parent.context)
        context = parent.context
        return ViewHolder(inflater.inflate(R.layout.item_house, parent, false))
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(items[position])
    }

    override fun getItemCount(): Int = items.size

    inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        private val image = itemView.findViewById<ImageView>(R.id.itemHouse_img)
        private val title = itemView.findViewById<TextView>(R.id.itemHouse_title)
        private val description = itemView.findViewById<TextView>(R.id.itemHouse_description)

        @SuppressLint("SetTextI18n")
        fun bind(item: HouseModel) {
            image.setImageResource(item.imgId)
            title.text = item.title
            description.text = item.description
        }
    }
}

کدهای HousesModel.kt : 

data class HouseModel (
    val title: String,
    val description: String,
    val imgId: Int
)

کدهای item_house.xml : 

<androidx.constraintlayout.motion.widget.MotionLayout 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:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layoutDescription="@xml/item_house_scene">
    <!--Img-->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/itemHouse_imgCard"
        android:layout_width="150dp"
        android:layout_height="200dp"
        android:layout_margin="5dp"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="10dp"
        app:cardElevation="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/itemHouse_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            tools:src="@drawable/house1" />

    </com.google.android.material.card.MaterialCardView>
    <!--Content-->
    <com.google.android.material.card.MaterialCardView
        android:id="@+id/materialCardView"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_marginRight="5dp"
        app:cardBackgroundColor="@color/aquaBlue"
        app:cardCornerRadius="10dp"
        app:layout_constraintBottom_toBottomOf="@id/itemHouse_imgCard"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/itemHouse_imgCard"
        app:strokeColor="@color/yellow"
        app:strokeWidth="0.1dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:id="@+id/itemHouse_title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="160dp"
                android:layout_marginLeft="160dp"
                android:layout_marginTop="20dp"
                android:layout_marginEnd="10dp"
                android:layout_marginRight="10dp"
                android:fontFamily="@font/iran_sans"
                android:textColor="@color/white"
                android:textSize="14sp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/itemHouse_description"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginStart="160dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="10dp"
                android:ellipsize="end"
                android:fontFamily="@font/iran_sans"
                android:maxLines="3"
                android:textColor="@color/gray"
                android:textSize="14sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/itemHouse_title" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.motion.widget.MotionLayout>

نتیجه نهایی کدهای قبلی : 

107-MotionLayout-RecyclerView-Animation-Demo
تصویر دمو ساخته شده

راستی، من یک دوره‌ای رو درست کردم که به رایگان برنامه‌نویسی کاتلین رو بهت آموزش میدم.

این آموزش میتونه تو رو کاملا برای برنامه‌نویسی اندروید آماده کنه.

اگه به این زبان برنامه‌نویسی علاقه داری میتونی توی این دوره توسط بخش زیر به رایگان ثبت‌نام کنی.

ثبت‌نام رایگان در دوره کاتلین
رایگان

دوره مقدماتی کاتلین برای برنامه نویسان اندروید

4.5/5
(4 امتیاز)
20 درس
مبتدی
آنچه یاد خواهید گرفت
آموزش از صفر برنامه نویسی کاتلین

دیدگاه خود را اینجا قرار دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

فیلدهای نمایش داده شده را انتخاب کنید. دیگران مخفی خواهند شد. برای تنظیم مجدد سفارش ، بکشید و رها کنید.
  • عکس
  • شناسه محصول
  • امتیاز
  • قیمت
  • در انبار
  • موجودی
  • افزودن به سبد خرید
  • توضیحات
  • محتوا
  • عرض
  • اندازه
  • تنظیمات بیشتر
  • ویژگی ها
  • Custom attributes
  • زمینه های دلخواه
مقایسه
لیست علاقه مندی ها 0