مشروع إضغط للتالي تظهر مرة واحدة

مرحبا بكم في مقال وشرح جديد ومميز من مدونة سكيتشوير بالمصري

في شرح اليوم سنتعرف علي كيفية تصميم وبرمجة View Pager فيما يعني التنقل بين الصفحات عبر سحب المستخدم بأصبعه يسارا أو يمينا شرح مميز وكما عادتنا هيا شرح كل شئ بالتفصيل حتي تكون مستوعبا ومتفهما للشرح نريد لكل زائر لنا أن يصبح مبرمج محترف ومتميز وليس مطبق لشروحاتنا فقط تابع.

أولا: نقوم بأنشاء مشروع جديد نضع linear V ونسميه (allback)

ونعطيه هو وكل اللينرات التي سنشرحها فيما يلي padding 0 فيما يعني حشوه 0 .

ثانيا: نقوم باضافة  اثنان من linear H كما بالصور التالية اللينر الأعلي نسميه cod واللينر الأسفل منه نسميه linear1 ونعطي حشوتهم 0 أيضا.

ثالثا: نقوم بإضافة أثنان linear V ونسمي الأول base والثاني trash كما بالصور التالية ونعطيهم حشوه 0 أيضا.

رابعا: نقوم بإضافة linear H نعطيه الطول كاملا ونسميه linear2 كما بالصورة التالية.

خامسا: نضيف ثلاث linear V  في أخر لينر اتش أضفناه في الصورة رقم 6 ونسمي الأول layout1 والثاني layout2 والثالث layout3 كما بالصور التالية ونعطيهم حشوه 0 أيضا

سادسا: نعطي كل لينير عرض بالكامل كما بالصوره التالية بداية من layout3 إلي layout1. 

سابعا: ننشئ كاستم فيو جديد ونسميه empty كما بالصورة التالية.

ثامنا: نضف إلي الكاستم فيو linear V ونعطيه عرض بالكامل وحشوه 0 أيضا.

تاسعا: نضيف ثلاث صور للايقونات بإسم ic_1 إلي ic_3 كما بالصورة التالية.

عاشرا: تأكد من فتح App Compat .

إحدى عشر: ندخل إلي on Creat ونضيف كما بالصورة التالية.

قم بتثبيت تطبيقك وتشغيله.

ملاحظة: 

ليصبح شكل النص والايقونات متناسق كما بالصورة التالية

استبدل كل TabLayout حسب تسميتك لكل قسم وضع فواصل بين إسم القسم وعلامتين التنصيص (").

مثال: 

return "   الرئيسية   ";

case 1:

return "    تعليمية      ";

case 2:

return "    مرئيات       ";

الكود الأول المستخدم في الشرح.

لتحميل الكود ملف Txt اضغط هنا

ملاحظة: مايمكنك تعديله في الكود كالأتي.

أكواد الألوان تبدء برمز #

# = كود اللون الاول

# = كود اللون الثاني

# = كود اللون الثالث

ic_1 = إسم صورة الأيقونة الأولي 

ic_2 = إسم صورة الأيقونة الثانية 

ic_3 = إسم صورة الأيقونة الثالثة

Tablayout1 = النص الأول

Tablayout2 = النص الثاني

Tablayout3 = النص الثالث

viewPager = new android.support.v4.view.ViewPager(this); viewPager.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); MyPagerAdapter adapter = new MyPagerAdapter(); viewPager.setAdapter(adapter); viewPager.setCurrentItem(0); base.addView(viewPager); tabLayout = new android.support.design.widget.TabLayout(this); tabLayout.setTabGravity(tabLayout.GRAVITY_FILL); tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#2196F3")); tabLayout.setTabTextColors(Color.parseColor("#2196F3"), Color.parseColor("#1976D2")); final int[ ] tabIcons = { R.drawable.ic_1, R.drawable.ic_2, R.drawable.ic_3, }; tabLayout.setupWithViewPager(viewPager); tabLayout.getTabAt(0).setIcon(tabIcons[0]); tabLayout.getTabAt(1).setIcon(tabIcons[1]); tabLayout.getTabAt(2).setIcon(tabIcons[2]); cod.addView(tabLayout); } private class MyPagerAdapter extends android.support.v4.view.PagerAdapter { public int getCount() { return 3; } @Override public Object instantiateItem(ViewGroup collection, int position) { LayoutInflater inflater = (LayoutInflater) getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); View v = inflater.inflate(R.layout.empty, null); LinearLayout container = (LinearLayout) v.findViewById(R.id.linear1); if (position == 0) { ViewGroup parent = (ViewGroup) layout1.getParent(); if (parent != null) { parent.removeView(layout1); }container.addView(layout1); } else if (position == 1) { ViewGroup parent = (ViewGroup) layout2.getParent(); if (parent != null) { parent.removeView(layout2); } container.addView(layout2); } else if (position == 2) { ViewGroup parent = (ViewGroup) layout3.getParent(); if (parent != null) { parent.removeView(layout3); } container.addView(layout3); } collection.addView(v, 0); return v; } @Override public void destroyItem(ViewGroup collection, int position, Object view) { collection.removeView((View) view); trash.addView((View) view); } @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Tablayout1"; case 1: return "Tablayout2"; case 2: return "Tablayout3"; default: return null; } } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == ((View) arg1);} @Override public Parcelable saveState() { return null; } } android.support.v4.view.ViewPager viewPager; android.support.design.widget.TabLayout tabLayout; private void foo() {  

الكودالثاني: لعرض Veiw pager بدون أيقونات.

لتحميل الكود الثاني ملف Txt اضغط هنا

viewPager = new android.support.v4.view.ViewPager(this); viewPager.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); MyPagerAdapter adapter = new MyPagerAdapter(); viewPager.setAdapter(adapter); viewPager.setCurrentItem(0); base.addView(viewPager); tabLayout = new android.support.design.widget.TabLayout(this); tabLayout.setTabGravity(tabLayout.GRAVITY_FILL); tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#2196F3")); tabLayout.setTabTextColors(Color.parseColor("#2196F3"), Color.parseColor("#1976D2")); tabLayout.setupWithViewPager(viewPager); cod.addView(tabLayout); } private class MyPagerAdapter extends android.support.v4.view.PagerAdapter { public int getCount() { return 3; } @Override public Object instantiateItem(ViewGroup collection, int position) { LayoutInflater inflater = (LayoutInflater) getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); View v = inflater.inflate(R.layout.empty, null); LinearLayout container = (LinearLayout) v.findViewById(R.id.linear1); if (position == 0) { ViewGroup parent = (ViewGroup) layout1.getParent(); if (parent != null) { parent.removeView(layout1); }container.addView(layout1); } else if (position == 1) { ViewGroup parent = (ViewGroup) layout2.getParent(); if (parent != null) { parent.removeView(layout2); } container.addView(layout2); } else if (position == 2) { ViewGroup parent = (ViewGroup) layout3.getParent(); if (parent != null) { parent.removeView(layout3); } container.addView(layout3); } collection.addView(v, 0); return v; } @Override public void destroyItem(ViewGroup collection, int position, Object view) { collection.removeView((View) view); trash.addView((View) view); } @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Tablayout1"; case 1: return "Tablayout2"; case 2: return "Tablayout3"; default: return null; } } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == ((View) arg1);} @Override public Parcelable saveState() { return null; } } android.support.v4.view.ViewPager viewPager; android.support.design.widget.TabLayout tabLayout; private void foo() {  

الكود الثالث: لعرض الـ View pager بدون أيقونات أو نصوص.

لتحميل الكود الثالث ملف txt أضغط هنا

ملاحظة: لاتعدل شئ في الكود

viewPager = new android.support.v4.view.ViewPager(this); viewPager.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); MyPagerAdapter adapter = new MyPagerAdapter(); viewPager.setAdapter(adapter); viewPager.setCurrentItem(0); base.addView(viewPager); tabLayout = new android.support.design.widget.TabLayout(this); tabLayout.setTabGravity(tabLayout.GRAVITY_FILL); } private class MyPagerAdapter extends android.support.v4.view.PagerAdapter { public int getCount() { return 3; } @Override public Object instantiateItem(ViewGroup collection, int position) { LayoutInflater inflater = (LayoutInflater) getBaseContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); View v = inflater.inflate(R.layout.empty, null); LinearLayout container = (LinearLayout) v.findViewById(R.id.linear1); if (position == 0) { ViewGroup parent = (ViewGroup) layout1.getParent(); if (parent != null) { parent.removeView(layout1); }container.addView(layout1); } else if (position == 1) { ViewGroup parent = (ViewGroup) layout2.getParent(); if (parent != null) { parent.removeView(layout2); } container.addView(layout2); } else if (position == 2) { ViewGroup parent = (ViewGroup) layout3.getParent(); if (parent != null) { parent.removeView(layout3); } container.addView(layout3); } collection.addView(v, 0); return v; } @Override public void destroyItem(ViewGroup collection, int position, Object view) { collection.removeView((View) view); trash.addView((View) view); } @Override public CharSequence getPageTitle(int position) { switch (position) { case 0: return "Google"; case 1: return "Facebook"; case 2: return "YouTube"; default: return null; } } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == ((View) arg1);} @Override public Parcelable saveState() { return null; } } android.support.v4.view.ViewPager viewPager; android.support.design.widget.TabLayout tabLayout; private void foo() {  

وفي الأخير إذا واجهتك أي صعوبات في تطبيق الشرح يمكنك 

تحميل المشروع مضغوط ZIP

إذا كنت لاتعرف كيفية إضافة المشاريع إلى سكيتشوير شاهد هذا المقال

لكيفية تخطي روابط الإختصار إضغط هنـا