How to implement the guide page for Android

First you need to add three stages

Splashactivity (judge whether it is the first login)

Welcome activity (boot page)

ViewPager adapter (ViewPager control adapter)

ViewPager is a control that slides left and right by adding views, which is very suitable to be used as a guide page.

When the application is opened for the first time, first enter the SplashActivity page, judge whether the user opens the application for the first time by the boolean type value of login through the SharePreferences storage, if so, jump to the guidance page, or directly jump to the login page.

In the guidance page, use the addView(View v) method of ViewPager to add multiple views, and add the OnPageChangeListener listener to monitor the user's gesture sliding, obtain the view index through the specified method, so as to realize the view switching.

If you don't say much, go straight to the code:

SplashActivity

public class SplashActivity extends Activity {

private Context context;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

context=SplashActivity.this;

boolean isFirstOpen=SharePerferenceUtil.IsFirstLogin(context);

if(!isFirstOpen){//It's not the first time

Intent intent=new Intent(context,LoginActivity.class);

startActivity(intent);

finish();

return;

}

setContentView(R.layout.activity_splash);

new Handler().postDelayed(new Runnable() {//Jump to the guidance page one second after the first login

@Override

public void run() {

Intent intent=new Intent(context,WelcomeActivity.class);

startActivity(intent);

finish();

overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);

}

}, 1000);

}

}

ViewPagerAdapter

public class ViewPagerAdapter extends PagerAdapter {

private List views;

public ViewPagerAdapter(List views2){

this.views=views2;

}

//Total views obtained

@Override

public int getCount() {

if(views!=null){

return views.size();

}

return 0;

}

//Determine whether the view is generated by the object

@Override

public boolean isViewFromObject(View arg0, Object arg1) {

return (arg0==arg1);

}

//Initializing the view of the position location

@Override

public Object instantiateItem(View container, int position) {

((ViewPager)container).addView(views.get(position), 0);

return views.get(position);

}

//Destroy view of position location

@Override

public void destroyItem(View container, int position, Object object) {

((ViewPager)container).removeView(views.get(position));

}

}

WelcomeActivity

public class WelcomeActivity extends Activity implements OnClickListener,OnPageChangeListener{

private ViewPager viewPager;

private LinearLayout pointLayout;

private ViewPagerAdapter adapter;

private List views;

private Button startBtn;

private int[] guidePics = { R.layout.view_guide1, R.layout.view_guide2,

R.layout.view_guide3 };//Layout of three pictures in the guide page

private ImageView[] dots;//Circle representing view index

private int currentIndex;//Index representing the previous view

private Context context;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_welcome);

context = WelcomeActivity.this;

if (Build.VERSION.SDK_INT >= 19) {// Immersive status bar above android 4.4

Window window = getWindow();

window.addFlags(67108864);

}

AndroidBug5497Workaround.assistActivity(WelcomeActivity.this);//Solving immersive bug s

viewPager = (ViewPager) findViewById(R.id.viewPager);

pointLayout=(LinearLayout) findViewById(R.id.pointLayout);

views = new ArrayList();

initGuidePage();

setViewPagerAdapter();

initDots();

}

@Override

protected void onPause() {

super.onPause();

// If you switch to the background, set not to enter the function guide page next time

// SharePerferenceUtil.setFirstLogin(context, false);

}

//Initialize boot page view

private void initGuidePage() {

for (int i = 0; i < guidePics.length; i++) {

View view=LayoutInflater.from(context).inflate(guidePics[i], null);

if(i==guidePics.length-1){

startBtn=(Button) view.findViewById(R.id.btnStart);

startBtn.setTag("start");

startBtn.setOnClickListener(this);

}

views.add(view);

}

}

//Set up the ViewPager adapter

private void setViewPagerAdapter() {

adapter=new ViewPagerAdapter(views);

viewPager.setAdapter(adapter);

viewPager.setOnPageChangeListener(this);

}

//Initialize circle

private void initDots() {

dots=new ImageView[guidePics.length];

for (int i = 0; i < guidePics.length; i++) {

dots[i]=(ImageView) pointLayout.getChildAt(i);

dots[i].setEnabled(true);

dots[i].setOnClickListener(this);

dots[i].setTag(i);

}

currentIndex=0;

dots[currentIndex].setEnabled(false);

}

@Override

public void onClick(View v) {

if(v.getTag().equals("start")){

enterToLoginActivity();//Click "open now" to enter the landing page

return;

}

//Circle Click to execute

int position=(Integer) v.getTag();

setCurrentView(position);

setCurrentDot(position);

}

//Set current view

private void setCurrentView(int position) {

if(position<0||position>guidePics.length-1){

return;

}

viewPager.setCurrentItem(position);

}

//Set current circle status

private void setCurrentDot(int position) {

if(position<0||position>guidePics.length-1||currentIndex==position){

return;

}

dots[position].setEnabled(false);

dots[currentIndex].setEnabled(true);

currentIndex=position;

}

//Transfer to LoginActivity through SplashActivity

private void enterToLoginActivity() {

Intent intent=new Intent(context,SplashActivity.class);

startActivity(intent);

SharePerferenceUtil.setFirstLogin(context, false);//Setting is not the first login

finish();

overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);

}

@Override

public void onPageScrollStateChanged(int arg0) {

// arg0 ==1 is sliding, arg0==2 is finished, arg0==0 is doing nothing.

}

@Override

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

// arg0: current page, and the page you click to slide

    // arg1: percentage of current page offset

    // arg2: pixel position of current page offset

}

@Override

public void onPageSelected(int position) {

setCurrentDot(position);//Set circle state

}

}

Guide page layout file

< 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"

  >

  < android.support.v4.view.ViewPager

    android:id="@+id/viewPager"

    android:layout_width="match_parent"

    android:layout_height="match_parent"/ >

  < LinearLayout

    android:id="@+id/pointLayout"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

    android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

    android:layout_marginBottom="40dp"

    android:orientation="horizontal"> 

Three small circles at the bottom

    < ImageView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_gravity="center_vertical"

      android:clickable="true"

      android:padding="15dp"

      android:src="@drawable/point_bg"/ >

    < ImageView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_gravity="center_vertical"

      android:clickable="true"

      android:padding="15dp"

      android:src="@drawable/point_bg"/ >

    < ImageView

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_gravity="center_vertical"

      android:clickable="true"

      android:padding="15dp"

      android:src="@drawable/point_bg"/ >

  < /LinearLayout>

< /RelativeLayout>

Guide page view (three), only the last view layout is pasted here

< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:layout_width="match_parent"

  android:layout_height="match_parent" 

>

  < ImageView

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:src="@drawable/guide_3"

    android:scaleType="fitXY" 

/ >

  < Button

    android:id="@+id/btnStart"

    android:layout_width="200dp"

    android:layout_height="50dp"

    android:text="Open immediately"

    android:textColor="@color/orange_express"

    android:layout_centerHorizontal="true"

    android:layout_alignParentBottom="true"

    android:layout_marginBottom="150dp"

    android:background="@drawable/startbtn_bg"/>

< /RelativeLayout>

Tags: Android

Posted on Fri, 29 Nov 2019 20:54:04 -0800 by shadypalm88