We can populate an AdapterView such as Listview or GridView by binding the AdapterView instance to an Adapter.

At this example, We will learn to implement simple list using a ListView and BaseAdapter basically.


The steps to implement ListView are the following.


1. Define the XML Layout to display data in the view.


2. Define Java beans Class to save data.


3. Define the view group so that Listview is populated with data. 


4. Define Adapter which is charge of the role of the data management.

: Adater is an interface whose implementations provide data and the display of that data used by the Listview.


5. Define Listview to display on the screen and Listener being called when data is selected.




Defining the XML Layout to display data in the view.

==== sports_item.xml ====

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

    

<TextView 

   android:id="@+id/sportsName"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_weight="1"

   android:text="야구"

   />

<TextView 

   android:id="@+id/description"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_weight="1"

   android:text="야구"

   />

<TextView 

   android:id="@+id/memberCount"

   android:layout_width="match_parent"

   android:layout_height="wrap_content"

   android:layout_weight="1"

   android:text="야구"

   />

</LinearLayout>




Defining java beans class to save data.

==== SportsItem.java ====


package com.example.samplelistviewsports;


public class SportsItem {

private String sportsName;

private String description;

private String memberCount;

public SportsItem(String sportsName, String description, String memberCount) {

super();

this.sportsName = sportsName;

this.description = description;

this.memberCount = memberCount;

}


public String getSportsName() {

return sportsName;

}


public void setSportsName(String sportsName) {

this.sportsName = sportsName;

}


public String getDescription() {

return description;

}


public void setDescription(String description) {

this.description = description;

}


public String getMemberCount() {

return memberCount;

}


public void setMemberCount(String memberCount) {

this.memberCount = memberCount;

}

}




Defining the view group so that Listview populated with data.

==== SportsItemView.java ====

package com.example.samplelistviewsports;


import android.content.Context;

import android.view.LayoutInflater;

import android.widget.LinearLayout;

import android.widget.TextView;


public class SportsItemView extends LinearLayout {


private TextView sportsName;

private TextView description;

private TextView memberCount;

public SportsItemView(Context context, SportsItem item) {

super(context);

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

inflater.inflate(R.layout.sports_items, this, true);

sportsName = (TextView)findViewById(R.id.sportsName);

description = (TextView)findViewById(R.id.description);

memberCount = (TextView)findViewById(R.id.memberCount);

sportsName.setText(item.getSportsName());

description.setText(item.getDescription());

memberCount.setText(item.getMemberCount());

}


}



Defining ListView Adapter.

==== SportsItemViewAdapter.java ====

package com.example.samplelistviewsports;


import java.util.ArrayList;

import java.util.List;


import android.content.Context;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;


public class SportsListViewAdapter extends BaseAdapter{

private List<SportsItem> items = new ArrayList<SportsItem>();

private Context context;

public SportsListViewAdapter(Context context) {

super();

this.context = context;

}


public void addItem(SportsItem item){

items.add(item);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return items.size();

}


@Override

public Object getItem(int arg0) {

// TODO Auto-generated method stub

return items.get(arg0);

}


@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return 0;

}


@Override

public View getView(int position, View convertView, ViewGroup parent) {

SportsItemView itemView = null;

if(convertView == null){

itemView = new SportsItemView(context, items.get(position));

}else{

itemView = (SportsItemView)convertView;

}

return itemView;

}


}

--> getView method is the most important method in this adapter. The view being returned from this method is displayed on the screen as one item.



Defining Listview to display on the screen.

==== SportListView.java ====

package com.example.samplelistviewsports;


import android.content.Context;

import android.widget.BaseAdapter;

import android.widget.ListView;


public class SportListView extends ListView {


public SportListView(Context context) {

super(context);

// TODO Auto-generated constructor stub

}

public void setAdapter(BaseAdapter adapter){

super.setAdapter(adapter);

}


}





Making a codes to excute the app in the MainActivity.

==== MainActivity.java ====

package com.example.samplelistviewsports;


import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.ViewGroup;

import android.view.ViewGroup.LayoutParams;


public class MainActivity extends Activity {


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

SportsListViewAdapter adapter = new SportsListViewAdapter(this);

adapter.addItem(new SportsItem("야구", "9명이 하는 베이스볼 게임", "9명"));

adapter.addItem(new SportsItem("축구", "11명이 하는 멋진 게임", "11명"));

SportsListView listView = new SportsListView(this);

listView.setAdapter(adapter);

                listView.setOnItemClickListener(new OnItemClickListener() {


@Override

public void onItemClick(AdapterView<?> parent, View view, int position,

long arg3) {

ListView listView = (ListView) parent;

//SportsItem item = (SportsItem)listView.getItemAtPosition(position);

SportsItem item = (SportsItem)adapter.getItem(position);

                                Toast.makeText(getBaseContext(), item.getSportsName(), Toast.LENGTH_LONG).show();

}

});

LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

setContentView(listView, params);

}


@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main, menu);

return true;

}


}




Below is the screen executed this app.

























'Android > Layout' 카테고리의 다른 글

Set borders by using the LinearLayout  (0) 2014.02.01

We can remove the default title bar provided in the system. 

There are two ways like the following examples.


The first way,

==== MainActivity.java ====

package com.example.samplebitmapwidget;


import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.Window;


public class MainActivity extends Activity {


@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

}

}


: we can remove the title bar by calling requestWindowFeature() method like the above. This method should be called before being called setContentView() method.




The second way,

==== AndroidManifest.xml ====

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.samplebitmapwidget"

    android:versionCode="1"

    android:versionName="1.0" >


    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="18" />


    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@android:style/Theme.Light.NoTitleBar" >

        <activity

            android:name="com.example.samplebitmapwidget.MainActivity"

            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>


</manifest>


: We can remove the title bar by specifying "@android:style/Theme.Light.NoTitleBar" as a value of the "android:theme" attribute.



the following is the feature removed the default title.



We can set the background color in the LinearLayout, but can't find the attribute about a border. 

Now Let's see the following about setting borders around the LinearLayout.


The First way is to use Shape Object.


==== header_border.xml ====

<?xml version="1.0" encoding="UTF-8"?>

 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

   <padding android:left="10sp" android:right="10sp" android:top="10sp" android:bottom="10sp"/>

  <solid android:color="@android:color/transparent"/>

   <stroke

    android:width="1sp"

    android:color="#000000" />

   

 </shape>

: Define header_border.xml like this. Then Save it into '/res/drawable-mdpi'



==== activie_main.xml ====

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="ffffff"

     >

     <LinearLayout 

         android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:orientation="horizontal"

         android:background="@drawable/header_border"

         >

       <ImageButton 

           android:id="@+id/side_menu"

           android:layout_width="40sp"

           android:layout_height="40sp"

           android:background="@drawable/icon_list"

           android:contentDescription="사이드 메뉴"

           android:layout_marginTop="5sp"

           />

        <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="아이템 목록"

        android:textSize="20sp" 

        android:layout_marginTop="5sp"

        android:layout_weight="1"

        android:gravity="center"

        />

       <ImageButton 

           android:id="@+id/user_config"

           android:layout_width="37sp"

           android:layout_height="37sp"

           android:background="@drawable/icon_config"

           android:contentDescription="사용자 설정"

           android:layout_marginTop="5sp"

           android:layout_marginRight="5sp"

           />

     </LinearLayout>

: Set the reference of header_border object as a background attribute's value. then We can find borders around the LinearLayout.


But I'd like to do that only the LinearLayout appears only bottom border.

We can see the following for it.


 ==== activity_main.xml ====

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:background="ffffff"

     >

     <LinearLayout 

         android:layout_width="match_parent"

         android:layout_height="wrap_content"

         android:orientation="horizontal"

         android:background="f0fff0"

         android:padding="10sp"

         >

       <ImageButton 

           android:id="@+id/side_menu"

           android:layout_width="40sp"

           android:layout_height="40sp"

           android:background="@drawable/icon_list"

           android:contentDescription="사이드 메뉴"

          

           />

        <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="아이템 목록"

        android:textSize="20sp" 

        android:layout_marginTop="5sp"

        android:layout_weight="1"

        android:gravity="center"

        />

       <ImageButton 

           android:id="@+id/user_config"

           android:layout_width="37sp"

           android:layout_height="37sp"

           android:background="@drawable/icon_config"

           android:contentDescription="사용자 설정"

          

           />

     </LinearLayout>

     <!-- This is LinearLayout for bottom border. -->

     <LinearLayout 

         android:layout_width="match_parent"

         android:layout_height="2dp"

         android:background="000000"

         >

         

     </LinearLayout>

    

</LinearLayout>

: We add a LinearLayout for bottom border. It has no child view. It just has layout_height "2dp" and background "000000" as values of the attributes.

 

We can see the bottom border like this.



'Android > Layout' 카테고리의 다른 글

Filling an Listview with data  (0) 2014.02.17

+ Recent posts

출처: http://large.tistory.com/23 [Large]