Fixing bad behaviors on detected sizes

cmd/responsive_layout/main.go

@@ -27,21 +27,21 @@ func main() {
 	resp := xcontainer.NewResponsive(
 		presentation(),       // 100% by default
 		winSizeLabel(window), // 100% by default
-		layout.Responsive(
+		xcontainer.Responsive(
 			widget.NewButton("One !", func() {}),
-			1, .5, layout.OneThird, // 100% for small, 50% for medium and 33% for larger
+			1, .5, xcontainer.OneThird, // 100% for small, 50% for medium and 33% for larger
 		),
-		layout.Responsive(
+		xcontainer.Responsive(
 			widget.NewButton("Two !", func() {}),
-			1, .5, layout.OneThird, // 100% for small, 50% for medium and 33% for larger
+			1, .5, xcontainer.OneThird, // 100% for small, 50% for medium and 33% for larger
 		),
-		layout.Responsive(
+		xcontainer.Responsive(
 			widget.NewButton("Three !", func() {}),
-			1, 1, layout.OneThird, // 100% for small and medium, 33% for larger
+			1, 1, xcontainer.OneThird, // 100% for small and medium, 33% for larger
 		),
-		layout.Responsive(formLayout(), 1, .5), // 100% for small, 50% for others
-		layout.Responsive(formLayout(), 1, .5), // 100% for small, 50% for others
-		button,                                 // 100% by default
+		xcontainer.Responsive(formLayout(), 1, .5), // 100% for small, 50% for others
+		xcontainer.Responsive(formLayout(), 1, .5), // 100% for small, 50% for others
+		button, // 100% by default
 	)
 
 	window.SetContent(
@@ -59,21 +59,22 @@ func winSizeLabel(window fyne.Window) fyne.CanvasObject {
 	go func() {
 		// Continuously update the label with the window size
 		for {
-			canvas := window.Canvas()
+			canvas := window.Content()
 			if canvas == nil {
 				continue
 			}
 			time.Sleep(time.Millisecond * 100)
-			if canvas.Size().Width <= float32(layout.SMALL) {
-				label.SetText(fmt.Sprintf("Extra small devicce %v <= %v", canvas.Size().Width, layout.SMALL))
-			} else if canvas.Size().Width <= float32(layout.MEDIUM) {
-				label.SetText(fmt.Sprintf("Small device %v <= %v", canvas.Size().Width, layout.MEDIUM))
-			} else if canvas.Size().Width <= float32(layout.LARGE) {
-				label.SetText(fmt.Sprintf("Medium device %v <= %v", canvas.Size().Width, layout.LARGE))
-			} else if canvas.Size().Width <= float32(layout.XLARGE) {
-				label.SetText(fmt.Sprintf("Large device %v <= %v", canvas.Size().Width, layout.XLARGE))
+			width := canvas.Size().Width
+			if width <= float32(layout.ExtraSmall) {
+				label.SetText(fmt.Sprintf("Extra small devicce %v <= %v", width, layout.ExtraSmall))
+			} else if width <= float32(layout.Small) {
+				label.SetText(fmt.Sprintf("Small device %v <= %v", width, layout.Small))
+			} else if width <= float32(layout.Medium) {
+				label.SetText(fmt.Sprintf("Medium device %v <= %v", width, layout.Medium))
+			} else if width <= float32(layout.Large) {
+				label.SetText(fmt.Sprintf("Large device %v <= %v", width, layout.Large))
 			} else {
-				label.SetText(fmt.Sprintf("Extra large device %v > %v", canvas.Size().Width, layout.LARGE))
+				label.SetText(fmt.Sprintf("Extra large device %v >= %v", width, layout.ExtraLarge))
 			}
 		}
 	}()
@@ -105,27 +106,33 @@ func formLayout() fyne.CanvasObject {
 	title.Alignment = fyne.TextAlignCenter
 	title.Wrapping = fyne.TextWrapWord
 
-	label := widget.NewLabel("Give your name")
-	label.Wrapping = fyne.TextWrapWord
-	entry := widget.NewEntry()
-	label2 := widget.NewLabel("Give your age")
-	label2.Wrapping = fyne.TextWrapWord
+	entry1 := widget.NewEntry()
 	entry2 := widget.NewEntry()
+	entry3 := widget.NewEntry()
+
+	label1 := widget.NewLabel("Give your name")
+	label2 := widget.NewLabel("Give your age")
 	label3 := widget.NewLabel("Give your email")
+	label1.Wrapping = fyne.TextWrapWord
+	label1.Truncation = fyne.TextTruncateEllipsis
+	label2.Wrapping = fyne.TextWrapWord
+	label2.Truncation = fyne.TextTruncateEllipsis
 	label3.Wrapping = fyne.TextWrapWord
-	entry3 := widget.NewEntry()
+	label3.Truncation = fyne.TextTruncateEllipsis
 
-	labelw := float32(.25)
-	entryw := float32(.75)
-	labelx := layout.OneThird
-	entryx := layout.TwoThird
+	// define the sizes for medium and large devices
+	mediumLabelSize := float32(.25) // we can use float32
+	mediumEntrySize := float32(.75)
+	largeLabelSize := xcontainer.OneThird // or helpers
+	largeEntrySize := xcontainer.TwoThird
 	return xcontainer.NewResponsive(
 		title,
-		layout.Responsive(label, 1, 1, labelw, labelx),
-		layout.Responsive(entry, 1, 1, entryw, entryx),
-		layout.Responsive(label2, 1, 1, labelw, labelx),
-		layout.Responsive(entry2, 1, 1, entryw, entryx),
-		layout.Responsive(label3, 1, 1, labelw, labelx),
-		layout.Responsive(entry3, 1, 1, entryw, entryx),
+		//                         Small,     Medium,     Large and above
+		xcontainer.Responsive(label1, 1, mediumLabelSize, largeLabelSize),
+		xcontainer.Responsive(entry1, 1, mediumEntrySize, largeEntrySize),
+		xcontainer.Responsive(label2, 1, mediumLabelSize, largeLabelSize),
+		xcontainer.Responsive(entry2, 1, mediumEntrySize, largeEntrySize),
+		xcontainer.Responsive(label3, 1, mediumLabelSize, largeLabelSize),
+		xcontainer.Responsive(entry3, 1, mediumEntrySize, largeEntrySize),
 	)
 }

container/responsive.go

@@ -6,6 +6,25 @@ import (
 	"fyne.io/x/fyne/layout"
 )
 
+type FractionHelper = float32
+
+const (
+	// Full is the full size of the container.
+	Full FractionHelper = 1.0
+	// Half is half the size of the container.
+	Half FractionHelper = 0.5
+	// OneThird is one third the size of the container.
+	OneThird FractionHelper = 1.0 / 3.0
+	// TwoThird is two third the size of the container.
+	TwoThird FractionHelper = 2.0 / 3.0
+	// OneQuarter is one quarter the size of the container.
+	OneQuarter FractionHelper = 0.25
+	// OneFifth is five twelfths the size of the container.
+	OneFifth FractionHelper = 0.2
+	// OneSixth is one sixth the size of the container.
+	OneSixth FractionHelper = 1.0 / 6.0
+)
+
 // NewResponsive returns a container with a responsive layout. The objects
 // can be copmmon containers or responsive objects using the Responsive()
 // function.
@@ -25,8 +44,16 @@ func NewResponsive(objects ...fyne.CanvasObject) *fyne.Container {
 
 // Responsive returns a responsive object configured with breakpoint sizes.
 // If no size is provided, the object will be 100% of the layout.
-// The number of sizes can be up to 4, for small, medium, large and extra large.
-// If more than 4 sizes are provided, the extra sizes are ignored.
+// The number of sizes can be up to 5, for extra small, small, medium, large and extra large and above.
+// If more than 5 sizes are provided, the extra sizes are ignored.
+//
+// The sizes are used for the following breakpoints:
+//
+//   - extra small: 0px to 479px
+//   - small: 480px to 767px
+//   - medium: 768px to 1023px
+//   - large: 1024px to 1279px
+//   - extra large: 1280px and above
 //
 // Example:
 //