آموزش ساخت CollapsingToolbar در کاتلین

حتما توی خیلی از برنامه ها دیدید که مثلا یه عکس بالای صفحه هست ، و یه متن بلند هم پایین عکس . و وقتی میخواید ادامه متن رو بخونید و متن رو به سمت بالا میکشونید ، اون عکس با یه حالت و افکت خاصی کوچیک میشه و در آخر محو میشه . ( این حالت مثه وقتی هست که یه دختر توی خیابون با عشوه و ناز شلوارشو بالا میکشه ! ) . این حالت رو بهش میگن CollapsingToolbar . توی این آموزش بیشتر با XML کار داریم و یه قسمت کوچولو موچولو توی اکتیویتی کار داریم ( میتونیم این برنامه رو با جاوا هم دقیقا پیاده سازی کنیم ، ولی خوب همون یه ذره کد توی کلاس با کاتلین راحت تره ! ) . این یه نمونه برنامه از CollapsingToolbar هست :

اساس کار همچین برنامه ای با چیزی هست به نام CollapsingToolbarLayout که مربوط به عکس بالای نوشته هست ، یعنی تمرکز خودش رو میذاره روی کوچیک و بزرگ شدن عکس ، که این CollapsingToolbarLayout باید حتما و حتما داخل AppBarLayout تعریف بشه . یعنی اینجوری :



<android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">


        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:id="@+id/collapsingToolbarLayout"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="40dp"
            app:expandedTitleGravity="bottom|right">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/chelseafc"
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="7dp">


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

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

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

<android.support.design.widget.AppBarLayout

android:layout_width="match_parent"

android:layout_height="256dp"

android:fitsSystemWindows="true"

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

<android.support.design.widget.CollapsingToolbarLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:fitsSystemWindows="true"

android:id="@+id/collapsingToolbarLayout"

app:layout_scrollFlags="scroll|exitUntilCollapsed"

app:contentScrim="?attr/colorPrimary"

app:expandedTitleMarginStart="40dp"

app:expandedTitleGravity="bottom|right">

<ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:scaleType="centerCrop"

android:src="@drawable/chelseafc"

app:layout_collapseMode="parallax"/>

<android.support.v7.widget.Toolbar

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:elevation="7dp">

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

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

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

توی کد بالا و خط ۱۸ ، گفتیم که title یا همون تیتر ما که قراره روی عکس قرار بگیره و وقتی اون عکس کامل محو شد و فقط تیتر موند ، کجا قرار بگیره . که گفتیم bottom|right یعنی پایین و سمت راست . بعد از اینکه AppBarLayout و CollapsingToolbarLayout رو تعریف کردیم ، عکس اصلی رو اضافه کردیم . پایین عکس ، ما یه متن طولانی داریم ، که باید از ScrollView استفاده میکنیم . ولی چون قراره یه حالت پیشرفته باشه ، میایم از حالت پیشرفته تر ScrollView که NestedScrollView هست استفاده میکنیم . بعد از NestedScrollView ما یه LinearLayout تعریف میکنیم که میخوایم داخل این LinearLayout متن خودمون رو بذاریم . واسه اینکه خیلی شلوغ پلوغ نشه ، میایم متن خودمون رو توی یه لایوت دیگه به نام content_layout تعریف میکنیم و با استفاده از include اون لایوت رو توی LinearLayout صدا میزنیم . یعنی اینجوری :



<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:paddingTop="10dp">

            <include layout="@layout/content_layout"/>

        </LinearLayout>

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

<android.support.v4.widget.NestedScrollView

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_behavior="@string/appbar_scrolling_view_behavior">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:paddingTop="10dp">

</LinearLayout>

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

اینم کدهای content_layout هست :



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="22sp"
        android:text="@string/content"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black"
        android:textSize="22sp"
        android:layout_marginTop="5dp"
        android:text="@string/info"/>

</LinearLayout>

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

<LinearLayout

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

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_margin="10dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textColor="@android:color/black"

android:textSize="22sp"

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

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:textColor="@android:color/black"

android:textSize="22sp"

android:layout_marginTop="5dp"

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

</LinearLayout>

گفتم که اساس کار این برنامه ، CollapsingToolbarLayout هست و ما هم یه آی دی بهش دادیم به اسم collapsingToolbarLayout . حالا میخوایم تیتر خودمون رو بگیم چه متنی باشه . اینجاست که میریم سراغ کاتلین و MainActivity.kt و خیلی راحت آی دی رو مینویسیم و بهش میگیم تیترمون برابر چی باشه . اینجوری :



collapsingToolbarLayout.title = "باشگاه چلسی"

collapsingToolbarLayout.title = "باشگاه چلسی"

و کل کدهای کاتلین :



package ir.androidlife.collapsingtoolbarkotlin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        collapsingToolbarLayout.title = "باشگاه چلسی"

    }
}

package ir.androidlife.collapsingtoolbarkotlin

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

collapsingToolbarLayout.title = "باشگاه چلسی"

}

خــــــــوب ، عزیزان من ، سورس رو هم میتونید دانلود کنید :

دانلود سورس

آموزش ساخت CollapsingToolbar در کاتلین

سورس اندروید | آموزش اندروید

مجتبی صابری

پاسخ دهید لغو پاسخ

مجتبی صابری

پیمایش نوشته

پاسخ دهید لغو پاسخ