UIScrollView como el HomePage del iPhone

El HomePage del iPhone posee un conjunto de elementos que hacen bastante vistoso y útil, de tal manera que alguna vez queramos el mismo efecto para alguna de nuestras aplicaciones. Para lógralo haremos uso de dos controles, el UIScrollView y el UIPageControl.

Nuestro primer paso sera abrir nuestro xib en Xcode y agregar los dos controles a la vista junto con sus Outlets, como se puede ver en la siguiente imagen:

 
Luego en el código del controller agregaremos los métodos CreatePanel, que será el encargado de crear los paneles del ScrollView, junto con su respectivo contenido, en el caso en particular de nuestra aplicación tendrá una imagen (UIImage) y un texto (UILabel):

        private void CreatePanels( int count )
        {
             scrollView.Scrolled += ScrollViewScrolled;
             RectangleF scrollFrame = scrollView.Frame;
             scrollFrame.Width = scrollFrame.Width * count;
             scrollView.ContentSize = scrollFrame.Size;    
 
            for (int i=0; i< count; i++) 
            {
                UIImageView imageView = new UIImageView ();
                UITextView textView = new UITextView ();
                textView.TextColor = UIColor.White;
                textView.Font = UIFont.ItalicSystemFontOfSize (18.0f);
                textView.BackgroundColor = UIColor.Clear;
                textView.TextAlignment = UITextAlignment.Center;
                textView.Text = CreateFormatingText (ImagesNames[i]);
                imageView.Image = LoadImage (ImagesNames[i]);
 
                //Begin Frames
                RectangleF frameImg = scrollView.Frame;
                frameImg.Height = 220.0f;//450
                PointF locationImg = new PointF ();
                locationImg.X = frameImg.Width * i;
                frameImg.Location = locationImg;
                RectangleF frameTxt = scrollView.Frame;
                frameTxt.Height = 200.0f;//450
                PointF locationTxt = new PointF ();
                locationTxt.X = frameTxt.Width * i;
                locationTxt.Y = frameImg.Height + 25;
                frameTxt.Location = locationTxt;
                textView.Frame = frameTxt;
                imageView.Frame = frameImg;
                scrollView.AddSubview (textView);
                scrollView.AddSubview (imageView);
            }
            pageControl.Pages = count;
        }   

Nuestro siguiente método será, el encargado de revisar si el panel actual ha pasado de la mitad de nuestra pantalla, para así generar el cambio de panel:

        private void ScrollViewScrolled( object sender, EventArgs e )
        {
            double page = Math.Floor( ( scrollView.ContentOffset.X - scrollView.Frame.Width / 2 ) / scrollView.Frame.Width ) + 1;
            pageControl.CurrentPage = (int) page;
        }   

Y nuestro 2 últimos métodos que se describen a continuación serán los encargados de formatear el texto que se mostrara en pantalla con la ayuda de un StringBuilder y el método encargado de asignar una imagen a nuestro UIViewImage en base a un nombre, además si no existe una imagen para ese nombre, nos devolverá una imagen predeterminada que indica que no existe.

        private string CreateFormatingText (string name)
        {
            StringBuilder Text = new StringBuilder ();
            Text.Append ("Name of Image: ");
            Text.Append (name);
            return Text.ToString ();
        }


        private UIImage LoadImage (string Name)
        {
            UIImage temp = UIImage.FromFile ("Images/" + Name);
            if (temp == null) 
            {
                temp = new UIImage ("Images/photo_not_available-png.png");
                return temp;
            } 
            else 
                return temp;
        }   

Después, vamos a crear una lista de Strings, que almacene los nombres de archivos a buscar y lo inicializamos en el constructor del controlador:

 
        private List ImagesNames;
        public ScrollViewExampleViewController () 
            : base ("ScrollViewExampleViewController", null)
        {
            ImagesNames = new List (){
            "0.png",
            "1.png",
            "2.png",
            "3.png",
            "4.png",
            "5.png",
            "6.png"
            } ;
        }  

Y por último vamos a llamar al método que inicializa los paneles en el método ViewDidLoad:

 
CreatePanels (ImagesNames.Count);  

El resultado se verá como sigue:

Suerte!
Source