Android: LisvView Customizadas com Imagens e Texto
The Sample XML
For this tutorial i am using following sample XML which has some data and a thumbnail image url. You can get this XML by accessing http://api.androidhive.info/music/music.xml<? xml version = "1.0" encoding = "UTF-8" ?> < music > < song > < id >1</ id > < title >Someone Like You</ title > < artist >Adele</ artist > < duration >4:47</ duration > < plays >1662</ plays > </ song > < song > < id >2</ id > < title >Space Bound</ title > < artist >Eminem</ artist > < duration >4:38</ duration > < plays >1900</ plays > </ song > . . . . </ music > |
Creating New Project
1. Create new project in your Eclipse IDE and fill all the details. File ⇒ New Project2. If you notice the screen shots i designed listview with gradient background. To define gradient style create three new XML files under drawable folder and name them as gradient_bg.xml, list_selector.xml and gradient_bg_hover.xml and fill with following code. Also the thumbnail image has white background, for this i used image_bg.xml
Right Click and drawable-hdpi ⇒ New ⇒ Android XML File
gradient_bg.xml – Default Background Gradient Style
<? xml version = "1.0" encoding = "utf-8" ?> android:shape = "rectangle" > < gradient android:startColor = "#f1f1f2" android:centerColor = "#e7e7e8" android:endColor = "#cfcfcf" android:angle = "270" /> </ shape > |
<? xml version = "1.0" encoding = "utf-8" ?> android:shape = "rectangle" > < gradient android:startColor = "#18d7e5" android:centerColor = "#16cedb" android:endColor = "#09adb9" android:angle = "270" /> </ shape > |
<? xml version = "1.0" encoding = "utf-8" ?> < item android:state_selected = "false" android:state_pressed = "false" android:drawable = "@drawable/gradient_bg" /> < item android:state_pressed = "true" android:drawable = "@drawable/gradient_bg_hover" /> < item android:state_selected = "true" android:state_pressed = "false" android:drawable = "@drawable/gradient_bg_hover" /> </ selector > |
<? xml version = "1.0" encoding = "utf-8" ?> < item > < shape android:shape = "rectangle" > < stroke android:width = "1dp" android:color = "#dbdbdc" /> < solid android:color = "#FFFFFF" /> </ shape > </ item > </ layer-list > |
<? xml version = "1.0" encoding = "utf-8" ?> android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:orientation = "vertical" > < ListView android:id = "@+id/list" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:divider = "#b5b5b5" android:dividerHeight = "1dp" android:listSelector = "@drawable/list_selector" /> </ LinearLayout > |
Right Click ⇒ New ⇒ Android XML File
In this tutorial i custom designed a listview which contains an image on leftside, time and arrow at the right end and a title in middle. I used RelativeLayout as parent node and placed all the remaining items using relative positioning properties. Check the following image
<? xml version = "1.0" encoding = "utf-8" ?> android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:background = "@drawable/list_selector" android:orientation = "horizontal" android:padding = "5dip" > <!-- ListRow Left sied Thumbnail image --> < LinearLayout android:id = "@+id/thumbnail" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:padding = "3dip" android:layout_alignParentLeft = "true" android:background = "@drawable/image_bg" android:layout_marginRight = "5dip" > < ImageView android:id = "@+id/list_image" android:layout_width = "50dip" android:layout_height = "50dip" android:src = "@drawable/rihanna" /> </ LinearLayout > <!-- Title Of Song--> < TextView android:id = "@+id/title" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_alignTop = "@+id/thumbnail" android:layout_toRightOf = "@+id/thumbnail" android:text = "Rihanna Love the way lie" android:textColor = "#040404" android:typeface = "sans" android:textSize = "15dip" android:textStyle = "bold" /> <!-- Artist Name --> < TextView android:id = "@+id/artist" android:layout_width = "fill_parent" android:layout_height = "wrap_content" android:layout_below = "@id/title" android:textColor = "#343434" android:textSize = "10dip" android:layout_marginTop = "1dip" android:layout_toRightOf = "@+id/thumbnail" android:text = "Just gona stand there and ..." /> <!-- Rightend Duration --> < TextView android:id = "@+id/duration" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_alignParentRight = "true" android:layout_alignTop = "@id/title" android:gravity = "right" android:text = "5:45" android:layout_marginRight = "5dip" android:textSize = "10dip" android:textColor = "#10bcc9" android:textStyle = "bold" /> <!-- Rightend Arrow --> < ImageView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:src = "@drawable/arrow" android:layout_alignParentRight = "true" android:layout_centerVertical = "true" /> </ RelativeLayout > |
package com.example.androidhive; import java.util.ArrayList; import java.util.HashMap; import android.app.Activity; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; public class LazyAdapter extends BaseAdapter { private Activity activity; private ArrayList<HashMap<String, String>> data; private static LayoutInflater inflater= null ; public ImageLoader imageLoader; public LazyAdapter(Activity a, ArrayList<HashMap<String, String>> d) { activity = a; data=d; inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); imageLoader= new ImageLoader(activity.getApplicationContext()); } public int getCount() { return data.size(); } public Object getItem( int position) { return position; } public long getItemId( int position) { return position; } public View getView( int position, View convertView, ViewGroup parent) { View vi=convertView; if (convertView== null ) vi = inflater.inflate(R.layout.list_row, null ); TextView title = (TextView)vi.findViewById(R.id.title); // title TextView artist = (TextView)vi.findViewById(R.id.artist); // artist name TextView duration = (TextView)vi.findViewById(R.id.duration); // duration ImageView thumb_image=(ImageView)vi.findViewById(R.id.list_image); // thumb image HashMap<String, String> song = new HashMap<String, String>(); song = data.get(position); // Setting all values in listview title.setText(song.get(CustomizedListView.KEY_TITLE)); artist.setText(song.get(CustomizedListView.KEY_ARTIST)); duration.setText(song.get(CustomizedListView.KEY_DURATION)); imageLoader.DisplayImage(song.get(CustomizedListView.KEY_THUMB_URL), thumb_image); return vi; } } |
package com.example.androidhive; import java.util.ArrayList; import java.util.HashMap; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ListView; public class CustomizedListView extends Activity { // All static variables // XML node keys static final String KEY_SONG = "song" ; // parent node static final String KEY_ID = "id" ; static final String KEY_TITLE = "title" ; static final String KEY_ARTIST = "artist" ; static final String KEY_DURATION = "duration" ; static final String KEY_THUMB_URL = "thumb_url" ; ListView list; LazyAdapter adapter; @Override public void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main); ArrayList<HashMap<String, String>> songsList = new ArrayList<HashMap<String, String>>(); XMLParser parser = new XMLParser(); String xml = parser.getXmlFromUrl(URL); // getting XML from URL Document doc = parser.getDomElement(xml); // getting DOM element NodeList nl = doc.getElementsByTagName(KEY_SONG); // looping through all song nodes <song> for ( int i = 0 ; i < nl.getLength(); i++) { // creating new HashMap HashMap<String, String> map = new HashMap<String, String>(); Element e = (Element) nl.item(i); // adding each child node to HashMap key => value map.put(KEY_ID, parser.getValue(e, KEY_ID)); map.put(KEY_TITLE, parser.getValue(e, KEY_TITLE)); map.put(KEY_ARTIST, parser.getValue(e, KEY_ARTIST)); map.put(KEY_DURATION, parser.getValue(e, KEY_DURATION)); map.put(KEY_THUMB_URL, parser.getValue(e, KEY_THUMB_URL)); // adding HashList to ArrayList songsList.add(map); } list=(ListView)findViewById(R.id.list); // Getting adapter by passing xml data ArrayList adapter= new LazyAdapter( this , songsList); list.setAdapter(adapter); // Click event for single list row list.setOnItemClickListener( new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { } }); } } |
Add Permissions in AndroidManifest.xml
Open your AndroidManifest.xml file add two permissons INTERNET and WRITE_EXTERNAL_STORAGE.<? xml version = "1.0" encoding = "utf-8" ?> package = "com.example.androidhive" android:versionCode = "1" android:versionName = "1.0" > < uses-sdk android:minSdkVersion = "8" /> < application android:icon = "@drawable/icon" android:label = "@string/app_name" > < activity android:name = ".CustomizedListView" android:label = "@string/app_name" > < intent-filter > < action android:name = "android.intent.action.MAIN" /> < category android:name = "android.intent.category.LAUNCHER" /> </ intent-filter > </ activity > </ application > < uses-permission android:name = "android.permission.INTERNET" /> < uses-permission android:name = "android.permission.WRITE_EXTERNAL_STORAGE" /> </ manifest > |
ListView Default State
Other Classes you needed to run this project
You also need to include following class which deals functionalities like fetching images from WEB, storing them in cache and clearing cache etc., Make sure that you included following files in your project.XMLParser.java
package com.example.androidhive; import java.io.IOException; import java.io.StringReader; import java.io.UnsupportedEncodingException; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import javax.xml.parsers.ParserConfigurationException; import org.apache.http.HttpEntity; import org.apache.http.HttpResponse; import org.apache.http.client.ClientProtocolException; import org.apache.http.client.methods.HttpPost; import org.apache.http.impl.client.DefaultHttpClient; import org.apache.http.util.EntityUtils; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.Node; import org.w3c.dom.NodeList; import org.xml.sax.InputSource; import org.xml.sax.SAXException; import android.util.Log; public class XMLParser { // constructor public XMLParser() { } /** * Getting XML from URL making HTTP request * @param url string * */ public String getXmlFromUrl(String url) { String xml = null ; try { // defaultHttpClient DefaultHttpClient httpClient = new DefaultHttpClient(); HttpPost httpPost = new HttpPost(url); HttpResponse httpResponse = httpClient.execute(httpPost); HttpEntity httpEntity = httpResponse.getEntity(); xml = EntityUtils.toString(httpEntity); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } // return XML return xml; } /** * Getting XML DOM element * @param XML string * */ public Document getDomElement(String xml){ Document doc = null ; DocumentBuilderFactory dbf = DocumentBuilderFactory.newInstance(); try { DocumentBuilder db = dbf.newDocumentBuilder(); InputSource is = new InputSource(); is.setCharacterStream( new StringReader(xml)); doc = db.parse(is); } catch (ParserConfigurationException e) { Log.e( "Error: " , e.getMessage()); return null ; } catch (SAXException e) { Log.e( "Error: " , e.getMessage()); return null ; } catch (IOException e) { Log.e( "Error: " , e.getMessage()); return null ; } return doc; } /** Getting node value * @param elem element */ public final String getElementValue( Node elem ) { Node child; if ( elem != null ){ if (elem.hasChildNodes()){ for ( child = elem.getFirstChild(); child != null ; child = child.getNextSibling() ){ if ( child.getNodeType() == Node.TEXT_NODE ){ return child.getNodeValue(); } } } } return "" ; } /** * Getting node value * @param Element node * @param key string * */ public String getValue(Element item, String str) { NodeList n = item.getElementsByTagName(str); return this .getElementValue(n.item( 0 )); } } |
package com.example.androidhive; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.InputStream; import java.io.OutputStream; import java.net.HttpURLConnection; import java.net.URL; import java.util.Collections; import java.util.Map; import java.util.WeakHashMap; import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import android.app.Activity; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.widget.ImageView; public class ImageLoader { MemoryCache memoryCache= new MemoryCache(); FileCache fileCache; private Map<ImageView, String> imageViews=Collections.synchronizedMap( new WeakHashMap<ImageView, String>()); ExecutorService executorService; public ImageLoader(Context context){ fileCache= new FileCache(context); executorService=Executors.newFixedThreadPool( 5 ); } final int stub_id = R.drawable.no_image; public void DisplayImage(String url, ImageView imageView) { imageViews.put(imageView, url); Bitmap bitmap=memoryCache.get(url); if (bitmap!= null ) imageView.setImageBitmap(bitmap); else { queuePhoto(url, imageView); imageView.setImageResource(stub_id); } } private void queuePhoto(String url, ImageView imageView) { PhotoToLoad p= new PhotoToLoad(url, imageView); executorService.submit( new PhotosLoader(p)); } private Bitmap getBitmap(String url) { File f=fileCache.getFile(url); //from SD cache Bitmap b = decodeFile(f); if (b!= null ) return b; //from web try { Bitmap bitmap= null ; URL imageUrl = new URL(url); HttpURLConnection conn = (HttpURLConnection)imageUrl.openConnection(); conn.setConnectTimeout( 30000 ); conn.setReadTimeout( 30000 ); conn.setInstanceFollowRedirects( true ); InputStream is=conn.getInputStream(); OutputStream os = new FileOutputStream(f); Utils.CopyStream(is, os); os.close(); bitmap = decodeFile(f); return bitmap; } catch (Exception ex){ ex.printStackTrace(); return null ; } } //decodes image and scales it to reduce memory consumption private Bitmap decodeFile(File f){ try { //decode image size BitmapFactory.Options o = new BitmapFactory.Options(); o.inJustDecodeBounds = true ; BitmapFactory.decodeStream( new FileInputStream(f), null ,o); //Find the correct scale value. It should be the power of 2. final int REQUIRED_SIZE= 70 ; int width_tmp=o.outWidth, height_tmp=o.outHeight; int scale= 1 ; while ( true ){ if (width_tmp/ 2 <REQUIRED_SIZE || height_tmp/ 2 <REQUIRED_SIZE) break ; width_tmp/= 2 ; height_tmp/= 2 ; scale*= 2 ; } //decode with inSampleSize BitmapFactory.Options o2 = new BitmapFactory.Options(); o2.inSampleSize=scale; return BitmapFactory.decodeStream( new FileInputStream(f), null , o2); } catch (FileNotFoundException e) {} return null ; } //Task for the queue private class PhotoToLoad { public String url; public ImageView imageView; public PhotoToLoad(String u, ImageView i){ url=u; imageView=i; } } class PhotosLoader implements Runnable { PhotoToLoad photoToLoad; PhotosLoader(PhotoToLoad photoToLoad){ this .photoToLoad=photoToLoad; } @Override public void run() { if (imageViewReused(photoToLoad)) return ; Bitmap bmp=getBitmap(photoToLoad.url); memoryCache.put(photoToLoad.url, bmp); if (imageViewReused(photoToLoad)) return ; BitmapDisplayer bd= new BitmapDisplayer(bmp, photoToLoad); Activity a=(Activity)photoToLoad.imageView.getContext(); a.runOnUiThread(bd); } } boolean imageViewReused(PhotoToLoad photoToLoad){ String tag=imageViews.get(photoToLoad.imageView); if (tag== null || !tag.equals(photoToLoad.url)) return true ; return false ; } //Used to display bitmap in the UI thread class BitmapDisplayer implements Runnable { Bitmap bitmap; PhotoToLoad photoToLoad; public BitmapDisplayer(Bitmap b, PhotoToLoad p){bitmap=b;photoToLoad=p;} public void run() { if (imageViewReused(photoToLoad)) return ; if (bitmap!= null ) photoToLoad.imageView.setImageBitmap(bitmap); else photoToLoad.imageView.setImageResource(stub_id); } } public void clearCache() { memoryCache.clear(); fileCache.clear(); } } |
package com.example.androidhive; import java.lang.ref.SoftReference; import java.util.Collections; import java.util.HashMap; import java.util.Map; import android.graphics.Bitmap; public class MemoryCache { private Map<String, SoftReference<Bitmap>> cache=Collections.synchronizedMap( new HashMap<String, SoftReference<Bitmap>>()); public Bitmap get(String id){ if (!cache.containsKey(id)) return null ; SoftReference<Bitmap> ref=cache.get(id); return ref.get(); } public void put(String id, Bitmap bitmap){ cache.put(id, new SoftReference<Bitmap>(bitmap)); } public void clear() { cache.clear(); } } |
package com.example.androidhive; import java.io.InputStream; import java.io.OutputStream; public class Utils { public static void CopyStream(InputStream is, OutputStream os) { final int buffer_size= 1024 ; try { byte [] bytes= new byte [buffer_size]; for (;;) { int count=is.read(bytes, 0 , buffer_size); if (count==- 1 ) break ; os.write(bytes, 0 , count); } } catch (Exception ex){} } } |
package com.example.androidhive; import java.io.File; import android.content.Context; public class FileCache { private File cacheDir; public FileCache(Context context){ //Find the dir to save cached images if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED)) cacheDir= new File(android.os.Environment.getExternalStorageDirectory(), "LazyList" ); else cacheDir=context.getCacheDir(); if (!cacheDir.exists()) cacheDir.mkdirs(); } public File getFile(String url){ //I identify images by hashcode. Not a perfect solution, good for the demo. String filename=String.valueOf(url.hashCode()); //Another possible solution (thanks to grantland) //String filename = URLEncoder.encode(url); File f = new File(cacheDir, filename); return f; } public void clear(){ File[] files=cacheDir.listFiles(); if (files== null ) return ; for (File f:files) f.delete(); } } |
Comentários
Postar um comentário