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

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

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

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

https://programchi.ir/api/actors.php

1	https://programchi.ir/api/actors.php

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

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

{

"Actors": [

{

"name": "Shahab Hosseini",

"imageurl": "https://programchi.ir/wp-content/uploads/2017/08/Shahab.jpg"

{

"name": "MohammadReza Golzar",

"imageurl": "https://programchi.ir/wp-content/uploads/2017/08/golzar.jpg"

{

"name": "Rambod Javan",

"imageurl": "https://programchi.ir/wp-content/uploads/2017/08/rambodjavan.jpg"

{

"name": "Negar Javaherian",

"imageurl": "https://programchi.ir/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'

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

1	<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;
    }
}

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;
    }
}

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();
}

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>

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

<?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;
    }
}

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://programchi.ir/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();
            }
        });
    }
}

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://programchi.ir/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 قرار می دهد.

این آموزش هم به پایان رسید.

موفق و موید باشید.

مطالعه بیشتر

مطالب مشابه

ادامه مطلب

آموزش RatingBar متریال دیزاین در برنامه نویسی اندروید

ادامه مطلب

آموزش JRadioButton در جاوا

ادامه مطلب

آموزش Ping کردن در برنامه نویسی اندروید

ادامه مطلب

آموزش FontDialog در سی شارپ

ادامه مطلب

آموزش انیمیشن برای TextView در برنامه نویسی اندروید

ادامه مطلب

NDK در برنامه نویسی اندروید چیست ؟

ادامه مطلب

آموزش Crop (برش) عکس در برنامه نویسی اندروید

ادامه مطلب

مقایسه RecyclerView و ListView

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

soheyli.hadi گفت:
شهریور 30, 1396 در 8:11 ب.ظ
سلام خسته نباشید بابت آموزشتون ممنون
توی برنامه حطا وجود داره ممنون میشم راهنمایی بفرمایید
پاسخ
nassaji گفت:
مهر 2, 1396 در 4:39 ب.ظ
سلام توی خط کد زیر خطا هستش
ArrayList actors = response.body().getActors();
Error:(59, 68) error: incompatible types: ArrayList cannot be converted to ArrayList
پاسخ
دوست گفت:
مهر 7, 1396 در 11:54 ب.ظ
سلام خسته نباشید
بله این خط داخل MainActivity خطا میده :
ArrayList actors = response.body().getActors();
ممنون
پاسخ
مهسا گفت:
آبان 25, 1396 در 5:17 ب.ظ
برای رفع خطا باسد تو کلاس مدلی که ساختین :
private ArrayList Actors;
و
public ArrayList getActors
ینی دوجا به جای کلاس actor از کلاس actors به اشتباه استفاده شده .
پاسخ
مهران گفت:
دی 26, 1396 در 8:36 ب.ظ
سلام.
چجوری میشه شبیه اسلایدر دیجی کالا وقتی روی یک اسلاید کلیک میکنیم وارد یک اکتیویتی خاص بشیم ؟
بعد مثلا این آدرس اکتیویتی جدید رو بشه از سرور عوض کرد ؟
پاسخ
1. محمد حسین جعفری پور مدیر سایت گفت:
  دی 26, 1396 در 9:28 ب.ظ
  کافیه کلیک Listener تعریف کنید میشه این کار رو کرد ولی بهتره شما داده است رو با Json بفرستید و بگیرید.
  پاسخ
o0arash0o گفت:
مهر 29, 1397 در 3:53 ق.ظ
سلام اسلایدر دیجی کلا چند تا دایره روی ویو داره که نشون میده تعداد و نشون میده که روی چندمین عکس هستیم اونو چطور باید اضافه کرد
پاسخ
chootroid گفت:
بهمن 14, 1397 در 11:19 ق.ظ
سلام
میشه یکی اصلاع شدش را ار سال کنه هرچی میکنم فقط خطاهایش بیشتر میشه
https://t.me/bahmad65
پاسخ
محمد گفت:
اسفند 11, 1397 در 9:24 ب.ظ
سلام عزیز خوبین دادش این خطا میده من چیکارکنم میشه بگین تو تلگرام کجاش روباید اصلاح کنم
؟؟
telegram.me/engineer_it
پاسخ

مطالب مشابه

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

دیدگاهتان را بنویسید لغو پاسخ

اشتراک گذاری در شبکه های اجتماعی