1 ارسال در این موضوع قرار دارد

پیشنیاز :

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 دوم حرکت میکنه . طبق تصویر زیر

ezgif.com-crop.gif

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

برای مثال دوم که با کلیات کار آشنا شدید توضیح رو کمتر میکنیم 

توی این مورد با 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

نتیجه :

ezgif.com-video-to-gif.gif

 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

توی مثال زیر میبینیم که با کلیک روی دکمه ، اکتیویتی جدیدی باز میشه :

ezgif.com-video-to-gif (1).gif

کد هاشو تکرار نمیکنیم ، بالاتر توضیح دادیم

توی رویداد کلیک برای رفتن اکتیویتی دوم ، از 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)

ezgif.com-video-to-gif (2).gifezgif.com-video-to-gif (3).gif

 

یه مثال بزنیم :

 

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.

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  حداکثر استفاده از ۷۵ شکلک مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   You cannot paste images directly. Upload or insert images from URL.