كيفاش تصاوب Slider ب android
فهاد الدرس من كيفاش تصاوب 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;
}
}