Customizing the ListView Interface

Content from the first line of code--Guo Lin

A ListView that can only display a piece of text is just too dull, and we can now customize the ListView interface to allow it to display richer content.
First of all, we need to prepare a set of pictures, corresponding to each of the fruits provided above, we will let these fruit names next to a pattern.
Next, define an entity class as the adapter type for the ListView adaptor. To create a new class fruit, the code looks like this:

 Public classFruit {PrivateString name; Private intimageId;  PublicFruit (String name,intimageId) {         This. Name =name;  This. ImageId =imageId; }     PublicString GetName () {returnname; }     Public intGetimageid () {returnimageId; }}

There are only two fields in the fruit class, name indicates the name of the fruit, and imageID represents the resource ID of the fruit corresponding to the picture.
Then you need to specify a custom layout for the child of the ListView, create a new fruit_item.xml in the layout directory, and the code looks like this:

<LinearLayoutxmlns:android= "Http://schemas.android.com/apk/res/android"Android:layout_width= "Match_parent"Android:layout_height= "Match_parent" >    <ImageViewAndroid:id= "@+id/fruit_image"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content" />    <TextViewAndroid:id= "@+id/fruit_name"Android:layout_width= "Wrap_content"Android:layout_height= "Wrap_content"android:layout_gravity= "Center"Android:layout_marginleft= "10dip" /></LinearLayout>

In this layout, we define a imageview for displaying fruit, and a textview for displaying the name of the fruit.
Next, you need to create a custom adapter that inherits from Arrayadapter and designates the generic as the fruit class. To create a new class Fruitadapter, the code looks like this:

 Public classFruitadapterextendsArrayadapter<fruit> {    Private intresourceId;  PublicFruitadapter (Context context,intTextviewresourceid, List<Fruit>objects) {        Super(Context, Textviewresourceid, objects); ResourceId=Textviewresourceid; } @Override PublicView GetView (intposition, View Convertview, ViewGroup parent) {Fruit Fruit= GetItem (position);//Gets the fruit instance of the current itemView view = Layoutinflater.from (GetContext ()). Inflate (ResourceId,NULL); ImageView Fruitimage=(ImageView) View.findviewbyid (r.id.fruit_image); TextView Fruitname=(TextView) View.findviewbyid (r.id.fruit_name);        Fruitimage.setimageresource (Fruit.getimageid ());        Fruitname.settext (Fruit.getname ()); returnview; }}

Fruitadapter overrides a set of constructors for the parent class to pass in the ID and data of the context, ListView child layout. It also overrides the GetView () method, which is called when each child is scrolled into the screen. In the GetView method, we first get the fruit instance of the current item through the GetItem () method, then use Layoutinflater to load our incoming layout for this subkey, and then call the view's Findviewbyid () The ImageView method gets the instances of the TextView, respectively, and calls their Setimageresource () and SetText () methods to set the displayed picture and text, and finally returns the layout so that our custom adapter is complete.
The following changes the code in Mainactivity as follows:

 Public classMainactivityextendsActivity {PrivateList<fruit> fruitlist =NewArraylist<fruit>(); @Overrideprotected voidonCreate (Bundle savedinstancestate) {Super. OnCreate (savedinstancestate);        Setcontentview (R.layout.activity_main); Initfruits (); //Initializing fruit DataFruitadapter adapter =NewFruitadapter (mainactivity. This, R.layout.fruit_item, fruitlist); ListView ListView=(ListView) Findviewbyid (R.id.list_view);    Listview.setadapter (adapter); }    Private voidinitfruits () {Fruit Apple=NewFruit ("Apple", R.drawable.apple_pic);        Fruitlist.add (Apple); Fruit Banana=NewFruit ("Banana", R.drawable.banana_pic);        Fruitlist.add (banana); Fruit Orange=NewFruit ("Orange", R.drawable.orange_pic);        Fruitlist.add (orange); Fruit Watermelon=NewFruit ("Watermelon", R.drawable.watermelon_pic);        Fruitlist.add (watermelon); Fruit Pear=NewFruit ("Pear", R.drawable.pear_pic);        Fruitlist.add (pear); Fruit Grape=NewFruit ("Grape", R.drawable.grape_pic);        Fruitlist.add (grape); Fruit Pineapple=NewFruit ("Pineapple", R.drawable.pineapple_pic);        Fruitlist.add (pineapple); Fruit Strawberry=NewFruit ("Strawberry", R.drawable.strawberry_pic);        Fruitlist.add (strawberry); Fruit Cherry=NewFruit ("Cherry", R.drawable.cherry_pic);        Fruitlist.add (cherry); Fruit Mango=NewFruit ("Mango", R.drawable.mango_pic);    Fruitlist.add (Mango); }}

As you can see, a initfruits () method is added here to initialize all the fruit data. In the constructor of the fruit class, the name of the fruit and the corresponding image ID are passed in, and the created object is added to the fruit list. We then created the Fruitadapter object in the OnCreate () method and passed the Fruitadapter as an adapter to the ListView. This completes the task of customizing the ListView interface.
Now rerun the program, as shown in effect 3.30.

Although our custom interface is still very simple, but believe that smart you have learned the trick, just modify the content in the Fruit_item.xml, you can customize a variety of complex interface.

Customizing the ListView Interface