视觉差引导界面

导航引导的功能

Android应用中大多数都有导航引导的功能，引导界面一般都是基于ViewPagerViewPager在android-support-v4.jar包中，android-support-v4.jar 是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包含了只有在安卓3.0以上才可以使用 的api。ViewPager是一个很常用的组件，如导航、页面菜单等等，使用ViewPager和ListView一样. 这里写图片描述

源码下载

代码

MainActivity.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
package com.bzu.gxs.myguide;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import com.bzu.gxs.myguide.adapter.GalleryImageAdapter;
import com.bzu.gxs.myguide.utils.Cubic;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    FrameLayout frameLayout;
    HorizontalScrollView bg_horizontalScrollView;
    HorizontalScrollView layer_horizontalScrollView;
    private GalleryImageAdapter adapter;
    int total_page;
    int bg_width;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initAdapter();
        setViewPagerParams();
    }

    private void initAdapter() {
        adapter = new GalleryImageAdapter(this);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.image_pager);
        frameLayout = (FrameLayout)findViewById(R.id.backgroundLayout);
        bg_horizontalScrollView = (HorizontalScrollView) findViewById(R.id.background_srcollview);
        bg_horizontalScrollView.setHorizontalScrollBarEnabled(false);
        layer_horizontalScrollView = (HorizontalScrollView) findViewById(R.id.layer_srcollview);
        layer_horizontalScrollView.setHorizontalScrollBarEnabled(false);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        // 获得窗口属性
        this.getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        bg_width = displayMetrics.widthPixels * 5;
        ViewGroup.LayoutParams layoutParams;

        ImageView back_imageView = (ImageView) findViewById(R.id.back_image_one);
        layoutParams = back_imageView.getLayoutParams();
        layoutParams.height  = displayMetrics.heightPixels;
        layoutParams.width = displayMetrics.widthPixels;
        back_imageView.setLayoutParams(layoutParams);

        FrameLayout.LayoutParams fLayoutParams;
        ImageView layer_one = (ImageView) findViewById(R.id.layer_image_one);
        fLayoutParams = (FrameLayout.LayoutParams) layer_one.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_one.setLayoutParams(fLayoutParams);

        ImageView layer_two = (ImageView) findViewById(R.id.layer_image_two);
        fLayoutParams = (FrameLayout.LayoutParams) layer_two.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_two.setLayoutParams(fLayoutParams);

        ImageView layer_three = (ImageView) findViewById(R.id.layer_image_three);
        fLayoutParams = (FrameLayout.LayoutParams) layer_three.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_three.setLayoutParams(fLayoutParams);

        ImageView layer_four = (ImageView) findViewById(R.id.layer_image_four);
        fLayoutParams = (FrameLayout.LayoutParams) layer_four.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_four.setLayoutParams(fLayoutParams);

        ImageView layer_five = (ImageView) findViewById(R.id.layer_image_five);
        fLayoutParams = (FrameLayout.LayoutParams) layer_five.getLayoutParams();
        fLayoutParams.height = displayMetrics.heightPixels;
        fLayoutParams.width = displayMetrics.widthPixels;
        layer_five.setLayoutParams(fLayoutParams);

    }

    private void setViewPagerParams() {
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                float realOffset  = Cubic.easeIn(positionOffset,0,1,1);

                total_page = adapter.getCount();
                float offset =(float)((float)(position + realOffset) *1.0 / total_page);
                int layyeroffsetPosition = (int)(bg_width * offset);
                layer_horizontalScrollView.scrollTo(layyeroffsetPosition,0);
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

适配器

GalleryImageAdapter.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
package com.bzu.gxs.myguide.adapter;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.bzu.gxs.myguide.R;

/**
 * Created by GXS on 2016/5/9.
 */
public class GalleryImageAdapter extends PagerAdapter{

    private LayoutInflater mLayoutInflater;
    private Context context;
    public Handler mHandler;
    LayoutInflater inflater;

    public GalleryImageAdapter(Context context){
        mLayoutInflater = LayoutInflater.from(context);
        inflater = LayoutInflater.from(context);
        this.context = context;
    }

    @Override
    public int getCount() {
        return 5;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager)container).removeView((View)object);
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view.equals(object);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        final ViewHolder holder;
        holder = new ViewHolder();
        View imageLayout = mLayoutInflater.inflate(R.layout.activity_item,null);
        holder.image = (LinearLayout) imageLayout.findViewById(R.id.gallery_image_item_view);

        if (position == 4){
            holder.image.setEnabled(true);
        }
        else {
            holder.image.setEnabled(false);
        }
        if (position == 0){
            holder.image.removeAllViews();
            View view0 = inflater.inflate(R.layout.layout_one,null);
            holder.image.addView(view0);
        }
        else if (position == 1){
            holder.image.removeAllViews();
            View view1 = inflater.inflate(R.layout.layout_two,null);
            holder.image.addView(view1);
        }
        else if (position == 2){
            holder.image.removeAllViews();
            View view2 = inflater.inflate(R.layout.layout_three,null);
            holder.image.addView(view2);
        }
        else if (position ==3){
            holder.image.removeAllViews();
            View view3 = inflater.inflate(R.layout.layout_four,null);
            holder.image.addView(view3);
        }
        else if (position == 4){
            holder.image.removeAllViews();
            View view4 = inflater.inflate(R.layout.layout_five,null);
            holder.image.addView(view4);
        }
        ((ViewPager)container).addView(imageLayout,0);

        return imageLayout;
    }

    class ViewHolder{
        private LinearLayout image;
    }
}

代码

Cubic.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.bzu.gxs.myguide.utils;

/**
 * Created by GXS on 2016/5/10.
 */
public class Cubic {

    public static float easeIn(float t,float b,float c,float d){
        return c*(t/=d)*t*t +b;
    }
    public static float easeOut (float t,float b , float c, float d) {
        return c*((t=t/d-1)*t*t + 1) + b;
    }

    public static float easeInOut (float t,float b , float c, float d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    }
}

布局文件

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/backgroundLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:orientation="vertical" >

    <HorizontalScrollView
        android:id="@+id/background_srcollview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/back_image_one"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:scaleType="centerCrop"
                android:src="@drawable/tuitional_bg" />

        </LinearLayout>
    </HorizontalScrollView>

    <HorizontalScrollView
        android:id="@+id/layer_srcollview"
        android:layout_width="wrap_content"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_one"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_two"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="165dp"
                    android:layout_height="121dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="83dp"
                    android:src="@drawable/tuitional_img_2_1" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_three"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="155dp"
                    android:layout_height="120dp"
                    android:layout_gravity="right"
                    android:layout_marginRight="27dp"
                    android:layout_marginTop="264dp"
                    android:src="@drawable/tuitional_img_3_1"
                    android:visibility="visible" />

                <ImageView
                    android:layout_width="45dp"
                    android:layout_height="45dp"
                    android:layout_gravity="right"
                    android:layout_marginRight="34dp"
                    android:layout_marginTop="325dp"
                    android:src="@drawable/tuitional_img_3_3"
                    android:visibility="visible" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_four"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="127dp"
                    android:layout_height="190dp"
                    android:layout_marginLeft="50dp"
                    android:layout_marginTop="140dp"
                    android:src="@drawable/tuitional_img_4_1"
                    android:visibility="visible" />
            </FrameLayout>

            <FrameLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="1" >

                <ImageView
                    android:id="@+id/layer_image_five"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@drawable/tuitional_bg"
                    android:visibility="invisible" />

                <ImageView
                    android:layout_width="160dp"
                    android:layout_height="325dp"
                   android:layout_gravity="center_horizontal"
                    android:layout_marginTop="110dp"
                    android:src="@drawable/tuitional_img_5_1" />
            </FrameLayout>
        </LinearLayout>
    </HorizontalScrollView>

    <android.support.v4.view.ViewPager
        android:id="@+id/image_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000" />
</FrameLayout>

代码

activity_item.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?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="#00000000"
    android:orientation="vertical" >
    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >

        <LinearLayout
            android:id="@+id/gallery_image_item_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
        </LinearLayout>
    </FrameLayout>
</LinearLayout>

代码

layout_one.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?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"
    >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="155dp"
        android:layout_height="325dp"
        android:layout_gravity="center"
        android:src="@drawable/tuitional_img_1"
        android:visibility="visible" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="家居用品"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="各种家具应有尽有"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>

代码

layout_two.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="121dp"
        android:layout_height="260dp"
        android:layout_gravity="center_horizontal|left"
        android:layout_marginLeft="125dp"
        android:layout_marginTop="152dp"
        android:src="@drawable/tuitional_img_2_2" />

    <ImageView
        android:layout_width="122dp"
        android:layout_height="232dp"
        android:layout_gravity="center_horizontal|left"
        android:layout_marginLeft="77dp"
        android:layout_marginTop="190dp"
        android:src="@drawable/tuitional_img_2_3" />

    <ImageView
        android:layout_width="122dp"
        android:layout_height="232dp"
        android:layout_marginLeft="127dp"
        android:layout_marginTop="30dp"
        android:src="@drawable/tuitional_img_2_4" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="生活用品"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="各种生活用品应有尽有"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>

代码

layout_three.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="135dp"
        android:layout_height="287dp"
        android:layout_marginLeft="60dp"
        android:layout_marginTop="120dp"
        android:src="@drawable/tuitional_img_3_2"
        android:visibility="visible" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="商品详情"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="商品的详情信息"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>

代码

layout_four.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="128dp"
        android:layout_height="190dp"
        android:layout_marginLeft="144dp"
        android:layout_marginTop="165dp"
        android:src="@drawable/tuitional_img_4_2"
        android:visibility="visible" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="我的资料"
        android:textColor="#ffffff"
        android:textSize="28dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="关于我的信息"
        android:textColor="#ffffff"
        android:textSize="14dp" />
</FrameLayout>

代码

activity_five.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?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" >

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/tuitional_bg"
        android:visibility="invisible" />

    <ImageView
        android:layout_width="210dp"
        android:layout_height="144dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="300dp"
        android:src="@drawable/tuitional_img_5_2" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="登陆/注册"
        android:textColor="#ffffff"
        android:textSize="24dp" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="60dp"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="30dp"
        android:shadowColor="#000000"
        android:shadowDy="1"
        android:shadowRadius="5"
        android:text="快点加入吧"
        android:textColor="#ffffff"
        android:textSize="16dp" />
</FrameLayout>