码迷,mamicode.com
首页 > 其他好文 > 详细

Xamarin.Forms 仿照京东搜索记录控件

时间:2019-03-17 20:00:14      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:ring   color   官方文档   set   eof   tco   each   clear   数据量   

Xamarin.Forms 仿照京东搜索记录控件

在项目中遇到这样一个需求,仿照京东搜索记录。在Xamarin.Forms中有什么控件可以实现呢?

首先,来分析这个控件的特点:

  1. 数据量不大
  2. 每条记录字数长度不一,使得每条记录呈现的样式长度不一

经过如上分析,由于数据量不大,且界面样式并不是整齐划一,所以用不着使用ListView,查看官方文档后,发现FlexLayout即可满足我们的需求。

FlexLayout这个控件的详细说明可以看微软的官方文档。

这里主要利用了FlexLayout的一些相关特性:

  1. AlignContent
  2. AlignItems
  3. JustifyContent
  4. Wrap

demo如下代码所示:


    public class FlowLayout: StackLayout
    {
        private FlexLayout _flexLayout;
        public Action<int, object> ItemTapped;


        public FlowLayout()
        {
            _flexLayout = new FlexLayout
            {
                AlignContent = FlexAlignContent.Start,
                AlignItems = FlexAlignItems.Start,
                JustifyContent = FlexJustify.Start,
                Wrap = FlexWrap.Wrap,
            };
            this.Children.Add(_flexLayout);
        }

        #region BindableProperty

        public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create(nameof(ItemsSource), typeof(IList), typeof(FlowLayout), default(IList),propertyChanged: ItemsSourcePropertyChanged);

        private static void ItemsSourcePropertyChanged(BindableObject bindable, object oldValue, object newValue)
        {
            if (bindable is FlowLayout view)
            {
                view.UpdateViews();
            }
        }

        public IList ItemsSource
        {
            get { return (IList)GetValue(ItemsSourceProperty); }
            set { SetValue(ItemsSourceProperty, value); }
        }
        #endregion

        public void UpdateViews()
        {
            _flexLayout.Children.Clear();
            foreach(var item in ItemsSource)
            {
                _flexLayout.Children.Add(CreateItem(item.ToString()));
            }
        }

        private StackLayout CreateItem(string content)
        {
            var label = new Label
            {
                Text = content,
                TextColor = Color.Black,
                Margin = new Thickness(10,6,10,6), FontSize = 12,
                MaxLines = 1,
                VerticalOptions = LayoutOptions.Center,
                HorizontalOptions = LayoutOptions.Center,
            };
            var stack = new StackLayout()
            {
                BackgroundColor = Color.LightGray,
                Margin = new Thickness(0,6,12,6),
            };
            stack.Children.Add(label);
            var tapGestureRecognizer = new TapGestureRecognizer();
            tapGestureRecognizer.Tapped += TapGestureRecognizer_Tapped;
            stack.GestureRecognizers.Add(tapGestureRecognizer);
            return stack;
        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            try
            {
                var index = _flexLayout.Children.IndexOf(sender as StackLayout);
                var o = ItemsSource[index];
                ItemTapped?.Invoke(index, o);
            }
            catch { }
        }
    }

效果图:
技术图片

这样就基本实现了搜索记录。

Xamarin.Forms 仿照京东搜索记录控件

标签:ring   color   官方文档   set   eof   tco   each   clear   数据量   

原文地址:https://www.cnblogs.com/devin_zhou/p/10548244.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!