xamarin.forms之使用CarouselView插件模仿网易新闻导航

在APP中基本都能见到类似网易、今日头条等上边横向导航条，下边是左右滑动的页面，之前做iOS的时候模仿实现过，https://github.com/ywcui/ViewPagerndicator，在做xamarin.forms的时候看到xamarin.form自带的有左右滑动的CarouselPage和CarouselView，想着实现今日头条导航会容易些，当自己尝试实现的时候发现CarouselPage页面无法设置顶部导航的部分，子控件需要是page，CarouselView可以设置顶部导航部分但左右滑动没有找到触发的事件，这个问题在开始做APP的时候就一直在思考。今天下午和小伙伴讨论这个功能时临时起意尝试使用第三方插件CarouselView.FormsPlugin来实现，这个插件之前也尝试用过，不过当时没解决，经过小伙伴一提醒没想到实现了，这里记录一下实现方法。

一、Nuget引入第三方

这里使用了第三方的插件CarouselView.FormsPlugin(https://github.com/alexrainman/CarouselView)和面包屑Toast，CarouselView.FormsPlugin主要是实现左右滑动视图，Toast面包屑主要是用来显示当前视图的索引。

二、使用CarouselView.FormsPlugin

这个插件直接也了解过，当时直接把github上的demo下载下来，尝试复制粘贴完事，可demo上没有，这就尴尬了，想复制粘贴没有。今天和小伙伴讨论之后又打开github详细查看了下使用说明，找到下面这句话和demo，于是就动手尝试了下CarouselView设置不同的Views。

1.安卓项目引入CarouselView.FormsPlugin

只需通过nuget上引入并在MainActivity.cs中如下代码。

            global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
            CarouselViewRenderer.Init();

2.在page页面使用CarouselView.FormsPlugin

这里在xamarin.forms的MainPage中引入使用，需要在页面的ContentPage节点设置属性。

xmlns:controls="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"

然后使用起来也比较简单，直接设置CarouselViewControl即可，然后在cs类中设置它的ItemsSource。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ViewPagerndicator"
             x:Class="ViewPagerndicator.MainPage"
             xmlns:controls="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions"
             >
    <StackLayout>
        <StackLayout Orientation=">
            <Button Margin="></Button>
            <Button Margin="></Button>
            <Button Margin="></Button>
            <Button Margin="></Button>
        </StackLayout>
        <controls:CarouselViewControl Position=" x:Name="carouselView"  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
    </StackLayout>
</ContentPage>

CarouselViewControl有PositionSelected事件，在事件中可以获取到当前页面的索引，这里使用Toast将索引值弹出。同时又设置了几个按钮来模拟横向导航栏的点击事件。而在点击按钮时也可以设置CarouselViewControl的Position改变视图。

using Plugin.Toast;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ViewPagerndicator
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            carouselView.ItemsSource = new List<DataTemplate>(){
                new DataTemplate(() => { return new PageA().Content; }),
                new DataTemplate(() => { return new PageB().Content; }),
                new DataTemplate(() => { return new PageC().Content; }),
                new DataTemplate(() => { return new PageC().Content; })
            };
            carouselView.PositionSelected += CarouselView_PositionSelected;
        }
        private void CarouselView_PositionSelected(object sender, CarouselView.FormsPlugin.Abstractions.PositionSelectedEventArgs e)
        {
            CrossToastPopUp.Current.ShowToastSuccess(e.NewValue.ToString());
        }

        private void BtnDemo_Clicked(object sender, EventArgs e)
        {
            Button btn = (Button)sender;
            List<string> arr = new List<string> { "推荐", "热点", "抖音", "国内" };
            int index = arr.ToList<string>().LastIndexOf(btn.Text);
            carouselView.Position = index;
        }
    }
}

为了测试导航栏部分是否影响page页面渲染，这里在app类中还加了导航栏。

MainPage =new NavigationPage( new MainPage());

三、测试

这里先贴几个页面，当页面左右滑动时会弹出当前页面的索引值，顶部按钮点击时下面的页面也会联动。

四、优化

目前只是实现了底部页面左右滑动以及顶部按钮点击切换页面，还有需要优化的地方，和人一样，需要不断优化，改掉缺点，补足短板。后续可以把顶部导航的使用横向列表来实现，这样就可以左右滑动，动态配置参数。这个功能实现之后好几个页面都能实现了，甚至自己都可以爬虫不同新闻客户端的内容，实现新闻聚合。

五、瞎扯淡

最近俺们村里的微信群都已经有使用区块链的热点来拉投资的了，而且33天就能回本，忽悠手段日益更新。目前在创业公司，自己也快三十而立，最近也一直在思考创业的事情，假如未来创业我需要在这几年做哪些准备，方向是什么，to be or not to be，that's a question。快清明放假了，也给大家分享一个很有前景的创业项目，而且支付宝的技术人员十几年都未解决的技术难题，现在都是无现金社会了，就是清明节烧纸钱能否也实现无现金转账，就是不知道怎么转过去，收款人账户是多少。

巴特西

xamarin.forms之使用CarouselView插件模仿网易新闻导航

最新文章

热门文章