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="Horizontal" Padding="0" Margin="0">
            <Button Margin="0" Padding="0" Clicked="BtnDemo_Clicked" Text="推薦" FontSize="20"></Button>
            <Button Margin="0" Padding="0" Clicked="BtnDemo_Clicked" Text="熱點" FontSize="20"></Button>
            <Button Margin="0" Padding="0" Clicked="BtnDemo_Clicked" Text="抖音" FontSize="20"></Button>
            <Button Margin="0" Padding="0" Clicked="BtnDemo_Clicked" Text="國內" FontSize="20"></Button>
        </StackLayout>
        <controls:CarouselViewControl Position="0" 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。快清明放假了，也給大家分享一個很有前景的創業項目，而且支付寶的技術人員十幾年都未解決的技術難題，現在都是無現金社會了，就是清明節燒紙錢能否也實現無現金轉賬，就是不知道怎麼轉過去，收款人賬戶是多少。