Android利用ViewPager实现带小圆球的图片滑动
在上文实现的带小圆球的图片滑动的通用性较好,但是较复杂。
现在也是利用 viewpager ,但是却没有利用 shapedrawable 来实现带小圆球的图片滑动。如有些播放器一样,在开始安装 app 时,都会出现引导界面,然后才进入主界面,但是在重新启动 app 时却不会再出现该引导界面。
下面实现的就是该类似的功能,只是把引导界面都做成了图片显示,这样更能够体现不同的做法(和上一篇博客)。
本例主要主要:在小圆点的绘制和 viewpager 相关联起来。
如下效果:
mypageradapter主要用于创建适配器;
mypageradapter.java :
package com.android.circleforimage; import android.app.activity; import android.content.intent; import android.os.bundle; import android.support.v4.app.fragment; import android.support.v4.app.fragmentmanager; import android.support.v4.app.fragmentpageradapter; import android.view.layoutinflater; import android.view.view; import android.view.view.onclicklistener; import android.view.viewgroup; import android.widget.button; import android.widget.imageview; public class mypageradapter extends fragmentpageradapter { private static activity activity; private static final int[] images = { r.drawable.x01, r.drawable.x02, r.drawable.x03, r.drawable.x04, r.drawable.x05 }; public static int sum = images.length; public mypageradapter(fragmentmanager fm) { super(fm); } /** * 为了获得 mainactivity 中的 activity */ public void setforactivity(activity activity) { this.activity = activity; } public activity getforactivity() { return activity; } @override public int getcount() { return images.length; } @override public fragment getitem(final int position) { return myfragment.newinstance(position); } public static class myfragment extends fragment { private int mbaseindex; // 使用工厂模式创建 fragment static myfragment newinstance(int baseindex) { myfragment fragment = new myfragment(); fragment.setbaseindex(baseindex); return fragment; } public myfragment() { super(); } @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); } @override public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) { // 最后一张图片上有 button 按钮 if (getbaseindex() == images.length - 1) { return initforbutton(inflater); } else { return showimages(inflater); } } /** * 在全局列表中保存一个索引,记录页面开始的地方 */ public void setbaseindex(int index) { mbaseindex = index; } /** * 在全局列表中检索索引,可以找到页面开始的地方 */ public int getbaseindex() { return mbaseindex; } public view initforbutton(layoutinflater inflater){ view view = inflater.inflate(r.layout.item_two, null); button button = (button) view.findviewbyid(r.id.button); button.setonclicklistener(new onclicklistener() { @override public void onclick(view v) { intent intent = new intent(activity, secondactivity.class); startactivity(intent); activity.finish(); } }); return view; } public view showimages(layoutinflater inflater){ view view = inflater.inflate(r.layout.item_one, null); imageview imageview = (imageview) view.findviewbyid(r.id.imageview); imageview.setimageresource(images[getbaseindex()]); imageview.setscaletype(imageview.scaletype.fit_xy); return view; } } }
circle 类主要用于绘制小圆球:
circle.java :
package com.android.circleforimage; import android.content.context; import android.graphics.canvas; import android.graphics.color; import android.graphics.paint; import android.util.attributeset; import android.view.view; public class circle extends view { private paint paint; private int radius = 16; // 页数和小圆球的数量相等 private int count = mypageradapter.sum; // 被选中的位置 private int chooseposition = 0; // 两个小圆之间的中心距 private int gap = 70; /** * 共外部的类调用 */ public void choose(int pos) { chooseposition = pos; // 通知重绘 this.invalidate(); } public circle(context context) { this(context, null); } public circle(context context, attributeset attrs) { this(context, attrs, 0); } public circle(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); paint = new paint(); paint.setantialias(true); } @override protected void ondraw(canvas canvas) { super.ondraw(canvas); int width = getwidth(); int height = getheight(); // 居中显示时,小圆球的起始位置 int startpx = (width - (count - 1) * gap) / 2; for (int i = 0; i < count; i++) { if (chooseposition == i) { paint.setcolor(color.red); canvas.drawcircle(startpx + i * gap, height - 50, radius + 4, paint); } else { paint.setcolor(color.white); canvas.drawcircle(startpx + i * gap, height - 50, radius, paint); } } } }
mainactivity.java :
package com.android.circleforimage; import com.android.circleforimageutils.words; import android.app.activity; import android.content.intent; import android.content.sharedpreferences; import android.os.bundle; import android.preference.preferencemanager; import android.support.v4.app.fragmentactivity; import android.support.v4.view.viewpager; import android.view.window; import android.view.windowmanager; public class mainactivity extends fragmentactivity { private viewpager viewpager; private mypageradapter madapter; private circle circle; private activity activity = null; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); initactivity(); setcontentview(r.layout.activity_main); activity = this; showforsecondactivity(); viewpager = (viewpager) findviewbyid(r.id.viewpager); circle = (circle) findviewbyid(r.id.circle); scrollpager(); madapter = new mypageradapter(getsupportfragmentmanager()); /* 调用 mypageradapter 的方法*/ madapter.setforactivity(activity); viewpager.setadapter(madapter); } /** * 对界面的处理 */ private void initactivity() { // 去标题 requestwindowfeature(window.feature_no_title); // 全屏 getwindow().setflags(windowmanager.layoutparams.flag_fullscreen, windowmanager.layoutparams.flag_fullscreen); } /** * 第一次安装启动时,会加载开始的页面,第二次启动时,会跳过加载页面 */ private void showforsecondactivity() { // preferencemanager:used to help create preference hierarchies from activities or xml. sharedpreferences msharedpreferences = preferencemanager.getdefaultsharedpreferences(this); sharedpreferences.editor editor = msharedpreferences.edit(); boolean b = msharedpreferences.getboolean(words.key_one, true); if (b) { editor.putboolean(words.key_one, false); editor.commit(); } else { intent intent = new intent(this, secondactivity.class); startactivity(intent); finish(); } } /** * viewpager 滚动时,提示 circle 类重绘 */ private void scrollpager() { viewpager.addonpagechangelistener(new viewpager.simpleonpagechangelistener() { @override public void onpageselected(int position) { super.onpageselected(position); circle.choose(position); } }); } }
另外新建一个常量类 words,用于存放存量,不在一个包中;
words.java :
package com.android.circleforimageutils; public class words { public static string key_one = "key_for_main"; }
secondactivity.java :
package com.android.circleforimage; import android.app.activity; import android.graphics.color; import android.os.bundle; import android.view.gravity; import android.widget.textview; public class secondactivity extends activity{ @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); textview textview = new textview(this); textview.settext("欢迎来到我的博客:\n http://blog.csdn.net/antimage08"); textview.settextsize(25); textview.settextcolor(color.blue); textview.setgravity(gravity.center); setcontentview(textview); } }
activity_main.xml (一般情况下,有 viewpager 和其他占界面较少的组件一起时,效果和本例相似时,可以选用 framelayout):
<framelayout 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" android:orientation="vertical" tools:context="com.android.circleforimage.mainactivity" > <android.support.v4.view.viewpager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" /> <com.android.circleforimage.circle android:id="@+id/circle" android:layout_width="match_parent" android:layout_height="match_parent"/> </framelayout>
item_one.xml :
<?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:orientation="vertical" > <imageview android:id="@+id/imageview" android:layout_width="match_parent" android:layout_height="match_parent" /> </linearlayout>
item_two.xml (imageview 中 src 指定的是用于在有 button 按钮时有图片显示才加载的,在代码中没有添加有 button 按钮界面时的图片) :
<?xml version="1.0" encoding="utf-8"?> <relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <imageview android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/x05"/> <button android:id="@+id/button" android:layout_alignparentbottom="true" android:layout_alignparentright="true" android:text="点击进入" android:textsize="20sp" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </relativelayout>
最后不能忘了在 androidmanifest.xml 中为 secondactivity 注册,最好在刚刚建好该类时就注册,这样不易遗忘:
<activity android:name=".secondactivity" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: ai怎么绘制简笔画效果的拼色风筝?
下一篇: Android实现图片阴影效果的方法