About mobile phone UI

Question

Hi, EW team:

     I am preparing technique for an RFQ. My customer requires a mobile-phone-like UI. it's a bit like start menu of Windows 10. App entrances are represented as many cards of different size, in a scrollable list. When an App entrance is activated, there has to be a transition effect from the card to App full screen, which may be realized by Scale Dialog Transition.

    I'd like to know if there is a similar demo that I can start with. Because the project calendar is less than 1 year, a good entrance will help me reduce many technical risks.

   Thank you.

 

Best regards.

Stephen

Answer 1

Hello Stephen,

such example is not available. Concerning "entrances are represented as many cards of different size, in a scrollable list" I would recommend to create the scrollable list by using Outline Box (assuming the number of cards is low). If you plan to manage many cards, then it could be better to use the Vertical List or Horizontal List. Starting with version 12, the Vertical/Horizontal List support items of different size.

Concerning the "transition effect from the card to App", using Scale Dialog Transition could be the right option. But I don't know what exact effect do you expect. From technical point of view, you don't depend on the dialog transitions to perform animations. See the chapter Animation Effects. It describes diverse animation related components. For example, the Move and Resize Rect effect can be used to move and resize a component with animation.

Best regards

Paul Banach

Comments

Hi, Paul:

     Your suggestion is very helpful to our project setup.

    Our version is 11 and is still in service for an on-going project and some legacy ones. Maybe switching to 12 is not practical. Is there any trick that can help realize multi size items in Vertical/Horizontal List in version 11?

 

Best regards.

Stephen

---

Hi Stephen,

if you are using version 11, the approach with lists will not work since lists are restricted to have all items with equal size. In such case the unique option you have is the Outline Box.

Best regards

Paul Banach