locked
What UI component should I choose ? RRS feed

  • Question

  • User383304 posted

    What UI component should I choose in order to obtain something like this ?

    Friday, May 1, 2020 2:37 PM

All replies

  • User394320 posted

    I don't think there is a pre-made component that can do this. I've implemented similar interfaces with grids, labels, and buttons. You could do so dynamically in the C# code adding them via StackLayout.Children.Add(.....). As you create the children in c# you have to attach gesture to each one of them. If you created via labels, for example, in your gesture, you can process code to look at the label text of the sender to find out which one was clicked.

    Friday, May 1, 2020 8:29 PM
  • User394320 posted

    That being said, you might try making the actual rounded squares be made from buttons. They have a border you can set on them and you can set a radius. With a label.... you might need to wrap that in a frame to get your desired look -- which would work, but would require more code. In the screenshot below (assuming this post doesn't require approval because of the image -- my previous posts with images never appeared)... the cards are images in a frame in another frame, in a grid. I made the image the tappable object to simplify my gesture code.

    Friday, May 1, 2020 8:48 PM
  • User383304 posted

    @hayedid Can you share the code on how have you added "End Turn", "Discard", "Play" labels (i suppose those are labels or buttons) ?

    Thanks

    Monday, May 4, 2020 6:47 PM
  • User394320 posted

    Certainly, here you go:

    <Frame Padding="1" Margin="0" BackgroundColor="#D4AF37" CornerRadius="15" >
      <Frame Padding="1" Margin="0" BackgroundColor="#FCDE79" CornerRadius="15">
        <Button CornerRadius="12" TextColor="#D4AF37" BackgroundColor="DarkBlue" Text="End Turn" BorderWidth="0"</Button>
      </Frame>
    </Frame> 
    

    The different colors of gold are just to make the border 'pop' in appearance just a bit vs. a solid color.

    Monday, May 4, 2020 11:12 PM
  • User383304 posted

    @hayedid Thank you. I will try to do from code. I do not use a designer to build my UI. Thanks

    Tuesday, May 5, 2020 2:38 PM
  • User394320 posted

    I don't use a designer either. That was done by hand.

    Thursday, May 7, 2020 12:14 AM
  • User394320 posted

    If you want buttons to look (shape wise) like the ones you have in your picture, you will need to set your Corner Radius to half the height of each button.

    Thursday, May 7, 2020 12:16 AM
  • User383304 posted

    @hayedid I did something of my own. I will share the code here with you and others:

    `private void AddPreferenceStackView(UIStackView stackView, List items, nfloat lineSpacing, nfloat leftAnchor, nfloat topAnchor, nfloat lefltScreenMinusWidth, UIView topAnchorView, UIView leftAnchorView, BubleType bubleType) { stackView.Axis = UILayoutConstraintAxis.Vertical; stackView.Spacing = lineSpacing; stackView.Alignment = UIStackViewAlignment.Leading; stackView.Distribution = UIStackViewDistribution.EqualSpacing; stackView.LayoutMarginsRelativeArrangement = true; stackView.LeftAnchor.ConstraintEqualTo(leftAnchorView.LeftAnchor, leftAnchor).Active = true; stackView.TopAnchor.ConstraintEqualTo(topAnchorView.TopAnchor, topAnchor).Active = true; stackView.TranslatesAutoresizingMaskIntoConstraints = false;

            var sreenWidth = UIScreen.MainScreen.Bounds.Width - lefltScreenMinusWidth;
            var views = new List<UIView>();
            nfloat calculatedWidht = 0;
    
            for (int j = 0; j < items.Count; j++)
            {
                CGSize length = GetTextLength(items[j]);
                CGRect frame = GetButtonFrame(length);
                UIButton button = BuildButton(items[j], frame, bubleType);
    
                calculatedWidht += button.Frame.Width + 5;
    
                if (calculatedWidht < sreenWidth)
                {
                    views.Add(button);
                }
                else
                {
                    UIStackView horizontalverticalStackView = this.BuildHorizontalStackView(lineSpacing);
    
                    foreach (var subview in views)
                    {
                        horizontalverticalStackView.AddArrangedSubview(subview);
                    }
    
                    stackView.AddArrangedSubview(horizontalverticalStackView);
    
                    views = new List<UIView>
                    {
                        button
                    };
                    calculatedWidht = button.Frame.Width;
    
                    verticalScrollViewHeigh += buttonHeight + 5;
                }
            }
    
            if (views.Any())
            {
                UIStackView horizontalverticalStackView = this.BuildHorizontalStackView(lineSpacing);
    
                foreach (var subview in views)
                {
                    horizontalverticalStackView.AddArrangedSubview(subview);
                }
    
                stackView.AddArrangedSubview(horizontalverticalStackView);
                verticalScrollViewHeigh += buttonHeight + 5;
            }
        }
    
        private UIStackView BuildHorizontalStackView(nfloat lineSpacing)
        {
            return new UIStackView
            {
                Axis = UILayoutConstraintAxis.Horizontal,
                Spacing = lineSpacing,
                Alignment = UIStackViewAlignment.Leading,
                Distribution = UIStackViewDistribution.EqualSpacing,
                LayoutMarginsRelativeArrangement = true
            };
        }
    
        private UIButton BuildButton(string title, CGRect frame, BubleType bubleType)
        {
            var button = new BubleButton
            {
                Frame = frame,
                BubleType = bubleType
            };
    
            button.WidthAnchor.ConstraintEqualTo(frame.Width).Active = true;
            button.HeightAnchor.ConstraintEqualTo(frame.Height).Active = true;
    
            button.SetTitle(title, UIControlState.Normal);
            button.SetTitleColor(Colors.TextColor.ToUIColor(), UIControlState.Normal);
    
            button.HorizontalAlignment = UIControlContentHorizontalAlignment.Center;
            button.VerticalAlignment = UIControlContentVerticalAlignment.Center;
    
            button.Layer.CornerRadius = 20;
    
            button.Layer.BorderColor = Colors.BordersLightGrey.ToUIColor().CGColor;
            button.Layer.BorderWidth = 1;
    
            button.BackgroundColor = Colors.WhiteColor.ToUIColor(); ;
    
            button.Font = UIFont.SystemFontOfSize(12);
    
            button.TouchUpInside -= Button_TouchUpInside;
            button.TouchUpInside += Button_TouchUpInside;
    
            return button;
        }`
    
    Tuesday, May 19, 2020 2:30 PM
  • User383304 posted

    I must say that this is just a snippet. It would have been nice to have something like this library

    https://github.com/Mindinventory/BubbleCollectionViewLayout

    Tuesday, May 19, 2020 2:32 PM
  • User369979 posted

    Thanks for sharing your successful experience here. And please mark it if this library fits your requirements most.

    Tuesday, May 26, 2020 2:30 AM
  • User383304 posted

    @LandLu The library from my previous comment would have been perfect but unfortunately it is written for swift and objective-c. It would have been nice to have something like this in c# as well.

    Tuesday, May 26, 2020 8:03 PM
  • User369979 posted

    If you do like this library you could try to convert it to c# using binding library: https://docs.microsoft.com/en-us/xamarin/ios/platform/binding-objective-c/

    Wednesday, May 27, 2020 9:42 AM
  • User383304 posted

    @LandLu Thanks, I will try to do it

    Wednesday, May 27, 2020 12:16 PM