Android Wing of mucchin | related ListView



How to customize the ListView


How to customize the ListView?

In Android, there is a View that ListView.
This ListView is a View that will list the layout of the same configuration.
The simplest way to use, or I would list that you place only a simple TextView.
However, how to use such a simple What, what practical?
Simply list the product name and user name can not be anything for example.
Or a button for sending voice or is a button for transition to the screen that displays the product name, detailed information that, to that user as the user name, not only just text, you want to set with the button, I believe that or how, and other customizations you want, and if there be a lot.
Using the ListView is a little confusing, I'll show you how to use my own good.
I tentatively, and this way, whether it is not quite general use.


First, you create the layout of the row in the ListView.
How to make the layout is exactly the same as when you make the layout of the screen.
Step on the steps to add the XML, that continue to add View.
Since this method has been introduced earlier, please refer to the following.
How to add Android XML
How to set the XML layout in Eclipse
In this case, let us to the following layout as a sample.
Place a Button and TextView, Button is to be displayed on the far right.
I think either way is different, is something like the following example.


<? Xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout
xmlns: android = "http://schemas.android.com/apk/res/android"
android: layout_height = "wrap_content" android: layout_width = "fill_parent">
<TextView android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: id = "@ + id / nameText">
</ TextView>
<Button android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_alignParentRight = "true"
android: id = "@ + id / detailButton"
android: text = "@ string / detail">
</ Button>
</ RelativeLayout>


This time to meet the requirements "Button is to be displayed on the far right" that, the layout of the parent is using RelativeLayout.
By attribute to true layout_width of RelativeLayout, the full width of the screen and the parent, the width of the line itself in the ListView.
And that is that to true layout_alignParentRight of Button, that, to be placed in the far right side of RelativeLayout.
This theme, so that to customize the ListView, only one shown above is an example.
In conjunction with your favorite, please make a layout.


The following is the creation of the ListView to display the main screen.
First let's create a screen layout.
This time, let's just say simply, and TextView to display the header at the top, and below it to display the ListView.
The header, or will use to display the title, or the number of List, this time You have only to show a simple fixed character.
Activity to use ListView to display the screen, rather than the normal Activity, you will inherit the ListActivity. Even though it is absolutely necessary, you may advantageous to inherit the ListActivity.
Although it later, make a layout like the following XML anyway.


<? Xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android"
android: orientation = "vertical"
android: layout_width = "fill_parent"
android: layout_height = "fill_parent"
>
<TextView
android: layout_width = "fill_parent"
android: layout_height = "wrap_content"
android: text = "@ string / hello"
/>
<ListView android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: id = "@ + id / android: list">
</ ListView>
<TextView android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: id = "@ + id / android: empty"
android: text = "@ string / nodata">
</ TextView>
</ LinearLayout>


In the LinearLayout, has deployed TextView, ListView, the TextView.
The first TextView is a TextView to display the name of only a simple app.
ListView is TextView of the second and third, I want you to note one point, android: is the value of the attribute id.
You are empty: @ + id / android: list, @ + id / android.
TextView and says something and the last, this is the wording List is displayed in the data even if there is no 1 in the first place.
to attribute text, Although it is @ string / nodata, this is a string to string.xml, that you define yourself.
For example you have set up the wording such as ". Does not have 1."
In this way, Activity was to inherit the ListActivity is, you automatically go to me the following processing.


@ + Id / android: if ListView that is specified in the list does not display anything, @ + id / android instead: to display the View that is specified in the empty.


It is one of the above-mentioned point, rather than a normal Activity, who is to inherit the ListActivity conveniently.
Definition of the layout of the screen is so far.


Next, you will provide a class consisting of the box and put the information, including a string to set the ListView.
Do you know something called JavaBean.
Do you know I think that was studying Servlet and JSP if there is more.
JavaBean is and I have a few rules strictly, · · ·
I put a little go in the direction of a different story. I'm sorry.
Please think of just a simple class, one for private variables, and there is a method of getter setter and a public.
Here it is sufficient.
As an example, this time, the ListView is considered a feature that is deployed product names and button fly, to the URL for that product.
Information required is the product name and URL.
You have both made the class as a String type, only to have setters for each variable and the product name and URL will be stored, the getter method.
Is something like the following as an example.


public class ItemBean {
private String name = "";
private String url = "";
public void setName (String name) {
this.name = name;
}
public String getName () {
return name;
}
public void setUrl (String url) {
this.url = url;
}
public String getUrl () {
return url;
}
}


Will continue to generate data for one to be displayed on one of the ListView, an instance of this class.
I posted the sample code so that later, and do you know at that time.




The following is the implementation of the Activity.
First, to inherit the ListActivity.
ListActivity is a subclass of Activity, such as onCreate is normal along with the Activity.
In this Activity, is to generate and display of data to be displayed in the ListView.

To ListView is a method that setListAdapter (), the data will be displayed by setting the instance of the Adapter into an argument.
This is also the benefits received by that to inherit the ListActivity.
Adapter is an instance of the data to be displayed one by one to the List.
Adapter to handle more than one, there is a class called ArrayAdater, because this time, to display the ListView to customize, you will be ArrayAdapter inherit this class to create your own Adapter class.
Please implement in Acitvity, the following classes. (You could of course also as a separate java file.)


class ListAdapter extends ArrayAdapter <ItemBean> {
private LayoutInflater mInflater;
private TextView mTitle;
private Button mButton;

public ListAdapter (Context context, List <ItemBean> objects) {
super (context, 0, objects);
mInflater = (LayoutInflater) context.getSystemService (Context.LAYOUT_INFLATER_SERVICE);
}

public View getView (final int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = mInflater.inflate (R.layout.row, null);
}
final ItemBean item = this.getItem (position);
if (item! = null) {
mTitle = (TextView) convertView.findViewById (R.id.nameText);
mTitle.setText (item.getName ());
mButton = (Button) convertView.findViewById (R.id.detailButton);
mButton.setOnClickListener (new OnClickListener () {
public void onClick (View v) {
Uri uri = Uri.parse (item.getUrl ());
Intent i = new Intent (Intent.ACTION_VIEW, uri);
startActivity (i);
}
});
}
return convertView;
}

}


Class that is inherited, and is ArrayAdapter <ItemBean>.
(And not s ArrayAdapter, I should say that even BaseAdapter, and it BaseAdapter, so they have encountered and? Bug can not be resolved, I'm using it since ArrayAdapter.)
Side to take advantage of this class, Activity, after generating an ArrayList whose elements are made by oneself ItemBean earlier, you can use to generate the Adapter that is passed to the constructor of this class.
getView method will be called for a data line by line in the methods that will be called from the VM, to be displayed.
Of the following parts:
final ItemBean item = this.getItem (position);
In this, so you can take an instance of ItemBean associated with the line with this method is called, then, please give the treatment as you like.
In this example, when the TextView is set to the name, the button is pressed, you are setting to the fact that you want to connect using the browser to the URL associated with.
At this stage I might not still a little unsure.
Next, let's take a look at a process called, to be set to generate this Adapter actually.


This time, the name, let's app called, transition to the page of its search engine by pressing the button and the name of the search engine.
all you need to do is the following () onCreate.


public void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout.main);

ItemBean yahoo = new ItemBean ();
yahoo.setName ("Yahoo");
yahoo.setUrl ("http://www.yahoo.co.jp");

ItemBean google = new ItemBean ();
google.setName ("Google");
google.setUrl ("http://www.google.co.jp");

List <ItemBean> list = new ArrayList <ItemBean> ();
list.add (yahoo);
list.add (google);

ListAdapter adapter = new ListAdapter (getApplicationContext (), list);
setListAdapter (adapter);
}


This is solid writing, making the ItemBean instance of Google and yahoo, then add it to an instance of the List <ItemBean>, to generate your own ListAdapter Adapter is using the guy then, setListAdapter () to this I'll pass.
This completes.
The following screen will be displayed.


How to customize the ListView


This sample code can be downloaded from below.
How to customize the ListView sample code
Once you understand the methods presented here, to create a layout rest as you like, you can create your own Adapter according to it, only () to customize it, you should be able to most likely make even ListView layout what getView.
Etc. If you want to use the Web Services API, where the information comes back together, put to create a JavaBean class, to analyze the response, and added to the ArrayList, to create an instance of a data, I feel like If Shiteyare to, you can apply the method introduced here was after.
Fine, I hope you can think of what might be useful to use a generic What · · ·.