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

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 { }
        }
    }

效果图:

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

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

时间: 2024-11-05 22:56:14

Xamarin.Forms 仿照京东搜索记录控件的相关文章

为 Xamarin.Forms 做个跑马灯控件

前段时间,私下用 Xamarin.Forms 做了个商业项目的演示版.很多被国内App玩坏了的控件/效果,XF上都没有或是找不到对应的实现,没有办法只能亲自上阵写了几个,效果还行,就是有BUG. 这个跑马灯就是其中的一个,当初赶工,随便写个效果交了差,最终他们把这一块从APP中拿掉了,早知道我就不耗这个时间了... 一般App 为了省版面空间,都只会留小小的一块放跑马灯,多条文字轮翻显示,而且还只有一行文本,超出的部份隐藏:如果你看见哪个APP搞个很大的一块去跑马,那说明这个App的设计师是个逗

Xamarin XAML语言教程构建ControlTemplate控件模板 (四)

Xamarin XAML语言教程构建ControlTemplate控件模板 (四) 2.在页面级别中构建控件模板 如果开发者要在页面级别中构建控件模板,首先必须将ResourceDictionary添加到页面中,然后在ResourceDictionary中实现模板的构建即可,其语法形式如下: <Page> <Page.Resources> <ResourceDictionary> <ControlTemplate x:Key="KeyName"

Xamarin XAML语言教程构建ControlTemplate控件模板

Xamarin XAML语言教程构建ControlTemplate控件模板 控件模板ControlTemplate ControlTemplate是从Xamarin.Forms 2.1.0开始被引入的.ControlTemplate被称为控件模板,它将页面的外观和内容进行了分离,从而让开发者可以更方便的创建基于主题的页面.本节将讲解控件模板相关的内容,其中包括构建控件模板以及控件模板的模板绑定等内容. 构建控件模板 控件模板可以在应用程序级别中构建,也可以在页面级别中构建.以下将对这两个构建方式

iOS 搜索框控件 最简单的dome

刚学习搜索框控件,写了个最简单的dome #import <UIKit/UIKit.h> .h @interface ViewController : UIViewController<UISearchBarDelegate,UISearchDisplayDelegate,UITableViewDataSource,UITableViewDelegate> @property (nonatomic,strong) UISearchDisplayController *searchD

移动UI控件Telerik UI for Xamarin发布R2 2019|引入Map控件

Telerik UI for Xamarin是一个构建跨平台移动应用程序的原生UI.Telerik UI for Xamarin使用Xamarin.Forms技术,它可以让开发人员从一个单一的共享C#代码库中创建原生的iOS.Android和Windows Phone应用程序.不仅如此,UI for Xamarin建立在iOS和Android的原生控件之上的,为Xamarin用户的应用程序提供真正的原生UI. [Telerik UI for Xamarin R2 2019下载] 具体更新内容如下

C#-Xamarin的Android项目开发(二)——控件应用

相信我,这不是一篇吐槽文章.... 基础控件 Android的控件和控件样式非常特别,它是一种内联特别高的设计模式,换句话说,它是非常烂的设计.... 但在这种特别的关系里还是有一定的规律的,下面我们一起来看看控件的使用方式. 首先我们定义一个ImageButton,如下: <ImageButton android:src="@drawable/toolbar_upload_photo_normal" android:layout_gravity="right|cent

[QT]问题记录-控件初始化导致程序异常关闭

qt新手,在设置 pushButton 的字体颜色时,出现软件异常闭,代码如下: 按钮的初始化在  ui->setupUi(this); 前边,会出现一下问题. 解决办法:将按钮的初始化在  ui->setupUi(this); 后边即可解决这个问题. 这是个基础的知识.类似的问题有: http://www.qtcn.org/bbs/read.php?tid-48535.html 如果有小伙伴知道有类似的问题,麻烦请回复下,谢谢.

使用C# + Xamarin开发Android应用-- 动态添加控件

public class MyOrders : Activity { private DynamicControl _dynaControl; public MyOrders() { _dynaControl = new DynamicControl(); } protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); try { SetContentView(Resource.Layout.MyOrders)

Xamarin.Forms 调用 腾讯地图SDK

Xamarin.Forms研究了好一段时间了,最近一直在学习中,想尝试一下调用其他的SDK,就如腾讯地图SDK(申请容易). 完成此次项目得感谢以下链接: http://www.cnblogs.com/jtang/p/4698496.html 其他文档参考: 腾讯地图SDK(安卓)文档 这里面有详细的使用过程(当然里面的代码是不适用C#的,不过要从这里下载SDK,也有如何申请Key的过程,请参考阅读) Xamarin.Forms自定义每个平台的控件文档 里面有如何根据不同的平台条件下,调用其他页