آموزش Collapsing Toolbar به زبان کوتلین در اندروید

سلام دوستان امیدوارم حالتون خوب باشد شاید بتونم بگم اولین منبعی هستیم که داریم زبان برنامه نویسی کوتلین را به صورت اصولی آموزش میدهم در این سری از آموزش برنامه نویسی اندروید به آموزش Collapsing Toolbar به زبان کوتلین در اندروید می پردازیم در ادامه می توانید پیش نمایشی از آن را مشاهده کنید با ما همراه باشید.

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

آموزش اضافه کردن kotlin به اندروید استودیو

باید سه کتاب خانه را را به پروژه اضافه کنید.
پس وارد فایل build.gradle از نوع Module شده سپس در بخش dependencies خط های زیر را اضافه کنید.

compile 'com.android.support:design:25.3.1'
compile 'com.android.support:cardview-v7:25.3.1'
compile 'com.android.support:palette-v7:25.3.1'

compile 'com.android.support:design:25.3.1'

compile 'com.android.support:cardview-v7:25.3.1'

compile 'com.android.support:palette-v7:25.3.1'

پروژه را sync کنید.
یک فایل به نام card_layout.xml ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:outlineProvider="bounds"
    app:cardCornerRadius="5sp"
    app:cardElevation="7dp"
    android:layout_margin="10dp">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="12dp">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="What is OOM Error?"
            android:textStyle="bold"
            android:textColor="#000000"
            android:textSize="20sp" />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="OutOfMemoryError is the most common problem occured in android while especially dealing with bitmaps.
            This error is thrown by the Java Virtual Machine (JVM) when an object cannot be allocated due to lack of memory space and also,
            the garbage collector cannot free some space. "
            android:textSize="18sp" />
    </LinearLayout>
</android.support.v7.widget.CardView>

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:outlineProvider="bounds"

app:cardCornerRadius="5sp"

app:cardElevation="7dp"

android:layout_margin="10dp">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical"

android:padding="12dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="What is OOM Error?"

android:textStyle="bold"

android:textColor="#000000"

android:textSize="20sp" />

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="OutOfMemoryError is the most common problem occured in android while especially dealing with bitmaps.

This error is thrown by the Java Virtual Machine (JVM) when an object cannot be allocated due to lack of memory space and also,

the garbage collector cannot free some space. "

android:textSize="18sp" />

</LinearLayout>

</android.support.v7.widget.CardView>

کد بالا بخشی از layout اصلی است برای اینکه متریال دیزاین شود از CardView استفاده شده است.
بعد از اینکار وارد layout اصلی خود شده (در اینجا نام آن برابر با activity_main.xml است) و کدهای زیرا در آن قرار دهید.

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/nature_one"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="10dp">
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
            <include layout="@layout/card_layout" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

<android.support.design.widget.CoordinatorLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="250dp"

android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.CollapsingToolbarLayout

android:id="@+id/collapsing_toolbar"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:contentScrim="?attr/colorPrimary"

app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/nature_one"

android:scaleType="fitXY"

app:layout_collapseMode="parallax" />

<android.support.v7.widget.Toolbar

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

app:layout_collapseMode="pin" />

</android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView

android:layout_width="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingTop="10dp">

</LinearLayout>

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

در کد بالا یک عکس استفاده شده است که در ادامه می توانید آن را دانلود کرده و در پوشه drawable قرار دهید. در بالا به خاطر اینکه حالت Scroll به وجود بیایید ما چندین ب Card_layout را inculde کردیم شما کافی است یک بار آن را قرار دهید ولی برای تست تغییری در آن ایجاد نکنید. در بالا NestedScrollView باعث می شود تا هنگام Scroll فکر کنیم که ImageView در حال فرورفتن در Toolbar است.
لینک دانلود عکس sample
حالا باید در اکتیویتی اصلی که در اینجا نام آن برابر با MainActivity.kt (نباید جاوا باشد !) است کد زیر را قرار دهید.

package ir.programchi
import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.support.design.widget.CollapsingToolbarLayout
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.graphics.Palette
import android.support.v7.view.CollapsibleActionView
class MainActivity : AppCompatActivity() {
    private var collapsingToolbarLayout: CollapsingToolbarLayout? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar) as CollapsingToolbarLayout
        collapsingToolbarLayout!!.title = "Collapsing Toolbar"
        dynamicColor()
    }
    private fun dynamicColor() {
        val bitmap = BitmapFactory.decodeResource(resources, R.drawable.nature_one)
        Palette.from(bitmap).generate { palette ->
            collapsingToolbarLayout!!.setContentScrimColor(palette.getMutedColor(resources.getColor(R.color.colorPrimary)))
            collapsingToolbarLayout!!.setStatusBarScrimColor(palette.getMutedColor(resources.getColor(R.color.colorAccent)))
        }
    }
}

package ir.programchi

import android.graphics.Bitmap

import android.graphics.BitmapFactory

import android.support.design.widget.CollapsingToolbarLayout

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.support.v7.graphics.Palette

import android.support.v7.view.CollapsibleActionView

class MainActivity : AppCompatActivity() {

private var collapsingToolbarLayout: CollapsingToolbarLayout? = null

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

collapsingToolbarLayout = findViewById(R.id.collapsing_toolbar) as CollapsingToolbarLayout

collapsingToolbarLayout!!.title = "Collapsing Toolbar"

dynamicColor()

}

private fun dynamicColor() {

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.nature_one)

Palette.from(bitmap).generate { palette ->

collapsingToolbarLayout!!.setContentScrimColor(palette.getMutedColor(resources.getColor(R.color.colorPrimary)))

collapsingToolbarLayout!!.setStatusBarScrimColor(palette.getMutedColor(resources.getColor(R.color.colorAccent)))

}

ابتدا view مربوط به collapsingToolbarLayout را find کردیم سپس یک void به نام dynamicColor تعریف کردیم و با استفاده از کلاس BitmapFactory رنگ عکسی که در برنامه قرار دارد را به دست آوردیم بعد از آن با استفاده از Palette یک رنگ بین عکس و رنگ colorPrimary که در پوشه res/values/colors قرار دارد ایجاد کردیم و رنگ محتوا را برابر با آن قرار دادیم حالا این کار برای چیه ؟ برای اینکه هنگامی که Scroll می کنیم رنگ به صورت آرام fade شده و تغییر کند.

مطالعه بیشتر