经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » Android » 查看文章
Android利用ViewPager实现带小圆球的图片滑动
来源：jb51　　时间：2018/11/25 19:39:00　　对本文有异议

在上文实现的带小圆球的图片滑动的通用性较好，但是较复杂。

现在也是利用 ViewPager ，但是却没有利用 ShapeDrawable 来实现带小圆球的图片滑动。如有些播放器一样，在开始安装 app 时，都会出现引导界面，然后才进入主界面，但是在重新启动 app 时却不会再出现该引导界面。

下面实现的就是该类似的功能，只是把引导界面都做成了图片显示，这样更能够体现不同的做法（和上一篇博客）。

本例主要主要：在小圆点的绘制和 viewpager 相关联起来。

如下效果：

MyPagerAdapter主要用于创建适配器；

MyPagerAdapter.java  :

  1. package com.android.circleforimage;
  2.  
  3. import android.app.Activity;
  4. import android.content.Intent;
  5. import android.os.Bundle;
  6. import android.support.v4.app.Fragment;
  7. import android.support.v4.app.FragmentManager;
  8. import android.support.v4.app.FragmentPagerAdapter;
  9. import android.view.LayoutInflater;
  10. import android.view.View;
  11. import android.view.View.OnClickListener;
  12. import android.view.ViewGroup;
  13. import android.widget.Button;
  14. import android.widget.ImageView;
  15.  
  16. public class MyPagerAdapter extends FragmentPagerAdapter {
  17.  
  18.  private static Activity activity;
  19.  
  20.  private static final int[] IMAGES = { R.drawable.x01, R.drawable.x02,
  21.  R.drawable.x03, R.drawable.x04, R.drawable.x05 };
  22.  public static int sum = IMAGES.length;
  23.  
  24.  public MyPagerAdapter(FragmentManager fm) {
  25.  super(fm);
  26.  }
  27.  
  28.  /**
  29.  * 为了获得 MainActivity 中的 activity
  30.  */
  31.  public void setForActivity(Activity activity) {
  32.  this.activity = activity;
  33.  }
  34.  
  35.  public Activity getForActivity() {
  36.  return activity;
  37.  }
  38.  
  39.  @Override
  40.  public int getCount() {
  41.  return IMAGES.length;
  42.  }
  43.  
  44.  @Override
  45.  public Fragment getItem(final int position) {
  46.  return MyFragment.newInstance(position);
  47.  }
  48.  
  49.  public static class MyFragment extends Fragment {
  50.  
  51.  private int mBaseIndex;
  52.  
  53.  // 使用工厂模式创建 Fragment
  54.  static MyFragment newInstance(int baseIndex) {
  55.  MyFragment fragment = new MyFragment();
  56.  fragment.setBaseIndex(baseIndex);
  57.  return fragment;
  58.  }
  59.  
  60.  public MyFragment() {
  61.  super();
  62.  }
  63.  
  64.  @Override
  65.  public void onCreate(Bundle savedInstanceState) {
  66.  super.onCreate(savedInstanceState);
  67.  }
  68.  
  69.  @Override
  70.  public View onCreateView(LayoutInflater inflater, ViewGroup container,
  71.  Bundle savedInstanceState) {
  72.  // 最后一张图片上有 button 按钮
  73.  if (getBaseIndex() == IMAGES.length - 1) {
  74.  return initForButton(inflater);
  75.  } else {
  76.  return showImages(inflater);
  77.  }
  78.  }
  79.  
  80.  /**
  81.  * 在全局列表中保存一个索引，记录页面开始的地方
  82.  */
  83.  public void setBaseIndex(int index) {
  84.  mBaseIndex = index;
  85.  }
  86.  
  87.  /**
  88.  * 在全局列表中检索索引，可以找到页面开始的地方
  89.  */
  90.  public int getBaseIndex() {
  91.  return mBaseIndex;
  92.  }
  93.  
  94.  public View initForButton(LayoutInflater inflater){
  95.  
  96.  View view = inflater.inflate(R.layout.item_two, null);
  97.  
  98.  Button button = (Button) view.findViewById(R.id.button);
  99.  button.setOnClickListener(new OnClickListener() {
  100.  
  101.  @Override
  102.  public void onClick(View v) {
  103.   Intent intent = new Intent(activity,
  104.   SecondActivity.class);
  105.   startActivity(intent);
  106.   activity.finish();
  107.  }
  108.  });
  109.  return view;
  110.  }
  111.  
  112.  public View showImages(LayoutInflater inflater){
  113.  View view = inflater.inflate(R.layout.item_one, null);
  114.  ImageView imageView = (ImageView) view.findViewById(R.id.imageView);
  115.  imageView.setImageResource(IMAGES[getBaseIndex()]);
  116.  imageView.setScaleType(ImageView.ScaleType.FIT_XY);
  117.  
  118.  return view;
  119.  }
  120.  }
  121.  
  122. }

Circle 类主要用于绘制小圆球：

Circle.java :

  1. package com.android.circleforimage;
  2.  
  3. import android.content.Context;
  4. import android.graphics.Canvas;
  5. import android.graphics.Color;
  6. import android.graphics.Paint;
  7. import android.util.AttributeSet;
  8. import android.view.View;
  9.  
  10. public class Circle extends View {
  11.  
  12.  private Paint paint;
  13.  
  14.  private int radius = 16;
  15.  // 页数和小圆球的数量相等
  16.  private int count = MyPagerAdapter.sum;
  17.  // 被选中的位置
  18.  private int choosePosition = 0;
  19.  // 两个小圆之间的中心距
  20.  private int gap = 70;
  21.  
  22.  /**
  23.  * 共外部的类调用
  24.  */
  25.  public void choose(int pos) {
  26.  choosePosition = pos;
  27.  // 通知重绘
  28.  this.invalidate();
  29.  }
  30.  
  31.  public Circle(Context context) {
  32.  this(context, null);
  33.  }
  34.  
  35.  public Circle(Context context, AttributeSet attrs) {
  36.  this(context, attrs, 0);
  37.  }
  38.  
  39.  public Circle(Context context, AttributeSet attrs, int defStyleAttr) {
  40.  super(context, attrs, defStyleAttr);
  41.  
  42.  paint = new Paint();
  43.  paint.setAntiAlias(true);
  44.  }
  45.  
  46.  @Override
  47.  protected void onDraw(Canvas canvas) {
  48.  super.onDraw(canvas);
  49.  
  50.  int width = getWidth();
  51.  int height = getHeight();
  52.  // 居中显示时，小圆球的起始位置
  53.  int startPx = (width - (count - 1) * gap) / 2;
  54.  
  55.  for (int i = 0; i < count; i++) {
  56.  if (choosePosition == i) {
  57.  paint.setColor(Color.RED);
  58.  canvas.drawCircle(startPx + i * gap, height - 50, radius + 4,
  59.   paint);
  60.  } else {
  61.  paint.setColor(Color.WHITE);
  62.  canvas.drawCircle(startPx + i * gap, height - 50, radius, paint);
  63.  }
  64.  }
  65.  }
  66. }

MainActivity.java :

  1. package com.android.circleforimage;
  2.  
  3. import com.android.circleforimageutils.Words;
  4.  
  5. import android.app.Activity;
  6. import android.content.Intent;
  7. import android.content.SharedPreferences;
  8. import android.os.Bundle;
  9. import android.preference.PreferenceManager;
  10. import android.support.v4.app.FragmentActivity;
  11. import android.support.v4.view.ViewPager;
  12. import android.view.Window;
  13. import android.view.WindowManager;
  14.  
  15. public class MainActivity extends FragmentActivity {
  16.  
  17.  private ViewPager viewPager;
  18.  private MyPagerAdapter mAdapter;
  19.  private Circle circle;
  20.  
  21.  private Activity activity = null;
  22.  
  23.  @Override
  24.  protected void onCreate(Bundle savedInstanceState) {
  25.  super.onCreate(savedInstanceState);
  26.  initActivity();
  27.  setContentView(R.layout.activity_main);
  28.  
  29.  activity = this;
  30.  showForSecondActivity();
  31.  
  32.  viewPager = (ViewPager) findViewById(R.id.viewPager);
  33.  circle = (Circle) findViewById(R.id.circle);
  34.  
  35.  scrollPager();
  36.  
  37.  mAdapter = new MyPagerAdapter(getSupportFragmentManager());
  38.  /* 调用 MyPagerAdapter 的方法*/
  39.  mAdapter.setForActivity(activity);
  40.  
  41.  viewPager.setAdapter(mAdapter);
  42.  }
  43.  
  44.  /**
  45.  * 对界面的处理
  46.  */
  47.  private void initActivity() {
  48.  // 去标题
  49.  requestWindowFeature(Window.FEATURE_NO_TITLE);
  50.  // 全屏
  51.  getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
  52.  WindowManager.LayoutParams.FLAG_FULLSCREEN);
  53.  }
  54.  
  55.  /**
  56.  * 第一次安装启动时，会加载开始的页面，第二次启动时，会跳过加载页面
  57.  */
  58.  private void showForSecondActivity() {
  59.  // PreferenceManager:Used to help create Preference hierarchies from activities or XML.
  60.  SharedPreferences mSharedPreferences = PreferenceManager.getDefaultSharedPreferences(this);
  61.  SharedPreferences.Editor editor = mSharedPreferences.edit();
  62.  
  63.  boolean b = mSharedPreferences.getBoolean(Words.KEY_ONE, true);
  64.  if (b) {
  65.  editor.putBoolean(Words.KEY_ONE, false);
  66.  editor.commit();
  67.  } else {
  68.  Intent intent = new Intent(this, SecondActivity.class);
  69.  startActivity(intent);
  70.  finish();
  71.  }
  72.  }
  73.  
  74.  /**
  75.  * viewPager 滚动时，提示 Circle 类重绘
  76.  */
  77.  private void scrollPager() {
  78.  viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
  79.  @Override
  80.  public void onPageSelected(int position) {
  81.  super.onPageSelected(position);
  82.  
  83.  circle.choose(position);
  84.  }
  85.  });
  86.  }
  87.  
  88. }

另外新建一个常量类 Words，用于存放存量，不在一个包中；

Words.java :

  1. package com.android.circleforimageutils;
  2.  
  3. public class Words {
  4.  public static String KEY_ONE = "key_for_main";
  5. }

SecondActivity.java :

  1. package com.android.circleforimage;
  2.  
  3. import android.app.Activity;
  4. import android.graphics.Color;
  5. import android.os.Bundle;
  6. import android.view.Gravity;
  7. import android.widget.TextView;
  8.  
  9. public class SecondActivity extends Activity{
  10.  
  11.  @Override
  12.  protected void onCreate(Bundle savedInstanceState) {
  13.  super.onCreate(savedInstanceState);
  14.  
  15.  TextView textView = new TextView(this);
  16.  textView.setText("欢迎来到我的博客：\n http://blog.csdn.net/antimage08");
  17.  textView.setTextSize(25);
  18.  textView.setTextColor(Color.BLUE);
  19.  textView.setGravity(Gravity.CENTER);
  20.  
  21.  setContentView(textView);
  22.  }
  23. }

activity_main.xml （一般情况下，有 viewpager 和其他占界面较少的组件一起时，效果和本例相似时，可以选用 FrameLayout）:

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.  xmlns:tools="http://schemas.android.com/tools"
  3.  android:layout_width="match_parent"
  4.  android:layout_height="match_parent"
  5.  android:orientation="vertical"
  6.  tools:context="com.android.circleforimage.MainActivity" >
  7.  
  8.  <android.support.v4.view.ViewPager
  9.   android:id="@+id/viewPager"
  10.   android:layout_width="match_parent"
  11.   android:layout_height="match_parent" />
  12.  
  13.  <com.android.circleforimage.Circle 
  14.   android:id="@+id/circle"
  15.   android:layout_width="match_parent"
  16.   android:layout_height="match_parent"/>
  17. </FrameLayout>

item_one.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.  
  7.  <ImageView 
  8.   android:id="@+id/imageView"
  9.   android:layout_width="match_parent"
  10.   android:layout_height="match_parent"
  11.   /> 
  12.  
  13. </LinearLayout>

item_two.xml （ImageView 中 src 指定的是用于在有 button 按钮时有图片显示才加载的，在代码中没有添加有 button 按钮界面时的图片） :

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout 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.  
  7.  <ImageView 
  8.   android:layout_width="match_parent"
  9.   android:layout_height="match_parent"
  10.   android:src="@drawable/x05"/>
  11.  
  12.  <Button 
  13.   android:id="@+id/button"
  14.   android:layout_alignParentBottom="true"
  15.   android:layout_alignParentRight="true"
  16.   android:text="点击进入"
  17.   android:textSize="20sp"
  18.   android:layout_width="wrap_content"
  19.   android:layout_height="wrap_content"/>
  20.  
  21. </RelativeLayout>

最后不能忘了在 AndroidManifest.xml 中为 SecondActivity 注册，最好在刚刚建好该类时就注册，这样不易遗忘：

  1. <activity android:name=".SecondActivity" />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Android热门文章

  • 安卓虚拟定位实现与反作弊思路
  • Android之Activity启动流程详解（基于api28）
  • MAUI开发Android程序使PDA扫码广播消息转发至Web页面
  • android开发技巧杂谈
  • 高通CSR8675蓝牙音频芯片介绍
  • Android Studio列表用法之一：ListView图文列表显示（实例）
  • 分析Android 11.0Settings源码之主界面加载
  • 联发科MT6731 4G智能功能手机处理器芯片介绍
  • android 请求接口报错 org.apache.http.conn.HttpHostConnectException: Connection to http://192.168.1.90:9090 refused
  • GSYVideoPlayer使用记录

    • Android推荐文章

  • Jetpack Compose(7)——触摸反馈
  • 安卓开发日志采集和分析面面谈
  • Android桌面Launcher源码浅析
  • Android启动过程-万字长文(Android14)
  • Android Studio制作简单登录界面
  • FFmpeg开发笔记（九）Linux交叉编译Android的x265库
  • 在Android开发中如何使用OpenSL ES库播放解码后的pcm音频文件？
  • Android 开机流程介绍
  • 安卓端出现https请求失败的一次问题排查
  • Android 编译介绍

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号