หากคุณเป็นนักพัฒนาแอป อาจมีเวลาที่ต้องการรวม web API เพื่อดึงข้อมูลให้ผู้ใช้ ไม่ได้ยากมาก และสามารถทำได้ทั้ง XML และ JSON ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้าง web API data fetcher เรียบง่ายเข้าไปในแอป Android ของคุณ
สำหรับบทช่วยสอนนี้ เราจะใช้ JSON แทน XML
เขียนโค้ดใน JSON
ขั้นแรก สร้างไฟล์ XML list view ใหม่ พร้อมโค้ดต่อไปนี้:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/list_title_list" android:layout_width="match_parent" android:layout_height="match_parent"> </ListView> </LinearLayout> Next create a new XML file, and this is where you will list the elements you want shown (ImageView, TextView, etc.) <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="80dp" android:orientation="vertical" android:padding="5dp" > <ImageView android:id="@+id/iv_icon_social" android:layout_width="60dp" android:layout_height="60dp" android:layout_centerVertical="true" android:visibility="gone" /> <LinearLayout android:id="@+id/thumbnail" android:layout_width="fill_parent" android:layout_height="85dp" android:layout_marginRight="50dp" android:layout_marginTop="0dp" android:layout_toRightOf="@+id/iv_icon_social" android:gravity="center_vertical" android:orientation="vertical" android:padding="5dip" android:visibility="visible" > <TextView android:id="@+id/txt_ttlsm_row" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingLeft="10dp" android:text="Sample text" android:textSize="18dp" android:textStyle="bold" /> <TextView android:id="@+id/txt_ttlcontact_row2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="0dp" android:layout_marginTop="3dp" android:paddingLeft="10dp" android:maxEms="20" android:maxLines="2" android:singleLine="false" android:ellipsize="end" android:text="Sample text2" android:textColor="#808080" android:textSize="15dp" android:textStyle="normal" /> </LinearLayout> </RelativeLayout>
เพื่อดึงข้อมูลจาก API เราจำเป็นต้องไปที่ main activity และต้องใช้ AsyncTask เนื่องจากการดึง API ไม่สามารถทำบน main thread ได้ AsyncTask คือ thread ที่ทำงานเบื้องหลัง ในขณะที่แสดงผลใน UI การใช้ main thread สำหรับกระบวนการเครือข่ายมักจะทำให้แอปล้มเหลว หาก聽起來有點สับสน โปรดดูบทช่วยสอน API ลึกๆ ที่ RapidAPI
class DownloadFilesTask extends AsyncTask < Void, Void, String > { private final ProgressDialog dialog = new ProgressDialog(MainActivity.this); @Override protected void onPreExecute() { super.onPreExecute(); this.dialog.setMessage("Signing in..."); this.dialog.show(); } @Override protected String doInBackground(Void...params) { ServiceHandler sh = new ServiceHandler(); String jsonStr = sh.makeServiceCall("https://jsonplaceholder.typicode.com/albums/", ServiceHandler.GET); Log.d("res1", jsonStr); return jsonStr; } @Override protected void onPostExecute(String response) { super.onPostExecute(response); Log.d("res2", response); dialog.dismiss(); if (response != null) { try { JSONArray arr = new JSONArray(response); DataModel mDatModel = new DataModel(); for (int i = 0; i < arr.length(); i++) { JSONObject c = arr.getJSONObject(i); String id=c.getString(ID); String title = c.getString(TITLE); String uid = c.getString(USER_ID); id_array.add(id); // Toast.makeText(getApplicationContext(), title, Toast.LENGTH_LONG).show(); } adapter = new AAdapter(MainActivity.this, id_array); l.setAdapter(adapter); } catch (Exception e) {} } } } MainActivity.java public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener { AAdapter adapter; ArrayList < String > id_array = new ArrayList < String > (); ArrayList < String > notice_array = new ArrayList < String > (); Button b1; ListView l; private final static String SERVICE_URI = "https://jsonplaceholder.typicode.com/albums/"; private static final String TAG_QUESTIONS = "Questions"; private static final String USER_ID = "userId"; private static final String ID = "id"; private static final String TITLE = "title"; JSONArray questions = null; protected void onSaveInstanceState(Bundle outState) { super.onSaveInstanceState(outState); } protected void onRestoreInstanceState(Bundle savedInstanceState) { super.onRestoreInstanceState(savedInstanceState); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); l = (ListView) findViewById(R.id.list); new DownloadFilesTask().execute(); l.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView < ? > parent, View view, int position, long id) { String abc = id_array.get(position); Toast.makeText(getBaseContext(), id_array.get(position), Toast.LENGTH_LONG).show(); Intent n = new Intent(MainActivity.this, Titleshow.class); n.putExtra("id", id_array.get(position)); startActivity(n); } }); } @Override public void onItemClick(AdapterView < ? > parent, View view, int position, long id) {}
คุณจะพบการตอบสนองใน main activity ของคุณ
ServiceHandler sh = new ServiceHandler(); String jsonStr = sh.makeServiceCall("https://jsonplaceholder.typicode.com/albums/", ServiceHandler.GET); this nothing but a service handle class to request and get the respose from web api so we will do all this from web api. ServiceHandler.java class ServiceHandler { static String response = null; public final static int GET = 1; public final static int POST = 2; public ServiceHandler() {} /** * Making service call * * @url - url to make request * @method - http request method */ public String makeServiceCall(String url, int method) { return this.makeServiceCall(url, method, null); } /** * Making service call * * @url - url to make request * @method - http request method * @params - http request params */ public String makeServiceCall(String url, int method, List < NameValuePair > params) { try { // http client DefaultHttpClient httpClient = new DefaultHttpClient(); HttpEntity httpEntity = null; HttpResponse httpResponse = null; // Checking http request method type if (method == POST) { HttpPost httpPost = new HttpPost(url); // adding post params if (params != null) { httpPost.setEntity(new UrlEncodedFormEntity(params)); } httpResponse = httpClient.execute(httpPost); } else if (method == GET) { // appending params to url if (params != null) { String paramString = URLEncodedUtils.format(params, "utf-8"); url += "?" + paramString; } HttpGet httpGet = new HttpGet(url); httpResponse = httpClient.execute(httpGet); } httpEntity = httpResponse.getEntity(); response = EntityUtils.toString(httpEntity); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } catch (ClientProtocolException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); } return response; } }
ต่อไปใน asyncTask คุณจะพบ Adapter class ซึ่งจะตั้งค่าเมธอด adapter แต่สำหรับสิ่งนี้เราต้องสร้าง custom adapter
public class AAdapter extends BaseAdapter { private Activity activity; // private ArrayList<HashMap<String, String>> data; private static ArrayList title; private static LayoutInflater inflater = null; public AAdapter(Activity a, ArrayList b) { activity = a; this.title = b; inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } public int getCount() { return title.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.abcd, null); TextView title2 = (TextView) vi.findViewById(R.id.txt_ttlsm_row); // title String song = title.get(position).toString(); title2.setText(song); TextView title22 = (TextView) vi.findViewById(R.id.txt_ttlcontact_row2); // notice String song2 = title.get(position).toString(); title22.setText(song2); return vi; } }
เราต้องจำว่า adapter class ถูกพิจารณาว่าเป็น abstract class ใน Android ดังนั้นเราต้อง implement ทุกเมธอด ในโค้ดด้านล่าง เมธอด getview สำคัญ เพราะเราจะเพิ่มโค้ดที่นั่นเพื่อแสดงไฟล์ XML ที่สอง
inflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
และเรายังต้องการ Adapter class สำหรับ Load Image เพื่อให้ API fetcher สามารถโหลดรูปภาพจากอินเทอร์เน็ตได้
public class MyAdapter extends BaseAdapter { ImageLoader imageLoader; private Context ctx; ArrayList < AlbumData > list; public MyAdapter(Context ctx, ArrayList < AlbumData > mDataList) { list = mDataList; this.ctx = ctx; } public int getCount() { return list.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; ViewHolder viewHolder; if (convertView == null) { LayoutInflater vi = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE); convertView = vi.inflate(R.layout.abcde, null); viewHolder = new ViewHolder(); viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image); viewHolder.textView = (TextView) convertView.findViewById(R.id.txt_ttlsm_row); convertView.setTag(viewHolder); } else { viewHolder = (ViewHolder) convertView.getTag(); } AlbumData data = list.get(position); String a = data.getThumbnailUrl(); if (data != null) { viewHolder.textView.setText(data.getTitle()); String url = a; Glide.with(ctx).load(url).centerCrop().placeholder(R.drawable.abhi).crossFade().into(viewHolder.imageView); /* Picasso.with(ctx) .load("https://preview.keenthemes.com/conquer/assets/plugins/jcrop/demos/demo_files/image2.jpg") .into(viewHolder.imageView);*/ /* ImageLoader imageLoader = ImageLoader.getInstance(); imageLoader.displayImage("https://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg", viewHolder.imageView);*/ } return convertView; } public class ViewHolder { ImageView imageView; TextView textView; }
เราเพิ่มความคิดเห็นโค้ดที่เป็นเพียงคำแนะนำสำหรับ Picasso image loader ซึ่งเป็นไลบรารีดาวน์โหลดและแคชรูปภาพโอเพนซอร์สที่ทรงพลังสำหรับ Android และมีขนาดเบาในแอปของคุณ อย่างไรก็ตาม คุณยังสามารถใช้ Glide image loader เพื่อการปรับแต่งมากขึ้น เนื่องจากมีการรองรับ GIF และการจัดการหน่วยความจำที่ดีกว่า
public class ViewHolder { ImageView imageView; TextView textView; }
ViewHolder class ทำหน้าที่สร้าง instance คงที่ของ ViewHolder และแนบมันกับ view item ในการโหลดครั้งแรก มันจะถูกดึงมาจาก view tag ในการเรียกใช้ในอนาคต
เมธอด getView() ถูกเรียกมาก เช่นเมื่อมีองค์ประกอบมากใน ListView ดังนั้นเราจะ implement data model class สำหรับ set และ get method ซึ่งจะช่วยให้คุณได้สมาชิกของ array list และทำให้ชีวิตคุณง่ายขึ้นในอนาคต
public class AlbumData { int albumId; int id; String title; String url; String thumbnailUrl; public int getAlbumId() { return albumId; } public void setAlbumId(int albumId) { this.albumId = albumId; } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getThumbnailUrl() { return thumbnailUrl; } public void setThumbnailUrl(String thumbnailUrl) { this.thumbnailUrl = thumbnailUrl; } }
นี่คือทุกอย่างที่คุณต้องการสำหรับตอนนี้ คุณสามารถทดสอบผลลัพธ์ของ API fetcher นี้ในโปรแกรมจำลองแอปเช่น BlueStacks
