Xamarin Android : Membuat Grid View dengan Image dan Text - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Xamarin Android : Membuat Grid View dengan Image dan Text, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel gridview, Artikel gridview images text, Artikel xamarin gridview, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Xamarin Android : Membuat Grid View dengan Image dan Text
link : Xamarin Android : Membuat Grid View dengan Image dan Text

Baca juga


Xamarin Android : Membuat Grid View dengan Image dan Text

Pada sore yang cerah ini saya akan memberikan tutorial mengimplementasikan GridView pada Xamarin Android. Nah pada study kasusnya biasanya saya gunakan untuk membuat menu yang banyak dalam bentuk Grid. Dari pada mengandalkan GridLayout lebih baik menggunakan gridview.

Untuk menggunakannya kita memerlukan beberapa point sebagai berikut :

1. GridLayout.axml adalah sebuah tampilan custom untuk menampilkan Image dan text.
2. Kategori.axml adalah tempat kita memasang GridView yang nantinya akan diisi oleh GridLayout.
3. GridModel.cs adalah sebuah class untuk menampung variable grid.
3. GridAdapter.cs yang include didalamnya sebuah Class View Holder.
4. KategoriActivity.cs untuk menampilkan GridView.
5. Masukan gambar pada folder drawable

Sekarang kita membuat terlebih dahulu Layout yang dibutuhkan. Oh iya pastikan AppCompat dan SupportDesign sudah terinstal pada Package anda.

GridLayout.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:padding="8dp">

        <ImageView
            android:id="@+id/Images"
            android:src="@drawable/bayi"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:scaleType="fitCenter" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Name"
                android:id="@+id/Names"
                android:padding="10dp"
                android:textColor="#ff525252"
                android:gravity="center" />
          
</LinearLayout>


KategroiLayout.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffffff">
    <include
        layout="@layout/app_bar" />
    <GridView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/lv"
        android:numColumns="4"/>
</LinearLayout>


Membuat tambahan app_bar.axml layout untuk toolbar

app_bar.axml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="#0267C1"
    app:itemIconTint="@android:color/white"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


Selanjutnya kita buat sebuah Model

GridModel.cs

using System;
namespace diskonfinder
{
    public class GridModel
    {
        

        private String name;
        private int image;

        public GridModel(string name, int image)
        {
            this.name = name;
            this.image = image;
        }

        public string Name
        {
            get { return name; }
        }

        public int Image
        {
            get { return image; }
        }
    }
}


Tampung dalam Adapter

GridAdapter.cs

using System;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Object = Java.Lang.Object;

namespace diskonfinder
{
    class GridAdapter : BaseAdapter
    {
        private readonly Context c;
        private readonly JavaList<GridModel> menugrid;
        private LayoutInflater inflater;

        /*
         * CONSTRUCTOR
         */
        public GridAdapter(Context c, JavaList<GridModel> menugrid)
        {
            this.c = c;
            this.menugrid = menugrid;
        }

        /*
         * RETURN SPACECRAFT
         */
        public override Object GetItem(int position)
        {
            return menugrid.Get(position);
        }

        /*
         * SPACECRAFT ID
         */
        public override long GetItemId(int position)
        {
            return position;
        }

        /*
         * RETURN INFLATED VIEW
         */
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            //INITIALIZE INFLATER
            if (inflater == null)
            {
                inflater = (LayoutInflater)c.GetSystemService(Context.LayoutInflaterService);
            }

            //INFLATE OUR MODEL LAYOUT
            if (convertView == null)
            {
                convertView = inflater.Inflate(Resource.Layout.GridLayout, parent, false);
            }

            //BIND DATA
            CustomAdapterViewHolder holder = new CustomAdapterViewHolder(convertView)
            {
                NameTxt = { Text = menugrid[position].Name }
            };
            holder.Img.SetImageResource(menugrid[position].Image);

            //convertView.SetBackgroundColor(Color.LightBlue);

            return convertView;
        }

        /*
         * TOTAL NUM OF SPACECRAFTS
         */
        public override int Count
        {
            get { return menugrid.Size(); }
        }
    }

    class CustomAdapterViewHolder : Java.Lang.Object
    {
        //adapter views to re-use
        public TextView NameTxt;
        public ImageView Img;

        public CustomAdapterViewHolder(View itemView)
        {
            NameTxt = itemView.FindViewById<TextView>(Resource.Id.Names);
            Img = itemView.FindViewById<ImageView>(Resource.Id.Images);

        }
    }
}


Jalankan Pada Activity

KategoriActivity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.V7.App;
using Android.Views;
using Android.Widget;

namespace diskonfinder
{
    [Activity(Label = "Kategori Diskon",Theme = "@style/MyThemes", ParentActivity = typeof(MainActivity))]
    public class KategoriActivity : AppCompatActivity
    {
        private GridView gv;
        private GridAdapter adapter;
        private JavaList<GridModel> menugrid;


        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.KategoriLayout);

            var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.app_bar);
            SetSupportActionBar(toolbar);
            SupportActionBar.SetDisplayHomeAsUpEnabled(true);

            gv = FindViewById<GridView>(Resource.Id.lv);


            //BIND ADAPTER
            adapter = new GridAdapter(this, GetGridMenu());

            gv.Adapter = adapter;

            gv.ItemClick += gv_ItemClick;

            // Create your application here
        }

        private void gv_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            Toast.MakeText(this, menugrid[e.Position].Name, ToastLength.Short).Show();
        }

        private JavaList<GridModel> GetGridMenu()
        {
            menugrid = new JavaList<GridModel>();

            GridModel s;

            s = new GridModel("Bayi dan Anak", Resource.Drawable.bayi);
            menugrid.Add(s);

            s = new GridModel("Belanja", Resource.Drawable.belanja);
            menugrid.Add(s);

            s = new GridModel("Fashion", Resource.Drawable.fashion);
            menugrid.Add(s);

            s = new GridModel("Kuliner", Resource.Drawable.kuliner);
            menugrid.Add(s);

            s = new GridModel("Kesehatan", Resource.Drawable.kesehatan);
            menugrid.Add(s);

            s = new GridModel("Hiburan", Resource.Drawable.hiburan);
            menugrid.Add(s);

            s = new GridModel("Pendidikan", Resource.Drawable.pendidikan);
            menugrid.Add(s);

            s = new GridModel("Travel", Resource.Drawable.travel);
            menugrid.Add(s);

            s = new GridModel("Kuliner", Resource.Drawable.kuliner);
            menugrid.Add(s);

            s = new GridModel("Cafe", Resource.Drawable.cafe);
            menugrid.Add(s);

            s = new GridModel("Musik", Resource.Drawable.musik);
            menugrid.Add(s);

            s = new GridModel("Otomotif", Resource.Drawable.otomotif);
            menugrid.Add(s);


            s = new GridModel("Elektronik", Resource.Drawable.elektronik);
            menugrid.Add(s);


            s = new GridModel("Olahraga", Resource.Drawable.olahraga);
            menugrid.Add(s);

            s = new GridModel("Hotel", Resource.Drawable.hotel);
            menugrid.Add(s);

            s = new GridModel("Jasa", Resource.Drawable.services);
            menugrid.Add(s);

            return menugrid;
        }

        public override void OnBackPressed()
        {
            base.OnBackPressed();
        }
    }
}


Oh iya kelupaan kita buat sebuah styles

Styles.xml

<?xml version="1.0" encoding="utf-8" ?> 
<resources>
  <style name="MyTheme.Base" parent="Theme.AppCompat.Light">
  </style>
 
  <style name="MyTheme" parent="MyTheme.Base">
  </style>
 
  <style name="MyTheme.Splash" parent ="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowBackground">@drawable/splashscreen</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
  </style>


    <style name="MyTheme.Bases" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="windowNoTitle">true</item>
     <item name="windowActionBar">true</item>
      <item name="colorControlNormal">#0C92CF</item>
     <item name="colorPrimary">#2196F3</item>
     <item name="colorPrimaryDark">#1976D2</item>
     <item name="colorAccent">#0C92CF</item> 
   </style>     
   <style name="MyThemes" parent="MyTheme.Bases">
   </style>
    
</resources>


Nah, kode diatas adalah beberapa hal yang dibutuhkan untuk membuat GridView pada Xamarin Android.




Demikianlah Artikel Xamarin Android : Membuat Grid View dengan Image dan Text

Sekianlah artikel Xamarin Android : Membuat Grid View dengan Image dan Text kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Xamarin Android : Membuat Grid View dengan Image dan Text dengan alamat link https://dev-create.blogspot.com/2020/02/xamarin-android-membuat-grid-view.html