پیشنیاز :
Androidx بروز شده
راه اندازی :
فایل های درون پوشه ی libs رو توی مسیر لایبرری هاتون کپی کنید
حتماً باید از تم اپکمپت توی پروژتون استفاده کنید (داخل منیفست) : یک نمونه رو زیر قرار میدم (نیازی به تیک زدن کتابخونه AppCompat نیست)
SetApplicationAttribute(android:theme, "@style/MyAppTheme")
CreateResource(values, themes.xml,
<resources>
<style name="MyAppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#6200EE</item>
<item name="colorPrimaryDark">#3700B3</item>
<item name="colorAccent">#03DAC5</item>
<item name="colorControlHighlight">#6200EE</item>
</style>
</resources>
)
این کد رو پایین صفحه اضافه کنید : (دقت کنید که این کد توی روون اجرا شدن انیمیشن تأثیر بسزایی داره ، پس یادتون نره اضافه کنید)
توضیحات تکمیلی : توی هر اکتیویتی که از این کتابخونه استفاده میکنید ، حتما باید این کد رو دوباره قرار بدید (با یک مرتبه کل پروژه روون نمیشه)
توی اکتیویتی های تارگت نیازی به گذاشتن کد زیر نیست مگر اینکه بخواید دوباره داخل اون اکتیویتی ، مجدداً ترنسفورم ایجاد کنید
#IF JAVA
public void _onCreate() {
com.skydoves.transformationlayout.TransitionExtensionKt.onTransformationStartContainer(this);
}
#End If
کتابخونه رو تیک بزنید و متغیر اون رو تعریف کنید
Dim Transform As Hitex_TransformationLayout
حالا قبل از اینکه کار دیگه ای بکنیم باید مبدأ و مقصدمون رو مشخص کنیم
خب مبدأ ما برای تست ، یه دکمه هست که تعریف ، اینیشلایز و مقدار دهی میکنیم
Dim button As Button
button.Initialize("button")
button.Text = "Button A"
کتابخونه اصلی که بالاتر تعریفش کردیم رو Initialize میکنیم و button رو بهش میدیم
Transform.Initialize("Transform", button)
و Transform رو هرجای اکتیویتیمون ک خواستیم AddView میکنیم
Activity.AddView(Transform,0,0,50%x,10%y)
تا اینجا کار مبدأ تموم شده و میریم سراغ مقصد که button2 هست
پس تعریف و اینیشلایزش کرده و هرجایی ک بخوایم AddView میکنیم
Dim button2 As Button
button2.Initialize("button2")
button2.Text = "Button B"
Activity.AddView(button2,10%x,20%y,80%x,10%y)
حالا باید به کتابخونه ، ویو مقصدمون رو معرفی کنیم ، که از متد BindTargetView استفاده میکنیم
Transform.BindTargetView(button2)
توی رویداد هاشون دستور شروع و پایان انیمیشن رو صادر میکنیم
Sub button_Click
Transform.StartTransform
End Sub
Sub button2_Click
Transform.FinishTransform
End Sub
کار تمومه و با کلیک کردن روی button اول ، به مقصد Button دوم حرکت میکنه . طبق تصویر زیر
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
برای مثال دوم که با کلیات کار آشنا شدید توضیح رو کمتر میکنیم
توی این مورد با CardView یه دکمه ی گرد ساختیم (که میتونید از FloatingActionButton هم استفاده کنید)
Dim Fab As Hitex_CardView
Fab.Initialize("Fab")
Fab.Radius = 55dip
Fab.Elevation = 4dip
Fab.UseCompatPadding = True
Dim icon As Label
icon.Initialize("icon")
icon.Typeface = Typeface.MATERIALICONS
icon.Text = Chr(0xE145)
icon.TextSize = 22
icon.Gravity = Gravity.CENTER
Fab.Panel.AddView(icon,0,0,-1,-1)
Trasnform2.Initialize("Trasnform2", Fab)
Activity.AddView(Trasnform2,70%x,85%y,100dip,100dip)
Trasnform2.SetRipple(icon,True)
توی مثال بالا از SetRipple میتونید برای ریپل دادن به ویو ها استفاده کنید ، برای تغییر رنگش از تم توی منیفست استفاده کنید (این متد برای زیباییه و اجباری نیست)
<item name="colorControlHighlight">#6200EE</item>
ادامه ی کد های بالا
Dim CardView As Hitex_CardView
CardView.Initialize("CardView")
CardView.Radius = 6dip
CardView.Elevation = 4dip
Activity.AddView(CardView,25%x,52%y,60%x,40%y)
Trasnform2.BindTargetView(CardView)
Trasnform2.SetRipple(CardView.Panel,True)
Dim ListView As ListView
ListView.Initialize("ListView")
For i = 0 To 6
ListView.AddTwoLinesAndBitmap("item " & i, "sub", LoadBitmap(File.DirAssets,i & ".png"))
Next
ListView.Padding = Array As Int (5dip, 5dip, 5dip, 5dip)
CardView.Panel.AddView(ListView,0,0,60%x,40%y)
و کد زیر برای شروع و پایان انیمیشن
Sub icon_Click
Trasnform2.StartTransform
End Sub
Sub ListView_ItemClick (Position As Int, Value As Object)
Trasnform2.FinishTransform
End Sub
نتیجه :
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
توی مثال زیر میبینیم که با کلیک روی دکمه ، اکتیویتی جدیدی باز میشه :
کد هاشو تکرار نمیکنیم ، بالاتر توضیح دادیم
توی رویداد کلیک برای رفتن اکتیویتی دوم ، از startActivity عادی استفاده نمیکنیم و باید از Transform.StartActivity2 استفاده کرد .
یه سری اطلاعات هم داریم همین حین ارسال میکنیم به اکتیویتی مقصد (SimpleTarget2)
Sub icon_Click
Dim intent As Hitex_Intent
intent.Initialize2(SimpleTarget2)
intent.PutExtra("ImageLink", "https://user-images.githubusercontent.com/24237865/75087937-5c1d9f80-553e-11ea-8fc9-a7e520addde0.jpg")
intent.PutExtra("Title", "زوتوپیا")
intent.PutExtra("Description", "زوتوپیا یک پویانمایی رایانه‌ای سه‌بعدی آمریکایی اکران شده در سبک کمدی و ماجراجویی، به کارگردانی بایرون هاوارد، ریچ مور و جرید بوش است. این فیلم توسط والت دیزنی پیکچرز تهیه شده‌است که به عنوان پنجاه و پنجمین فیلم پویانمایی در فهرست والت دیزنی به حساب می‌آید.")
Dim bundle = Transform.WithThisActivity("myTransitionName") As Object
Transform.StartActivity2(intent, bundle)
End Sub
توی اکتیویتی مقصد حتما آخر کد ها ، این کد رو هم اضافه کنید :
#IF JAVA
public void _onCreate() {
com.skydoves.transformationlayout.TransformationLayout.Params params = getIntent().getParcelableExtra("myTransitionName");
com.skydoves.transformationlayout.TransitionExtensionKt.onTransformationEndContainer(this, params);
}
#End If
و توی Activity_Create به این شکل اطلاعات رو بگیرید و پر کنید :
Dim intent = Activity.GetStartingIntent As Hitex_Intent
Title.TextColor = Colors.DarkGray
Title.Text = intent.GetExtra("Title")
Description.Text = intent.GetExtra("Description")
Glide.Load2(intent.GetExtra("ImageLink")).Apply(Glide.RO.CenterCrop).Into(IV)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
برای زمانی که میخواید توی ریسایکلر از این کتابخونه استفاده کنید باید از متد WithView توی ساب onBind استفاده کنید
Tranformation.WithView(Parent)
و توی ساب onCreate ، کتابخونه باید روی Parent اضافه شه و تمام ویو های شما رو در بر بگیره
Parent.AddView(Tranformation,0,0,-1,-1)
یه مثال بزنیم :
Sub LV_onCreateViewHolder (Parent As Panel, ViewType As Int) '# onCreate #'
Dim Tranformation As Hitex_TransformationLayout
Dim CardView As Hitex_CardView
CardView.Initialize("CardView")
CardView.Elevation = 4dip
CardView.MaxElevation = 4dip
CardView.Radius = 6dip
CardView.UseCompatPadding = True
Tranformation.Initialize("Tranformation", CardView)
Dim IV As ImageView : IV.Initialize("IV")
Dim lbl As Label : lbl.Initialize("lbl")
lbl.TextColor = Colors.DarkGray : lbl.TextSize = 18
lbl.Typeface = Main.Diodrum
lbl.Gravity = Bit.Or(Gravity.CENTER,Gravity.RIGHT)
Dim subLbl As Label : subLbl.Initialize("subLbl")
subLbl.TextColor = Colors.Gray : subLbl.TextSize = 16
subLbl.Gravity = Bit.Or(Gravity.CENTER,Gravity.RIGHT)
subLbl.Typeface = Main.Vazir
Parent.AddView(Tranformation,0,0,-1,-1)
CardView.Panel.AddView(IV,72%x,3.3%x,72dip,72dip)
CardView.Panel.AddView(lbl,5%x,0,60%x,8%y)
CardView.Panel.AddView(subLbl,5%x,6%y,60%x,5%y)
CardView.Panel.Color = Colors.White
Tranformation.SetRipple(CardView, False)
End Sub
Sub LV_onBindViewHolder (Parent As Panel, Position As Int) '* onBind *'
Dim Tranformation = Parent.GetView(0) As Hitex_TransformationLayout
Dim item = itemList.get(Position) As Model
Dim CardView = Tranformation.GetView(0) As Hitex_CardView
Dim IV = CardView.Panel.GetView(0) As ImageView
Dim lbl = CardView.Panel.GetView(1) As Label
Dim subLbl = CardView.Panel.GetView(2) As Label
subLbl.Text = "آیتم شماره " & Position
lbl.Text = item.Title
Tranformation.WithView(Parent)
Tranformation.Duration = 1000
Glide.Load2(item.ImageLink).Apply(Glide.RO.CircleCrop).Into(IV)
Parent.Height = 15%y
End Sub
و رویداد کلیک : (اینجا عین مورد قبل نیست پس بجای StartActivity2 باید از )
Sub LV_ItemClick (ClickedItem As Panel, Position As Int) '👆 ItemClick 👆'
Dim Tranformation = ClickedItem.GetView(0) As Hitex_TransformationLayout
Dim item = itemList.get(Position) As Model
Dim intent As Hitex_Intent
intent.Initialize2(TargetActivity)
intent.PutExtra("ImageLink", item.ImageLink)
intent.PutExtra("Title", item.Title)
intent.PutExtra("Description", item.Description)
Tranformation.StartActivity(Tranformation, intent)
End Sub
و یادتون نره اکتیویتی مقصد رو به کد زیر Extends کنید :
#Extends: com.skydoves.transformationlayout.TransformationAppCompatActivity
یه سری متد این پایین معرفی شده که میتونید استفاده کنید
برای مثال برای تغییر مدت انیمیشن از کد زیر استفاده کنید :
1000M = 1S
Transform.Duration = 1000
کد های زیر برای تغییر حالت بین Arc و Linear
Transform.PathMotion = Transform.MOTION_LINEAR
Transform.PathMotion = Transform.MOTION_ARC
TransformationLayout Attributes
Attributes
Type
Default
Description
targetView
resource id
none
Bind a targetView that will be transformed.
duration
Long
350L
Duration of the transformation.
pathMotion
Motion.ARC, Motion.LINEAR
default layout
Indicates that this transition should be drawn as the which path.
containerColor
Color
Color.TRANSPARENT
Set the container color to be used as the background of the morphing container.
scrimColor
Color
Color.TRANSPARENT
Set the color to be drawn under the morphing container.
direction
Direction.AUTO, Direction.ENTER, Direction.RETURN
Direction.AUTO
Set the direction to be used by this transform.
fadeMode
FadeMode.IN, FadeMode.OUT, FadeMode.CROSS, FadeMode.THROUGH
FadeMode.IN
Set the FadeMode to be used to swap the content of the start View with that of the end View.
fitMode
FitMode.AUTO, FitMode.WIDTH, FitMode.HEIGHT
FitMode.AUTO
Set the fitMode to be used when scaling the incoming content of the end View.
.png.24e715ebda00155ead6bb5b2ecbb58e1.png)
hitexroid تصویر نمایه خود را تغییر داد