آموزش های اندروید با کپی پست قسمت اول (ساخت اینترو اسلایدر با چند کلیک)

خب به امید خدا میخوایم از امروز یه هدفی رو شروع کنیم .

این هدف  چیه…؟

آموزش برنامه نویسی اندروید (البته برنامه نویسی هم نمیشه گفت بش)

وقتی صحبت از برنامه نویسی اندروید میشه کدهای پیچیده و تایپ و کدنویسی های پیچیده تو ذهنمون نقش میبنده

اما از امروز میخوایم این کارو آسون کنیم بطوریکه شما مثلا امروز قراره با چند تا کپی پست ساده یه اینترو اسلایدر

پیشرفته یا همون صفحه معرفی برنامه رو تو یه دقیقه بسازین . فقط یک دقیقه.

خب بریم سراغ آموزش امروز مون (که آموزش اولمون هم هست )

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

اول از همه بریم سراغ کتابخونه ما تو این پروژه از اندروید ایکس استفاده کردیم و بجز کتابخانه های اصلی خود برنامه فقط از

کتابخانه زیر برای ساخت دکمه متریال استفاده کردیم که ضروری که برا کدهای ما ضروریه ولی شما میتونید استفاده نکنید.

implementation 'com.balysv:material-ripple:1.0.2'

خب بریم سراغ لایه های برنامه برا لایه اصلی برنامه کدهای زیر را قرار دهید. اسم لایه (activity_stepper_wizard_light)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:background="@android:color/white"
    android:fitsSystemWindows="false"
    android:orientation="vertical">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="5">



        <androidx.viewpager.widget.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/white"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <ImageButton
            android:id="@+id/bt_close"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:layout_marginStart="300dp"
            android:layout_marginTop="8dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:src="@android:drawable/ic_menu_close_clear_cancel"
            app:srcCompat="@android:drawable/ic_menu_close_clear_cancel" />


    </androidx.constraintlayout.widget.ConstraintLayout>

    <LinearLayout
        android:id="@+id/layoutDots"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white"
        android:gravity="center|top"
        android:orientation="horizontal" />

    <com.balysv.materialripple.MaterialRippleLayout
        style="@style/RippleStyleBlack"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:id="@+id/btn_next"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/grey_10"
            android:text="@string/NEXT"
            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
            android:textColor="@color/grey_90"
            android:textStyle="bold" />

    </com.balysv.materialripple.MaterialRippleLayout>

</LinearLayout>

یه لایه هم جدا برای آیتم های اسلایدرمون میسازیم (مثلا تصاویر متن و توضیحات ) اسم لایه هم (item_stepper_wizard)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/lyt_parent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:padding="18dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="false"
        android:layout_centerHorizontal="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/image"
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:padding="@dimen/spacing_xlarge"
            android:src="@drawable/img_wizard_1" />

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ready to Travel"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium"
            android:textColor="@color/grey_80"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/spacing_middle"
            android:text="Find Featured and Premium \nItem From Our Store"
            android:textAlignment="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
            android:textColor="@color/grey_60" />

    </LinearLayout>
</RelativeLayout>

خب بریم سراغ آقای جاوا (جنسیتش میخوره آقا باشه ) 

یه اکتیویتی با نام (َActivitySteperWizardLight) بسازین و کدهای زیرو  توش بزارین !!!! (امیدوارم مثل من   م…ف نباشید وضعیتم بد خرابه باید یه فکری براش بکنم 🙂  )

import android.content.Context;
import android.content.Intent;
import android.content.SharedPreferences;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;


import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;

import com.herotech.lalaey.utils.Tools;


public class ActivitySteperWizardLight extends AppCompatActivity {

    private static final int MAX_STEP = 4;

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private Button btnNext;
    private String about_description_array[];
    private String about_title_array[];
    // متن تیتر بزرگ
//    private String about_title_array[] = {
//         "",
  //       "",
  //       "",""

//    };
    // توضیحات تیتر کوچک
//    private String about_description_array[] = {
////         "",
//  //       "",
//  //       "","
//    };
    private int about_images_array[] = {
            R.drawable.img_wizard_1,
            R.drawable.img_wizard_2,
            R.drawable.img_wizard_3,
            R.drawable.img_wizard_4
    };
    boolean BareAval= true;
    SharedPreferences sharedP;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_stepper_wizard_light);

        about_title_array = getResources().getStringArray(R.array.about_title);
        about_description_array = getResources().getStringArray(R.array.about_description);

        initComponent();
        Tools.setSystemBarColor(this, R.color.grey_5);
        Tools.setSystemBarLight(this);
    }

    private void initComponent() {
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        btnNext = (Button) findViewById(R.id.btn_next);

        // adding bottom dots
        bottomProgressDots(0);

        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int current = viewPager.getCurrentItem() + 1;
                if (current < MAX_STEP) {
                    // move to next screen
                    viewPager.setCurrentItem(current);
                } else {
                    Intent i =new Intent(ActivitySteperWizardLight.this,MainActivity.class);
                    startActivity(i);
                }
            }
        });

        ((ImageButton)findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent i =new Intent(ActivitySteperWizardLight.this,MainActivity.class);
                startActivity(i);
            }
        });

    }

    private void bottomProgressDots(int current_index) {
        LinearLayout dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
        ImageView[] dots = new ImageView[MAX_STEP];

        dotsLayout.removeAllViews();
        for (int i = 0; i < dots.length; i++) {
            dots[i] = new ImageView(this);
            int width_height = 15;
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(width_height, width_height));
            params.setMargins(10, 10, 10, 10);
            dots[i].setLayoutParams(params);
            dots[i].setImageResource(R.drawable.shape_circle);
            dots[i].setColorFilter(getResources().getColor(R.color.grey_20), PorterDuff.Mode.SRC_IN);
            dotsLayout.addView(dots[i]);
        }

        if (dots.length > 0) {
            dots[current_index].setImageResource(R.drawable.shape_circle);
            dots[current_index].setColorFilter(getResources().getColor(R.color.colorPrimaryLight), PorterDuff.Mode.SRC_IN);
        }
    }

    //  viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(final int position) {
            bottomProgressDots(position);

            if (position == about_title_array.length - 1) {
                btnNext.setText(getString(R.string.GOT_IT));
                btnNext.setBackgroundColor(getResources().getColor(R.color.orange_400));
                btnNext.setTextColor(Color.WHITE);

            } else {
                btnNext.setText(getString(R.string.NEXT));
                btnNext.setBackgroundColor(getResources().getColor(R.color.grey_10));
                btnNext.setTextColor(getResources().getColor(R.color.grey_90));
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };

    /**
     * View pager adapter
     */
    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;

        public MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(R.layout.item_stepper_wizard, container, false);
            ((TextView) view.findViewById(R.id.title)).setText(about_title_array[position]);
            ((TextView) view.findViewById(R.id.description)).setText(about_description_array[position]);
            ((ImageView) view.findViewById(R.id.image)).setImageResource(about_images_array[position]);
            container.addView(view);

            return view;
        }

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

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


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

خب میشه گفت تمومه فقط مونده چند خط کد هم تو main activity بزاریم تا صفحه معرفی برناممون فقط تو اجرای اول نمایش بده :

کد های زیر رو تو on create main activity قرار بدید:

  Boolean isFirstRun = getSharedPreferences("PREFERENCE", MODE_PRIVATE)
                .getBoolean("isFirstRun", true);
        if (isFirstRun) {
            //show start activity
            startActivity(new Intent(MainActivity.this, ActivitySteperWizardLight.class));


        }

        getSharedPreferences("PREFERENCE", MODE_PRIVATE).edit()
                .putBoolean("isFirstRun", false).commit();

تمومه شما الان یه اینترو اسلایدر حرفه ایی یا همون اسلایدر معرفی برنامه یا هرچی اسمشو میزارین ساختین

راستی تو این پروژه ما از چهار تا عکس و دو تا آرایه از نو ع استرینگ تعریف کردیم که عکسها رو خودتون یه چیزی بزارید

ولی میتونید از آرایه های زیر استفاده کنید . بزاریدش تو strings برنامتون.

 <string-array name="about_title">
        <item>طراحی متریال و جذاب</item>
        <item>لالایی های آرام</item>
        <item>بک گراند ها کودکانه همراه با انیمیشن</item>
        <item>هنوز اول راهه</item>
    </string-array>
    <string-array name="about_description">
        <item>این برنامه با طراحی متریال و با جدید ترین متد ها ساخته شده است</item>
        <item>با لالایی های آرام و زیبای کودکانه خوابی آرام برای کودکانتان فراهم کنید</item>
        <item>بکگراند های کودکانه بهمراه انیمیشن آرام</item>
        <item>هنوز اول راهه این برنامه همواره آپدیت خواهد شد.</item>
    </string-array>

اگه مشکلی داشتین تو نظرات در خدمتتون هستم و سعی میکنم خیلی زود یه ویدیو هم برای آموزش درست کنم یا حق.