Tutorial Xamarin Form : ListView Image dari JSON

Selamat siang, para pembaca blog xamarin Indoensia, nah pada kesempatan kali ini saya akan mengimplementasikan bagaimana caranya menampilkan data ListView dari JSON. Kebetulan data JSONnya berbentuk data blog seperti berikut :

Jadi saya memiliki data field, berupa id, judul, foto_berita dan summaries ya.

Sebelumnya kita wajib menginstal JSON.Net dulu sebagai komponent nugetnya, kita bisa menginstal dengan cara klik kanan pada folder project xamarin form, xamarin android dan ios pilih add nuget package -> lalu pilih JSON.net.

Setelah itu kita ikuti langkah-langlah berikut ini ya :

Langkah 1 :
Buatlah sebuah project baru dengan nama ListViewJson pilih Portable Class Library (PCL)

Langkah 2:
Buatlah sebuah file baru dengan tipe Form Content Page Xaml kita berikan nama MainPage, maka anda akan mendapatkan 2 file yaitu MainPage.xaml dan MainPage.xaml.cs

Langlah 3 :
Ubahlah App.xaml.cs seperti berikut

App.xaml.cs

using Xamarin.Forms;

namespace ListViewJson

{
	public partial class App : Application
	{
		public App()
		{
			InitializeComponent();

			MainPage = new ListViewJson.MainPage();
			
		}

		protected override void OnStart()
		{
			// Handle when your app starts
		}

		protected override void OnSleep()
		{
			// Handle when your app sleeps
		}

		protected override void OnResume()
		{
			// Handle when your app resumes
		}
	}
}

Langkah diatas adapah kita akan menentukan agar MainPage sebagai halaman awal aplikasi kita.

Langkah 4 :
Ubahlah code MainPage.xaml sebagai berikut

<?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="ListViewJson.ReminderPage"
			 Title="Home">
	<ContentPage.ToolbarItems>  
        <ToolbarItem Text="Add" Icon="plus.png" Priority="0" Order="Primary"/>  
        <ToolbarItem Text="Maps" Icon="maps.png" Priority="1" Order="Secondary"/> 
		<ToolbarItem Text="Share" Icon="maps.png" Priority="1" Order="Secondary"/>
		<ToolbarItem Text="Export" Icon="maps.png" Priority="1" Order="Secondary"/>
    </ContentPage.ToolbarItems> 
	<ContentPage.Content>


		
		<StackLayout BackgroundColor="White" Padding="10,10,10,30">
			<ActivityIndicator x:Name="loadingItems" IsRunning="true" IsVisible="true" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" Color="Gray" />
			<ListView x:Name="ListView1" RowHeight="200">  
				<ListView.ItemTemplate>  
					<DataTemplate>  
						<ViewCell>
							<StackLayout Orientation="Vertical">
								<Image Aspect="AspectFill" HorizontalOptions="FillAndExpand" Source="{Binding foto_berita}" WidthRequest="100" HeightRequest="150"/>
								<Label Text="{Binding judul}" TextColor="#000" FontSize="14" LineBreakMode="TailTruncation" FontAttributes="Bold" />  
								<Label Text="{Binding summaries}" TextColor="#000" LineBreakMode="HeadTruncation" HorizontalOptions="EndAndExpand"/> 

							</StackLayout>  
						</ViewCell>  
					</DataTemplate>  
				</ListView.ItemTemplate>  
			</ListView>

			</StackLayout> 
		
	</ContentPage.Content>
</ContentPage>

Pada kode diatas anda bisa melihat kode

<ContentPage.ToolbarItems>  
        <ToolbarItem Text="Add" Icon="plus.png" Priority="0" Order="Primary"/>  
        <ToolbarItem Text="Maps" Icon="maps.png" Priority="1" Order="Secondary"/> 
		<ToolbarItem Text="Share" Icon="maps.png" Priority="1" Order="Secondary"/>
		<ToolbarItem Text="Export" Icon="maps.png" Priority="1" Order="Secondary"/>
    </ContentPage.ToolbarItems>

Kode tersebut akan menghasilkan toolbar custom.

kemudian anad ajuga akan menemukan code :

<ActivityIndicator x:Name="loadingItems" IsRunning="true" IsVisible="true" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutFlags="PositionProportional" AbsoluteLayout.LayoutBounds="0.5,0.5,-1,-1" Color="Gray" />

Nah itu adalah kode untuk circle progress bar ketika data listview diambil dari JSON.

<ListView x:Name="ListView1" RowHeight="200">  
				<ListView.ItemTemplate>  
					<DataTemplate>  
						<ViewCell>
							<StackLayout Orientation="Vertical">
								<Image Aspect="AspectFill" HorizontalOptions="FillAndExpand" Source="{Binding foto_berita}" WidthRequest="100" HeightRequest="150"/>
								<Label Text="{Binding judul}" TextColor="#000" FontSize="14" LineBreakMode="TailTruncation" FontAttributes="Bold" />  
								<Label Text="{Binding summaries}" TextColor="#000" LineBreakMode="HeadTruncation" HorizontalOptions="EndAndExpand"/> 

							</StackLayout>  
						</ViewCell>  
					</DataTemplate>  
				</ListView.ItemTemplate>  
			</ListView>

Selanjutnya kita akan binding data field id, judul, foto_berita dan summaries dari data JSON.

Langkah 5 :
Adalah langkah untuk code behind dengan C#. untuk itu ubah code MainPage.xaml.cs sebagai berikut

using System;
using System.Collections.Generic;
using System.Net.Http;
using Xamarin.Forms;
using Newtonsoft.Json;
using System.Net.Http.Headers;
using System.Collections.ObjectModel;

namespace ListViewJson

{
	public partial class MainPage : ContentPage
	{
		public class ItemClass
		{
			public int id { get; set; }
			public string judul { get; set; }
			public string foto_berita { get; set; }
			public string summaries { get; set; }
		}

		public MainPage()
		{
			InitializeComponent();
			LoadData();
		}

		//Load data dari json beserta loading progress bar circle
		public async void LoadData()
		{
			ListView1.IsVisible = false;
			loadingItems.IsVisible = true;

			ListView1.ItemsSource = null;

		        var client = new HttpClient();
			client.BaseAddress = new Uri("https://alamat url api anda");
			client.DefaultRequestHeaders.Accept.Clear();
			client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
		        HttpResponseMessage response = await client.GetAsync("https://alamat url api anda");

		    if (response.IsSuccessStatusCode)
		    {
		        var data = await response.Content.ReadAsStringAsync();
				var result = JsonConvert.DeserializeObject<List<ItemClass>>(data);

				ObservableCollection<ItemClass> trends = new ObservableCollection<ItemClass>(result);

				IsBusy = false;

				ListView1.ItemsSource = trends;
			        loadingItems.IsVisible = false;
				ListView1.IsVisible = true;

		    }



		}




	}
}

Penjelasan kode adalah sebagai berikut :

public class ItemClass
		{
			public int id { get; set; }
			public string judul { get; set; }
			public string foto_berita { get; set; }
			public string summaries { get; set; }
		}

Kita ambil sebagai object data listview dari JSON.

ListView1.IsVisible = false;
loadingItems.IsVisible = true;

Kita set agar data loading bar (progress muncul)

var client = new HttpClient();
client.BaseAddress = new Uri("https://alamat api json anda");
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
HttpResponseMessage response = await client.GetAsync("https://alamat api json anda");

Kita ambil data json dengan HttpResponse

if (response.IsSuccessStatusCode)
		    {
		        var data = await response.Content.ReadAsStringAsync();
				var result = JsonConvert.DeserializeObject<List<ItemClass>>(data);

				ObservableCollection<ItemClass> trends = new ObservableCollection<ItemClass>(result);

				IsBusy = false;

				ListView1.ItemsSource = trends;
			        loadingItems.IsVisible = false;
				ListView1.IsVisible = true;

		    }

Jika ada sudah terload, maka loading barnya kita hidden.

Thanks

Ipung Purwono

Facebook : https://web.facebook.com/ipungz.purwono