Android開発のお勉強

メニュー

E-Mail



Twitter風に表示

TwitterAPIから得た結果をTwitter風に表示します。
結果は、ListViewをカスタマイズして表示します。

● ListViewの行レイアウト
 ImageViewを1つとTextViewを2つ配置します。
プロフィール画像、投稿者、つぶやきを表示します。


<?xml version="1.0" encoding="UTF-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent" android:layout_height="?android:attr/listPreferredItemHeight"
        //android:padding="6dip">


        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.07"
            android:src="@drawable/ic_action_search" />

        <LinearLayout android:orientation="vertical"
            android:layout_width="0dip" android:layout_weight="1"
            android:layout_height="fill_parent">

            <TextView
                android:id="@+id/usertext"
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:gravity="center_vertical" />

            <TextView
            android:id="@+id/comenttext"
            android:layout_width="fill_parent"
            android:layout_height="0dip"
            android:layout_weight="1"
            android:ellipsize="marquee"
            android:singleLine="false" />

        </LinearLayout>
    </LinearLayout>




● Bean
 つぶやきを検索した結果を格納するBeanを作成します。


import android.graphics.Bitmap;

public class TwitterBean {


    private String user = "";
    private String comment = "";
    private Bitmap image;


    public String getUser() {
        return this.user;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public String getComment() {
        return this.comment;
    }

    public void setComment(String comment) {
        this.comment = comment;
    }

    public Bitmap getImage() {
        return this.image;
    }

    public void setImage(Bitmap image) {
        this.image = image;
    }

};




● Adapter
ArrayAdapterを継承したクラスを作成します。



import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;


public class TwitterAdapter extends ArrayAdapter {

    private ArrayList items;
    private LayoutInflater inflater;

    public TwitterAdapter(Context context, int textViewResourceId, ArrayList items) {
        super(context, textViewResourceId, items);
        this.items = items;
        this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

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

        View view = convertView;
        if (view == null) {
            view = inflater.inflate(R.layout.twitter, null);
        }

        TwitterBean item = (TwitterBean)items.get(position);
        if (item != null) {
            TextView idText = (TextView)view.findViewById(R.id.usertext);
            idText.setText(item.getUser());

            TextView nameText = (TextView)view.findViewById(R.id.comenttext);
            nameText.setText(item.getComment());
            
            ImageView imageView = (ImageView)view.findViewById(R.id.imageView1);
            imageView.setImageBitmap(item.getImage());
        }
        return view;
    }
}





● AsyncTask
AsyncTaskを継承したクラスを作成します。
ツイッターWebAPI経由でつぶやきの検索結果を取得し、
ActivityのListViewを更新します。


import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.net.URL;
import java.util.ArrayList;

import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.impl.client.DefaultHttpClient;
import org.json.JSONArray;
import org.json.JSONObject;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.widget.ListView;

public class TwitterClient extends AsyncTask<String,String,String> {
    private ListView listView;
    private TwitterAdapter adapter;
    private Context context;

    public TwitterClient(Context context,ListView listView) {
        super();
        this.context = context;
        this.listView = listView;
    }


    @Override
    protected String doInBackground(String... arg0) {
        String uri = "http://search.twitter.com/search.json?q=" + arg0[0];

        DefaultHttpClient client = new DefaultHttpClient();
        HttpUriRequest req = new HttpGet(uri);
        HttpResponse res = null;

        String ret = "";

        try {
            res = client.execute(req);

            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            res.getEntity().writeTo(outputStream);
            String data = outputStream.toString();

            JSONObject rootObject = new JSONObject(data);
            JSONArray resArray = rootObject.getJSONArray("results");

            ArrayList list = new ArrayList();

            for (int i = 0; i < resArray.length(); i++) {

                TwitterBean item = new TwitterBean();

                JSONObject jsonObj = resArray.getJSONObject(i);
                item.setUser(jsonObj.getString("from_user"));
                item.setComment(jsonObj.getString("text"));
                try {
                    URL url = new URL(jsonObj.getString("profile_image_url"));
                    InputStream input = url.openStream();
                    Bitmap bitmap = BitmapFactory.decodeStream(input);
                    item.setImage(bitmap);
                } catch(Exception e) {

                }
                list.add(item);
            }

            adapter = new TwitterAdapter(context, R.layout.twitter, list);

        } catch (Exception e) {
            e.printStackTrace();
        }
        return ret;
    }

    protected void onPostExecute(String res) {
        this.listView.setAdapter(adapter);
    }
}




● レイアウト
検索キーワードを入力するEditText、
検索を実行するButton、
結果を表示するListViewを配置します。


<RelativeLayout 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" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Button" />

    <ListView
        android:id="@+id/listView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/button1" >

    </ListView>

</RelativeLayout>






● Activity
 作成したAsyncTaskを継承したクラス(TwitterClient)を生成し、実行します。



import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;

public class TwitterActivity extends Activity {

    @Override public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_twitter);

        Button btn = (Button)findViewById(R.id.button1);

        btn.setOnClickListener(new View.OnClickListener() {

            public void onClick(View v) {
                EditText editText = (EditText)findViewById(R.id.editText1);
                ListView listView = (ListView)findViewById(R.id.listView1);
                TwitterClient client = new TwitterClient(TwitterActivity.this,listView);
                client.execute(editText.getText().toString());
                }
            });
    }

    @Override public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.activity_twitter, menu);
        return true;
    }
}





Copyright (C) Androidアプリ開発のお勉強. All Rights Reserved.