利用Viewpager实现引导界面
利用viewPager实现应用的引导界面
不废话，先上效果图：



这里是随便从网上盗了几张引导界面的图，意思到了就行了。
引导界面，肯定是在用户第一次打开的时候显示，第二次打开程序就不需要显示了。这里比较简单，就直接上代码了：
package students.startuitest;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
/**
* Created by 24540 on 2016/11/3.
*/
public class WelcomeActivity extends AppCompatActivity {
private boolean mIsFirstUse;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_welcome);
SharedPreferences preferences = getSharedPreferences("mIsFirstUse",MODE_PRIVATE);
mIsFirstUse = preferences.getBoolean("mIsFirstUse", true);
if(mIsFirstUse){//如果是第一次进入打开程序，设置进入引导界面，否则直接进入主界面
Intent intent = new Intent(this,GuideActivity.class);
startActivity(intent);
}else{
Intent intent = new Intent(this,MainActivity.class);
startActivity(intent);
}
SharedPreferences.Editor editor = preferences.edit();
editor.putBoolean("mIsFirstUse",false);
editor.commit();
}
}xml布局文件比较简单，这里就不贴代码了。下面重头戏来了，下面就是我们引导界面实现的主要逻辑，先看代码：
views = new ArrayList<>();
private ViewPagerAdapter mAdapter;
private View view1,view2,view3,view4;
private Button mState;
//底部小点图片
private LinearLayout mPoint;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guilde);
initView();
initData();
}
private void initData() {
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
mAdapter = new ViewPagerAdapter(views);
viewPager.setOnPageChangeListener(this);
addPoint();
viewPager.setAdapter(mAdapter);
// viewPager.setPageTransformer(true,new DepthTransformer());//设置翻页动画效果
viewPager.setPageTransformer(true,new ZoomOutTransformer());//设置淡入淡出动画效果
mState.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent= new Intent(GuideActivity.this,MainActivity.class);
startActivity(intent);
}
});
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
mPoint = (LinearLayout) findViewById(R.id.llPoint);
LayoutInflater inflater =LayoutInflater.from(this);
view1 = inflater.inflate(R.layout.view_guide001,null);
view2 = inflater.inflate(R.layout.view_guide002,null);
view3 = inflater.inflate(R.layout.view_guide003,null);
view4 = inflater.inflate(R.layout.view_guide004,null);
mState = (Button) view4.findViewById(R.id.start_use);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Log.d("TAG",position+"pageSelected");
monitorPoint(position);
// showCurrentIndex(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
class ViewPagerAdapter extends PagerAdapter{
//这里必须重写以下方法，
private List
views;
public ViewPagerAdapter(List
views) {
this.views = views;
}
@Override
public int getCount() {
return views.size();
}
//销毁postion位置的界面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
(container).removeView(views.get(position));
}
/**
* 初始化position位置的界面
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);
container.addView(view);
return view;
}
//判断是否由对象生成界面
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
}
/**
* 添加小圆点
*/
private void addPoint(){
for (int i = 0; i < views.size(); i++) {
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if(i<1){
params.setMargins(0,0,0,0);
}else{
params.setMargins(10,0,0,0);
}
ImageView iv = new ImageView(this);
iv.setLayoutParams(params);
iv.setBackgroundResource(R.mipmap.select_select);
mPoint.addView(iv);
}
mPoint.getChildAt(0).setBackgroundResource(R.mipmap.select);
}
/**
* 标识当前查看进度
* @param position
*/
private void monitorPoint(int position){
for (int i = 0; i <=views.size(); i++) {
if(i==position){
mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select_select);
}else{
mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select);
}
}
}
/**
* 标识当前查看的是那个目录
* @param position
*/
private void showCurrentIndex(final int position){
for (int i = 0; i < views.size(); i++) {
if(i==position){
mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select);
}else{
mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select_select);
}
}
}
}" data-snippet-id="ext.1421e96c203e2e727d8c5474b63a8efa" data-snippet-saved="false" data-codota-status="done">
package students.startuitest;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
import students.startuitest.transormer.ZoomOutTransformer;
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
private ViewPager viewPager;
private List views = new ArrayList<>();
private ViewPagerAdapter mAdapter;
private View view1,view2,view3,view4;
private Button mState;
//底部小点图片
private LinearLayout mPoint;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guilde);
initView();
initData();
}
private void initData() {
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
mAdapter = new ViewPagerAdapter(views);
viewPager.setOnPageChangeListener(this);
addPoint();
viewPager.setAdapter(mAdapter);
// viewPager.setPageTransformer(true,new DepthTransformer());//设置翻页动画效果
viewPager.setPageTransformer(true,new ZoomOutTransformer());//设置淡入淡出动画效果
mState.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent= new Intent(GuideActivity.this,MainActivity.class);
startActivity(intent);
}
});
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
mPoint = (LinearLayout) findViewById(R.id.llPoint);
LayoutInflater inflater =LayoutInflater.from(this);
view1 = inflater.inflate(R.layout.view_guide001,null);
view2 = inflater.inflate(R.layout.view_guide002,null);
view3 = inflater.inflate(R.layout.view_guide003,null);
view4 = inflater.inflate(R.layout.view_guide004,null);
mState = (Button) view4.findViewById(R.id.start_use);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
Log.d("TAG",position+"pageSelected");
monitorPoint(position);
// showCurrentIndex(position);
}
@Override
public void onPageScrollStateChanged(int state) {
}
class ViewPagerAdapter extends PagerAdapter{
//这里必须重写以下方法，
private List views;
public ViewPagerAdapter(List views) {
this.views = views;
}
@Override
public int getCount() {
return views.size();
}
//销毁postion位置的界面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
(container).removeView(views.get(position));
}
/**
* 初始化position位置的界面
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);
container.addView(view);
return view;
}
//判断是否由对象生成界面
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
}
/**
* 添加小圆点
*/
private void addPoint(){
for (int i = 0; i < views.size(); i++) {
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
if(i<1){
params.setMargins(0,0,0,0);
}else{
params.setMargins(10,0,0,0);
}
ImageView iv = new ImageView(this);
iv.setLayoutParams(params);
iv.setBackgroundResource(R.mipmap.select_select);
mPoint.addView(iv);
}
mPoint.getChildAt(0).setBackgroundResource(R.mipmap.select);
}
/**
* 标识当前查看进度
* @param position
*/
private void monitorPoint(int position){
for (int i = 0; i <=views.size(); i++) {
if(i==position){
mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select_select);
}else{
mPoint.getChildAt(position).setBackgroundResource(R.mipmap.select);
}
}
}
/**
* 标识当前查看的是那个目录
* @param position
*/
private void showCurrentIndex(final int position){
for (int i = 0; i < views.size(); i++) {
if(i==position){
mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select);
}else{
mPoint.getChildAt(i).setBackgroundResource(R.mipmap.select_select);
}
}
}
}
这里值的注意的是，实现ViewPagerAdapter时，必须实现里面的四个方法
@Override
public int getCount() {
return views.size();
}
//销毁postion位置的界面
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
(container).removeView(views.get(position));
}
/**
* 初始化position位置的界面
*/
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = views.get(position);
container.addView(view);
return view;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}否则会抛出异常，以前就是因为只实现了其中的两个方法而导致了奔溃。
下面是对应的xml文件布局
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
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/llPoint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="24.0dip"
android:gravity="center_horizontal"
android:orientation="horizontal"
/>
RelativeLayout>
参考了鸿洋大神的博客，添加了一点特殊的view的切换效果。源码如下,具体原理请参考原作者.
package students.startuitest.transormer;
import android.support.v4.view.ViewPager;
import android.view.View;
/**
* 设置翻页的动画效果
* Created by 24540 on 2016/11/4.
*/
public class DepthTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) {
view.setAlpha(0);
} else if (position <= 0) {
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) {
view.setAlpha(1 - position);
view.setTranslationX(pageWidth * -position);
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else {
view.setAlpha(0);
}
}
}
package students.startuitest.transormer;
import android.annotation.SuppressLint;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.View;
/**
* Created by 24540 on 2016/11/4.
*/
public class ZoomOutTransformer implements ViewPager.PageTransformer{
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
@SuppressLint("NewApi")
public void transformPage(View view, float position)
{
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
Log.e("TAG", view + " , " + position + "");
if (position < -1)
{ // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) //a页滑动至b页 ； a页从 0.0 -1 ；b页从1 ~ 0.0
{ // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0)
{
view.setTranslationX(horzMargin - vertMargin / 2);
} else
{
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
/ (1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else
{ // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
使用方法在GuideActivity中有提示，主要实现逻辑代码
viewPager.setPageTransformer(true,new DepthTransformer());//设置翻页动画效果
viewPager.setPageTransformer(true,new ZoomOutTransformer());//设置淡入淡出动画效果至此，引导界面基本完成了。最后，贴上manifest中的代码：
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="students.startuitest">
<application
android:allowBackup="true"
android:icon="@mipmap/select"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".WelcomeActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
intent-filter>
activity>
<activity android:name=".GuideActivity"/>
<activity android:name=".MainActivity"/>
application>
manifest>引导界面xml的一个布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/guide001">
LinearLayout>
好了，利用viewPager实现应用程序的引导界面就到这里了，奉上源码下载地址.
参考博客：http://blog.csdn.net/lmj623565791/article/details/40411921
http://blog.csdn.net/li5685918/article/details/51547681