ViewPager实现欢迎界面的滑动切换效果

最新推荐文章于 2017-04-17 21:38:00 发布

IT老王

最新推荐文章于 2017-04-17 21:38:00 发布

阅读量620

点赞数 2

本文链接：https://blog.csdn.net/guang_wen/article/details/51334457

版权

在进行app开发的过程中,我们经常会用到这种效果,在第一次打开app 的时候会进入一系列的图片滑动界面,也就是我们经常说的引导界面,但是在第一次打开以后,就不会再进去这个引导界面,而是显示一个splash界面以后直接跳转到主界面

具体的效果图我就不贴上来了,首先我们应该创建三个xml文件分别是如下图片中的三个:

其中activity_main没有什么要特殊设置的,其他的两个布局文件分别如下所示:

activity_splash的布局代码:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/splash" />

</FrameLayout>

activity_guid的代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

    <!-- <com.itheima.news06.act.view.CustomViewPager -->
    <!-- android:id="@+id/viewpager" -->
    <!-- android:layout_width="match_parent" -->
    <!-- android:layout_height="match_parent" > -->
    <!-- </com.itheima.news06.act.view.CustomViewPager> -->

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="25dp"
        android:text="进入主界面"
        android:visibility="invisible" />

    <RelativeLayout
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
            
        </LinearLayout>

        <View
            android:id="@+id/dot_focus"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/dot_focus" />
    </RelativeLayout>
</RelativeLayout>

在这个布局文件中用到了v4包下的ViewPager,将v4包导入以后build一下,然后再引用就可以了.

最主要的是我们的逻辑,上述功能的逻辑是首先进入splash这个界面,进入了以后进行判断,看是否是第一次进入这个app如果是第一次,那么久直接跳转到guidActivity,如果不是第一次那么就直接跳转到主界面,在书写的过程中要将是否是第一次进入这个进行存储,在进行滑动切换这个逻辑中,最主要的就是设置adapter然后进行相关的切换.

SplashActivity的跳转逻辑代码如下所示:

package com.iFly.chan.ui;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;

import com.iFly.chan.MainActivity;
import com.iFly.chan.R;
import com.iFly.chan.utils.SharedPreferenTool;

public class SplashActivity extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_splash);
		
		//延迟三秒以后启动,如果是第一次启动就进入引导界面,不是第一次启动就进入主界面
		new Handler().postDelayed(new Runnable() {
			
			@Override
			public void run() {
				boolean isFirst = SharedPreferenTool.getBoolean(getApplicationContext(), "isfirst", false);
				if (isFirst) {
					//第二次打开直接进入主界面
					Intent intent = new Intent(SplashActivity.this,MainActivity.class);
					startActivity(intent);
					SplashActivity.this.finish();
				}else {
					//第一次打开进入引导界面
					//记录第一次进入的状态值
					isFirst = true;
					SharedPreferenTool.saveBoolean(getApplicationContext(), "isfirst", isFirst);
					Intent intent = new Intent(SplashActivity.this,GuidActivity.class);
					startActivity(intent);
					finish();
					
				}
			}
		}, 2000);
	}
}

在进行判断是否是第一次以后,要把相关的isFirst的值进行修改,然后进行存储,否则的话会导致操作无效

如果是第一次进入这个app,那么久跳转到相应的guidActivity这个界面进行滑动切换的操作,GuidActivity的逻辑代码如下所示:

package com.iFly.chan.ui;

import java.util.ArrayList;
import java.util.List;

import com.iFly.chan.MainActivity;
import com.iFly.chan.R;
import com.iFly.chan.ui.view.RotatePageTransformer;
import com.iFly.chan.utils.DensityUtil;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class GuidActivity extends Activity {

	// 引导界面图片的集合
	private int[] imageResId = { R.drawable.fo1, R.drawable.pu1, R.drawable.pu2 };
	private LinearLayout ll_point_group;
	private View dot_focus;
	private ViewPager viewpager;
	private Button button;
	private List<ImageView> images;
	private int dot_width;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_guid);
		// 界面初始化的方法
		initView();
	}

	/**
	 * 界面初始化的方法
	 */
	private void initView() {
		ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
		dot_focus = findViewById(R.id.dot_focus);
		viewpager = (ViewPager) findViewById(R.id.viewpager);
		button = (Button) findViewById(R.id.button);

		// 跳转按钮的点击事件 点击跳转到主界面
		button.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Intent intent = new Intent(GuidActivity.this, MainActivity.class);
				startActivity(intent);
				GuidActivity.this.finish();
			}
		});
		
		// 数据初始化的方法
		initData();
		
		//对不同的切换页面进行设置相对应的图片
		viewpager.setAdapter(new GuideAdapter());
		
		//设置切换页面的方式
		viewpager.setPageTransformer(true, new RotatePageTransformer());

		//设置page的点击滑动监听事件
		viewpager.setOnPageChangeListener(new OnPageChangeListener() {

			//对选中的页面进行判断 决定是否可以显示button
			@Override
			public void onPageSelected(int position) {
				// TODO Auto-generated method stub

				if (position == images.size() - 1) {   //是最后一张切换的图片   显示跳转按钮
					button.setVisibility(View.VISIBLE);
				}else {                                //不是最后一张切换的图片   不显示跳转按钮
					button.setVisibility(View.GONE);
				}
			}
			
			@Override
			public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
				// TODO Auto-generated method stub
				//根据计算，实时设置选中点的平移，让他跟随我们手指进行滑动
				int translationX = (int) (dot_width*(position + positionOffset));
				dot_focus.setTranslationX(translationX);
			}
			
			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub
				
			}
		});
		//切换的时候下面的小点也随之改变颜色的操作
		dot_focus.postDelayed(new Runnable() {
			
			@Override
			public void run() {
				// TODO Auto-generated method stub
				dot_width = ll_point_group.getChildAt(1).getLeft() - ll_point_group.getChildAt(0).getLeft();
				System.out.println("dot_width="+dot_width);
			}
		}, 20);
	}
	
	/**
	 * 数据初始化的方法
	 */
	private void initData() {
		// 创建一个集合用来存储相关的imageview
		images = new ArrayList<ImageView>();
		// 遍历图片的id将图片添加到集合中去
		for (int i = 0; i < imageResId.length; i++) {
			ImageView iv = new ImageView(getApplicationContext());
			iv.setBackgroundResource(imageResId[i]);
			images.add(iv);

			// 设置下面的指示小点
			View view = new View(getApplicationContext());
			LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
					DensityUtil.dip2px(getApplicationContext(), 10),
					DensityUtil.dip2px(getApplicationContext(), 10));
			if (i != 0) {
				params.leftMargin = DensityUtil.dip2px(getApplicationContext(), 10);
			}

			view.setBackgroundResource(R.drawable.dot_normal);
			view.setLayoutParams(params);

			ll_point_group.addView(view);
		}
	}
	
	private class GuideAdapter extends PagerAdapter{

		@Override
		public int getCount() {
			// TODO Auto-generated method stub
			return images.size();
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			// TODO Auto-generated method stub
			return view == object;
		}
		
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// TODO Auto-generated method stub
			container.addView(images.get(position));
			return images.get(position);
		}
		
		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			// TODO Auto-generated method stub
			container.removeView((View) object);
		}
	}
}

以上就是这个功能的相关代码逻辑,但是大家不要忘记了在manifest这个文件中进行相关的注册等操作,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.iFly.chan"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="11"
        android:targetSdkVersion="18" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Light.NoTitleBar.Fullscreen" >
        <activity
            android:name="com.iFly.chan.MainActivity"
            android:label="@string/app_name" >
        </activity>

        <!-- 欢迎界面的Activity -->
        <activity
            android:name=".ui.SplashActivity"
            android:screenOrientation="portrait" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- 引导界面的activity -->
        <activity android:name=".ui.GuidActivity" >
        </activity>
    </application>

</manifest>