实用的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) {
    }

}

相关文章推荐

PopupWindow的各种用法(二)——使用PopupWindow做一个指引蒙板(带启动页,仿ViewPager滚动的引导页)

引言:接下来和大家分享一下用一个PopupWindow来做一个指引蒙板的效果。鉴于网上对于“指引蒙板”的实现例子不是太多(或者是我找不到更多的),而且好像有很多的例子都是用一个Frame布局+Frag...

怎样做一个iOS App的启动分层引导动画

http://www.cocoachina.com/ios/20141211/10610.html 一. 为什么要写这篇文章? 这是一个很古老的话题,从两年前新浪微博开始使用多层动画制作i...

怎样做一个iOS App的启动分层引导动画?

一. 为什么要写这篇文章? 这是一个很古老的话题,从两年前新浪微博开始使用多层动画制作iOS App的启动引导页让人眼前一亮(当然,微博是不是历史第一个这个问题值得商榷)之后,各种类型的引导页层出不...
  • chentoo
  • chentoo
  • 2014年12月11日 13:28
  • 6228

贝塞尔曲线做一个曲线动画框架

  • 2017年02月08日 10:07
  • 2.11MB
  • 下载

利用ViewPager+FragmentPagerAdapter+Fragment做一个能左右滑动的页面

先看主布局文件 main.xml     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="ma...

手把手带你做一个超炫酷loading成功动画view Android自定义view

写在前面:         本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需...

做一个绕Y轴旋转的动画时遇到问题

这是我做的一个Demo,红色方块与蓝色矩形的super view都是self.view,当红色方块做绕Y轴旋转动画时,只看到一半的红色方形在旋转。- (void)viewDidLoad { [...

手把手带你做一个超炫酷loading成功动画view Android自定义view

写在前面:         本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那...

手把手带你做一个超炫酷loading成功动画view Android自定义view

写在前面:         本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需...

你也可以做一个小米魅族网站(WOW.js:WOW.js – 在页面滚动时展现动感的元素动画效果)

简介 有的页面在向下滚动的时候,有些元素会产生细小的动画效果。虽然动画比较小,但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面(查看)。如果你希望你的页面也更加有趣,那么你可以试试 WO...
  • cometwo
  • cometwo
  • 2016年08月13日 17:45
  • 3077
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实用的viewpager 做一个引导动画(强调方法没有美化)
举报原因:
原因补充:

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