Surface Engine

Surface Engine it's a layout engine to create prototypes and complete apps so faster

Android Examples

Grids

for (int i = 0; i <100; i++) { SfPanel cachito = new SfPanel(); View vii = new View(this.context); Integer c1 = i + (int)(Math.random() * ((255 - i) + i)); Integer c2 = i + (int)(Math.random() * ((254 - i) + i)); Integer c3 = i + (int)(Math.random() * ((253 - i) + i)); vii.setBackgroundColor(Color.rgb(c1, c2, c3)); this.screen.append(cachito); cachito.setSize(-33.33333f, -10).setView(vii); this.addView(vii); } this.screen.update(this.context);

for (int i = 0; i <100; i++) { SfPanel cachito = new SfPanel(); View vii = new View(this.context); Integer c1 = i + (int)(Math.random() * ((255 - i) + i)); Integer c2 = i + (int)(Math.random() * ((254 - i) + i)); Integer c3 = i + (int)(Math.random() * ((253 - i) + i)); vii.setBackgroundColor(Color.rgb(c1, c2, c3)); this.screen.append(cachito); cachito.setSize(-33.33333f, -10).setView(vii).setMargin((i*5), 0, 0 ,0); this.addView(vii); } this.screen.update(this.context);

TabBarControl

TabBarControl custom class public class TabBar extends TabBarControl { public TabBar(SurfaceActivityView view, TabBarControlListener listener, int position) { super(view, listener, position); } @Override public void setTabs() { this.tabBarItems = new ArrayList<>(); this.tabBarItems.add(TabBarItem.createBasicItem(this.getContext(), "\uf015", MainActivity.class, Color.CYAN, Color.GREEN)); this.tabBarItems.add(TabBarItem.createBasicItem(this.getContext(), "\uf016", TabBar1.class, Color.CYAN, Color.GREEN)); this.tabBarItems.add(TabBarItem.createBasicItem(this.getContext(), "\uf017", TabBarScroll.class, Color.CYAN, Color.GREEN)); } } SurfaceActivityView instance @Override public void onCreateView() { TabBar tabBar = new TabBar(this, this, 1); }

Scroll

@Override public void onCreateView() { this.tabBar = new TabBar(this, this, 2); View bk = new View(this.context); bk.setBackgroundColor(Color.BLACK); this.screen.setView(bk); this.addView(bk); View bodyBk = new View(this.context); bodyBk.setBackgroundColor(Color.BLACK); this.body.setView(bodyBk); this.addView(bodyBk); SfPanel scrollBody = new SfPanel().setSize(-100, -100); this.body.append(scrollBody); this.makeItScrollable(scrollBody, "scrollBody"); for (int i = 0; i < 200; i++) { SfPanel cachito = new SfPanel(); View vii = new View(this.context); Integer c1 = i + (int)(Math.random() * ((255 - i) + i)); Integer c2 = i + (int)(Math.random() * ((254 - i) + i)); Integer c3 = i + (int)(Math.random() * ((253 - i) + i)); vii.setBackgroundColor(Color.rgb(c1, c2, c3)); scrollBody.append(cachito); cachito.setSize(-33.33333f, -10).setView(vii). setMargin(i*5, 0, 20, 0).setKey("i-" + i); this.addToScroll("scrollBody", vii); } scrollBody.getLastChild().setMargin(990, 0, 0, 0); this.screen.update(this.context); }

Android native XmlLayout combine with Surface Engine

In this example combine native Xml Layouts with the power of Surface Engine You can watch we use scroll exampe, into the layout provide for the xml

Xml Layout <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.appbuilders.surfacedemo.Controllers.HybridXmlSurface" android:paddingLeft="5dp" android:paddingRight="5dp"> <AbsoluteLayout android:layout_width="match_parent" android:layout_height="600px" android:background="@color/colorAccent" android:layout_alignParentTop="true" android:layout_alignParentStart="true" android:layout_marginTop="70dp" android:id="@+id/baseLayout"> </AbsoluteLayout> <Button android:layout_width="match_parent" android:layout_height="100px" android:background="@color/colorPrimaryDark" android:textColor="@color/white" android:text="Return to main" android:layout_below="@+id/baseLayout" android:layout_alignParentStart="true" android:layout_marginTop="36dp" /> </RelativeLayout> Activity public class HybridXmlSurface extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_hybrid_xml_surface); AbsoluteLayout baseLayout = (AbsoluteLayout) findViewById(R.id.baseLayout); HybridXmlSurfaceView view = new HybridXmlSurfaceView(this, baseLayout); } } SurfaceActivityView instance @Override public void onCreateView() { View boxView = new View(this.context); boxView.setBackgroundColor(Color.BLACK); SfPanel box = new SfPanel().setSize(-50, -30). setMargin(20, 0, 0, 0).setView(boxView); this.subScreen.append(box); this.addView(boxView); View boxScrollView = new View(this.context); boxScrollView.setBackgroundColor(Color.MAGENTA); SfPanel boxScroll = new SfPanel().setSize(-85, -65). setMargin(20, 0, 0, 0).setView(boxScrollView); this.subScreen.append(boxScroll); this.makeItScrollable(boxScroll, "boxScroll"); //this.addView(boxScrollView); for (int i = 0; i < 200; i++) { SfPanel cachito = new SfPanel(); View vii = new View(this.context); if (i % 2 == 0) { vii.setBackgroundColor(Color.WHITE); } else { vii.setBackgroundColor(Color.BLACK); } boxScroll.append(cachito); cachito.setSize(-33.33333f, -10).setView(vii). setMargin(i*5, 0, 20, 0).setKey("i-" + i); this.addToScroll("boxScroll", vii); } this.screen.update(this.context); }

Android Fragments into Surface Engine

We want to call this "magic", you can u sea panel, and add a native fragemnt, with all the nature structure of a fragment, this means, you can have your loginliving into the fragment extended class, let me show you

Fragment extended class public class SurfaceBasic extends Fragment { public SurfaceBasic() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_surface_basic, container, false); Button button = view.findViewById(R.id.buttonFragemnt); button.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(getContext(), "Fragment logic button", Toast.LENGTH_SHORT).show(); } }); return view; } } Fragment Xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" android:paddingLeft="10dp" android:paddingRight="10dp" tools:context="com.appbuilders.surfacedemo.Fragments.SurfaceBasic" android:id="@+id/lalita"> <TextView android:layout_width="match_parent" android:layout_height="50dp" android:text="Hello from fragment" android:textColor="@color/white" android:layout_alignParentTop="true" android:layout_alignParentStart="true" /> <Button android:id="@+id/buttonFragemnt" android:layout_width="match_parent" android:layout_height="50dp" android:background="@color/colorPrimaryDark" android:text="Button fragment" android:textColor="@color/white" android:layout_alignParentTop="true" android:layout_alignParentEnd="true" android:layout_marginTop="70dp" /> </RelativeLayout> SurfaceActivityView instance @Override public void onCreateView() { this.tabBar = new TabBar(this, this, 4); View bk = new View(this.context); bk.setBackgroundResource(R.color.colorPrimary); this.body.setView(bk); this.addView(bk); SfPanel t = new SfPanel().setSize(-80, -70). setFragment(new SurfaceBasic()).setMargin(25, 0, 0, 0); this.body.append(t); this.addFragment(t); this.screen.update(this.context); }

Fragmnt XML desgin

iOS Swift Examples

Grids

override public func onCreateView() { let vi: UIView! = UIView(); vi.backgroundColor = UIColor.darkGray; self.screen.setView(view: vi); self.addView(view: vi); for i in 1 ..< 31 { let pan = SfPanel(); pan.setSize(width: -33.3333, height: -10); let vis = UIView(); let red:CGFloat = CGFloat(drand48()) let green:CGFloat = CGFloat(drand48()) let blue:CGFloat = CGFloat(drand48()) vis.backgroundColor = UIColor(red:red, green: green, blue: blue, alpha: 1.0); pan.setView(view: vis); self.screen.append(object: pan); self.addView(view: vis); } self.screen.update() }

override public func onCreateView() { let vi: UIView! = UIView(); vi.backgroundColor = UIColor.darkGray; self.screen.setView(view: vi); self.addView(view: vi); for i in 1 ..< 31 { let pan = SfPanel(); pan.setSize(width: -33.3333, height: -10). setMargin(top: Float(i)*5, right: 0, bottom: 0, left: 0); let vis = UIView(); let red:CGFloat = CGFloat(drand48()) let green:CGFloat = CGFloat(drand48()) let blue:CGFloat = CGFloat(drand48()) vis.backgroundColor = UIColor(red:red, green: green, blue: blue, alpha: 1.0); pan.setView(view: vis); self.screen.append(object: pan); self.addView(view: vis); } self.screen.update() }

Android Changelog

• Version 3.0

  • SurfaceActivityView
    • Added support for use an external AbsoluteLayout, it means, can hanle native Android Layout (Xml)

• Version 3.1

  • SfPanel
    • Added field to save fragment instance
  • SurfaceActivityView
    • Added methods to add fragments so easily

• Version 3.1.1

  • SfPanel

    • Fixed calcSize in Relative case, it didn't take care about status bar nd action bar

  • TabBarControl

    • Added support for customItemBar with override panels, and setup for auto height

  • SurfaceActivyView

    • Support for fragments

  • TabBarItem

    • Added customItem, and support for override panels

  • Revision 3.1

    • SfPanel
      • Added methods to gte sizes, margins, paddings

  • Revision 4.2

    • SfPanel
      • Added custom fixed for Galaxy S8