نمایش اطلاعات Json در لیست ویو با Volley

نمایش اطلاعات Json در لیست ویو با Volley ، هنگام کار با داده های سمت سرور در اندروید همانگونه که در پست قبل به طور کامل توضیح داده  شد باید از یک کتابخانه برای ارتباط با سرور استفاده کرد که ما از کتابخانه Volley به دلایل ذکر شده استفاده میکنیم.

نمایش اطلاعات JSON در ListView با استفاده از کتابخانه Volley

طبیعتا داده ها پس از ثبت در بانک سرور گاهی نیاز به ارسال به برنامه برای مشاهده کاربر دارند. در اکثر مواقع نمایش داده ها درون ابزارهایی مثل ListView انجام میشود چون حرکت بین داده ها و نمایش داده ها را قابل کنترل تر میکند.

نمایش دادهای JSON (که در پست مربوطه به طور کامل توضیح داده شده) در LIstView کار سختی نیست اما نیاز به مقداری ریزکاری دارد که ما در این پست آموزشی به طور کامل به آنها خواهیم پرداخت!

بدین منظور پروژه ای با نام دلخواه ایجاد کنید و گام به گام با ما جلو بروید تا در نتیجه لیستی شامل اطلاعات جیسون خود داشته باشید

در ابتدا درون activity_main.xml خود یک ListView ساده ایجاد  کنید

<ListView
    android:id="@+id/listv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
</ListVieww>

(البته میتوانید لیست خود را سفارشی کنید تا ظاهر جذاب و کاربر پسندی داشتی باشد اما اکنون ما برای سادگی و قابل فهم بودن کار را ساده پیش میبریم)

فایل xml دیگری ایجاد کنید با نام list_item.xml و دو textView درون آن قرار دهید(ما از ۲ TextView استفاده کردیم چون اطلاعات دریافتی از بانک ۲ مقدار name , city است)

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/name"
    android:textAlignment="center"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="10dp" />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="New Text"
    android:id="@+id/cities"
    android:layout_marginLeft="15dp"
    android:layout_marginTop="10dpp" />

این فایل xml درواقع سلول های یا آیتم های درون ListView را تشکیل میدهد بدین صورت که با هر رکوردی که از سرور دریافت میشود یک سطر لیست شامل این ۲ تکست ایجاد و مقدار فیلدهای رکورد درون این دو تکست و این دو تکست  درون یک سطر لیست قرار میگردد و به همین روال رکورد های بعدی دریافت و سطرهای لیست ساخته میشوند.

حال به سراغ فایل های جاوا و کدنویسی های جاوا میرویم! فایل جاوایی با نام CustomListt ایجاد کنید و آن را از   ArrayAdapter<String>  ارث بری یا extends کنید    و خواهید دید پس از extends خطایی مبنی بر ایجاد سازنده دریافت خواهید کرد پس سازنده را حتما با محتوی زیر ایجاد کنید

public class CustomListt extends ArrayAdapter<String> {

    private String[] ids;
    private String[] names;
    private String[] cities;
    private Activity context;

    public CustomListt(Activity context,  String[] ids, String[] name, String[] city) {
        super(context, R.layout.list_item,ids);
        this.context=context;
        this.ids=ids;
        this.names=name;
        this.cities=city;
     }

همانگونه که مشاهده میکنید سه آرایه رشته ای نیز ایجاد شده که در واقع برای دریافت فیلدهای مربوط هر رکورد میباشد و **نکته جالب اینجاست که در این مرحله نه مقدار و نه طولشان مشخص نمیشود بلکه درون request مربوط به کتابخانه volley پس از دریافت response متناسب با response طولشان مشخص میشود همچنین مقدار.**

به علاوه یک مقدار Activity ایجاد شده برای مشخص کردن context برنامه برای ارسال به سازنده نیز اضافه شده.

حال باید یک ()getView از نوع View را باید override کنیم. وظیفه این متد درواقع چسباندن اطلاعات جیسون به تکست هایی است که قرار است درون لیست ما قرار گیرد

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater=context.getLayoutInflater();
    View listViewItem=inflater.inflate(R.layout.list_item, null, true);
    TextView txtColorName=(TextView)listViewItem.findViewById(R.id.name);
    TextView txtColorHex=(TextView)listViewItem.findViewById(R.id.cities);

    txtColorName.setText(names[position]);
    txtColorHex.setText(cities[position]);

    return listViewItem;
 }

درون این متد از LayoutInflater استفاده شده و ما زمانی از این کلاس استفاده میکنیم که بخواهیم درون یک view از یک فایل XML یک شی UI ایجاد کنیم به عبارت ساده تر این کلاس فایل list_item.xml را تبدیل به یک آیتم درون ListView اصلی در activity_main.xml میکند.

حال به فایل جاوای ActivityMain میرویم و کدهای نهایی را درون آن مینویسیم

TextView results; 
String JsonURL = "http://10.0.3.2:8080/tester?action=read"; 
RequestQueue requestQueue;
ArrayAdapter<String> adapter;
ArrayList<String> items;
ListView listView;

private static String[] ids;
private static String[] names;
private static String[] cities;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    listView = (ListView) findViewById(R.id.listv);
    items = new ArrayList<String>();
    adapter = new ArrayAdapter(this, R.layout.list_item, R.id.name, items);
    listView.setAdapter(adapter);

}

در متغیرهای تعریف شده JsonURL همان صفحه PHP است که دستورات خواندن از بانک را درونش درج کردیم که به شرح زیر است

<?php

if (isset($_REQUEST['action'])){

     $action = $_REQUEST['action'];

                        if($action='read'){read();}

}

else{

             echo "Invalid Data";

            exit;

}

function connectToDatabase(){

    $connection=mysqli_connect("localhost", "root", "", "test");

    if (mysqli_connect_errno()) {

        echo "Failed to connect to MySQL: " . mysqli_connect_error();

    }



    return $connection;

}

function read(){

    $connection = connectToDatabase();

    $result = mysqli_query($connection, "SELECT * FROM table1");



    $output = array();

    while($row = mysqli_fetch_array($result)) {

        $record = array();

        $record['ID'] = $row['ID'];

        $record['Name'] = $row['Name'];

            $record['City'] = $row['City'];

        $output[] = $record;

    }      

           

    echo json_encode( $output);

    mysqli_close($connection);

            return  $record;

}

(اگر میخواهید بیشتر درباره این نوع آدرس دهی بدانید به پست آموزش کتابخانه Volley مراجعه کنید)

درون متد oncreate نیز همانگونه ک مشخص است از ArrayAdapter مربوط به لیست را مقدار دهی کرده ایم که شکل کلی آن بدین صورت است

public ArrayAdapter(Context context, int resource, int textViewResourceId, List<T> objects) {
 }

سپس درون متد onStart اطلاعات json را از سرور میگیریم و ارسال میکنیم به لیست

@Override
protected void onStart() {
    super.onStart();
    requestQueue = Volley.newRequestQueue(this);

    JsonArrayRequest arrayreq = new JsonArrayRequest(JsonURL,
            new Response.Listener<JSONArray>() {
                @Override
                public void onResponse(JSONArray response) {
                    try {

                        ids=new String[response.length()];
                        names=new String[response.length()];
                        cities=new String[response.length()];
                        for (int i = 0; i < response.length(); i++) {
                            JSONObject jsonObject = (JSONObject)response.get(i);
                            String color = jsonObject.getString("Name");
                            String hex = jsonObject.getString("City");

                            ids[i]=String.valueOf(i);
                            names[i]=color;
                            cities[i]=hex;
                            CustomListt cl=new CustomListt(MainActivity.this,ids,names,cities);
                            listView.setAdapter(cl);

                        }
                        adapter.notifyDataSetChanged();

                    }
                    catch (JSONException e) {
                        e.printStackTrace();
                    }
                }
            },
            new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.e("Volley", "Error");
                }
            }
    );
    requestQueue.add(arrayreq);
 }

فرم کلی request را توضیح چندان نمیدهیم چون در پست Volley مفصل توضیح داد شده. اما درقسمتی که response برگردانده میشود و خطایی رخ نداده میبینیم که  با یک حلقه for تمامی شی های JSON را دریافت کرده و آن هارا به فیلدهای تشکیل دهنده میشکند  و به کلاس CustomListt که وظیفه ارسال داد ها به لیست را دارد ارسال میکند.

در نتیجه خواهید دید

jsonlist