iOS TKAutoCompleteTextView with dropdown wider than textbox (c#)

3 posts, 0 answers
  1. Patrick
    Patrick avatar
    2 posts
    Member since:
    May 2012

    Posted 23 Sep Link to this post

    I have not found the magic combination yet of making the dropdown items listview wider than the text box. Can someone show me what I am doing wrong. Here is my code for creating the auto complete:

    01.private TKAutoCompleteTextView GetAutoComplete(string watermark, float itemHeight = 20)
    02.{
    03.    var leftColumnWidth = (View.Bounds.Width / 12) * 3;
    04. 
    05.    var tkAutoComplete = new TKAutoCompleteTextView();
    06.    AutomaticallyAdjustsScrollViewInsets = false;
    07.    
    08. 
    09.    var dataSource = new TKDataSource();
    10. 
    11.    var listView = (TKListView)tkAutoComplete.WeakSuggestionView;
    12.    listView.RegisterClassForCell(new Class(typeof(DropDownItemListView)), "cell");
    13. 
    14.    CGRect existingFrame = listView.Frame;
    15.    listView.Frame = new CGRect(existingFrame.X, existingFrame.Y, View.Bounds.Width - 100, existingFrame.Height);
    16. 
    17. 
    18.    var layout = new TKListViewGridLayout();
    19.    layout.ItemAlignment = TKListViewItemAlignment.Left;
    20.    layout.SpanCount = 1;
    21.    layout.ItemSize = new CGSize(leftColumnWidth - 20, itemHeight);
    22.    layout.LineSpacing = 0;
    23.    layout.ItemSpacing = 0;
    24.    listView.Layout = layout;
    25. 
    26.    _autocompleteDelegate.Controller = this;
    27. 
    28.    tkAutoComplete.DisplayMode = TKAutoCompleteDisplayMode.Tokens;
    29.    tkAutoComplete.LayoutMode = TKAutoCompleteLayoutMode.Wrap;
    30.    tkAutoComplete.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
    31.    tkAutoComplete.MaximumWrapHeight = 150;
    32.    tkAutoComplete.WeakDataSource = dataSource;
    33.    tkAutoComplete.TextField.Placeholder = watermark;
    34.    tkAutoComplete.NoResultsLabel.Text = "No items found";
    35.    tkAutoComplete.MinimumCharactersToSearch = 1;
    36.    tkAutoComplete.WeakDelegate = _autocompleteDelegate;
    37.    tkAutoComplete.SuggestionViewHeight = 200;
    38.    tkAutoComplete.SuggestMode = TKAutoCompleteSuggestMode.SuggestAppend;
    39.     
    40.    return tkAutoComplete;
    41.}

     

    And here is the code for my DropDownItemListView (ideally, I'd like to get rid of the code that increases the height based on line breaks -- which doesn't work, anyway):

    01.public class DropDownItemListView : TKAutoCompleteSuggestionCell
    02. {
    03.     public DropDownItemListView(IntPtr ptr) : base(ptr)
    04.     {
    05.         this.ContentView.BackgroundColor = UIColor.Clear;
    06.         this.TextLabel.Lines = 0;
    07.         this.TextLabel.LineBreakMode = UILineBreakMode.WordWrap;
    08.         this.TextLabel.TextAlignment = UITextAlignment.Left;
    09.         this.TextLabel.Font = UIFont.FromName("HelveticaNeue-Italic", 12);
    10.         this.TextLabel.BackgroundColor = UIColor.White;
    11.     }
    12. 
    13.     public override void LayoutSubviews()
    14.     {
    15.         base.LayoutSubviews();
    16.         this.ImageView.Frame = new CGRect(0, 0, 0, 0);
    17.         var width = 400;
    18.         int height = 20 + (TextLabel.Text.Count(p => p == '\n')*20);
    19.         this.TextLabel.Frame = new CGRect(0, 0, width, height);
    20.     }
    21. }

    Obviously I am missing something fundamental here.

     

  2. Patrick
    Patrick avatar
    2 posts
    Member since:
    May 2012

    Posted 28 Sep in reply to Patrick Link to this post

    Perhaps I asked the question poorly? Maybe a rephrase:

    Does anyone know of an iOS (xamarin / C#) example where the TKAutoCompleteTextView dropdown is wider than the text box? Preferably not using any designers.

  3. DevCraft banner
  4. Sophi
    Admin
    Sophi avatar
    99 posts

    Posted 29 Sep Link to this post

    Hi Patrick,

    The width of the dropdown is equal to the width of the autocomplete by default. However you are able to change the frame of the dropdown and set whatever size or position you like. 
    You need to remove the dropdown from the current view hierarchy  and add it as a subview of whatever view you want, then you can set it's size according it's parent. Consider the following snippet.
    TKListView listView = (TKListView)this.Autocomplete.WeakSuggestionView;
                listView.Frame = new CGRect (10, this.View.Bounds.Y + 15 + this.Autocomplete.Bounds.Height, this.View.Bounds.Size.Width-20, this.View.Bounds.Height - (15 + this.Autocomplete.Bounds.Height));
                listView.RemoveFromSuperview ();
                listView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
                this.View.AddSubview (listView);

    The snippet above is used in one of our SDK examples, here is link to it in our public repository. 

    Regards,
    Sophi
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top