شرح تصميم لصفحة البداية في التطبيق | onboarding android studio

شرح تصميم لصفحة البداية في التطبيق | onboarding android studio

كما نعلم ان صفحة البداية واحده من اهم الصفحات التي يتم وضعها في بداية عمل التطبيق لكي توضح للمستخدم مزايا التطبيق وامكانية التعامل معه , وهذه تعد المقالة الثانية لنا حول هذه الصفحة حيث في مقالة سابقه قدمنا لك صفحة onboarding اخرى بتصميم مختلف من هذا ولكن كود اليوم ابسط من السابق في نهايه الامر القرار متروك لك في اختيار هذه الصفحة او الصفحة السابقه والتعديل على التصميم الخاص بها .

هل تريد معرفة المزيد حول تطوير تطبيقات Android أو إنشاء تطبيق اندرويد خاص بك؟ هل تريد معرفة المزيد من المعلومات عن لغات البرمجة المستخدمة في صناعة تطبيقات Android؟ إذا أجبت بنعم ، فأنت في المكان الصحيح لان موقعنا يهتم بكل تفاصيل تطوير تطبيقات الاندرويد ونقدم لك اكواد جاهزه يمكنك استخدامها في تطبيقك لتكمل عملك . ولأن لغات برمجة Android لها استخدامات مختلفة ، يجب عليك فهمها والتركيز في المبادئ الخاصة بها وتجربة اكثر من لغة لمعرفة اللغة المناسبة لتطبيقك أو لاستخدام اللغة الصحيحة للتطبيق الصحيح إذا كنت تعمل في هذا المجال.

ربما تتساءل احيانا عن عن سبب أهمية تطبيقات الهواتف الذكية. وبكل بساطة أصبحت التكنولوجيا ذات أهمية متزايدة في حياة الكثير من الاشخاص اليومية نتيجة للتقدم التكنولوجي الذي نلاحظه  في العالم. ومن أهم التكتيكات المستخدمة في عمليات التسويق ، والتي أدت بالعديد من المشاريع والشركات إلى التركيز بشكل كبير على البرمجة وتصميم تطبيقات الهاتف المحمول من أجل تحقيق نسب التسويق المطلوبة ، وتحسين التواصل مع العملاء ، وتعزيز الإيرادات عبر شبكة الإنترنت العنكبوتيه .

تصميم لصفحة الMainActivity بواسطة xml

بكل بساطة التصميم عباره عن ViewPager للتبديل بين العناصر وفي الاسفل عباره عن زر للانتقال الى الصفحة التاليه او الرجوع للصفحة السابقة ومؤشر .

main_activity.xml

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/dark"
        android:gravity="center_vertical"
        tools:context=".intent_data.MainActivity2">


        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toTopOf="@id/constraint"
            android:layout_width="match_parent"
            android:layout_height="0dp" />


        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraint"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_width="match_parent"
            android:layout_height="50dp" >

            <LinearLayout
                android:id="@+id/layout"
                android:orientation="horizontal"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/back"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:textSize="22sp"
                android:text="back"
                android:visibility="invisible"
                android:layout_marginStart="10dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/next"
                android:text="next"
                android:textColor="@color/white"
                android:textStyle="bold"
                android:textSize="22sp"
                android:layout_marginEnd="10dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />



        </androidx.constraintlayout.widget.ConstraintLayout>


    </androidx.constraintlayout.widget.ConstraintLayout>
    

تصميم لتغيير العناصر اثناء التنقل بين الصفحات 

في هذه الصفحة سوف نقوم بعمل layout تحتوي على صورة واسفلها نص وهذا ما سوف يظهر اثناء التبديل والتحريك لليمين واليسار قم بعمل التصميم الذي تريدة .

list_onBoarding.xml

 <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/img"
            android:src="@drawable/ic_points"
            android:layout_width="200dp"
            android:layout_height="200dp" />

        <TextView
            android:id="@+id/txt"
            android:padding="10dp"
            android:textSize="15sp"
            android:textColor="@color/white"
            android:layout_margin="10dp"
            android:textAlignment="center"
            android:text="gee coders is here,"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
    

إنشاء adapter لتغيير الصفحات والعناصر اثناء النقل

الان سوف نقوم بعمل ادبتر يحتوي على النصوص والصور كما هو موضح يمكنك نسخ الكود كما هو واضافته لديك في اكواد الجافا التي توجد لديك في التطبيق .

AdapterOnBoarding.java

public class AdapterOnBoarding extends PagerAdapter {
    Context context;
    LayoutInflater layoutInflater;

    public AdapterOnBoarding(Context context) {
        this.context = context;
    }

    public String[] txt = {
            "dasdasd",
            "asdasd",
            "asdasd",
    };

    public int[] img = {
            R.drawable.ic_personal,
            R.drawable.ic_healing,
            R.drawable.ic_points,
    };

    @Override
    public int getCount() {
        return txt.length;
    }

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
        View view = layoutInflater.inflate(R.layout.list_onboarding , container , false);

        TextView textView;
        ImageView imageView;
        textView = view.findViewById(R.id.txt);
        imageView = view.findViewById(R.id.img);

        textView.setText(txt[position]);
        imageView.setImageResource(img[position]);

        container.addView(view);
        return view;
    }

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

}

كود صفحة الmain للتعامل مع عناصر صفحة البداية

الان ياتي دور تشغيل الكود وهنا سوف نضع ان النقر على زر الnext ينقل الصفحة الى الصفحة الاخرى وبعدها قمنا بعمل methode تستقبل منا قيمة الposition وبناء على القيمة تظهر العناصر او تخفيها وهذا هو الكود ببساطة .

mainActivity.java

public class MainActivity2 extends AppCompatActivity {
    ActivityMain2Binding binding;
    AdapterOnBoarding adapter;
    TextView[] mDots;
    int currentPage = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding= DataBindingUtil.setContentView(this, R.layout.activity_main2);

        adapter = new AdapterOnBoarding(this);
        binding.viewpager.setAdapter(adapter);


        addDotsIndicator(0);
        binding.viewpager.addOnPageChangeListener(viewListener);

        binding.next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                binding.viewpager.setCurrentItem(currentPage +1);
            }
        });

        binding.back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                binding.viewpager.setCurrentItem(currentPage - 1);
            }
        });
    }

    // Make a pointer to keep track of pages
    public void addDotsIndicator(int position){
        mDots = new TextView[3];
        binding.layout.removeAllViews();

        for (int i=0 ; i<mDots.length ; i++) {
            mDots[i] = new TextView(this);
            mDots[i].setText(Html.fromHtml("&#8226"));
            mDots[i].setTextSize(35);
            mDots[i].setTextColor(getResources().getColor(R.color.whiteOpacity));
            binding.layout.addView(mDots[i]);
        }
        if(mDots.length > 0) {
            mDots[position].setTextColor(getResources().getColor(R.color.white));
        }
    }

    ViewPager.OnPageChangeListener viewListener = new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            addDotsIndicator(position);
            currentPage = position;

            if (position == 0) {
                binding.next.setEnabled(true);
                binding.back.setEnabled(false);
                binding.back.setVisibility(View.INVISIBLE);
                binding.next.setText("next");
                binding.back.setText("");
            } else if (position == mDots.length - 1 ) {
                binding.next.setEnabled(true);
                binding.back.setEnabled(true);
                binding.back.setVisibility(View.VISIBLE);
                binding.next.setText("Finish");
                binding.back.setText("Back");
            } else {
                binding.next.setEnabled(true);
                binding.back.setEnabled(true);
                binding.back.setVisibility(View.VISIBLE);
                binding.next.setText("next");
                binding.back.setText("back");
            }

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };

}