آموزش ساخت اسلایدر شبیه به اپ دیجی کالا

سلام دوستان در این سری از آموزش برنامه نویسی اندروید به آموزش ساخت اسلایدر شبیه به اپ دیجی کالا خواهیم پرداخت شاید بخواهیید مقدار های عکس و متن را سرور بخوانید و سپس در برنامه قرار دهید در این آموزش ما یک فایل json را از اینترنت می خوانیم آن را پارس کرده و در Slider قرار می دهیم در ادامه با ما همراه باشید.
در این آموزش ما از سه کتاب خانه زیر استفاده می کنیم.

• retrofit2 برای ارتباط با سرور
• gson برای خواندن فایل json (پارس یا همان تجزیه کردن آن)
• glide برای لود کردن عکس

ما یک فایل json داریم که در آدرس زیر قرار گرفته است.

https://orjinakteb.com/api/actors.php

محتوای json همانند زیر می شود.

{
  "Actors": [
    {
      "name": "Shahab Hosseini",
      "imageurl": "https://orjinakteb.com/wp-content/uploads/2017/08/Shahab.jpg"
    },
    {
      "name": "MohammadReza Golzar",
      "imageurl": "https://orjinakteb.com/wp-content/uploads/2017/08/golzar.jpg"
    },
    {
      "name": "Rambod Javan",
      "imageurl": "https://orjinakteb.com/wp-content/uploads/2017/08/rambodjavan.jpg"
    },
    {
      "name": "Negar Javaherian",
      "imageurl": "https://orjinakteb.com/wp-content/uploads/2017/08/negarjavaherian.jpg"
    }
  ]
}

وارد فایل Build.gradle از نوع Module شده و در بخش dependencies خط های زیر را اضافه کنید.

compile 'com.squareup.retrofit2:retrofit:2.2.0'
compile 'com.squareup.retrofit2:converter-gson:2.2.0'
compile 'com.github.bumptech.glide:glide:3.7.0'

پروژه را sync کنید.
وارد فایل AndroidManifest.xml شده سپس دسترسی زیر را اضافه کنید.

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

حالا ابتدای کار باید یک کلاس model به نام Actor.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi;
import com.google.gson.annotations.SerializedName;
/**
 * Created by Jefferson on 19/4/17.
 */
public class Actor {
    @SerializedName("name")
    private String name;
    @SerializedName("imageurl")
    private String url;
    public Actor(String name, String url) {
        this.name = name;
        this.url = url;
    }
    public String getName() {
        return name;
    }
    public String getUrl() {
        return url;
    }
}

این کلاس همان کلاس getter و setter است.
یک کلاس دیگر model نیز می خواهیم تا تمامی Actor ها را در یک آرایه قرار دهد پس یک فایل جاوا به نام Actors.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi;
import com.google.gson.annotations.SerializedName;
import java.util.ArrayList;
/**
 * Created by Jefferson on 19/4/17.
 */
public class Actors{
    @SerializedName("Actors")
    private ArrayList<Actors> Actors;
    public Actors(){
    }
    public ArrayList<Actors> getActors(){
        return Actors;
    }
}

حالا چون داریم از Retrofit استفاده می کنیم باید یک interface ایجاد کنیم.
یک interface به نام APIService.java ایجاد کرده و کدهای زیر را در آن قرار دهید.

package ir.programchi;
import retrofit2.Call;
import retrofit2.http.GET;
/**
 * Created by Jefferson on 19/4/17.
 */
public interface APIService {
    @GET("Actors.php")
    Call<Actors> getActors();
}

در بالا Actors.php بخشی از آدرس فایل ما در هاست است نباید در آن http قرار گیرد فقط نام فایل باید باشد.
حالا باید در layout که نام آن برابر activity_main.xml کدهای زیر را قرار دهید (این layout اصلی است).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <AdapterViewFlipper
        android:id="@+id/adapterViewFlipper"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </AdapterViewFlipper>
</RelativeLayout>

در بالا یک AdapterViewFlipper قرار دادیم تا به صورت اسلایدر در بیاریم
باید یک فایل به نام flipper_items.xml در layout ایجاد کرده و کدهای زیر را در آن قرار دهید.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Spiderman"
        android:textAlignment="center"
        android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

در بالا یک ImagView برای قرار گرفتن عکس و یک TextView برای قرار گرفتن متن استفاده شده است.
زمان ایجاد آداپتور است تا عکس های عکس  ها و متن ها در جای خودشان قرار گیرند.

package ir.programchi;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import java.util.ArrayList;
/**
 * Created by Jefferson on 19/4/17.
 */
public class FlipperAdapter extends BaseAdapter {
    private Context mCtx;
    private ArrayList<Actor> actors;
    public FlipperAdapter(Context mCtx, ArrayList<Actor> actors){
        this.mCtx = mCtx;
        this.actors = actors;
    }
    @Override
    public int getCount() {
        return actors.size();
    }
    @Override
    public Object getItem(int position) {
        return null;
    }
    @Override
    public long getItemId(int position) {
        return 0;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        Actor actor = actors.get(position);
        LayoutInflater inflater = LayoutInflater.from(mCtx);
        View view = inflater.inflate(R.layout.flipper_items, null);
        TextView textView = (TextView) view.findViewById(R.id.textView);
        ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
        textView.setText(actor.getName());
        Glide.with(mCtx).load(actor.getUrl()).into(imageView);
        return view;
    }
}

و در آخر باید کدهای زیر را در MainActivity.java قرار دهید.

package ir.programchi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.AdapterViewFlipper;
import android.widget.Toast;
import java.util.ArrayList;
import retrofit2.Call;
import retrofit2.Callback;
import retrofit2.Response;
import retrofit2.Retrofit;
import retrofit2.converter.gson.GsonConverterFactory;
public class MainActivity extends AppCompatActivity {
    public static final String BASE_URL = "https://orjinakteb.com/api/";
    private AdapterViewFlipper adapterViewFlipper;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        adapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.adapterViewFlipper);
        Retrofit retrofit = new Retrofit.Builder()
                .baseUrl(BASE_URL)
                .addConverterFactory(GsonConverterFactory.create())
                .build();
        APIService service = retrofit.create(APIService.class);
        Call<Actors> call =  service.getActors();
        call.enqueue(new Callback<Actors>() {
            @Override
            public void onResponse(Call<Actors> call, Response<Actors> response) {
                ArrayList<Actor> actors = response.body().getActors();
                FlipperAdapter adapter = new FlipperAdapter(getApplicationContext(), actors);
                adapterViewFlipper.setAdapter(adapter);
                adapterViewFlipper.setFlipInterval(1000);
                adapterViewFlipper.startFlipping();
            }
            @Override
            public void onFailure(Call<Actors> call, Throwable t) {
                Toast.makeText(getApplicationContext(), t.getMessage(), Toast.LENGTH_LONG).show();
            }
        });
    }
}

کد بالا json را با استفاده از کلاس های قبلی پارس (تجزیه)کرده و با استفاده از کلاس getter و setter در ViewFlipper قرار می دهد.
 
این آموزش هم به پایان رسید.
 
موفق و موید باشید.

مطالعه بیشتر