Android之实现局部自动滑动图片以及图片点击事件(Activity和Fragment都可)
2020-06-04 05:38
453 查看
参考:https://blog.csdn.net/small_lee/article/details/51213245
1、创立布局文件:(提示:将图片资源放在drawable文件中)
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" tools:context=".MainActivity"> <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <androidx.viewpager.widget.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="100dp" /> <RadioGroup android:id="@+id/group" android:layout_width="fill_parent" android:layout_height="100dp"/> </LinearLayout> </FrameLayout>
2、若是要在Activity中实现,则参考以下代码,否则跳转3:
package com.example.slideimg; import android.os.*; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.*; import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.PagerAdapter; import androidx.viewpager.widget.ViewPager; import java.lang.ref.*; import java.util.*; public class MainActivity extends AppCompatActivity { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.food01, R.drawable.food02, R.drawable.food03, R.drawable.food04}; //存放图片的数组 private List<ImageView> mList; //当前索引位置以及上一个索引位置 private static int index = 0, preIndex = 0; //是否需要轮播标志 private boolean isContinue = true; //定时器,用于实现轮播 private Timer timer = new Timer(); private MyHandler mHandler; public static class MyHandler extends Handler { private WeakReference<MainActivity> weakReference; public MyHandler(MainActivity activity) { weakReference = new WeakReference<>(activity); } @Override public void handleMessage(Message msg) { if (weakReference.get() != null) { index++; viewPager.setCurrentItem(index); } super.handleMessage(msg); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); addListener(); //让当前图片位于中间某个位置,目的就是为了开始能够左滑 viewPager.setCurrentItem(imageIds.length * 100); initRadioButton(imageIds.length);//注意这句和上面那句顺序不能写反,否则会出现第一个圆点无法显示选中状态 startSwitch(); } /** * 初始化控件 */ public void initView() { viewPager = (ViewPager) findViewById(R.id.viewpager); group= (RadioGroup) findViewById(R.id.group); } /** * 初始化数据 */ public void initData() { mList = new ArrayList<>(); viewPager.setAdapter(pagerAdapter); mHandler = new MyHandler(this); } /** * 添加监听 */ public void addListener() { viewPager.addOnPageChangeListener(onPageChangeListener); viewPager.setOnTouchListener(onTouchListener); } /** * 进行图片轮播 */ public void startSwitch() { //执行定时任务 timer.schedule(new TimerTask() { @Override public void run() { //首先判断是否需要轮播,是的话我们才发消息 if (isContinue) { mHandler.sendEmptyMessage(1); } } }, 3000, 3500);//延迟3秒,每隔3.5秒发一次消息; } /** * 根据图片个数初始化按钮 * @param length 图片所在集合长度 */ private void initRadioButton(int length) { for (int i = 0; i < length; i++) { ImageView imageview = new ImageView(this); imageview.setPadding(20, 0, 0, 0);//设置每个按钮之间的间距 //将按钮依次添加到RadioGroup中 group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); //默认选中第一个按钮,因为默认显示第一张图片 group.getChildAt(0).setEnabled(false); } } /** * 根据当前触摸事件判断是否要轮播 */ View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //手指按下和划动的时候停止图片的轮播 case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: isContinue = false; break; default: isContinue = true; } return false;//注意这里只能返回false,如果返回true,Dwon就会消费掉事件,MOVE无法获得事件, // 导致图片无法滑动 } }; /** * 根据当前选中的页面设置按钮的选中 */ ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { index = position;//当前位置赋值给索引 setCurrentDot(index % imageIds.length);//因为只有四个按钮,所以我们在此要对长度区域,保证范围在0到4 } @Override public void onPageScrollStateChanged(int state) { } }; /** * 设置对应位置按钮的状态 * @param i 当前位置 */ private void setCurrentDot(int i) { if (group.getChildAt(i) != null) { group.getChildAt(i).setEnabled(false);//当前按钮选中,显示蓝色 } if (group.getChildAt(preIndex) != null) { group.getChildAt(preIndex).setEnabled(true);//上一个取消选中。显示灰色 preIndex = i;//当前位置变为上一个,继续下次轮播 } } PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { //返回一个比较大的值,目的是为了实现无限轮播 return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { position = position % imageIds.length;//因为position非常大,而我们需要的position不能大于图片集合长度 //所以在此取余 ImageView imageView = new ImageView(MainActivity.this); imageView.setImageResource(imageIds[position]); imageView.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(imageView); mList.add(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // 注意在此不要做任何操作,因为我们需要实现向左滑动,否则会产生IndexOutOfBoundsException } }; @Override protected void onDestroy() { super.onDestroy(); //页面销毁的时候取消定时器 if (timer != null) { preIndex = 0; timer.cancel(); } } }
3、在Fragment中实现:
package com.example.f2; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.util.Log; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RadioGroup; import androidx.fragment.app.Fragment; import androidx.viewpager.widget.PagerAdapter; import androidx.viewpager.widget.ViewPager; import java.lang.ref.WeakReference; import java.util.ArrayList; import java.util.List; import java.util.Timer; import java.util.TimerTask; public class MyFragment1 extends Fragment { private static ViewPager viewPager; private RadioGroup group; //图片资源,实际项目需要从网络获取 private int[] imageIds = {R.drawable.food01, R.drawable.food02, R.drawable.food03, R.drawable.food04}; //存放图片的数组 private List<ImageView> mList; //当前索引位置以及上一个索引位置 private static int index = 0, preIndex = 0; //是否需要轮播标志 private boolean isContinue = true; //定时器,用于实现轮播 private Timer timer = new Timer(); private MyHandler mHandler; public static class MyHandler extends Handler { private WeakReference<Fragment> weakReference; public MyHandler(Fragment fragment) { weakReference = new WeakReference<>(fragment); } @Override public void handleMessage(Message msg) { if (weakReference.get() != null) { index++; viewPager.setCurrentItem(index); } super.handleMessage(msg); } } public MyFragment1() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fg_content, container, false); viewPager = (ViewPager)view.findViewById(R.id.viewpager); group= (RadioGroup)view.findViewById(R.id.group); initData(); addListener(); //让当前图片位于中间某个位置,目的就是为了开始能够左滑 viewPager.setCurrentItem(imageIds.length * 100); initRadioButton(imageIds.length);//注意这句和上面那句顺序不能写反,否则会出现第一个圆点无法显示选中状态 startSwitch(); Log.e("HEHE", "1日狗"); return view; } /** * 初始化控件 */ /** * 初始化数据 */ public void initData() { mList = new ArrayList<>(); viewPager.setAdapter(pagerAdapter); mHandler = new MyHandler(this); } /** * 添加监听 */ public void addListener() { viewPager.addOnPageChangeListener(onPageChangeListener); viewPager.setOnTouchListener(onTouchListener); } /** * 进行图片轮播 */ public void startSwitch() { //执行定时任务 timer.schedule(new TimerTask() { @Override public void run() { //首先判断是否需要轮播,是的话我们才发消息 if (isContinue) { mHandler.sendEmptyMessage(1); } } }, 3000, 3500);//延迟3秒,每隔3.5秒发一次消息; } /** * 根据图片个数初始化按钮 * @param length 图片所在集合长度 */ private void initRadioButton(int length) { for (int i = 0; i < length; i++) { ImageView imageview = new ImageView(MyFragment1.super.getContext()); imageview.setPadding(20, 0, 0, 0);//设置每个按钮之间的间距 //将按钮依次添加到RadioGroup中 group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT); //默认选中第一个按钮,因为默认显示第一张图片 group.getChildAt(0).setEnabled(false); } } /** * 根据当前触摸事件判断是否要轮播 */ View.OnTouchListener onTouchListener = new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { //手指按下和划动的时候停止图片的轮播 case MotionEvent.ACTION_DOWN://点击事件 int id=imageView.getId(); if(id==0) Toast.makeText(getContext(),"点击了甜点"+id,Toast.LENGTH_SHORT).show(); else if(id==1) Toast.makeText(getContext(),"点击了主食"+id,Toast.LENGTH_SHORT).show(); else if(id==2) Toast.makeText(getContext(),"点击了快餐"+id,Toast.LENGTH_SHORT).show(); else Toast.makeText(getContext(),"点击了饮品"+id,Toast.LENGTH_SHORT).show(); break; case MotionEvent.ACTION_MOVE: isContinue = false; break; default: isContinue = true; } return false;//注意这里只能返回false,如果返回true,Dwon就会消费掉事件,MOVE无法获得事件, // 导致图片无法滑动 } }; /** * 根据当前选中的页面设置按钮的选中 */ ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { index = position;//当前位置赋值给索引 setCurrentDot(index % imageIds.length);//因为只有四个按钮,所以我们在此要对长度区域,保证范围在0到4 } @Override public void onPageScrollStateChanged(int state) { } }; /** * 设置对应位置按钮的状态 * @param i 当前位置 */ private void setCurrentDot(int i) { if (group.getChildAt(i) != null) { group.getChildAt(i).setEnabled(false);//当前按钮选中,显示蓝色 } if (group.getChildAt(preIndex) != null) { group.getChildAt(preIndex).setEnabled(true);//上一个取消选中。显示灰色 preIndex = i;//当前位置变为上一个,继续下次轮播 } } PagerAdapter pagerAdapter = new PagerAdapter() { @Override public int getCount() { //返回一个比较大的值,目的是为了实现无限轮播 return Integer.MAX_VALUE; } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { position = position % imageIds.length;//因为position非常大,而我们需要的position不能大于图片集合长度 //所以在此取余 ImageView imageView = new ImageView(MyFragment1.super.getContext()); imageView.setImageResource(imageIds[position]); imageView.setId(position);//用于点击事件 imageView.setScaleType(ImageView.ScaleType.FIT_XY); container.addView(imageView); mList.add(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { // 注意在此不要做任何操作,因为我们需要实现向左滑动,否则会产生IndexOutOfBoundsException } }; @Override public void onDestroy() { super.onDestroy(); //页面销毁的时候取消定时器 if (timer != null) { preIndex = 0; timer.cancel(); } } }
4、结束。
相关文章推荐
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换,UIPageControl可点击
- 【Android】ViewPager实现图片左右滑动播放及添加点击事件
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换,UIPageControl可点击
- Viewpager+Tablayout实现滑动布局并监听tablayout点击事件以及fragment刷新问题。
- android:viewpager实现图片循环滑动+索引点击事件
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换,UIPageControl可点击
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换,UIPageControl可点击
- UIScrollView+UIPageControl+NSTimer实现图片的自动滑动以及用户可手动切换,UIPageControl可点击
- Android 轮播图的实现 自动+手动滑动+指示+点击事件
- Android实现局部图片滑动指引效果
- 【Android】 Viewpager+Fragment实现滑动图片的动态加载
- Android实现局部图片滑动指引效果示例
- Android使用RecyclerView实现自定义列表、点击事件以及下拉刷新
- Android项目类似淘宝 电商 搜索功能,监听软键盘搜索事件,延迟自动搜索,以及时间排序的搜索历史记录的实现
- Android中mpchartlib柱状图的详细属性以及实现(可左右滑动可点击)
- Android自定义View实现自动无限轮播,点击图片进入详情页
- Android fragment实现按钮点击事件的示例讲解
- Android中实现局部的图片滑动指引效果
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- TextView加载HTML数据(网络图片以及图片点击事件的实现)