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。快清明放假了，也給大家分享一個很有前景的創業專案，而且支付寶的技術人員十幾年都未解決的技術難題，現在都是無現金社會了，就是清明節燒紙錢能否也實現無現金轉賬，就是不知道怎麼轉過去，收款人賬戶是多少。