Xamarin.forms:如何在Listview中添加图像列表 [英] Xamarin.forms: How to add image list inside Listview

问题描述

我正在使用Xamarin.Forms，它有两个项目:Android和IOS

I am using Xamarin.Forms having two projects: Android and IOS

我有一个Listview，我想在该Listview

我要根据下图设计UI

I want to design UI as per the image below

请帮助.

推荐答案

如果您可以使用customlistView渲染器，则可以按照给定的图像设计UI

if u can use customlistView renderer, u can do design UI as per the given image

Xamarin.core NativeListView渲染器

Xamarin.core NativeListView Renderer

namespace My.Renderer
{
 public class NativeListView : ListView
    {
        public static readonly BindableProperty ItemsProperty =
            BindableProperty.Create("Items", typeof(IEnumerable<DataSource>), typeof(NativeListView), new List<DataSource>());

        public IEnumerable<DataSource> Items
        {
            get { return (IEnumerable<DataSource>)GetValue(ItemsProperty); }
            set { SetValue(ItemsProperty, value); }
        }

        public event EventHandler<SelectedItemChangedEventArgs> ItemSelected;

        public void NotifyItemSelected(object item)
        {
            if (ItemSelected != null)
            {
                ItemSelected(this, new SelectedItemChangedEventArgs(item));
            }
        }
    }

android渲染器

android renderer

[assembly: ExportRenderer(typeof(NativeListView), typeof(NativeAndroidListViewRenderer))] namespace My.Droid.CustomRenderer { public class NativeAndroidListViewRenderer : ListViewRenderer { protected override void OnElementChanged(ElementChangedEventArgs e) { base.OnElementChanged(e);

        if (e.OldElement != null)
        {
            // unsubscribe
            Control.ItemClick -= OnItemClick;
        }

        if (e.NewElement != null)
        {
            // subscribe
            Control.Adapter = new NativeAndroidListViewAdapter(Forms.Context as Android.App.Activity, e.NewElement as NativeListView);
            Control.ItemClick += OnItemClick;
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == NativeListView.ItemsProperty.PropertyName)
        {
            Control.Adapter = new NativeAndroidListViewAdapter(Forms.Context as Android.App.Activity, Element as NativeListView);
        }
    }

    void OnItemClick(object sender, Android.Widget.AdapterView.ItemClickEventArgs e)
    {
        ((NativeListView)Element).NotifyItemSelected(((NativeListView)Element).Items.ToList()[e.Position - 1]);
    }
} 

 adapter Class for android

    namespace My.Droid.CustomRenderer
{
    public class NativeAndroidListViewAdapter : BaseAdapter<DataSource>
    {
        readonly Activity context;
        IList<DataSource> tableItems = new List<DataSource>();

        public IEnumerable<DataSource> Items
        {
            set
            {
                tableItems = value.ToList();
            }
        }

        public NativeAndroidListViewAdapter(Activity context, NativeListView view)
        {
            this.context = context;
            tableItems = view.Items.ToList();
        }

        public override DataSource this[int position]
        {
            get
            {
                return tableItems[position];
            }
        }

        public override long GetItemId(int position)
        {
            return position;
        }

        public override int Count
        {
            get { return tableItems.Count; }
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = tableItems[position];

            var view = convertView;
            if (view == null)
            {
                // no view to re-use, create new
                view = context.LayoutInflater.Inflate(Resource.Layout.NativeAndroidListViewCell, null);
            }
            view.FindViewById<TextView>(Resource.Id.textView1).Text = item._subject;
            view.FindViewById<TextView>(Resource.Id.textView2).Text = item._date;
            view.FindViewById<TextView>(Resource.Id.textView3).Text = item._priority;
            view.FindViewById<TextView>(Resource.Id.textView4).Text = Html.FromHtml(item._description).ToString();
            view.FindViewById<TextView>(Resource.Id.textView5).Text = item._category;

            return view;
        }
    }
} 

ios渲染器

ios Renderer

      [assembly: ExportRenderer(typeof(NativeListView), typeof(NativeiOSListViewRenderer))]
namespace My.iOS.CustomRenderer
{
    public class NativeiOSListViewRenderer : ListViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                // Unsubscribe
            }

            if (e.NewElement != null)
            {
                Control.Source = new NativeiOSListViewSource(e.NewElement as NativeListView);
            }
        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            if (e.PropertyName == NativeListView.ItemsProperty.PropertyName)
            {
                Control.Source = new NativeiOSListViewSource(Element as NativeListView);
            }
        }
    }
}

ViewSource for ios

    namespace My.iOS.CustomRenderer
{
    public class NativeiOSListViewSource : UITableViewSource
    {
        // declare vars
        IList<DataSource> tableItems;
        NativeListView listView;
        readonly NSString cellIdentifier = new NSString("TableCell");

        public IEnumerable<DataSource> Items
        {
            //get{ }
            set
            {
                tableItems = value.ToList();
            }
        }

        public NativeiOSListViewSource(NativeListView view)
        {
            tableItems = view.Items.ToList();
            listView = view;
        }

        /// <summary>
        /// Called by the TableView to determine how many cells to create for that particular section.
        /// </summary>
        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return tableItems.Count;
        }

        #region user interaction methods

        public override void RowSelected(UITableView tableView, NSIndexPath indexPath)
        {
            listView.NotifyItemSelected(tableItems[indexPath.Row]);
            Console.WriteLine("Row " + indexPath.Row.ToString() + " selected");
            tableView.DeselectRow(indexPath, true);
        }

        public override void RowDeselected(UITableView tableView, NSIndexPath indexPath)
        {
            Console.WriteLine("Row " + indexPath.Row.ToString() + " deselected");
        }

        #endregion

        /// <summary>
        /// Called by the TableView to get the actual UITableViewCell to render for the particular section and row
        /// </summary>
        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            // request a recycled cell to save memory
            NativeiOSListViewCell cell = tableView.DequeueReusableCell(cellIdentifier) as NativeiOSListViewCell;

            // if there are no cells to reuse, create a new one
            if (cell == null)
            {
                cell = new NativeiOSListViewCell(cellIdentifier);
            }

            cell.UpdateCell(tableItems[indexPath.Row]._sender, tableItems[indexPath.Row]._date);

            return cell;
        }
    }
}

  ViewCell for ios

     namespace My.iOS.CustomRenderer
{
    public class NativeiOSListViewCell : UITableViewCell
    {

        UILabel headingLabel, subheadingLabel;

        public NativeiOSListViewCell(NSString cellId) : base(UITableViewCellStyle.Default, cellId)
        {
            SelectionStyle = UITableViewCellSelectionStyle.Gray;

            this.ContentView.BackgroundColor = UIColor.FromRGB(255, 255, 255);
            this.ContentView.Layer.BorderWidth = 0.0f;
            this.ContentView.Layer.CornerRadius = 7.0f;
            this.ContentView.Layer.BorderColor = UIColor.White.CGColor;

            headingLabel = new UILabel()
            {
                Font = UIFont.FromName("Cochin-BoldItalic", 22f),
                TextColor = UIColor.FromRGB(53, 53, 53),
                BackgroundColor = UIColor.Clear
            };

            subheadingLabel = new UILabel()
            {
                Font = UIFont.FromName("AmericanTypewriter", 12f),
                TextColor = UIColor.FromRGB(53, 53, 53),
                TextAlignment = UITextAlignment.Center,
                BackgroundColor = UIColor.Clear
            };

            ContentView.Add(headingLabel);
            ContentView.Add(subheadingLabel);
        }

        public void UpdateCell(string caption, string subtitle)
        {
            headingLabel.Text = caption;
            subheadingLabel.Text = subtitle;
        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();

            headingLabel.Frame = new CoreGraphics.CGRect(5, 4, ContentView.Bounds.Width - 63, 25);
            subheadingLabel.Frame = new CoreGraphics.CGRect(100, 18, 100, 20);
        }
    }
}

这篇关于Xamarin.forms:如何在Listview中添加图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！