نحوه بارگذاری  holder view در اندروید

نحوه بارگذاری  holder view در اندرویدReviewed by آریانا on Dec 10Rating: 5.0نحوه بارگذاری  holder view در اندرویدمن فقط ساده ترین راه را بریا ایجاد یک loader view (loading holder) به جای "wait for data loading" در اپلیکیشن های اندروید به شما ارائه دادم .

 

بسیاری از اپلیکیشن های موبایل با استفاده از اتصال به اینترنت، از داده های آنلاین استفاده می کنند. این به این معنی است که کاربران همیشه زمانی را در انتظار لود شدن یا بارگزاری داده ها از  سرور جهت نمایش در رابط کاربری اپلیکیشن خود هستند. مسئله اینجاست که در طول این فرآیند بارگزاری، به عنوان یک توسعه دهنده fronted-end ، باید با رابط کاربری (interface) بدون داده چه کار کنیم؟ ساده ترین راه این است که یک پنجره پیشرفت (progress dialog) نمایش دهیم، اما این کار ، در برخی مواقع یک نقطه ضعف محسوب می شود زیرا اقدامات کاربر(user actions) را محدود می کند و می تواند احساس ناخوشایندی به کاربر بدهد. برخی از اپلیکیشن های محبوب اندرویدی رویکرد دیگری برای حل این مسئله دارند: و آن استفاده از view/loader holder است که یک رابط کاربری پیش فرض است و وقتی که برنامه راه اندازی می شود و داده ها خالی هستند، قابل مشاهده است. وقتی داده ها در دستگاه لود می شوند و در دسترس قرار می گیرند loader holder view ناپدید می شود و داده های واقعی نمایش داده می شوند (معمولا توسط TextView  و  ImageView). این باعث می شود که اپلیکیشن شما نرم تر و دوستانه تر و بهتر به نظر برسد.

در این پست من یک راه سوم که loaderviewlibrary  نام دارد، ارائه می دهم که این رابط کاربری رو ایجاد می کند. خروجی loader view ممکن به صورت زیر نمایش داده شود.

  • library Importing

این dependency  را به app-level build.gradle برای استفاده از این library اضافه کنید:

[code]

dependencies {

compile ‘com.elyeproj.libraries:loaderviewlibrary:1.0.3’

}

[/code]

حالا ما دو آبجکت داریم که loader view را LoaderTextView به نام LoaderImageView و LoaderImageView می سازند.

  • استفاده های فایل XML

دو کلاس بالایی، زیرکلاس TextView و ImageView هستند که ما می توانیم به طور معمول آنها را در فایل های xml استفاده کنیم.

Loader View را برای TextView در layout XML تعریف کنید:

[code]

<com.elyeproj.loaderviewlibrary.LoaderTextView

     android:layout_width=”match_parent”

     android:layout_height=”wrap_content” />

[/code]

Loader View برای TextView در layout XML  تعریف شد:

[code]

<com.elyeproj.loaderviewlibrary.LoaderImageView

     android:layout_width=”100dp”

     android:layout_height=”100dp” />

[/code]

احتیاجات: min-sdk پروژه شما باید ۱۶ یا بالاتر باشد.

  • پروژه نمونه

حالا من یک پروژه نمونه در مورد استفاده از library به شما نشان می دهم. من می خواهم JSON و Bitmap را از آدرس های URL و آنها را در یک list view نمایش دهم.

main activity layout  ابتدا فقط یک ListView را شامل می شود:

activity_main.xml

[code]

<?xml version=”1.0″ encoding=”utf-8″?>

<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”

    android:paddingBottom=”@dimen/activity_vertical_margin”

    android:paddingLeft=”@dimen/activity_horizontal_margin”

    android:paddingRight=”@dimen/activity_horizontal_margin”

    android:paddingTop=”@dimen/activity_vertical_margin”

    tools:context=”info.devexchanges.loaderview.MainActivity”>

 

<ListView

        android:id=”@+id/list_view”

        android:layout_width=”match_parent”

        android:layout_height=”wrap_content”

        android:scrollbars=”none” />

</RelativeLayout>

[/code]

پس از این، در هر سطر یا آیتم از list view ، من یک LoaderTextView و LoaderImageView برای نمایش داده ها دارم:

item_listview.xml
[code]

<?xml version=”1.0″ encoding=”utf-8″?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

    android:layout_width=”match_parent”

    android:layout_height=”wrap_content”

    android:orientation=”horizontal”

    android:paddingBottom=”@dimen/activity_horizontal_margin”>

 

<com.elyeproj.loaderviewlibrary.LoaderImageView

        android:id=”@+id/image_view”

        android:layout_width=”100dp”

        android:layout_height=”100dp”

        android:layout_centerVertical=”true” />

 

<com.elyeproj.loaderviewlibrary.LoaderTextView

        android:id=”@+id/text_view”

        android:layout_width=”match_parent”

        android:layout_height=”wrap_content”

        android:layout_centerInParent=”true”

        android:layout_marginLeft=”@dimen/activity_horizontal_margin”

        android:layout_toRightOf=”@id/image_view”

        android:gravity=”left”

        android:maxHeight=”120dp” />

</RelativeLayout>

[/code]

سفارشی کردن یک ListView adapter بر اساس ArrayAdapter :

ListViewAdapter.java
[code]

package info.devexchanges.loaderview;

 

import android.app.Activity;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

 

import com.squareup.picasso.Picasso;

 

import java.util.ArrayList;

 

public class ListViewAdapter extends ArrayAdapter<String> {

 

private Activity activity;

private boolean isLoadImage;

private final static String IMAGE_URL = “http://i.imgur.com/cReBvDB.png”;

 

public ListViewAdapter(Activity context, int resource, ArrayList<String> objects, boolean isLoadImage) {

super(context, resource, objects);

this.activity = context;

this.isLoadImage = isLoadImage;

}

 

@Override

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

ViewHolder holder;

LayoutInflater inflater = (LayoutInflater) activity.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);

// If holder not exist then locate all view from UI file.

if (convertView == null) {

// inflate UI from XML file

convertView = inflater.inflate(R.layout.item_listview, parent, false);

// get all UI view

holder = new ViewHolder(convertView);

// set tag for holder

convertView.setTag(holder);

else {

// if holder created, get tag from view

holder = (ViewHolder) convertView.getTag();

}

 

if (!getItem(position).equals(“”)) {

holder.countryName.setText(getItem(position));

}

if (isLoadImage) {

Picasso.with(activity).load(IMAGE_URL).into(holder.imageView);

}

 

return convertView;

}

 

private class ViewHolder{

 

private ImageView imageView;

private TextView countryName;

 

public ViewHolder (View view) {

imageView = (ImageView)view.findViewById(R.id.image_view);

countryName = (TextView)view.findViewById(R.id.text_view);

}

}

}

[/code]

در main activity ، با کلیک روی یک button  در option menu ، داده ها از URL بارگزاری خواهند شد. قبل از اینکه کلیک کنید، داده های list view خالی هستند و loader holders ظاهر می شود. سورس کد برای این activity عبارت است از:

MainActivity.java
[code]

package info.devexchanges.loaderview;

 

import android.os.Bundle;

import android.os.Handler;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.view.Menu;

import android.view.MenuItem;

import android.widget.ArrayAdapter;

import android.widget.ListView;

 

import org.json.JSONArray;

import org.json.JSONException;

import org.json.JSONObject;

 

import java.util.ArrayList;

 

public class MainActivity extends AppCompatActivity {

 

private ListView listView;

private ArrayList<String> strings;

private ArrayAdapter<String> adapter;

 

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

 

listView = (ListView)findViewById(R.id.list_view);

strings = new ArrayList<>();

 

for (int i = 0; i < 5; i++) {

strings.add(“”);

}

 

adapter = new ListViewAdapter(this, R.layout.item_listview, strings, false);

listView.setAdapter(adapter);

}

 

private void loadJSONDataFromURL() {

final Handler handler = new Handler();

handler.postDelayed(new Runnable() {

@Override

public void run() {

new GetJSONTask(MainActivity.this).execute();

}

}, ۱۰۰۰);

Log.i(“Main”, “load data”);

}

 

//parsing json after getting from Internet

public void parseJsonResponse(String result) {

strings.clear();

try {

JSONObject json = new JSONObject(result);

JSONArray jArray = new JSONArray(json.getString(“message”));

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

JSONObject jObject = jArray.getJSONObject(i);

strings.add(jObject.getString(“name”));

}

 

adapter.notifyDataSetChanged();

Log.i(“Main”, “finish load data”);

} catch (JSONException e) {

e.printStackTrace();

}

}

 

@Override

public boolean onCreateOptionsMenu(Menu menu) {

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

return true;

}

 

@Override

public boolean onOptionsItemSelected(MenuItem item) {

if (item.getItemId() == R.id.load) {

adapter = new ListViewAdapter(this, R.layout.item_listview, strings, true);

listView.setAdapter(adapter);

loadJSONDataFromURL();

}

return super.onOptionsItemSelected(item);

}

}

[/code]

و فایل menu عبارت است از:

res/menu/main.xml
[code]

<?xml version=”1.0″ encoding=”utf-8″?>

<menu xmlns:android=”http://schemas.android.com/apk/res/android”

    xmlns:app=”http://schemas.android.com/apk/res-auto”>

 

<item

        android:id=”@+id/load”

        android:title=”Load Data”

        android:icon=”@drawable/load”

        app:showAsAction=”always” />

</menu>

[/code]

یاداشت مهم: اجازه درخواست پاسخ اینترنت در AndroidManifest.xml برای گرفتن داده ها از آدرس های URL :

[code]

<uses-permission android:name=android.permission.INTERNET/>

[/code]

من برای بارگزاری عکس از URL از Picasso library استفاده می کنم . لطفا dependency زیر را به app-level build.gradle :

[code]

compile ‘com.squareup.picasso:picasso:2.5.2’

[/code]

  • اجرای برنامه

خروجی پروزه را نگاه کنید:

نتیجه گیری:

من فقط ساده ترین راه را برای ایجاد یک loader view) loading holder)  به جای “wait for data loading”  (برای بارگزاری داده ها منتظر بمانید) در اپلیکیشن های اندروید به شما ارائه دادم . توجه کنید که اگر اپلیکیشن شما داده های پیچیده یا بزرگی دارد، شما باید در این راه حل، به جای استفاده از progress dialog ، UX برنامه تان را ارتقا ببخشید.

امیدوارم این مطلب برای شما مفید بوده باشد.

 

 

منبع: http://www.devexchanges.info

ترجمه: گروه آموزشی لرن اس تی یو

 

 

 

 

 

 

 

 

 

۲ نظر

پاسخ دهید