Android - CellRenderer

Hello everyone!

Need to customize the rendering of CellRender on android, I am using the following classes:

public class MenuCell : ViewCell
{
  public string Text { 
    get { 
      return label.Text; 
    }
    set { 
      label.Text = value;
    } 
  }

  public string Icon {
    get;
    set;
  }

  Label label;
  Image imageIcon;


  public MenuPage Host { get; set; }

  public MenuCell ()
  {
    label = new Label {
      YAlign = TextAlignment.Center,
      Font = Font.SystemFontOfSize(16.0f, FontAttributes.Bold),
      TextColor = Color.White,
    };

    imageIcon = new Image ();

    if (null != Icon) {
      imageIcon.SetBinding (Image.SourceProperty, Icon);
    }

    var layout = new StackLayout {
      BackgroundColor = Color.Black,
      Padding = new Thickness(20, 0, 0, 0),
      Orientation = StackOrientation.Horizontal,
      HorizontalOptions = LayoutOptions.StartAndExpand,
      Children = {imageIcon, label}
    };

    View = layout;
  }

  protected override void OnTapped ()
  {
    base.OnTapped ();
    Host.Selected (label.Text);
  }
}

Showing how to customize the image and label, I'm trying this:

[assembly: ExportRenderer (typeof (MenuCell), typeof (CustomCell))]
namespace Teste.Android
{
  public class CustomCell : CellRenderer
  {
    protected override View GetCellCore (Cell item, View convertView, ViewGroup parent, Context context)
    {
      var cell = base.GetCellCore(item, convertView, parent, context);
      cell.SetPadding(20, 30, 0, 30);


      var label = (TextView)base.GetCellCore(item, convertView, parent, context);
      label.SetTextColor(Color.White.ToAndroid());
      label.Text = ((MenuCell)item).Text;
      label.TextSize = Font.SystemFontOfSize(NamedSize.Large).ToScaledPixel() * 1.25f;
      label.Gravity = (global::Android.Views.GravityFlags.CenterVertical);
      label.SetTextColor(Color.FromHex("000000").ToAndroid());

      return cell;
    }

  }
}

Look at the attached image (Cell)

IOS worked perfect, but in android, I have difficulties, could someone help me?

Thank you!

Look at the attached image (Cell - iOS)

Posts

  • MitchMilamMitchMilam USMember ✭✭✭

    @IterLubnon.4689 sorry to ask silly questions, but why did you need to drop down to the renderer-level to create that cell type?

  • Hello @MitchMilam‌ actually believe that to develop the layout of the menu in iOS format, I need to customize the rendering, right? But honestly, I do not know which method to use to render the proposed layout.

  • MitchMilamMitchMilam USMember ✭✭✭

    @IterLubnon.4689 I do not think you need a custom renderer for that type of layout. You just need to make sure your image and text are arranged in the proper location using the standard Xamarin.Forms views and layouts.

  • @MitchMilam‌ so how can I render a Cell in accordance with the iOS attached? As I am using a TableView instead a ListView at least the appearance is not correct. I know I could use a stackLayout and adicioinar the two, but how to customize the background image?

  • MitchMilamMitchMilam USMember ✭✭✭

    @IterLubnon.4689 what is the background image? Are you referring to the dark background? Is that not just a color?

  • @MitchMilam‌ understand that could be made using one color, but my MenuCell (ViewCell) is customized in this manner.

    Notice in the image attached.

  • MitchMilamMitchMilam USMember ✭✭✭

    @IterLubnon.4689 the iOS version just looks like a gray background with a black separator. Am I looking at the wrong part of your screen shot?

  • @MitchMilam‌ how am testing changed the colors to highlight the label on the cell. I'm trying to do the following in rendering MenuCell

    [assembly: ExportRenderer (typeof (MenuCell), typeof (VortigoMenuCell))]
    namespace Universitario.Android
    {
      public class VortigoMenuCell : CellRenderer
      {
    
        protected override View GetCellCore (Cell item, View convertView, ViewGroup parent, Context context)
        {
          var label = (TextView)base.GetCellCore(item, convertView, parent, context);
          label.SetTextColor (Color.White.ToAndroid ());
          label.Text = ((MenuCell)item).Text;
          label.TextSize = Font.SystemFontOfSize(NamedSize.Medium).ToScaledPixel() * 1.25f;
          label.Gravity = (global::Android.Views.GravityFlags.CenterVertical);
    
          return label;
    
          //---------------------
          //[image] Text      > | 
          //---------------------
        }
      }
    }
    
  • MitchMilamMitchMilam USMember ✭✭✭

    @IterLubnon.4689 I am probably just old, but I am not understanding what you are asking. When you say "highlight the label on the cell" what are you talking about exactly?

  • Sorry I explained myself badly. I would just be able to put that image in the Icon menu and an image / color close to iOS. Was virtually identical in both the menu when iOS on Android. ;-)

    The problem is that I'm using this TableView and not a ListView (which would be easier) but the layout is this. I need to just leave like, so I'm using these "Renderers".

    My English is horrible, Brazil ...

Sign In or Register to comment.