Xamarin Android 开源博客园客户端

By 在下徐大安 948036947@qq.com

В этой статье представлен небольшой открытый проект, который я создал, когда только начал изучать Xamarin. Проект можно найти по ссылке: https://gitee.com/xu-wanghu/cnblogsclientmini.

Этот проект основан на другом открытом проекте Xamarin, доступном по адресу: https://github.com/JoesWeek/XamCnblogs. На основе проекта JoesWeek/XamCnblogs я упростил многие функции и назвал свой маленький проект «Блог нань Mini». Он включает в себя функции, которые меня интересуют, такие как просмотр новостей и статей из библиотеки знаний. Статья предназначена для начинающих разработчиков Xamarin или тех, кто интересуется разработкой мобильных приложений на разных платформах.

В начале 2021 года я познакомился с Xamarin от Microsoft (произносится ['zæmərɪn]). Меня сразу привлекли его возможности проектирования интерфейса Xaml и поддержка .NET. Поскольку раньше я работал с WPF, изучение Xamarin было для меня довольно простым, и я высоко оценил работу Microsoft. WPF и Xamarin очень похожи, многие их функции совпадают, например, .NET, Xaml, C#, Mvvm и т. д. Конечно, у Xamarin есть и свои уникальные особенности, такие как поддержка Android и iOS, что отличает его от WPF для Windows, включая навигацию, оболочку, эффекты и рендеринг для мобильных устройств, а также простой контейнер IOC DependencyService.

Кроме того, если вы хотите разрабатывать приложения Xamarin на платформе Windows и использовать виртуальные устройства, вам следует использовать компьютер с процессором Intel, как показано на рисунке ниже:

Реализация эффекта

Сначала рассмотрим завершённый эффект. Для тестирования использовался физический компьютер модели Honor 8. Значок рабочего стола выглядит следующим образом:

При нажатии на значок отображается приветственная страница, после чего пользователь переходит на главную страницу. Главная страница представляет собой материнскую вкладку с двумя дочерними страницами. Вкладки расположены внизу экрана, а две дочерние страницы посвящены новостям и библиотеке знаний соответственно. В новостной дочерней странице используется другая материнская вкладка с тремя дочерними страницами, показывающими последние новости, рекомендуемые новости и горячие новости недели. В библиотеке знаний отображаются статьи, включённые в библиотеку знаний.

Новостная дочерняя страница и библиотека знаний имеют функцию обновления сверху и разбиения на страницы, каждая страница содержит 20 элементов. Когда список прокручивается до конца, автоматически загружается следующая страница. При выборе элемента новостей можно перейти к странице подробного просмотра.

Ключевые технологии

Проект использует Xamarin.Forms, открытую платформу UI. С помощью Xamarin.Forms разработчики могут создавать приложения для Xamarin.Android, Xamarin.iOS и Windows из одного общего кода. Текущий проект использует VS2019 Community Edition в качестве IDE, при создании проекта выбирается мобильное приложение.

Блог нань Mini состоит из трёх модулей: CnBlogsCore, который инкапсулирует вызовы API блога нань, CnBlogsClient, содержащий большую часть интерфейса и логики интерфейса, и CnBlogsClient.Android, который содержит основную программу для Android и некоторые специфические функции Android. Зависимости между модулями показаны на рисунке.

Все данные этого проекта поступают из центра разработки блога нань (https://api.cnblogs.com/), и этот веб-сервис использует механизм авторизации OAuth 2.0. Перед вызовом API блога нань необходимо запросить собственный ClientId и ClientSecret. Блог нань делит ресурсы примерно на две категории: первая категория доступна с использованием ClientId и ClientSecret разработчика, а вторая требует авторизации третьей стороны для доступа к ресурсам. Первая категория ресурсов использует авторизацию Client Credential OAuth 2.0, а вторая — авторизацию authorization-code. Поскольку блог нань Mini фокусируется на изучении Xamarin, приложение реализует только первую категорию ресурсов, то есть новости и библиотеку знаний. Открытые API и clientid блога нань находятся в CnBlogsCore Global.CnBlogsUrl.cs.

Страницы подробностей новостей и библиотеки знаний используют WebView для отображения содержимого, а предоставленное блогом нань тело детализации является форматированным содержимым веб-страницы. Шаблоны страниц хранятся в виде ресурсов в Assets модуля CnBlogsClient.Android. В настоящее время шаблоны новостей и библиотек знаний используют kbarticles.html. После получения тела на клиенте Android оно напрямую обновляется в объекте Vue.