├── .gitignore ├── LICENSE ├── README.md ├── app ├── .gitignore ├── build.gradle ├── proguard-rules.pro └── src │ ├── androidTest │ └── java │ │ └── cn │ │ └── iwgang │ │ └── parallaxguidedemo │ │ └── parallaxguidedemo │ │ └── ApplicationTest.java │ └── main │ ├── AndroidManifest.xml │ ├── java │ └── cn │ │ └── iwgang │ │ └── parallaxguidedemo │ │ ├── MainActivity.java │ │ └── ViewPaperAdapter.java │ └── res │ ├── drawable-xhdpi │ ├── android_guide_step_1.jpg │ ├── android_guide_step_2.jpg │ └── android_guide_step_3.jpg │ ├── drawable │ └── sel_guide_go.xml │ ├── layout │ ├── activity_main.xml │ └── guide_view.xml │ ├── menu │ └── menu_main.xml │ ├── mipmap-hdpi │ └── ic_launcher.png │ ├── mipmap-mdpi │ └── ic_launcher.png │ ├── mipmap-xhdpi │ └── ic_launcher.png │ ├── mipmap-xxhdpi │ └── ic_launcher.png │ ├── values-hdpi-960x540 │ └── dimens.xml │ ├── values-hdpi │ └── dimens.xml │ ├── values-xhdpi │ └── dimens.xml │ └── values │ ├── dimens.xml │ ├── strings.xml │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle └── wrapper │ ├── gradle-wrapper.jar │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat ├── screenshot └── g1.gif └── settings.gradle /.gitignore: -------------------------------------------------------------------------------- 1 | # generated files 2 | bin/ 3 | gen/ 4 | *target/ 5 | *build/ 6 | .gradle/ 7 | .idea/ 8 | 9 | # built application files 10 | *.ap_ 11 | 12 | # files for the dex VM 13 | *.dex 14 | 15 | # Java class files 16 | *.class 17 | 18 | # Eclipse project files 19 | .project 20 | .classpath 21 | .settings/ 22 | 23 | # Other 24 | .DS_Store 25 | /local.properties 26 | *.iml -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 iWgang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ParallaxGuideDemo 2 | Android 视差引导页面 Demo 3 | 4 | ![](https://github.com/iwgang/ParallaxGuideDemo/blob/master/screenshot/g1.gif) 5 | -------------------------------------------------------------------------------- /app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 21 5 | buildToolsVersion "21.1.2" 6 | 7 | defaultConfig { 8 | applicationId "cn.iwgang.parallaxguidedemo" 9 | minSdkVersion 10 10 | targetSdkVersion 21 11 | versionCode 1 12 | versionName "1.0" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | } 21 | 22 | dependencies { 23 | compile fileTree(dir: 'libs', include: ['*.jar']) 24 | compile 'com.android.support:appcompat-v7:22.0.0' 25 | } 26 | -------------------------------------------------------------------------------- /app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /Users/apple/android.sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /app/src/androidTest/java/cn/iwgang/parallaxguidedemo/parallaxguidedemo/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package cn.iwgang.parallaxguidedemo.parallaxguidedemo; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } -------------------------------------------------------------------------------- /app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /app/src/main/java/cn/iwgang/parallaxguidedemo/MainActivity.java: -------------------------------------------------------------------------------- 1 | package cn.iwgang.parallaxguidedemo; 2 | 3 | import android.annotation.SuppressLint; 4 | import android.graphics.Color; 5 | import android.os.Bundle; 6 | import android.support.v4.view.ViewPager; 7 | import android.support.v7.app.ActionBarActivity; 8 | import android.view.View; 9 | import android.view.animation.AnimationUtils; 10 | import android.widget.Button; 11 | import android.widget.ImageView; 12 | import android.widget.TextView; 13 | import android.widget.Toast; 14 | 15 | import java.util.ArrayList; 16 | 17 | 18 | public class MainActivity extends ActionBarActivity { 19 | private ViewPager mViewPager; 20 | private Button mBtnGo; 21 | private ViewPaperAdapter vpAdapter; 22 | 23 | @Override 24 | protected void onCreate(Bundle savedInstanceState) { 25 | super.onCreate(savedInstanceState); 26 | setContentView(R.layout.activity_main); 27 | initViews(); 28 | } 29 | 30 | private void initViews() { 31 | mViewPager = (ViewPager)findViewById(R.id.vp_guide); 32 | mBtnGo = (Button)findViewById(R.id.btn_go); 33 | 34 | //实例化各个界面的布局对象 35 | View view1 = View.inflate(this, R.layout.guide_view, null); 36 | View view2 = View.inflate(this, R.layout.guide_view, null); 37 | View view3 = View.inflate(this, R.layout.guide_view, null); 38 | 39 | ((ImageView)view1.findViewById(R.id.tv_pic)).setImageResource(R.drawable.android_guide_step_1); 40 | ((ImageView)view2.findViewById(R.id.tv_pic)).setImageResource(R.drawable.android_guide_step_2); 41 | ((ImageView)view3.findViewById(R.id.tv_pic)).setImageResource(R.drawable.android_guide_step_3); 42 | 43 | mBtnGo.setOnClickListener(new View.OnClickListener() { 44 | @Override 45 | public void onClick(View v) { 46 | Toast.makeText(MainActivity.this, "Go Home", Toast.LENGTH_SHORT).show(); 47 | } 48 | }); 49 | 50 | view1.findViewById(R.id.tv_pic).setOnClickListener(new View.OnClickListener() { 51 | @Override 52 | public void onClick(View v) { 53 | mViewPager.setCurrentItem(0); 54 | } 55 | }); 56 | view2.findViewById(R.id.tv_pic).setOnClickListener(new View.OnClickListener() { 57 | @Override 58 | public void onClick(View v) { 59 | mViewPager.setCurrentItem(1); 60 | } 61 | }); 62 | view3.findViewById(R.id.tv_pic).setOnClickListener(new View.OnClickListener() { 63 | @Override 64 | public void onClick(View v) { 65 | mViewPager.setCurrentItem(2); 66 | } 67 | }); 68 | 69 | ((TextView)view1.findViewById(R.id.tv_title)).setText("精彩首页"); 70 | ((TextView)view1.findViewById(R.id.tv_title)).setTextColor(Color.parseColor("#FF5000")); 71 | ((TextView)view2.findViewById(R.id.tv_title)).setText("发现定位"); 72 | ((TextView)view2.findViewById(R.id.tv_title)).setTextColor(Color.parseColor("#49ca65")); 73 | ((TextView)view3.findViewById(R.id.tv_title)).setText("欢乐互动"); 74 | ((TextView)view3.findViewById(R.id.tv_title)).setTextColor(Color.parseColor("#16c5c6")); 75 | 76 | ((TextView)view1.findViewById(R.id.tv_desc)).setText("优惠第一时间为你奉上\n"); 77 | ((TextView)view2.findViewById(R.id.tv_desc)).setText("给你最好的\n做你最想要的"); 78 | ((TextView)view3.findViewById(R.id.tv_desc)).setText("欢迎互动\n精彩由你"); 79 | 80 | mViewPager = (ViewPager) findViewById(R.id.vp_guide); 81 | 82 | ArrayList views = new ArrayList<>(); 83 | views.add(view1); 84 | views.add(view2); 85 | views.add(view3); 86 | 87 | vpAdapter = new ViewPaperAdapter(views); 88 | 89 | mViewPager.setOffscreenPageLimit(views.size()); 90 | mViewPager.setPageMargin(-dip2px(135)); 91 | mViewPager.setAdapter(vpAdapter); 92 | 93 | mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() { 94 | @Override 95 | public void onPageSelected(int position) { 96 | if (position + 1 == mViewPager.getAdapter().getCount()) { 97 | if (mBtnGo.getVisibility() != View.VISIBLE) { 98 | mBtnGo.setVisibility(View.VISIBLE); 99 | mBtnGo.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_in)); 100 | } 101 | } else { 102 | if (mBtnGo.getVisibility() != View.GONE) { 103 | mBtnGo.setVisibility(View.GONE); 104 | mBtnGo.startAnimation(AnimationUtils.loadAnimation(MainActivity.this, android.R.anim.fade_out)); 105 | } 106 | } 107 | } 108 | }); 109 | 110 | mViewPager.setPageTransformer(false, new ViewPager.PageTransformer() { 111 | private static final float MIN_SCALE = 0.85f; 112 | // private static final float MIN_ALPHA = 0.5f; 113 | 114 | private static final float MIN_TXT_SCALE = 0.0f; 115 | private static final float MIN_TXT_ALPHA = 0.0f; 116 | 117 | @SuppressLint("NewApi") 118 | @Override 119 | public void transformPage(View view, float position) { 120 | View mGuideImage = view.findViewById(R.id.tv_pic); 121 | View mTitle = view.findViewById(R.id.tv_title); 122 | View mDesc = view.findViewById(R.id.tv_desc); 123 | 124 | int viewWidth = mDesc.getWidth(); 125 | 126 | if (position < -1) { 127 | mTitle.setAlpha(0); 128 | mDesc.setAlpha(0); 129 | } else if (position <= 1) { 130 | float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); 131 | float scaleTxtFactor = Math.max(MIN_TXT_SCALE, 1 - Math.abs(position)); 132 | 133 | // float horzMargin = viewWidth * (1 - (1 - Math.abs(position))) / 2; 134 | // if (position < 0) { 135 | // mTitle.setTranslationX(horzMargin); 136 | // mDesc.setTranslationX(horzMargin); 137 | // } else { 138 | // mTitle.setTranslationX(-horzMargin); 139 | // mDesc.setTranslationX(-horzMargin); 140 | // } 141 | 142 | mGuideImage.setScaleX(scaleFactor); 143 | mGuideImage.setScaleY(scaleFactor); 144 | 145 | mTitle.setScaleX(scaleTxtFactor); 146 | mTitle.setScaleY(scaleTxtFactor); 147 | mTitle.setAlpha(MIN_TXT_ALPHA + (scaleTxtFactor - MIN_TXT_SCALE) / (1 - MIN_TXT_SCALE) * (1 - MIN_TXT_ALPHA)); 148 | 149 | mDesc.setAlpha(mTitle.getAlpha()); 150 | mDesc.setScaleX(scaleTxtFactor); 151 | mDesc.setScaleY(scaleTxtFactor); 152 | } else { 153 | mTitle.setAlpha(0); 154 | mDesc.setAlpha(0); 155 | } 156 | } 157 | }); 158 | } 159 | 160 | private int dip2px(float dpValue) { 161 | final float scale = getResources().getDisplayMetrics().density; 162 | return (int) (dpValue * scale + 0.5f); 163 | } 164 | 165 | } 166 | -------------------------------------------------------------------------------- /app/src/main/java/cn/iwgang/parallaxguidedemo/ViewPaperAdapter.java: -------------------------------------------------------------------------------- 1 | package cn.iwgang.parallaxguidedemo; 2 | 3 | import android.support.v4.view.PagerAdapter; 4 | import android.support.v4.view.ViewPager; 5 | import android.view.View; 6 | 7 | import java.util.ArrayList; 8 | 9 | public class ViewPaperAdapter extends PagerAdapter { 10 | private ArrayList views; 11 | 12 | public ViewPaperAdapter(ArrayList views) { 13 | this.views = views; 14 | } 15 | 16 | @Override 17 | public int getCount() { 18 | if (views != null) { 19 | return views.size(); 20 | } else 21 | return 0; 22 | } 23 | 24 | @Override 25 | public boolean isViewFromObject(View arg0, Object arg1) { 26 | return (arg0 == arg1); 27 | } 28 | 29 | @Override 30 | public void destroyItem(View container, int position, Object object) { 31 | ((ViewPager) container).removeView(views.get(position)); 32 | } 33 | 34 | @Override 35 | public Object instantiateItem(View container, int position) { 36 | ((ViewPager) container).addView(views.get(position), 0); 37 | return views.get(position); 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/android_guide_step_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwgang/ParallaxGuideDemo/6ca140ffcce43a9aa70d0713a4c2e4d47fa52cef/app/src/main/res/drawable-xhdpi/android_guide_step_1.jpg -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/android_guide_step_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwgang/ParallaxGuideDemo/6ca140ffcce43a9aa70d0713a4c2e4d47fa52cef/app/src/main/res/drawable-xhdpi/android_guide_step_2.jpg -------------------------------------------------------------------------------- /app/src/main/res/drawable-xhdpi/android_guide_step_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iwgang/ParallaxGuideDemo/6ca140ffcce43a9aa70d0713a4c2e4d47fa52cef/app/src/main/res/drawable-xhdpi/android_guide_step_3.jpg -------------------------------------------------------------------------------- /app/src/main/res/drawable/sel_guide_go.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 11 | 12 |