根据用户操作向左或向右移动（使用 Xamarin IOS 和 XIB）在表格单元格视图中排列多个 UIViews

Question

I'm new to IOS based development. I have a following requirement to implement table view. That's how the view should arrange based on user action(move to left or right)

My plan is arranged all the images in Image View and based on the user tap to left/right need to rearrange/hide/show the images. I'm not able to achieve this dynamically. All help much appreciated.

Answer 1

Try the following code , just place the corresponding images into Resource folder.

public class MyCell : UITableViewCell
    {
        private float buttonWidth = 50;
        private float buttonHeight = 100;
        private float largeButtonWidth = 0;
        private List<string> imageList;
        private List<string> largeImageList;
        private List<UIButton> buttonList;

        public MyCell()
        {
            largeButtonWidth = (float)(UIScreen.MainScreen.Bounds.Width - buttonWidth * 2);
            imageList = new List<string> { "1.png", "2.png" , "3.png"};
            largeImageList = new List<string> { "bg1.PNG", "bg2.PNG", "bg3.PNG" };
            buttonList = new List<UIButton>();

            for (int i = 0; i < imageList.Count; i++)
            {
                UIButton button = new UIButton();
                button.Tag = i;
                button.Frame = new CGRect(buttonWidth * i, 0, buttonWidth, buttonHeight);
                button.SetImage(UIImage.FromBundle(imageList[i]), UIControlState.Normal);
                button.TouchUpInside += Button_TouchUpInside;
                this.ContentView.Add(button);
                buttonList.Add(button);
            }
        }

        private void Button_TouchUpInside(object sender, EventArgs e)
        {
            reset();

            UIButton button = sender as UIButton;
            button.SetImage(null, UIControlState.Normal);
            button.SetBackgroundImage(UIImage.FromBundle(largeImageList[(int)button.Tag]), UIControlState.Normal);

            CGRect frame = button.Frame;
            frame.Width = largeButtonWidth;
            button.Frame = frame;

            UIButton button2 = buttonList[1];
            CGRect frame2 = button2.Frame;
            frame2.X = buttonList[0].Frame.Right;
            button2.Frame = frame2;

            UIButton button3 = buttonList[2];
            CGRect frame3 = button3.Frame;
            frame3.X = buttonList[1].Frame.Right;
            button3.Frame = frame3;
        }

        void reset()
        {
            for (int i = 0; i < imageList.Count; i++)
            {
                UIButton button = buttonList[i];

                button.SetImage(UIImage.FromBundle(imageList[i]), UIControlState.Normal);
                button.SetBackgroundImage(null, UIControlState.Normal);

                CGRect frame = button.Frame;
                frame.Width = buttonWidth;
                button.Frame = frame;
            }
        }      
    }