Judul : Membuat Kolom dan Baris berwarna di Android
link : Membuat Kolom dan Baris berwarna di Android
Membuat Kolom dan Baris berwarna di Android
Ada yang tanya saya bagaimana agar kolom data tampak cantik dan berwarna-warni di android.Sorry saya tak sempat jawab bukan karena pelit ...tetapi jawaban-nya rada panjang dan perlu waktu yang cukup panjang untuk menganalisi dan menganalisa.
Jawaban singkatnya adalah ...buatlah sebuah adapter yang merangkul class SimpleAdapter().
Silahkan buka kode java yang ingin isinya atau hasil output-nya akan muncul berwarna-warni. Coba lihat kode pada baris yang mirip berikut ini
ListAdapter adapter = new SimpleAdapter();
Output data anda tak berwarna-warni atau hanya berwarna polos karena class SimpleAdapter() bawaan android tersebut memang sengaja di buat polos karena warna kesukaan setiap manusia pasti berbeda-beda, sehingga bagi yang ingin membuat output-nya berwarna-warni maka buatlah class dengan implementasi sendiri. Implementasi yang saya maksudkan adalah dalam arti untuk membangun sebuah class baru dengan merangkul class SimpleAdapter bawaan android tersebut dengan menggunakan kata kunci 'extends'
Proses membuat sebuah class adalah membutuhkan analisis yang amat rumit ( ini menurut saya), sehingga dengan demikian membuat class baru yang saya maksudkan di atas adalah bukan benar-benar baru, sehingga tak perlu harus super pintar, namun kita hanya meminjam struktur yang telah ada di class bawaan android dengan membatalkan cara kerja metode yang telah ada disana dengan memasang cara kerja dan metode dari kita sendiri. Metode yang kita butuhkan untuk melihat warna dll adalah bernama getView(), dan kita harus membatalkan cara kerja aslinya dengan memasang @override sebelumnya(diatasnya) .Berikut adalah contoh class yang bekerja untuk adaptasi warna yang saya beri nama AdapterUtkWarna.java
package com.vik_sintus.projects.warna_baris;Saya pasang tiga warna pada metode warnaYgDiPakai, tapi anda boleh pasang warna sesuka hati. Perhatikan bagian constructor pada kode di atas dan lihat List<HashMap<String, String>> kode tersebut maksudnya adalah aturlah data horisontal(dalam satu baris) dengan benar baru kemudian di susun baris demi baris berjajar kebawah. List adalah untuk membuat data berjajar, dan HashMap untuk mencocokan data yang berada di sebalah kiri dengan data yang berada di kanan sehingga datanya tidak amburadul ( di android hal itu sering di sebut 'mapping'). Data yang di maksudkan disini adalah warna yang mau di cat di table data. Kalau bukan demikian maka warna table datanya akan terlihat bagaikan bibirnya cewek mabuk yang memoleskan lipstick di bibirnya sambil nyetir di jalan yang bebatuan.
/**
* Copyright ©Vik Sintus Projects
*
* Segala kelebihan dan kekurangan di luar tanggung jawab pembuat.
* Di larang memakai kode ini untuk kepentingan komersial tanpa ijin.
* Silahkan di pakai untuk kepentingan belajar.
* vik.sintus@gmail.com
* http://belajar-android-indonesia.blogspot.com
* Unless required by applicable law or agreed to in writing, this software
* is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*
*
*/
import java.util.HashMap;
import java.util.List;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.SimpleAdapter;
public class AdapterUtkWarna extends SimpleAdapter {
private int[] warnaYgDipakai = new int[] { 0x30ffffff, 0x30ff2020, 0x30000000 };
//berikut adalah constructor_nya
public AdapterUtkWarna(Context contextNya, List<HashMap<String, String>> bagianYgDiWarnai, int sumberNya, String[] darimana, int[] kemana) {
super(contextNya, bagianYgDiWarnai, sumberNya, darimana, kemana);
}
@Override
public View getView(int wilayahYgdiWarnai, View perubahanWarna, ViewGroup semuaWarna) {
View tampilanAkhir = super.getView(wilayahYgdiWarnai, perubahanWarna, semuaWarna);
int posisiWarna = wilayahYgdiWarnai % warnaYgDipakai.length;
tampilanAkhir.setBackgroundColor(warnaYgDipakai[posisiWarna]);
return tampilanAkhir;
}
}
Selebihnya kode di atas adalah self explanatory-lah
Bagaimana Cara Menggunakan class AdapterUtkWarna.java ?
Penggunaan -nya tergantung kebutuhan_lah, dan tergantung skenario aplikasi.
Tetapi oleh karena saya tak punya aplikasi yang membutuhkan table data yang warna-warni, maka saya hanya akan membuat sbuah skenario tentang sebuah table data yang isinya memiliki 4 buah kolom dan jumlah barisnya tak terhingga.
Mungkin anda tanya mengapa hanya 4 kolom tapi jumlah barisnya tak terhingga?... man, kita sedang berada di dalam dunia perHPan... lihatlah layar HP-mu ... buatkanlah aplikasi yang cocok untuknya. Melihat penggunaan layar HP secara tradisional, scrolling ke bawah adalah termasuk lumrah tapi setelah scrolling kebawah awak mau scrolling ke kanan pula? wadoh cape dah...kasihan pengguna... tetapi itu semua tergantung selera developer-lah kawan
Ok keempat kolom-nya yaitu untuk 'nomor urut', 'kolom_1', 'kolom_2', dan 'kolom_3'. Berikut adalah design interface atau tampangnya(saya termasuk bego dalam hal design) anda boleh mendesign yang lebih meriah. Disini saya hanya kasih contoh saja:
Setelah berdiskusi antara saya, aku dan diriku maka kami bersepakat untuk menamakan halaman design ini dengan nama warna_halaman.xml
Berikut adalah isi dari warna_halaman.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/main"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<!-- Bagian atas yg ungu yah-->
<LinearLayout android:id="@+id/bagian_atas"
android:background="#9966cc"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
>
<TextView android:id="@+id/kotak1"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="No: "
android:width="20dip"
android:height="30dip"
/>
<TextView android:id="@+id/kotak2"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:layout_marginLeft="10dip"
android:text="Kolom_1"
android:width="100dip"
android:height="30dip"
/>
<TextView android:id="@+id/kotak3"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Kolom_2"
android:width="100dip"
android:height="30dip"
/>
<TextView android:id="@+id/kotak4"
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:text="Kolom_3"
android:width="100dip"
android:height="30dip"
/>
</LinearLayout>
<!-- untuk garis perantara -->
<View android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="?android:attr/listDivider" />
<!-- untuk tiap cell(kotak) -->
<LinearLayout android:id="@+id/tampilan_nya"
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ListView android:id="@+id/warna_tampilan_nya"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
</ListView>
</LinearLayout>
</LinearLayout>
Lihat di bagian TextView ada 4 buah kolom dengan android:text="No", android:text="Kolom_1", android:text="Kolom_2", android:text="Kolom_3" ke 4 nya masing2 di berikan identitas agar dapat di program.
Kode di atas akan mengahasilkan table kosong, karena belum ada data, dan ia akan tampak sbb:
Ok mari kita program activity-nya atau kegiatan apa yang akan memakai class AdapterUtkWarna.java di atas, sehingga data yang kosong akan ada isinya. Disini saya hanya membuat skenario bahwa setiap cell (kotak) akan menyebut namanya sendiri(sebagai data_nya(content_nya)). Misalnya: kol1_baris1, kol2_baris1, kol3_baris1 dst...
Activity di android sama dengan 'main' di java atau miriplah... berikut adalah class main yang saya beri nama WarnaBaris.java yang akan memperagakan kebolehan class AdapterUtkWarna.java.
Berikut adalah isi dari WarnaBaris.java
package com.vik_sintus.projects.warna_baris;
/**
* Copyright ©Vik Sintus Projects
*
* Segala kelebihan dan kekurangan di luar tanggung jawab pembuat.
* Di larang memakai kode ini untuk kepentingan komersial tanpa ijin.
* Silahkan di pakai untuk kepentingan belajar.
* vik.sintus@gmail.com
* http://belajar-android-indonesia.blogspot.com
* Unless required by applicable law or agreed to in writing, this software
* is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
*
*
*/
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class WarnaBaris extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.warna_halaman);
ListView tampilanNya= (ListView)findViewById(R.id.warna_tampilan_nya);
// buat peta hubungan antara kolom dan baris (mapping)
// baris_id untuk klm_no_urt, kol1 untuk utk_kolom1 dst
String[] darimana = new String[] {"baris_id", "kol1", "kol2", "kol3"};
int[] kemana = new int[] { R.id.klm_no_urut, R.id.utk_kolom1, R.id.utk_kolom2, R.id.utk_kolom3 };
// siapkan perlengkapan data yang mau di pasang
List<HashMap<String, String>> melengkapiData = new ArrayList<HashMap<String, String>>();
for(int namaBaris = 1; namaBaris < 13; namaBaris++){
HashMap<String, String> menghubungData = new HashMap<String, String>();
menghubungData.put("baris_id", "" + namaBaris);
menghubungData.put("kol1", "kol1_baris" + namaBaris);
menghubungData.put("kol2", "kol2_baris" + namaBaris);
menghubungData.put("kol3", "kol3_baris" + namaBaris);
melengkapiData.add(menghubungData);
}
// kotak di warnai dengan warna dari class AdapterUtkWarna
AdapterUtkWarna adaptasiWarna = new AdapterUtkWarna(this, melengkapiData, R.layout.per_baris_nya, darimana, kemana);
tampilanNya.setAdapter(adaptasiWarna);
}
}
Lihat cara pemakaian class AdapterUtkWarna, dia butuh tampilan UI(user interface) dengan nama per_baris_nya.xml
Berikut adalah isi dari per_baris_nya.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:id="@+id/klm_no_urut"
android:text=""
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:width="20dip"
/>
<TextView android:id="@+id/utk_kolom1"
android:text=""
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:width="100dip"
/>
<TextView android:id="@+id/utk_kolom2"
android:text=""
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:width="100dip"
/>
<TextView android:id="@+id/utk_kolom3"
android:text=""
android:layout_height="fill_parent"
android:layout_width="wrap_content"
android:width="100dip"
/>
</LinearLayout>
Setelah pasang di HP atau coba di emulator maka hasilnya akan tampak sbb:
Perhatikan ClassBacaKomentar.java pada tutorial 2 disana saya implementasikan ListAdapter bawaan android yang menggandeng class SimpleAdapter, sehingga menghasilkan warna default atau warna asli turunan OS android. Datanya berada di remote.
Kode yang saya tulis disana adalah nampak sbb
ListAdapter adapterNya = new SimpleAdapter(this, susunanKomentar,
R.layout.komentar_tunggal, new String[] { TAG_USERNAME, TAG_JUDUL_KOMENTAR, TAG_ISI_KOMENTAR
}, new int[] { R.id.usernameNya, R.id.judul, R.id.komentar
});
Di situ saya menggunakan class default sehingga hasilnya default pula(hanya putih) seperti nampak pada gambar berikut
AdapterUtkWarna adapterNya = new AdapterUtkWarna(this, tampilanKomentarNya,
R.layout.komentar_tunggal, new String[] { TAG_USERNAME, TAG_JUDUL_KOMENTAR, TAG_ISI_KOMENTAR
}, new int[] { R.id.usernameNya, R.id.judul, R.id.komentar
});
Class AdapterUtkWarna.java menghasilkan warna output sbb:
Demikianlah Artikel Membuat Kolom dan Baris berwarna di Android
Sekianlah artikel Membuat Kolom dan Baris berwarna di Android kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Membuat Kolom dan Baris berwarna di Android dengan alamat link https://aplikasijalantikus.blogspot.com/2013/11/membuat-kolom-dan-baris-berwarna-di.html
0 Response to "Membuat Kolom dan Baris berwarna di Android"
Posting Komentar