实用的viewpager 做一个引导动画(强调方法没有美化)

原创 2015年07月07日 18:50:59

思路:
1.利用viewpager控件自带的水平滚动特性,将想要展现的内容用xml布局文件一张张写出来
2.用一个linearlayout包裹张数个imageview,src是一个小圆点,另外准备一个大圆点,给imageview定义一个索引值
3.首先进入动画时第一个原点是大的,进入第二张是将第一张的还原,第二章变大,这里我是用style样式setenabled方法来实现的

这个页面在应用还在加载时调用,负责判断是去引导页面还是直接去主页,如果首次进入或重新安装了此应用都将去往引导页面

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

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="等待加载中!!!!"
        android:textColor="#f0f0f0"/>
</LinearLayout>

linearlayout里面包裹着四个imageview,src里面的dot是一个xml文件,下面会有给出

<?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.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
        android:layout_gravity="bottom|center_horizontal" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center_horizontal"
            android:src="@drawable/dot" />
    </LinearLayout>

</FrameLayout>

将想要呈现的幻灯片以这样的方式存储,这是其中的一张,其他的这要把background改一下就行了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="@drawable/img1">
</LinearLayout>

判断是否是第一次加载进来的具体实现

public class SplashActivity extends Activity {

    boolean isFirstIn = false;
    private SharedPreferences preferences;
    private static final int GO_HOME = 1000;
    private static final int GO_GUIDE = 1001;
    // 延迟3秒
    private static final long SPLASH_DELAY_MILLIS = 3000;

    private static final String SHAREDPREFERENCES_NAME = "first_pref";

    /**
     * Handler:跳转到不同界面
     */
    private boolean isInstalled(Context context, String packageName) {
        boolean hasInstalled = false;
        PackageManager pm = context.getPackageManager();
        List<PackageInfo> list = pm
                .getInstalledPackages(PackageManager.PERMISSION_GRANTED);
        for (PackageInfo p : list) {
            if (packageName != null && packageName.equals(p.packageName)) {
                hasInstalled = true;
                break;
            }
        }
        return hasInstalled;
    }

    private Handler mHandler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            switch (msg.what) {
            case GO_HOME:
                goHome();
                break;
            case GO_GUIDE:
                goGuide();
                break;
            }
            super.handleMessage(msg);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);

        init();
        if (isInstalled(getApplicationContext(),
                "com.example.viewpagerfragment")) {
            isFirstIn = true;
        }

        // 判断程序与第几次运行,如果是第一次运行则跳转到引导界面,否则跳转到主界面
        if (!isFirstIn) {
            // 使用Handler的postDelayed方法,3秒后执行跳转到MainActivity
            mHandler.sendEmptyMessageDelayed(GO_HOME, SPLASH_DELAY_MILLIS);
        } else {
            mHandler.sendEmptyMessageDelayed(GO_GUIDE, SPLASH_DELAY_MILLIS);
        }

    }

    private void init() {
        // 读取SharedPreferences中需要的数据
        // 使用SharedPreferences来记录程序的使用次数
        preferences = getSharedPreferences(SHAREDPREFERENCES_NAME, MODE_PRIVATE);

        // 取得相应的值,如果没有该值,说明还未写入,用true作为默认值
        isFirstIn = preferences.getBoolean("isFirstIn", true);

    }

    private void goHome() {
        Intent intent = new Intent(SplashActivity.this, MainActivity.class);
        SplashActivity.this.startActivity(intent);
        SplashActivity.this.finish();
    }

    private void goGuide() {
        Intent intent = new Intent(SplashActivity.this, GuideActivity.class);
        SplashActivity.this.startActivity(intent);
        SplashActivity.this.finish();
    }

}

正式开始引导

public class GuideActivity extends Activity implements OnPageChangeListener{

     private ViewPager vp;  
        private ViewPagerAdapter vpAdapter;  
        private List<View> views;  

        // 底部小点图片  
        private ImageView[] dots;  

        // 记录当前选中位置  
        private int currentIndex;  

        @Override  
        protected void onCreate(Bundle savedInstanceState) {  
            super.onCreate(savedInstanceState);  
            setContentView(R.layout.guide);  

            // 初始化页面  
            initViews();  

            // 初始化底部小点  
            initDots();  
        }  

        private void initViews() {  
            LayoutInflater inflater = LayoutInflater.from(this);  

            views = new ArrayList<View>();  
            // 初始化引导图片列表  
            views.add(inflater.inflate(R.layout.first_guide, null));  
            views.add(inflater.inflate(R.layout.second_guide, null));  
            views.add(inflater.inflate(R.layout.third_guide, null));  
            views.add(inflater.inflate(R.layout.fouth_guide, null));  

            // 初始化Adapter  
            vpAdapter = new ViewPagerAdapter(views, this);  

            vp = (ViewPager) findViewById(R.id.viewpager);  
            vp.setAdapter(vpAdapter);  
            // 绑定回调  
            vp.setOnPageChangeListener(this);  
        }  

        private void initDots() {  
            LinearLayout ll = (LinearLayout) findViewById(R.id.ll);  

            dots = new ImageView[views.size()];  

            // 循环取得小点图片  
            for (int i = 0; i < views.size(); i++) {  
                dots[i] = (ImageView) ll.getChildAt(i);  
                dots[i].setEnabled(true);// 都设为灰色  
            }  

            currentIndex = 0;  
            dots[currentIndex].setEnabled(false);// 设置为白色,即选中状态  
        }  

        private void setCurrentDot(int position) {  
            if (position < 0 || position > views.size() - 1  
                    || currentIndex == position) {  
                return;  
            }  

            dots[position].setEnabled(false);  
            dots[currentIndex].setEnabled(true);  

            currentIndex = position;  
        }  

        // 当滑动状态改变时调用  
        @Override  
        public void onPageScrollStateChanged(int arg0) {  
        }  

        // 当当前页面被滑动时调用  
        @Override  
        public void onPageScrolled(int arg0, float arg1, int arg2) {  
        }  

        // 当新的页面被选中时调用  
        @Override  
        public void onPageSelected(int arg0) {  
            // 设置底部小点选中状态  
            setCurrentDot(arg0);  
        }  
}

viewpager自定义适配器

public class ViewPagerAdapter extends PagerAdapter {

    // 界面列表
    private List<View> views;
    private Activity activity;
    private static final String SHAREDPREFERENCES_NAME = "first_pref";

    public ViewPagerAdapter(List<View> views, Activity activity) {
        this.views = views;
        this.activity = activity;
    }

    // 销毁arg1位置的界面
    @Override
    public void destroyItem(View arg0, int arg1, Object arg2) {
        ((ViewPager) arg0).removeView(views.get(arg1));
    }

    @Override
    public void finishUpdate(View arg0) {
    }

    // 获得当前界面数
    @Override
    public int getCount() {
        if (views != null) {
            return views.size();
        }
        return 0;
    }

    // 初始化arg1位置的界面
    @Override
    public Object instantiateItem(View arg0, int arg1) {
        ((ViewPager) arg0).addView(views.get(arg1), 0);
        if (arg1 == views.size() - 1) {
            Button mStartWeiboImageButton = (Button) arg0
                    .findViewById(R.id.btn_begin);
            mStartWeiboImageButton.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    // 设置已经引导
                    setGuided();
                    goHome();
                }

            });
        }
        return views.get(arg1);
    }

    private void goHome() {
        // 跳转
        Intent intent = new Intent(activity, MainActivity.class);
        activity.startActivity(intent);
        activity.finish();
    }

    /**
     * 
     * method desc:设置已经引导过了,下次启动不用再次引导
     */
    private void setGuided() {
        SharedPreferences preferences = activity.getSharedPreferences(
                SHAREDPREFERENCES_NAME, Context.MODE_PRIVATE);
        Editor editor = preferences.edit();
        // 存入数据
        editor.putBoolean("isFirstIn", false);
        // 提交修改
        editor.commit();
    }

    // 判断是否由对象生成界面
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return (arg0 == arg1);
    }

    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {
    }

    @Override
    public Parcelable saveState() {
        return null;
    }

    @Override
    public void startUpdate(View arg0) {
    }

}

Android 1分钟教你打造酷炫的引导页(实现ViewPager淡入淡出切换)

转自http://blog.csdn.net/qq_22770457/article/details/52133288 纯手工自制的Android引导页,实现了Viewpager切换的淡入淡出(...
  • lty406910111
  • lty406910111
  • 2017年06月07日 14:12
  • 752

Android项目中的欢迎界面和引导页:动画和ViewPager

每个安卓的应用都会有欢迎界面和引导页,引导页一般只是在第一次进入或者更新应用进入的时候才会出现。我这里使用另外一种更加灵活和扩展性的方式来写这个小Demo,首先看一下效果图: 这个Demo可扩展的地...
  • linxi7
  • linxi7
  • 2016年05月13日 16:49
  • 2588

用ViewPager为你的APP引导页添加视差滚动(Parallax Scrolling)效果

什么是视差滚动 视差滚动效果是怎样的 如何实现视差滚动效果 1 通过使用ViewPager实现页面的左右滑动 2 ViewPager有办法实现ParallaxScrolling吗 3 ViewPage...
  • sara_loveyou
  • sara_loveyou
  • 2015年03月13日 17:44
  • 2022

Android进阶篇之引导页系列之ViewPager静态引导

引导页???这是多少人写过的啊,还写,猪吗? 相信很多小伙伴就已经火大了。 其实呢,主要是我进入职场的头一个月基本上就全泡在了引导页上,遇见过各种奇葩心塞的bug 所以在此,想写一系列关于此类的...
  • ye_scofield
  • ye_scofield
  • 2015年01月29日 16:08
  • 3350

Android进阶篇之引导页系列之强大的SurfaceView实现动画引导页(1)

1、框架 与之前将过得ViewPager和Animation不一样,这次使用的是SurfaceView游戏开发框架。 2、讲解例子 使用的是搜狗地图6.2.0版本开启动画引导页。这个动画不知小伙伴们见...
  • ye_scofield
  • ye_scofield
  • 2015年04月20日 19:03
  • 3831

Android进阶篇之引导页系列之ViewPager实现Animation动画引导页

这次就拿模仿搜狗地图6.3版本开启动画的demo来讲解,先看效果,第一页就是一个指针在转动,第二页那个小车从下面开向上面去,第三页云朵在飘动和小车在上下起伏,第四页钱币不断的洒落进存储罐。。。...
  • ye_scofield
  • ye_scofield
  • 2015年04月02日 15:08
  • 16902

简单的解决引导页Viewpager卡顿问题

简单的解决引导页Viewpager卡顿问题
  • E_mKs
  • E_mKs
  • 2017年03月10日 22:41
  • 533

ViewPager+属性动画 实现炫酷视差动画效果

ViewPager有一个setPageTransform()方法可以实现很多酷炫的动画效果 先来个仿QQ的侧滑面板效果 vp.setPageTransformer(true, new Page...
  • B1ueKid
  • B1ueKid
  • 2016年05月13日 15:02
  • 3814

Ubuntu14.04引导界面美化(burg)

Ubuntu14.04引导界面美化(burg)
  • u011762313
  • u011762313
  • 2015年08月07日 13:04
  • 2614

viewpager带圆点的过渡页

Viewpager实现带下面带圆点的过渡页,先来效果图实现这个功能需要几个步骤,如下 1、布局用的是FrameLayout,需要了解的可以在网上百度。简单来说就是,他会前面的界面会遮挡住后面的界面...
  • bobo8945510
  • bobo8945510
  • 2016年10月11日 11:54
  • 1517
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实用的viewpager 做一个引导动画(强调方法没有美化)
举报原因:
原因补充:

(最多只允许输入30个字)