حتما توی خیلی از برنامه ها دیدید که مثلا یه عکس بالای صفحه هست ، و یه متن بلند هم پایین عکس . و وقتی میخواید ادامه متن رو بخونید و متن رو به سمت بالا میکشونید ، اون عکس با یه حالت و افکت خاصی کوچیک میشه و در آخر محو میشه . ( این حالت مثه وقتی هست که یه دختر توی خیابون با عشوه و ناز شلوارشو بالا میکشه ! ) . این حالت رو بهش میگن CollapsingToolbar . توی این آموزش بیشتر با XML کار داریم و یه قسمت کوچولو موچولو توی اکتیویتی کار داریم ( میتونیم این برنامه رو با جاوا هم دقیقا پیاده سازی کنیم ، ولی خوب همون یه ذره کد توی کلاس با کاتلین راحت تره ! ) . این یه نمونه برنامه از CollapsingToolbar هست :
اساس کار همچین برنامه ای با چیزی هست به نام CollapsingToolbarLayout که مربوط به عکس بالای نوشته هست ، یعنی تمرکز خودش رو میذاره روی کوچیک و بزرگ شدن عکس ، که این CollapsingToolbarLayout باید حتما و حتما داخل AppBarLayout تعریف بشه . یعنی اینجوری :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<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 صدا میزنیم . یعنی اینجوری :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
اینم کدهای content_layout هست :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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 و خیلی راحت آی دی رو مینویسیم و بهش میگیم تیترمون برابر چی باشه . اینجوری :
1 2 3 4 5 |
collapsingToolbarLayout.title = "باشگاه چلسی" |
و کل کدهای کاتلین :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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 = "باشگاه چلسی" } } |
خــــــــوب ، عزیزان من ، سورس رو هم میتونید دانلود کنید :