Section

Simple header for UITableView/RecyclerView, which has action to execute.

Inherits from RecyclerView.ViewHolder/UITableViewHeaderFooterView.

Customization fields

Type	Field	Description	Default value
FontStyleItem	TitleFontStyle	Responsible for font customization for section title.
FontStyleItem	ButtonFontStyle	Responsible for font customization for button.
string	SectionText	Responsible for title of section name.	Light section
string	ButtonText	Responsible for title of action	View all
UIColor Color	BackgroundColor	Responsible for section background color.	#F6F6F6
UIColor Color	SectionTextColor	Responsible for section name text color.	#777677
UIColor Color	ButtonTextColor	Responsible for action text color.	#3C6DF0
UIFont Typeface	SectionTextFont	Responsible for section name text font.	System Roboto bold
UIFont Typeface	ButtonTextFont	Responsible for action text font.	System Roboto bold
bool	HasBorder	Responsible for section border visibility.	true
int	BorderWidth	Responsible for section border width.	2
UIColor Color	BorderColor	Responsible for section border color.	#EAEAEA
float	SectionTextSize	Responsible for section name text size.	13
float	ButtonTextSize	Responsible for action text size.	13
float	SectionTextLetterSpacing	Responsible for section name text letters spacing.	-0.6
float	ButtonTextLetterSpacing	Responsible for action text letters spacing.	-0.6
void	SetPaddings	accepts top, bottom, left, right paddings. It is responsible for Section paddings.	16 10 16 10
bool	HasButton	Responsible for action visibility.	true

Notes

You must control header height in UITableSource for iOS, if you want to use large font and paddings, you may face text overlaps section control. In that case you must recalculate needed header height in your UITableSource.

Usage

For simplify of Section customization in the EOS.UI.IOS/Android.Models namespace exist SectionModel class. You can use either this helper class, either set customization properties by yourself.

Android

For Android platform creating of Section component should be on RecyclerView.Adapter. In collection of Item source of RecyclerView.Adapter should be included sections with SectionModel type. There are should be overridden GetItemViewType method and in it's body set int identifier for each holder include Section. Sample of our implementation where Section has number 0 for identification.

public override int GetItemViewType(int position) { return _itemSource[position] is SectionModel ? 0 : 1; }

Directly creation of Section should be on overridden OnCreateViewHolder. As Section view you should to use EOS.UI.Droid.Resource.Layout.Section layout.

public override RecyclerView.ViewHolder OnCreateViewHolder(ViewGroup parent, int viewType)
{
    if (viewType == 0)
    {
        var itemView = LayoutInflater.From(parent.Context).Inflate(EOS.UI.Droid.Resource.Layout.Section, parent, false);
        var viewHolder = new Section(itemView);
        return viewHolder;
    }
    else
    {
        //Create other view holders for cells
    }
}

Customization logic of Section should be on overridden OnBindViewHolder method. There you should check if input holder is Section and if it is set all parameters from SectionModel to Section.

public override void OnBindViewHolder(RecyclerView.ViewHolder holder, int position)
{
    if (holder is Section section)
    {
        var sectionModel = _itemSource[position] as SectionModel;

        if (sectionModel != null)
        {
            section.HasBorder = sectionModel.HasBorder;
            section.HasButton = sectionModel.HasButton;
            section.SectionAction = sectionModel.SectionAction;
        }
        else
        {
            //Customize section without SectionModel
            section.HasBorder = true;
            section.HasButton = false;
            section.SectionAction = () => 
            {
                //Do something
            };
        }
    }
    else
    {
        //Bind other view holders
    }
}

If you will change SectionModel property values you should call NotifyDataSetChanged() method on RecyclerView.Adapter for sets it's changes.

iOS

For IOS platform creating of Section component should be on UITableViewSource. There are you should register Section

_tableView.RegisterNibForHeaderFooterViewReuse(Section.Nib, Section.Key);

On overridden NumberOfSections should be returned count of sections

public override nint NumberOfSections(UITableView tableView)
{
    return 1;
}

Customization logic included on overridden GetViewForHeader method. (warning)Important in this method call Section method Initialize();

public override UIView GetViewForHeader(UITableView tableView, nint section)
{
    var header = _tableView.DequeueReusableHeaderFooterView("Section");

    var customSection = (header as Section);

    customSection.Initialize();

    if (customSection != null)
    {
        section.HasBorder = sectionModel.HasBorder;
        section.HasButton = sectionModel.HasButton;
        section.SectionAction = sectionModel.SectionAction;
    }
    else
    {
        //Customize section without SectionModel
        section.HasBorder = true;
        section.HasButton = false;
        section.SectionAction = () => 
        {
            //Do something
        };
    }
    return header;
}

If you will change SectionModel property values you should call ReloadData() method on UITableViewSource for sets it's changes.

For automatic height calculation you should use this lines:

_tableView.EstimatedSectionHeaderHeight = 1;
_tableView.SectionHeaderHeight = UITableView.AutomaticDimension;