Code Monkey home page Code Monkey logo

sharpconstraintlayout's Introduction

SharpConstraintLayout πŸ—œοΈπŸ“

This is a C# port of ConstraintLayout, it convert constraintlayout.core and create ConstraintLayout for dotnet UI framework. Now, you can use ConstraintLayout in C# world πŸŽ†

NuGet version(SharpConstraintLayout.Core), it contain core logic of constraintlayout, you can base on it create your ConstraintLayout for other dotnet UI framework.

NuGet version(SharpConstraintLayout.Maui), it contain layout for Maui, ConstraintLayout is powerful, you can use it instead other layout

Notice:I stop update SharpConstraintLayout.Maui.Native, because dealing with difference of different platform is tiresome.

NuGet version(SharpConstraintLayout.Maui.Native), it contain layout for net6-android,net6-ios,winui3, such as at android, you can use it instead Xamarin.AndroidX.ConstraintLayout

Using SharpConstraintLayout

Document see wiki

Maui SharpConstraintLayout Example

Installation

Search and install nuget SharpConstraintLayout.Maui (For Maui) or SharpConstraintLayout.Maui.Native (For net6-android,net6-ios,WinUI3)

Notice

  1. Now you create constraint only by code.
  2. Here all example use Maui
  3. Run example app, you can find more example

Basis Align First you need create layout and add controls to layout,

var layout = new ConstraintLayout();
var firstButton = new Button(){ Text = "first"};
var secondButton = new Button(){ Text = "second"};
layout.AddElement(firstButton,secondButton)

then set first button at center of layout.

using(var set = FluentConstraintSet())
{
  set.Clone(layout);
  set.Select(firstButton).CenterTo()
  set.ApplyTo(layout);
}

or you can set second button align first button

using(var set = FluentConstraintSet())
{
  set.Clone(layout);
  set.Select(firstButton).CenterTo()
  .Select(secondButton).LeftToRight(firstButton).CenterYTo(firstButton)
  set.ApplyTo(layout);
}

Current Features

  • Align Left,Right,Top,Bottom,Center

  • Ratio of Width with Height Ratio defines one dimension of a widget as a ratio of the other one. If both width and height are set to 0dp the system sets the largest dimensions that satisfy all constraints while maintaining the aspect ratio.

  • Chains Chains provide group-like behavior in a single axis (horizontally or vertically). The other axis can be constrained independently.

  • Guideline Guideline allow reactive layout behavior with fixed or percentage based positioning for multiple widgets.

  • Barrier Barrier references multiple widgets to create a virtual guideline based on the most extreme widget on the specified side.

  • Flow Flow is a VirtualLayout that allows positioning of referenced widgets horizontally or vertically similar to a Chain. If the referenced elements do not fit within the given bounds it has the ability to wrap them and create multiple chains.

  • Group Group can control visibility of multiple views.

  • RTL

  • Align Baseline

πŸ’» Authors of ConstraintLayout

  • John Hoford : MotionLayout (jafu888)
  • Nicolas Roard : ConstraintLayout (camaelon)

See also the list of contributors who participated in this project.

πŸ”– License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details

sharpconstraintlayout's People

Contributors

xtuzy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

bubdm

sharpconstraintlayout's Issues

Nice project, I've been making something similar too, maybe we can create something together!

Hi, it's my first talking to you, γ‚ˆγ‚γ—γγŠι‘˜γ„γ„γŸγ—γΎγ™γ€‚

I watched your video demonstrating what the project can do, I have videos showing what I've been doing too
https://user-images.githubusercontent.com/35312807/149654567-86c5c7d3-c958-4e16-a43b-01f6878e0add.mp4
https://ewr1.vultrobjects.com/recording/2022-07-21%2007-54-14.mp4

I wrote algorithms for calculating layout, although I think the way to create layout is important after all.
I am using https://github.com/Xyncgas/BlazorCL which has a structure called LDS (Layout_Data_Structure) that has left, top, width, height, which is sufficient to draw a 2D rectangle, while it is familiar to people who are working with the browsers too.
I made this structure with explicit struct layout :
image
As you can see LDS backed by a Vector4 Memory and inside the structure it has point2d and dimension2d that's backed by Vector too which allows SIMD accelerations when doing calculations

I started doing some tricks, for example I can write codes like this :
image

Since there isn't a good enough solution that comes with the browser and dotnet to do exactly what I want to do for drawing layout, I found myself having the needs to implement my own layout algorithms, which making it available in csharp for me to draw any layout knowing it's gonna work.

Lastly I would like to share some interesting things I've been doing, notice how I'm using operators in the layout definitions, that lets me say I want to divide a layout to 20 rows and 3 columns and pick the first grid (rectangle) with the syntax such as
LDS MyLayout => LDS.Screen % (3, 20);
And from there I can keep drawing layout in however ways I would like using things like
LDS MyLayout2 => MyLayout ^ (2,-19); To draw another rectangle at the bottom right corner of the screen
And then I can draw another rectangle between them using
LDS MyLayout3 => MyLayout.BR & MyLayout2.TL; To draw another rectangle between two points

During development layouts are generally created not to be directly displayed but to generate other layout that will be used for the elements, this can create a performance problem due to there being a lot function called to create a lot of layout that are depended by the others. This can be mitigated once the UI has been designed, with LDS.Export() and LDS.Import() the final layout can be abstracted to a compile time constant that can be imported later when the layout is being drawn which is going to work the same, while reducing the complexity of the computation to always O(1)

Measure twice because double not equal to int

double don't equal to int in :

if (finalSize.Width != lastMeasureSize.Width || finalSize.Height != lastMeasureSize.Height)

this cause load MeasureLayout twice, i need convert dp to px.
Target: ConstraintLayout use px to measure and layout, i supply dp method to set property like this api:

public virtual void SetDpMargin(int margin)

FluentConstrainSet api use dp, ConstrainSet api use px, all comment add tips about unit is dp or px

How to test performance?

I always worry SharpConstraintLayout can't be used in real word, because i don't know the performance, test in core is fast, but in ui, it need calculate more things, i don't know how to test it. I only know, when i resize Windows app, flow test like slow.

Goolgle use androidx.constraintlayout , i believe it meet needs. I try to add a framerate label and a androidx.constraintlayout
flow test to compare with sharpconstraintlayout at a5ec59b, get result:

sharex-20230303104301.mp4

We can see when resize window of app that run in Windows subsystem for Android, androidx.constraintlayout and sharpconstraintlayout all get low framerate. But when change child, framerate is ok.

Group can't deal with Gone at Android and iOS

Description

Group set Gone only work at Windows.

Steps to Reproduce

Did you find any workaround?

This is because when set isVisiable=false, Maui Measure child at windows will get 0, but at android or ios, will get same size with when isVisiable=true.
So we can't rely on Maui measure. i find when widget is Gone, will not measure in AndroidSourceCodeMeasureUseSpecForWindows method so we need let widget change visibility, not only view. For view,widget,constraint is consistent, all need change.

Editor cursor not correct at iOS

Description

sharex-20220618094421.mp4

Steps to Reproduce

Did you find any workaround?

That maybe ConstraintLayout use int and Maui use double, convert they not correct

Animation not run at circle when use ConstraintCircle

Description

When use ConstraintCircle, current animation just according to start and finish point calculate, so the motion curve is linear, that not well

Steps to Reproduce

Did you find any workaround?

according to radius and angle to calculate position

page curl for book-like apps

images (2)
Can we have a curl page feature in this beautiful package where user can swipe back and front for book-like applications?
Thank you

Infinite loop because constraintlayout use int and maui use double

Problem:
i update maui example in f2d46a3, a grid split to two part, one part is a constraintlayout, but constraintlayout can't deal with it, because if grid split give a not int value, constraintlayout alway return int, that let layout will infinite loop because result have bias.

For solve this problem, i would try use px as unit when measure and layout in constraintlayout, but set property and fluentlayoytconstraintset use dp, return size to maui a dp value, that will let it not always is int.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.