ViewPager实现图片循环滚动
2016-06-06 14:02
351 查看
ViewPager是v4开发包中一个比较常见的组件,在开发中的作用不小。
1、实现图片的滚动切换
2、实现类似选项卡页面的切换
好了,废话不多少,直接来一个例子吧:
先说布局文件吧,布局文件中添加一个Viewpager:
然后呢,就是我们的主程序了:
要说明的是,使用ViewPager的重中之重是实现好适配器,适配器的使用方法与listview类似,其次要实现好切换,就要使用好
剩下的就是一些太重要的了:
比如说普通点的定义:
聚焦后的点:
点的状态设置:
1、实现图片的滚动切换
2、实现类似选项卡页面的切换
好了,废话不多少,直接来一个例子吧:
先说布局文件吧,布局文件中添加一个Viewpager:
<?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.support.v4.view.ViewPager android:id="@+id/vp_ad" android:layout_height="200dip" android:layout_width="match_parent"/> <LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:background="#33000000" android:layout_alignBottom="@id/vp_ad" android:orientation="vertical"> <TextView android:id="@+id/tv_imageinfo" android:gravity="center" android:layout_height="wrap_content" android:layout_width="match_parent" android:textColor="@android:color/white" android:textSize="18sp"/> <LinearLayout android:id="@+id/ll_dots" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </LinearLayout> </RelativeLayout>
然后呢,就是我们的主程序了:
import android.app.ActionBar.LayoutParams; import android.app.Activity; import android.os.Handler; import android.os.Message; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; import java.util.ArrayList; import java.util.List; public class MainActivity extends Activity { private ViewPager vp_ad; private TextView tv_imageinfo; private LinearLayout ll_dots; private int[] imageids = new int[] { R.drawable.a, R.drawable.b, R.drawable.c, R.drawable.d, R.drawable.e, R.drawable.f, R.drawable.g, R.drawable.h }; private String[] imageinfos = new String[] { "让我们开始新的一天", "艺术神奇", "美食诱惑,难以抵挡", "有你的夜,月色格外的美", "萌萌哒", "有你在身边,终觉得暖暖的", "乡村之恋,还是那片土地", "路在脚下,就得一直走下去" }; private List<ImageView> imagelist; // 记录上一个点 private int lastShowDot; // 判断是否继续 private boolean isRunning; private boolean isScrolling = false; int count = 0; private final int CHANGE_PAGER = 0x0015; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); vp_ad = (ViewPager) findViewById(R.id.vp_ad); tv_imageinfo = (TextView) findViewById(R.id.tv_imageinfo); ll_dots = (LinearLayout) findViewById(R.id.ll_dots); init(); addListener(); } private void init() { imagelist = new ArrayList<ImageView>(); lastShowDot = 0; for (int i = 0; i < imageids.length; i++) { // 初始化图片资源 ImageView imageview = new ImageView(this); imageview.setBackgroundResource(imageids[i]); imagelist.add(imageview); // 初始化切换点 ImageView dot = new ImageView(this); dot.setImageResource(R.drawable.dot); // 布局要采用具体的布局方式 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.setMargins(10, 10, 10, 10); dot.setLayoutParams(params); if (i == 0) { dot.setEnabled(true); } else { dot.setEnabled(false); } ll_dots.addView(dot); } tv_imageinfo.setText(imageinfos[0]); vp_ad.setAdapter(new myAdapter()); // 实现两边循环滑动 vp_ad.setCurrentItem(Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % imagelist.size()); isRunning = true; new Thread() { @Override public void run() { while (isRunning) { count++; try { Thread.sleep(1000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } if (isScrolling || vp_ad.isPressed() || vp_ad.isSelected()) { count = 0; } else { if ((count % 5) == 0) { Message msg = new Message(); msg.what = CHANGE_PAGER; handler.sendMessage(msg); } } } } }.start(); } /** * 添加ViewPage的状态监听 */ private void addListener() { vp_ad.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { // 当页面状态发生变化时调用 @Override public void onPageScrollStateChanged(int arg0) { } // 当页面正在滑动时调用 @Override public void onPageScrolled(int arg0, float arg1, int arg2) { //设置是否滑动为滑动 if(arg1>0.0000001) isScrolling = true; else //设置是否滑动为滑动 isScrolling = false; } // 当页面切换后调用 @Override public void onPageSelected(int position) { position = position%imagelist.size(); //设置文字描述内容 tv_imageinfo.setText(imageinfos[position]); //改变指示点的状态 //把当前点enbale 为true ll_dots.getChildAt(position).setEnabled(true); //把上一个点设为false ll_dots.getChildAt(lastShowDot).setEnabled(false); lastShowDot = position; } }); vp_ad.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { isScrolling = true; return false; } }); } // 定义实现循环的handler private Handler handler = new Handler() { @Override public void handleMessage(Message msg) { switch (msg.what) { case CHANGE_PAGER: vp_ad.setCurrentItem(vp_ad.getCurrentItem() + 1); break; } } }; @Override protected void onDestroy() { isRunning = false; super.onDestroy(); } /** * 定义适配器 * */ class myAdapter extends PagerAdapter { @Override /** * 销毁对应位置上的object */ public void destroyItem(ViewGroup container, int position, Object object) { // super.destroyItem(container, position, object); container.removeView((View) object); } @Override /** * 获得相应位置上的view, * container view的容器,就是viewpager本身 * position 相应的位置 */ public Object instantiateItem(ViewGroup container, int position) { // 实现循环滑动 position = position % imagelist.size(); // 添加内容 container.addView(imagelist.get(position)); return imagelist.get(position); } @Override /** * 获得页面的总数 */ public int getCount() { // return imagelist.size(); // 实现循环滑动 return Integer.MAX_VALUE; } /** * 判断页面上的view和object是否有关联 */ @Override public boolean isViewFromObject(View view, Object object) { return view == object; } } }
要说明的是,使用ViewPager的重中之重是实现好适配器,适配器的使用方法与listview类似,其次要实现好切换,就要使用好
setOnPageChangeListener()方法,具体情况具体使用
剩下的就是一些太重要的了:
比如说普通点的定义:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <size android:width="8dip" android:height="8dip"/> <solid android:color="#55000000"/> </shape>
聚焦后的点:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" > <size android:width="8dip" android:height="8dip"/> <solid android:color="#aaFFFFFF"/> </shape>
点的状态设置:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/normal_dot" android:state_enabled="false"/> <item android:drawable="@drawable/foused_dot" android:state_enabled="true"/> </selector>最终效果如下:
相关文章推荐
- VMware vSphere常见问题汇总(二十五)
- iOS 设置的字体的大小与PS字体大小的关系
- string <==>liststring
- 第十五周程序阅读-范型程序设计(1)
- POJ 2084 Game of Connections 递推/卡特兰数
- 使用React.js 重新构建HipChat
- win10 安装sqlserver2000
- 微信客服接口
- Google Android开发者文档系列-创建有内容分享特性的应用之文件共享(序言)
- Android改变mediaController的位置
- TCP洪水攻击(SYN Flood)的诊断和处理
- kafka和flume整合
- Android UI设计之<十>自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果
- 安装DirectX SDK报错s1023的解决
- ARM汇编指令CMP/CMN/TST/TEQ
- 关于tableView多选删除的编辑设置
- typedef
- Android drawable xml 各种小知识
- sdk带布局开发
- 静态方法何时使用