查看: 751|回复: 0

[手机开发] Android使用Recyclerview实现图片水平自动循环滚动效果

发表于 2017-12-25 08:00:00

简介:

本篇博客主要介绍的是如何使用RecyclerView实现图片水平方向自动循环(跑马灯效果)

效果图:   

思路:

1.准备m张图片

1.使用Recyclerview实现,返回无数个(实际Interge.MAXVALUE)item,第n个item显示第n%m张图片

3.使用recyclerview.scrollBy 每个一段时间水平滚动一段距离

4.通过layoutManager.findFirstVisibleItemPosition()获取当前显示的第一个View是第几个item,上面的ImageView显示对应de图片

实现代码:

XML文件

1.activity布局文件activity_recy.xml  

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical">
  6. <ImageView
  7. android:layout_width="300dp"
  8. android:layout_height="350dp"
  9. android:layout_gravity="center_horizontal"
  10. android:id="@+id/img"
  11. android:src="@drawable/p5"
  12. android:scaleType="fitXY"
  13. />
  14. <android.support.v7.widget.RecyclerView
  15. android:layout_width="match_parent"
  16. android:layout_height="150dp"
  17. android:layout_marginTop="10dp"
  18. android:id="@+id/recyclerview"
  19. ></android.support.v7.widget.RecyclerView>
  20. </LinearLayout>
复制代码

2.适配器布局item_horizon.xml  

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="wrap_content"
  4. android:layout_height="match_parent"
  5. android:orientation="vertical"
  6. >
  7. <ImageView
  8. android:layout_width="100dp"
  9. android:layout_height="match_parent"
  10. android:id="@+id/img"
  11. android:layout_marginLeft="5dp"
  12. android:layout_marginRight="5dp"
  13. android:scaleType="fitXY"
  14. />
  15. </LinearLayout>
复制代码

Activity  

  1. public class HorizontalActivity extends AppCompatActivity implements RecyAdapter.OnItemClickListener {
  2. private String TAG="HorizontalActivity";
  3. @BindView(R.id.img)
  4. ImageView img;
  5. @BindView(R.id.recyclerview)
  6. RecyclerView recyclerview;
  7. private Integer[] mImgIds = {R.drawable.p1, R.drawable.p2, R.drawable.p3, R.drawable.p4, R.drawable.p5,
  8. R.drawable.pic1, R.drawable.pic5, R.drawable.pic6};
  9. private List<Integer> datas;
  10. private RecyAdapter recyAdapter;
  11. private Handler mHandler=new Handler();
  12. private LinearLayoutManager layoutManager;
  13. private int oldItem=0;
  14. @Override
  15. protected void onCreate(@Nullable Bundle savedInstanceState) {
  16. super.onCreate(savedInstanceState);
  17. setContentView(R.layout.activity_recy);
  18. ButterKnife.bind(this);
  19. initData();
  20. initRecy();
  21. img.setImageResource(datas.get(0));
  22. recyAdapter.setOnItemClickListener(this);
  23. }
  24. Runnable scrollRunnable=new Runnable() {
  25. @Override
  26. public void run() {
  27. recyclerview.scrollBy(3,0);
  28. // int firstItem = layoutManager.findFirstVisibleItemPosition();
  29. int firstItem=layoutManager.findFirstVisibleItemPosition();
  30. if(firstItem!=oldItem&&firstItem>0){
  31. oldItem=firstItem;
  32. img.setImageResource(datas.get(oldItem%datas.size()));
  33. }
  34. Log.e(TAG, "run: firstItem:"+firstItem );
  35. mHandler.postDelayed(scrollRunnable,10);
  36. }
  37. };
  38. private void initRecy() {
  39. recyAdapter=new RecyAdapter(this,datas);
  40. layoutManager = new LinearLayoutManager(this);
  41. layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);
  42. recyclerview.setLayoutManager(layoutManager);
  43. recyclerview.setAdapter(recyAdapter);
  44. }
  45. private void initData() {
  46. datas=new ArrayList<>();
  47. for (int i = 0; i <mImgIds.length ; i++) {
  48. datas.add(mImgIds[i]);
  49. }
  50. }
  51. @Override
  52. protected void onResume() {
  53. super.onResume();
  54. mHandler.postDelayed(scrollRunnable,10);
  55. }
  56. @Override
  57. protected void onStop() {
  58. super.onStop();
  59. mHandler.removeCallbacks(scrollRunnable);
  60. }
  61. @Override
  62. public void onItemClick(View view, int tag) {
  63. Toast.makeText(this,"第"+tag+"张图片被点击了",Toast.LENGTH_SHORT).show();
  64. }
  65. }
复制代码

适配器RecyAdapter

  1. public class RecyAdapter extends RecyclerView.Adapter<RecyAdapter.ViewHolder> implements View.OnClickListener {
  2. private Context context;
  3. private List<Integer> datas;
  4. private OnItemClickListener onItemClickListener;
  5. public RecyAdapter(Context context, List<Integer> datas) {
  6. this.context = context;
  7. this.datas = datas;
  8. }
  9. @Override
  10. public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  11. View view = LayoutInflater.from(context).inflate(R.layout.item_horizontal, parent, false);
  12. ViewHolder vh=new ViewHolder(view);
  13. view.setOnClickListener(this);
  14. return vh;
  15. }
  16. @Override
  17. public void onBindViewHolder(ViewHolder holder, int position) {
  18. int newPos=position%datas.size();
  19. holder.img.setImageResource(datas.get(newPos));
  20. holder.itemView.setTag(position);
  21. }
  22. @Override
  23. public int getItemCount() {
  24. return Integer.MAX_VALUE;
  25. }
  26. @Override
  27. public void onClick(View view) {
  28. if(onItemClickListener!=null){
  29. onItemClickListener.onItemClick(view, (Integer) view.getTag());
  30. }
  31. }
  32. class ViewHolder extends RecyclerView.ViewHolder {
  33. ImageView img;
  34. public ViewHolder(View itemView) {
  35. super(itemView);
  36. img=itemView.findViewById(R.id.img);
  37. }
  38. }
  39. public void setOnItemClickListener(OnItemClickListener listener){
  40. this.onItemClickListener=listener;
  41. }
  42. interface OnItemClickListener{
  43. void onItemClick(View view,int tag);
  44. }
  45. }
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。



回复

使用道具 举报