版权声明:本文为博主原创文章,未经博主允许不得转载。
首先我们来分析一下,想要实现启动页的功能,大家第一个想到的就是使用ViewPager,使用ViewPager确实是一种比较好的方式,而且思路也是比较清晰的。今天我们就一起来学习一下,使用ViewPager和ViewFlipper实现启动页带小点功能。
先展示一下图片,看看是不是你想要的效果。
1、ViewPager和ViewFlipper的区别
ViewFlipper继承ViewAnimator,切换view的时候是有动画效果的,适合做ppt,多界面的程序欢迎引导界面,算是个轻量级的组件,适合展示静态数据,少量数据。
ViewPager继承ViewGroup。看官网描述,这货和Fragment是好搭档,Fragment有自己的生命周期。也就是说ViewPager更适用复杂的视图切换,而且Viewpager有自己的adapter,这也让其适应复杂对象,实现数据的动态加载。
2、使用ViewPager来展示mipmap中或者网络中的图片(Volley)
首先,我们来理一下有几个注意点。
①先在布局文件中,画出简单的布局。
②滑动ViewPager时候,底部的小点也会跟着变化。
③点击小点时,ViewPager也会变化。
好了,现在我们来开始写代码,代码中的注释比较详细,大家自己看。
1、布局文件中,画出布局。
layout中,activity_view_pager_demo.xml文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.llay.admin.mydemo.ViewPagerDemoActivity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/ll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="20dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="5dp"
android:background="@drawable/point_selector"
android:clickable="true"
android:padding="5dp" />
<ImageView
android:id="@+id/iv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="5dp"
android:background="@drawable/point_selector"
android:clickable="true"
android:padding="5dp" />
<ImageView
android:id="@+id/iv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="5dp"
android:background="@drawable/point_selector"
android:clickable="true"
android:padding="5dp" />
<ImageView
android:id="@+id/iv4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="5dp"
android:background="@drawable/point_selector"
android:clickable="true"
android:padding="5dp" />
</LinearLayout>
</RelativeLayout>
- 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
解释:代码中使用相对布局,这样,下面的指示器就可以显示在ViewPager上面,这样便于效果的实现。我这里下面的指示器是固定写的,根据图片的多少进行添加和删除。
最后一个layout文件单独写的:
activity_view_pager4.xm
public class ViewPagerDemoActivity extends Activity implements ViewPager.OnPageChangeListener, View.OnClickListener {
//设置ViewPager和view视图
private ViewPager viewPager;
private int[] imageId = {R.mipmap.launcher_b, R.mipmap.launcher_c, R.mipmap.launcher_b};
private List<View> viewList;
private List<ImageUrlBean> imageList;
private View lastView;
//设置小圆点
private ImageView[] points;//存放小圆圈数组
private int currentIndex = 0;//当前页面,默认首页
//使用Volley加载网络图片
private RequestQueue mQueue;
private ImageLoader mImageLoader;
ImageLoader.ImageListener imageListener;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_view_pager_demo);
mQueue = Volley.newRequestQueue(this);
// initViewPage();
initNetView();
initPoints();
}
//这里是加载mipmap中图片的方式,初始化ViewPager及其图片资源
private void initViewPage() {
viewPager = (ViewPager) findViewById(R.id.view_pager);
viewList = new ArrayList<>();
//添加对应的view进入集合(数据源)
for (int i = 0; i < imageId.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式
imageView.setImageResource(imageId[i]);
viewList.add(imageView);
}
//另外增加最后一个能点击进入应用的视图
lastView = View.inflate(this, R.layout.activity_view_pager4, null);
Button button = (Button) lastView.findViewById(R.id.startbutton);
viewList.add(lastView);
//设置最后一个视图上的点击事件
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ViewPagerDemoActivity.this, "应用开始!", Toast.LENGTH_SHORT).show();
}
});
//设置viewpager的适配器和数据源
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(viewList);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setOnPageChangeListener(this);
}
//这里是加载网络图片的方式,初始化ViewPager控件及其图片资源
private void initNetView() {
viewPager = (ViewPager) findViewById(R.id.view_pager);
ImageUrlBean imageUrlBean1 = new ImageUrlBean("http://www.qq6300.com/uploads/allimg/130131/1-1301311G339A9.jpg");
ImageUrlBean imageUrlBean2 = new ImageUrlBean("http://img4.duitang.com/uploads/item/201412/13/20141213114411_QEshv.jpeg");
ImageUrlBean imageUrlBean3 = new ImageUrlBean("http://pic27.nipic.com/20130329/10041959_102531181000_2.jpg");
imageList = new ArrayList<>();
imageList.add(imageUrlBean1);
imageList.add(imageUrlBean2);
imageList.add(imageUrlBean3);
//添加对应的view进入集合(数据源)
viewList = new ArrayList<>();
for (int i = 0; i < imageList.size(); i++) {
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式
mImageLoader = new ImageLoader(mQueue, new ImageLoader.ImageCache() {
@Override
public Bitmap getBitmap(String s) {
return null;
}
@Override
public void putBitmap(String s, Bitmap bitmap) {
}
});
imageListener = ImageLoader.getImageListener(imageView, R.mipmap.ic_launcher, R.mipmap.ic_launcher);
mImageLoader.get(imageList.get(i).getImageUrl(), imageListener);
viewList.add(imageView);
}
//另外增加最后一个能点击进入应用的视图
lastView = View.inflate(this, R.layout.activity_view_pager4, null);
Button button = (Button) lastView.findViewById(R.id.startbutton);
viewList.add(lastView);
//设置最后一个视图上的点击事件
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ViewPagerDemoActivity.this, "应用开始!", Toast.LENGTH_SHORT).show();
}
});
//设置viewpager的适配器和数据源
ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(viewList);
viewPager.setAdapter(viewPagerAdapter);
viewPager.setOnPageChangeListener(this);
}
//初始化下标点
private void initPoints() {
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);
points = new ImageView[4];
//初始化布局中的小圆点ImageView控件
for (int i = 0; i < points.length; i++) {
points[i] = (ImageView) linearLayout.getChildAt(i);//遍历LinearLayout下的所有ImageView子节点
points[i].setEnabled(true);//设置当前状态为允许点击(可点,灰色)
points[i].setOnClickListener(this);//设置点击监听
//额外设置一个标识符,以便点击小圆点时跳转对应页面
points[i].setTag(i);//标识符与圆点顺序一致
}
currentIndex = 0;
points[currentIndex].setEnabled(false);//设置首页为当前页(不可点,黑色)
}
@Override
public void onClick(View v) {
viewPager.setCurrentItem((int) v.getTag());
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//当前页卡被选择时,position为当前页数
points[position].setEnabled(false);//不可点击
points[currentIndex].setEnabled(true);//恢复之前页面状态
currentIndex = position;
}
@Override
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
- 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
解释:这里有几个地方需要注意的,
1、这里添加数据源的方式,有两种方式:mipmap文件中和网络上的图片地址,我想,大家使用启动页功能的时候,一定是想要动态的从网络上获取吧,这样才能够获得最新的数据。
2、使用加载网路图片功能,作者使用的是Volley框架,别问我为啥选这个啊,因为其他还没用过,哈哈。
3、好了,这里我们遇到了文章开头时遇到的问题,当滑动ViewPager时,指示器也要跟着滑动,这里我们继承ViewPager.OnPageChangeListener,实现一些常用的方法,代码中都有注释,请自行查看。
4、还有一个是点击指示器的时候,ViewPager也跟着一起滑动。这里我们继承View.OnClickListener方法,这个方法就是点击事件,viewPager.setCurrentItem((int) v.getTag());便可以跳转到所点击的界面,然后指示器在跳到指定界面之后,也会有相应的颜色变化。
3、ViewPager的适配器代码
ViewPagerAdapter.javpublic class ViewPagerAdapter extends PagerAdapter {
private List list;
public ViewPagerAdapter(List list) {
this.list = list;
}
//获取要滑动的控件的数量,在这里我们以滑动的广告栏为例,那么这里就应该是展示的广告图片的ImageView数量
@Override
public int getCount() {
return list.size();
}
//来判断显示的是否是同一张图片,这里我们将两个参数相比较返回即可
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;//官方demo给出的建议写法
}
//当要显示的图片可以进行缓存的时候,会调用这个方法进行显示图片的初始化,我们将要显示的ImageView加入到ViewGroup中,然后作为返回值返回即可
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
//PagerAdapter只缓存三张要显示的图片,如果滑动的图片超出了缓存的范围,就会调用这个方法,将图片销毁
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
}示器的布局。
现在,我们来实现一下指示器的圆点,之前我一直以为,指示器的圆点就是让UI画出来的,原来还可以通过这种方式来实现。直接上代码。
未点击的圆点。
drawable文件中。v_point_up.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="0.5dp" />
<solid android:color="#AAFFFFFF" />
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
点击的圆点。
drawable文件中。v_point_down.xml文件
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<corners android:radius="0.5dp" />
<solid android:color="#55000000" />
</shape>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
主布局文件中的point_selector.xml文件,这个文件的功能是在选择指示器之后,可以让指示器的颜色用代码改变。
drawbale文件中。point_selector.xml文件
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/v_point_up" android:state_enabled="true"></item>
<item android:drawable="@drawable/v_point_down" android:state_enabled="false"></item>
</selector>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
解释:请注意这里是android:state_enabled属性,表示状态是否可以点击。
2、使用ViewFlipper来展示mipmap中的图片
这里我没有用ViewFlipper来展示网络图片
1、布局文件:
同上ViewPager中的主布局文件和第四个布局文件,还有指示器的布局文件。
2、ViewFlipperActivity.java文件
public class ViewFlipperActivity extends Activity implements GestureDetector.OnGestureListener, View.OnClickListener {
//设置ViewFlipper和view视图
private ViewFlipper viewFlipper;
private int[] imageId = {R.mipmap.launcher_b, R.mipmap.launcher_c, R.mipmap.launcher_b};
View lastView;
//设置小圆点
private ImageView[] points;//存放小圆圈数组
private int currentIndex = 0;//当前页面,默认首页
//设置手势
GestureDetector gestureDetector;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_view_flipper);
gestureDetector = new GestureDetector(ViewFlipperActivity.this);
initViewFlipper();
initPoints();
}
//初始化ViewFlipper
private void initViewFlipper() {
viewFlipper = (ViewFlipper) findViewById(R.id.viewflipper);
//添加对应的view进入集合(数据源)
for (int i = 0; i < imageId.length; i++) {
ImageView imageView = new ImageView(this);
imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
imageView.setScaleType(ImageView.ScaleType.FIT_XY);//设置缩放样式
imageView.setImageResource(imageId[i]);
viewFlipper.addView(imageView);
}
//另外增加最后一个能点击进入应用的视图
lastView = View.inflate(this, R.layout.activity_view_pager4, null);
Button button = (Button) lastView.findViewById(R.id.startbutton);
viewFlipper.addView(lastView);
//设置最后一个视图上的点击事件
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(ViewFlipperActivity.this, "应用开始!", Toast.LENGTH_SHORT).show();
}
});
}
//初始化下标点
private void initPoints() {
LinearLayout linearLayout = (LinearLayout) findViewById(R.id.ll);
points = new ImageView[4];
//初始化布局中的小圆点ImageView控件
for (int i = 0; i < points.length; i++) {
points[i] = (ImageView) linearLayout.getChildAt(i);//遍历LinearLayout下的所有ImageView子节点
points[i].setEnabled(true);//设置当前状态为允许点击(可点,灰色)
points[i].setOnClickListener(this);//设置点击监听
//额外设置一个标识符,以便点击小圆点时跳转对应页面
points[i].setTag(i);//标识符与圆点顺序一致
}
currentIndex = 0;
points[currentIndex].setEnabled(false);//设置首页为当前页(不可点,黑色)
}
@Override
public void onClick(View v) {
//点击小点,改变小点的状态,并且改变viewFlipper中子view的显示
viewFlipper.setDisplayedChild((int) v.getTag());
points[(int) v.getTag()].setEnabled(false);
points[currentIndex].setEnabled(true);
currentIndex = (int) v.getTag();
}
//用户轻触触摸屏,由1个MotionEvent ACTION_DOWN触发
@Override
public boolean onDown(MotionEvent e) {
return false;
}
//用户轻触触摸屏,尚未松开或拖动,由一个1个MotionEvent ACTION_DOWN触发
//注意和onDown()的区别,强调的是没有松开或者拖动的状态
@Override
public void onShowPress(MotionEvent e) {
}
//用户(轻触触摸屏后)松开,由一个1个MotionEvent ACTION_UP触发
@Override
public boolean onSingleTapUp(MotionEvent e) {
return false;
}
//用户按下触摸屏,并拖动,由1个MotionEvent ACTION_DOWN, 多个ACTION_MOVE触发
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
return false;
}
//用户长按触摸屏,由多个MotionEvent ACTION_DOWN触发
@Override
public void onLongPress(MotionEvent e) {
}
//用户按下触摸屏、快速移动后松开,由1个MotionEvent ACTION_DOWN, 多个ACTION_MOVE,1个ACTION_UP触发
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
if (e2.getX() - e1.getX() > 120) {
//为了避免能够一直向右滑动
if (viewFlipper.getDisplayedChild() != 0) {
//向右滑动,设置滑动动画
viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,
R.anim.push_right_in));
viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,
R.anim.push_right_out));
//这个要判断,不然就会跳到第一个
viewFlipper.showPrevious();
//当前页卡被选择时,viewFlipper.getDisplayedChild()为当前页数
points[viewFlipper.getDisplayedChild()].setEnabled(false);//不可点击
points[currentIndex].setEnabled(true);//恢复之前页面状态
currentIndex = viewFlipper.getDisplayedChild();
return true;
}
} else if (e2.getX() - e1.getX() < 120) {
//为了避免能够一直向左滑动
if (viewFlipper.getDisplayedChild() != viewFlipper.getChildCount() - 1) {
//向左滑动,设置滑动动画
viewFlipper.setInAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,
R.anim.push_left_in));
viewFlipper.setOutAnimation(AnimationUtils.loadAnimation(ViewFlipperActivity.this,
R.anim.push_left_out));
//这个要判断,不然就会跳到最后一个
viewFlipper.showNext();
//当前页卡被选择时,viewFlipper.getDisplayedChild()为当前页数
points[viewFlipper.getDisplayedChild()].setEnabled(false);//不可点击
points[currentIndex].setEnabled(true);//恢复之前页面状态
currentIndex = viewFlipper.getDisplayedChild();
return true;
}
}
return false;
}
//用户轻触触摸屏,由1个MotionEvent ACTION_DOWN触发
@Override
public boolean onTouchEvent(MotionEvent event) {
return this.gestureDetector.onTouchEvent(event);
}
}
- 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
解释:这里我用ViewFlipper实现这个启动页的功能,一开始以为应该会比ViewPager实现容易,但是自己后来弄了一下,感觉自己还是不怎么能弄出来。我来讲一下有几处要注意的。
1、使用ViewFlipper来实现启动页功能,需要使用手势。让类继承GestureDetector.OnGestureListener接口,实现一些必要的方法。主要是onFling()方法。
2、为了让ViewFlipper不能一直的滑动下去。需要判断是不是第一个和最后一个,使用 if (viewFlipper.getDisplayedChild() != 0)判断是不是第一个,使用if (viewFlipper.getDisplayedChild() != viewFlipper.getChildCount() - 1)判断是不是最后一个。
3、在滑动了ViewFlipper之后,我们也要考虑和ViewPager相同的两个问题。ViewFlipper滑动带动指示器,指示器点击带动ViewFlpper。
使用
//当前页卡被选择时,viewFlipper.getDisplayedChild()为当前页数
points[viewFlipper.getDisplayedChild()].setEnabled(false);//不可点击
points[currentIndex].setEnabled(true);//恢复之前页面状态
currentIndex = viewFlipper.getDisplayedChild();
- 1
- 2
- 3
- 4
来使ViewFlipper滑动,带动指示器的滑动。
使用
//点击小点,改变小点的状态,并且改变viewFlipper中子view的显示
viewFlipper.setDisplayedChild((int) v.getTag());
points[(int) v.getTag()].setEnabled(false);
points[currentIndex].setEnabled(true);
currentIndex = (int) v.getTag();
- 1
- 2
- 3
- 4
- 5
来点击指示器,带动ViewFlipper的跳转。
4、需要注意的是,使用手势的时候,一定要实现这个方法,不然手势不能生效。原因,查了好多,都是说未知。
//用户轻触触摸屏,由1个MotionEvent ACTION_DOWN触发
@Override
public boolean onTouchEvent(MotionEvent event) {
return this.gestureDetector.onTouchEvent(event);
}
- 1
- 2
- 3
- 4
- 5
- 顶
- 0
- 踩