导航引导的功能
Android应用中大多数都有导航引导的功能，引导界面一般都是基于ViewPagerViewPager在android-support-v4.jar包中，android-support-v4.jar 是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包含了只有在安卓3.0以上才可以使用 的api。ViewPager是一个很常用的组件，如导航、页面菜单等等，使用ViewPager和ListView一样.
源码下载
代码
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
112package 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;
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() {
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);
}
public void onPageSelected(int position) {
}
public void onPageScrollStateChanged(int state) {
}
});
}
}
适配器
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
90package 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;
}
public int getCount() {
return 5;
}
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager)container).removeView((View)object);
}
public boolean isViewFromObject(View view, Object object) {
return view.equals(object);
}
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;
}
}
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19package 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;
}
}
布局文件
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>
代码
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>
代码
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>
代码
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>
代码
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>
代码
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>
代码
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>
Comment