B4A Library [B4X] [XUI] SD SlidingPuzzleView (With source code)

I was envious of @Johan Schoeman 's SlidingPuzzle library that you find here.
So I decided to recreate it for B4X inspired by the same library.

I have attached the source code, I entered a procedure to shuffle the cards.

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("Layout1")
 
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub SlidingPuzzleView1_Solved
    ToastMessageShow("Solved",True)
End Sub

Sub Button1_Click
    SlidingPuzzleView1.Solve
End Sub

 

[Star-Dust]

I made an update to make it totally XUI, I realized later that a function did not use XUI methods.
I have also included the possibility of writing numbers in the cards and establishing the color of the text. I improved the mixing algorithm

 

[MarcoRome]

Well done Star

 

[Lucas Eduardo]

Hello, that's a great Class . I was testing and i found a bug, when i change the Number Grid in the designer it doesn't work. It just work if i change too the

 Private Cateto As Int = 5

to the same value

 

[Star-Dust]

It is a knowledge imposed the maximum limit to 4, I forgot to document it. But if you need it I can increase to 5

 

[Lucas Eduardo]

Yes, i would like it a lot and if possible increase to 6.
Thank you

 

[Lucas Eduardo]

I found too when i was testing

Sub SlidingPuzzleView1_Solved
   ToastMessageShow("Solved",True)
End Sub

This sub doesn't work, i was getting an error, so i add this parametter

 (Move As Int)

and worked perfectly

 

[Star-Dust]

Update rel. 0.02 Fix Bug

 

[Lucas Eduardo]

Is there a way to change the number grid by code?

 

[Star-Dust]

Not currently. The class creates the image grid at the time of initialization. Absorbs the image from the Background property and splits it into the various boxes.
Changing after the number of rows / columns would have no effect.

A new method should be created (eg SetBoxNumber(Cateto as int)) which redoes the subdivision operation for the new value and re-draw.

I put the code so that everyone can make the improvements he wants.

 

[Lucas Eduardo]

I got it . Thank you.

 

[Star-Dust]

Update rel 0.03
Bugs fix to improve compatibility with B4i

 

[Almora]

hi..
pictures added to the designer. I need to create my new designer every time for different pictures.

 

[Star-Dust]

Now I'm off-site. I will try to answer in the next days

 

[Star-Dust]

To change the image, just use SetImageDrawable

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("Layout1")
  
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub SlidingPuzzleView1_Solved(Move As Int)
    ToastMessageShow($"Solved in ${Move} movement"$,True)
End Sub

Sub ButtonDog_Click
    SlidingPuzzleView1.ImageDrawable=LoadBitmap(File.DirAssets,"dog.jpg")
End Sub

Sub ButtonCat_LongClick
    SlidingPuzzleView1.ImageDrawable=LoadBitmap(File.DirAssets,"cat.jpg")
End Sub

I enclose an example