كيفاش تصاوب Slider ب android

imadbelasri Android
AN

فهاد الدرس من كيفاش تصاوب Slider ب android غادي نخدمو بل ViewPager لي كيمكن من باش تعرض صفحات على شكل slider فتطبيقات أندرويد الدرس بسيط للمبتدئين.


نظرة سريعة بالفيديو


- ملفات الواجهة

أول حاجة غادي نديروها غادي نفتحو Android Studio وغادي نزيدو مشروع جديد سميتو ViewPager منبعد غادي نزيدو ملف فالمجلد res/drawable وغادي تسميه page_view.xml ولي غادي يكون هو الصفحة لي غادي تكون فيها الصورة والعنوان الملف فيه ImageView لي غادي تكون فيها صورة وTextView لي غادي يكون فيها العنوان الكود ديال الملف هو :

                                                    
                                                        <?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/imageItem"
        android:scaleType="centerCrop"
        android:src="@drawable/image1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <TextView
        android:id="@+id/text"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="40dp"
        android:textColor="@android:color/white"
        android:textSize="35sp"
        android:text="Image 1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</FrameLayout>
                                                    
                                                

- الملف activity_main.xml

فالمجلد res/drawable وفالملف activity_main.xml غادي نزيدو فيه لViewPager ديالنا الكود ديال الملف هو :

                                                        
                                                            <?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"
    tools:context="com.example.darijacoding.pageviewer.MainActivity">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
</RelativeLayout>
                                                        
                                                    

- الملف model.java

فالمجلد java غادي نزيد package نسميه models ونزيد فيه ملف جديد عبارة عن class سميه Model.java غادي يكون فيه جوج variable هي imageId و title و constructeur لي غادي يمكني باش نcréer l'objet الكود ديال الملف هو :

                                                        
                                                            package com.example.darijacoding.pageviewer;

/**
 * Created by Imad on 08/03/2017.
 */
public class Model {
    public  int imageId;
    public String title;
    public Model(int imageId,String title){
        this.imageId = imageId;
        this.title = title;
    }
}

                                                        
                                                    

- الملف PageAdapter.java

فالمجلد java غادي نزيد package نسميه adapters ونزيد فيه ملف جديد عبارة عن class سميه PageAdapter.java غادي يكون فيه الكود لي غادي يمكن من ملئ ل ViewPager فأولا كاين ل constructeur لي كاياخد ل Context و List ديال الصور والعناوين من بعد كاين ل fonction getCount لي هي ديال PagerAdapter لي كترجع شحال من item ف list ولي بيها كيتحدد شحال من صفحة غادي تعرض ثم كاين instantiateItem لي كاتاخد الصورة والعنوان وكت créer ل view وكترجعها والأخيرة كتمسح كل صفحة دازت من الداكرة الكودديال الملف هو :

                                                        
                                                            package com.example.darijacoding.pageviewer.adapters;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.darijacoding.pageviewer.R;
import com.example.darijacoding.pageviewer.models.Model;

import java.util.List;

/**
 * Created by Imad on 08/03/2017.
 */
public class PageAdapter extends PagerAdapter {
    private Context context;
    private List<Model> data;
    private LayoutInflater inflater;
    public PageAdapter(Context context, List<Model> data){
        this.context = context;
        this.data = data;
        inflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
    }
    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = inflater.inflate(R.layout.page_viewer,container,false);
        ImageView image = (ImageView) view.findViewById(R.id.imageItem);
        TextView title = (TextView) view.findViewById(R.id.text);
        Model dataModel = data.get(position);
        image.setImageResource(dataModel.imageId);
        title.setText(dataModel.title);
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((FrameLayout)object);
    }
}
                                                        
                                                    

- الملف MainActivity.java

هادا الملف الرئيسي ديالنا ولي غادي يكون فيه الكود لي كي créer liste ديال الصور والعناوين بل fonction getList ومنبعد مكان ن recupérer لviewpager من الملف activity_main.xml كان créer l'objet من class PageAdapter وكنعطيه لcontext لي هو MainActivity.class و liste لي قادينا بل fonction getList ومنبعد كنزيد ل l'objet لي هو adapter لل viewpager ديالنا بالنسبة للصور غادي تلقاهم مع الكود سورس الكود ديال الملف هو :

                                                        
                                                            public class MainActivity extends AppCompatActivity {
    private List<Model> listItem;
    private ViewPager viewPager;
    private PageAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listItem = getList();
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        adapter = new PageAdapter(MainActivity.this,listItem);
        viewPager.setAdapter(adapter);
    }
    public List<Model> getList(){
        List<Model> liste = new ArrayList<>();
        int[]  imageIds = new int[]{
            R.drawable.image1,  R.drawable.image2,  R.drawable.image3,  R.drawable.image4,  R.drawable.image5,  R.drawable.image6
        };
        String[] titles = new String[]{
               "image1","image2","image3","image4","image5","image6"
        };
        int count = imageIds.length;
        for(int i = 0;i < count;i++){
            liste.add(new Model(imageIds[i],titles[i]));
        }
        return liste;
    }
}
                                                        
                                                    

دروس ذات صلة

AN

كيفاش نصاوب آلة حاسبة ب Android

فهاد الدرس من سلسلة Android غادي نشوفو كيفاش نقادو واحد الآلة حاسبة بسيطة غادي تمكنا من القيام بع...


AN

كيفاش نصاوب Notes App

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من إمتلاك مذكرة يسج...


AN

كيفاش تصاوب Scanner Mood بالاندرويد

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نقادو واحد التطبيق كيمكن المستخدم من التعرف على الحا...


AN

كيفاش تصوب لعبة Brain Train بالاندرويد

فهاد الدرس من سلسلة الأندرويد غادي نشوفو كيفاش نصاوبو واحد اللعبة بسيطة سميتها Brain Train لعبة بسي...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الاول

فهاد الدرس من سلسلة الاندرويد غادي نقادو واحد التطبيق كيمكن من تسجيل Contacts فقاعدة البيانات كما ك...


AN

كيفاش نصاوب Contacts App بالأندرويد الجزء الثاني

فهاد الجزء الثاني من هاد الدرس غادي نكملو الملفات الأخرى ولي غادي تمكن التطبيق ديالنا من الإشتغال ول...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الأول

فهاد الدرس من سلسلة الاندرويد غادي نشوفو كيفاش نستعملو ل volley library باش نديرو إتصال مع قاعدة بي...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثاني

فهاد الجزء الثاني من هاد المشروع غادي نقادو الملفات لي غادي يمكننا من الإتصال بقاعدة البيانات والكود...


AN

كيفاش تستعمل Volley باش ترسل البيانات الجزء الثالت

فهاد الجزء الثالث من هاد المشروع غادي نزيدو واحد الدومين لي غادي يكون مجاني وغادي يعطينا واحد العنو...


AN

كيفاش تصاوب تطبيق Top 10 Downloads ب Android

فهاد الدرس غادي نصابو مشروع بسيط بandroid عبارة عن تطبيق كيعرض قائمة أفضل عشر تطبيقات مجانية فمتجر آ...