Xamarin.forms 轮播图小案例

Xamarin.forms小案例 调用原神api实现轮播图

简单小案例

xaml的代码，这是写平板的横屏，有需求的可以自己动手调调,懒得截图平板的了就放模拟器的了，原神api官网就有

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Shell01.Views.Monkeys">
    <ContentPage.Content>
        <RelativeLayout>
            <AbsoluteLayout RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
							RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}">
                <CarouselView x:Name="CarouselViewbanner">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <Image Source="{Binding .}"></Image>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>
            </AbsoluteLayout>
            <Frame
                AbsoluteLayout.LayoutBounds="20,0.5,50,50" RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.1}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5}">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="Previousbtn"/>
                </Frame.GestureRecognizers>
                <Label>Previous</Label>
            </Frame>
            <Frame RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.9}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.5}">
                <Frame.GestureRecognizers>
                    <TapGestureRecognizer Tapped="NextBtn"/>
                </Frame.GestureRecognizers>
                <Label>Next</Label>
            </Frame>
        </RelativeLayout>
    </ContentPage.Content>
</ContentPage>

类代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http;
using System.Text;
using System.Text.Json;
using System.Threading.Tasks;
using System.Timers;
using Newtonsoft.Json;
using Shell01.Models;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace Shell01.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Monkeys : ContentPage
    {
        //请求类
        HttpClient client = new HttpClient();
        //数据总类
        List<AboutData> data = new List<AboutData>();
        //轮播图集合
        List<string> imagelist = new List<string>();
        public Monkeys()
        {
            InitializeComponent();
            LoadView();
            Banner();
        }
        //api 请求数据，对数据的值进行处理
        public  async void LoadView()
        {
            //json 值的获取
            string json = await LoadData();
            //实例类
            List<Ext> exts = new List<Ext>();
            //实例类
            List<AboutDataList> aboutDataLists = new List<AboutDataList>();
            try
            {
                //反序列化
                var aboutData = System.Text.Json.JsonSerializer.Deserialize<AboutData>(json);
                //对值得处理
                for (int i = 0; i < aboutData.data.list.Length; i++)
                {
                    aboutDataLists = aboutData.data.list.ToList();
                    for (int j = 0; j < aboutData.data.list[i].ext.Length; j++)
                    {
                        exts = aboutData.data.list[i].ext.ToList();
                        //原神Json中有一个属性值values非一个固定类型因此就要做判断,
                        //这是判断是否是数组
                        if (aboutData.data.list[i].ext[j].value.ValueKind == JsonValueKind.Array)
                        {
                            //将判定为数组的值返回到数组中
                            Value[] values = JsonConvert.DeserializeObject<Value[]>(aboutData.data.list[i].ext[j].value.ToString());
                            aboutData.data.list[i].ext[j].values = values;
                            //Value listvalue = aboutData.data.list[i].ext[j].value.Deserialize<Value>();
                        }
                        //是否为字符类型
                        if (aboutData.data.list[i].ext[j].value.ValueKind == JsonValueKind.String)
                        {

                        }
                        //...还有很多类型判断就不举例了
                    }
                }
                data.Add(aboutData);

                //原神的api的ext第一个是立绘，就循环填充了一下新的集合
                foreach (var item in aboutDataLists)
                {
                    imagelist.Add(item.ext[1].values[0].Url);
                }
                //填充到轮播图
                CarouselViewbanner.ItemsSource = imagelist;

                //listview.ItemsSource = aboutDataLists;
            }
            catch (Exception ex)
            {
                await DisplayAlert("Messagebox", ex.Message, "ok");
            }
        }
        //json数据的地方
        public async Task<string> LoadData()
        {
            string url = "https://content-static.mihoyo.com/content/ysCn/getContentList?pageSize=20&pageNum=1&order=asc&channelId=324";
            var json = await client.GetAsync(url);
            if (json.IsSuccessStatusCode)
            {
                string content = await json.Content.ReadAsStringAsync();
                return content;
            }
            else
            {
                return "false";
            }
        }
        //这是自动播放
        void Banner()
        {
            Timer timer = new Timer();
            //每3秒播放一次
            timer.Interval = 3000;
            //三秒后就会触发事件
            timer.Elapsed += OnTimedEvent;
            timer.Enabled = true;
        }
        private void OnTimedEvent(object sender, ElapsedEventArgs e)
        {
            //CarouseViewbanner.Postion 的索引位置加一
            int nextindex = (CarouselViewbanner.Position + 1) % imagelist.Count();
            Device.BeginInvokeOnMainThread(() => { CarouselViewbanner.Position = nextindex; });
        }
        //上一张图片的按钮
        private void Previousbtn(object sender, EventArgs e)
        {
            int Perviousindex = CarouselViewbanner.Position;
            //位置为0时要做判断，重新定值，不然会超出索引范围
            if (Perviousindex == 0)
            {
                Perviousindex = imagelist.Count() - 1;
            }
            else
            {
                Perviousindex--;
            }
            Device.BeginInvokeOnMainThread(() => { CarouselViewbanner.Position = Perviousindex; });
        }
        //下一张图片按钮
        private void NextBtn(object sender, EventArgs e)
        {
            int nextindex = (CarouselViewbanner.Position + 1) % imagelist.Count();
            Device.BeginInvokeOnMainThread(() => { CarouselViewbanner.Position = nextindex; });
        }
    }
}