在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插件模仿网易新闻导航的更多相关文章

  1. Xamarin.Forms弹出对话框插件

    微信公众号:Dotnet9,网站:Dotnet9,问题或建议,请网站留言: 如果您觉得Dotnet9对您有帮助,欢迎赞赏. Xamarin.Forms弹出对话框插件 内容目录 实现效果 业务场景 编码 ...

  2. 老司机学新平台 - Xamarin Forms开发框架之MvvmCross插件精选

    在前两篇老司机学Xamarin系列中,简单介绍了Xamarin开发环境的搭建以及Prism和MvvmCross这两个开发框架.不同的框架,往往不仅仅使用不同的架构风格,同时社区活跃度不同,各种功能模块 ...

  3. Xamarin.Forms入门-使用 Xamarin.Forms 来创建跨平台的用户界面

    Xamarin.Forms 是一个跨平台的.基于原生控件的UI工具包,开发人员可以轻松的创建适用于 Android,iOS 以及 Windows Phone的用户界面.Xamarin.Forms 通过 ...

  4. Xamarin.Forms之页面及导航

    参考链接: Xamarin. Forms 页面 Xamarin.Forms 导航 Xamarin.Forms 第04局:页面 Xamarin.Forms页面代表跨平台的移动应用程序屏幕. 下文描述的所 ...

  5. Android Studio精彩案例(四)《DrawerLayout使用详解仿网易新闻客户端侧边栏 》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 为了提高兴趣,咱们开头先看看最终要实现什么样的效果: 侧拉菜单在Android应用中非常常见,它的实现方式太多了,今天我们就说说使用G ...

  6. Android Studio精彩案例(一)《ActionBar和 ViewPager版仿网易新闻客户端》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 为了能更好的分享高质量的文章,所以开设了此专栏.文章代码都以Android Studio亲测运行,读者朋友可在后面直接下载源码.该专栏 ...

  7. Xamarin.Forms 开发资源集合(复制)

    复制:https://www.cnblogs.com/mschen/p/10199997.html 收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 S ...

  8. Xamarin.Forms 开发资源集合

    收集整理了下 Xamarin.Forms 的学习参考资料,分享给大家,稍后会不断补充: UI样式 Snppts: Xamarin Forms UI Snippets. Prebuilt Templat ...

  9. 老司机学新平台 - Xamarin Forms开发框架二探 (Prism vs MvvmCross)

    在上一篇Xamarin开发环境及开发框架初探中,曾简单提到MvvmCross这个Xamarin下的开发框架.最近又评估了一些别的,发现老牌Mvvm框架Prism现在也支持Xamarin Forms了, ...

随机推荐

  1. centos为docker配置加速器

    国内拉去docker镜像慢得可怜,为了解决这个问题,可为docker配置加速器. 1.修改daemon配置文件 sudo mkdir -p /etc/dockervim /etc/docker/dae ...

  2. vue的登陆验证及返回登录前页面实现

    一.路由配置部分如下所示, 导出路由示例 let router = new VueRouter({ routes: [ // 登陆 { name: 'login', path: '/login', c ...

  3. Charles抓包软件简介

    Charles简介: Charles是一款抓包神器,因为他是基于 java 开发的,所以跨平台,Mac.Linux.Window下都是可以使用的,确保安装之前已经安装了JDK.Charles官网地址: ...

  4. [LeetCode] Image Overlap 图像重叠

    Two images A and B are given, represented as binary, square matrices of the same size.  (A binary ma ...

  5. 前端知识之HTML内容

    web服务实质 浏览器发送请求 -->HTTP协议-->服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 imp ...

  6. 【分享】【原创开源应用第4期】给ili9488,RA8875类显示屏的emWin底层增加DMA加速方案

    说明:1.emWin底层中最重要的一个优化就是16bpp绘制,特此为其增加DMA加速,已经支持RA8875和ili9488.2.使用中务必将emWin任务设置为除了空闲任务,统计任务以外的最低优先级, ...

  7. SUSE12Sp3-MongoDB安装

    1.解压 sudo mkdir /usr/local/mongodb # 创建mongodb目录 将mongodb-linux-x86_64-suse12-4.0.6.tgz复制到/usr/local ...

  8. mybatis xml < >

    [参考文章]:mybatis 中的 xml 配置文件中 ‘<’. ‘>’ 处理 1.使用转义字符将 ‘<’. ‘>’ 替换掉 描述 字符 转义字符小于号 < <大于 ...

  9. Go JSON 转化规则

    Go语言内置encoding/json包支持JSON序列化和反序列化,有如下转换规则 基本的数据结构映射关系 bool, for JSON booleans float64, for JSON num ...

  10. Java语言的简单基础

    1.Java 是一种高级程序设计语言. 2.Java 是大小敏感的程序语言. 3.Java 中的 public 修饰的类名一般要与文件名相同,但也有特列:内部类. 4.Java 程序能在任何操作系统中 ...