iOS圖片輪播

講解順序：

• 效果圖
• 代碼
• 所用類的官方文檔講解

1、效果圖

iOS.gif

2龙填、代碼

#import "ViewController.h"

#define w self.view.frame.size.width
static BOOL order;
@interface ViewController ()<UIScrollViewDelegate>

@property (nonatomic, retain)NSTimer* myTimer;//定時器
@property (nonatomic, retain)UIPageControl *myPageControl;//頁面控制
@property(nonatomic,strong)UIScrollView *scroll;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    order = YES;//正序
    
    _scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 200)];
    _scroll.contentSize = CGSizeMake(w*5, 200);
    _scroll.pagingEnabled = YES;
    _scroll.backgroundColor = [UIColor blueColor];
    _scroll.showsHorizontalScrollIndicator = NO;
    _scroll.delegate = self;
    [self.view addSubview:_scroll];
    
    for(int i = 0; i<5; i++){
        UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(w*i, 0, w, 200)];
        label.text = [NSString stringWithFormat:@"我是第%d個視圖",i+1];
        label.textAlignment = NSTextAlignmentCenter;
        [label setBackgroundColor:[UIColor colorWithRed:arc4random()%256/255.0 green:arc4random()%256/255.0  blue:arc4random()%256/255.0  alpha:1.0]];
        [_scroll addSubview:label];
    }
    
    _myPageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 100, w, 50)];
    _myPageControl.numberOfPages = 5;//總頁數(shù)
    _myPageControl.currentPageIndicatorTintColor = [UIColor redColor];//選中點的顏色
    _myPageControl.pageIndicatorTintColor = [UIColor whiteColor];//其它點的顏色
    [self.view addSubview:_myPageControl];
    
    //創(chuàng)建定時器
    _myTimer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(changeView) userInfo:nil repeats:YES];
    //添加到指定模式
    [[NSRunLoop mainRunLoop] addTimer:_myTimer forMode:NSRunLoopCommonModes];
}
//滾動結束
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    float offset_X = _scroll.contentOffset.x;
    _myPageControl.currentPage = offset_X / w;
    
}
//開始拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
    [_myTimer setFireDate:[NSDate distantFuture]];
}
//結束拖拽
-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
    [_myTimer setFireDate:[NSDate dateWithTimeInterval:1.0 sinceDate:[NSDate date]]];
}

-(void)changeView{
    NSInteger page = 0;
    if(order == YES){
        page = _myPageControl.currentPage + 1;
        if(page == _myPageControl.numberOfPages)
        {
            order = NO;
        }
    }
    if(order == NO){
        page = _myPageControl.currentPage - 1;
        if(page == 0)
        {
            order = YES;
        }
    }
    CGPoint offset = _scroll.contentOffset;
    offset.x = page * _scroll.frame.size.width;
    //顯示指定區(qū)域
    [_scroll setContentOffset:offset animated:YES];
}
-(void)viewDidDisappear:(BOOL)animated
{
    [_myTimer invalidate];// 將定時器從運行循環(huán)中移除慌申，
    _myTimer = nil;// 銷毀定時器
}

@end

3瘾腰、官方文檔講解

NSTimer官方文檔 參考作者文章

#import <Foundation/NSObject.h>
#import <Foundation/NSDate.h>

NS_ASSUME_NONNULL_BEGIN
@interface NSTimer : NSObject
//創(chuàng)建定時器姨裸，ti時間后啟動坯辩，這種方式創(chuàng)建后馁龟，需要手動添加到RunLoop，參數(shù)repeats是指定是否循環(huán)執(zhí)行
+ (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti invocation:(NSInvocation *)invocation repeats:(BOOL)yesOrNo;
//創(chuàng)建定時器濒翻，ti時間后啟動屁柏，并添加到默認的RunLoop模式中
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti invocation:(NSInvocation *)invocation repeats:(BOOL)yesOrNo;

+ (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(nullable id)userInfo repeats:(BOOL)yesOrNo;
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)ti target:(id)aTarget selector:(SEL)aSelector userInfo:(nullable id)userInfo repeats:(BOOL)yesOrNo;

+ (NSTimer *)timerWithTimeInterval:(NSTimeInterval)interval repeats:(BOOL)repeats block:(void (^)(NSTimer *timer))block API_AVAILABLE(macosx(10.12), ios(10.0), watchos(3.0), tvos(10.0));
+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)interval repeats:(BOOL)repeats block:(void (^)(NSTimer *timer))block API_AVAILABLE(macosx(10.12), ios(10.0), watchos(3.0), tvos(10.0));

- (instancetype)initWithFireDate:(NSDate *)date interval:(NSTimeInterval)interval repeats:(BOOL)repeats block:(void (^)(NSTimer *timer))block API_AVAILABLE(macosx(10.12), ios(10.0), watchos(3.0), tvos(10.0));
- (instancetype)initWithFireDate:(NSDate *)date interval:(NSTimeInterval)ti target:(id)t selector:(SEL)s userInfo:(nullable id)ui repeats:(BOOL)rep NS_DESIGNATED_INITIALIZER;
// 啟動 Timer
- (void)fire;
//設置定時器的啟動時間(可以讓定時器啟動與停止)
@property (copy) NSDate *fireDate;
//獲取定時器調用間隔時間
@property (readonly) NSTimeInterval timeInterval;
//設置誤差范圍
@property NSTimeInterval tolerance NS_AVAILABLE(10_9, 7_0);
// 停止 Timer ，將定時器從循環(huán)池中移除
- (void)invalidate;
// 獲取定時器是否有效
@property (readonly, getter=isValid) BOOL valid;
// 獲取參數(shù)信息
@property (nullable, readonly, retain) id userInfo;

@end
NS_ASSUME_NONNULL_END

UIPageControl官方文檔

#import <Foundation/Foundation.h>
#import <UIKit/UIControl.h>
#import <UIKit/UIKitDefines.h>

NS_ASSUME_NONNULL_BEGIN

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIPageControl : UIControl 

@property(nonatomic) NSInteger numberOfPages;//指定頁數(shù)有送，也就是顯示的點數(shù)
@property(nonatomic) NSInteger currentPage; //指定當前選中的點淌喻，默認為0
@property(nonatomic) BOOL hidesForSinglePage;//當只有一頁時是否顯示分頁控件
@property(nonatomic) BOOL defersCurrentPageDisplay; //點擊控件后是否延遲更新頁面
- (void)updateCurrentPageDisplay;//更新界面                    
- (CGSize)sizeForNumberOfPages:(NSInteger)pageCount;  
@property(nullable, nonatomic,strong) UIColor *pageIndicatorTintColor ;//默認點的顏色
@property(nullable, nonatomic,strong) UIColor *currentPageIndicatorTintColor ;//當前選中的點顯示的顏色

@end
NS_ASSUME_NONNULL_END

UIScrollView官方文檔

#import <Foundation/Foundation.h>
#import <CoreGraphics/CoreGraphics.h>
#import <UIKit/UIView.h>
#import <UIKit/UIGeometry.h>
#import <UIKit/UIKitDefines.h>
#import <UIKit/UIRefreshControl.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSInteger, UIScrollViewIndicatorStyle) {
    UIScrollViewIndicatorStyleDefault,   
    UIScrollViewIndicatorStyleBlack,      
    UIScrollViewIndicatorStyleWhite    
};

typedef NS_ENUM(NSInteger, UIScrollViewKeyboardDismissMode) {
    UIScrollViewKeyboardDismissModeNone,
    UIScrollViewKeyboardDismissModeOnDrag,     
    UIScrollViewKeyboardDismissModeInteractive,
} NS_ENUM_AVAILABLE_IOS(7_0);

UIKIT_EXTERN const CGFloat UIScrollViewDecelerationRateNormal NS_AVAILABLE_IOS(3_0);
UIKIT_EXTERN const CGFloat UIScrollViewDecelerationRateFast NS_AVAILABLE_IOS(3_0);

@class UIEvent, UIImageView, UIPanGestureRecognizer, UIPinchGestureRecognizer;
@protocol UIScrollViewDelegate;

NS_CLASS_AVAILABLE_IOS(2_0) @interface UIScrollView : UIView <NSCoding>

@property(nonatomic)         CGPoint                      contentOffset;//contentView的偏移值                
@property(nonatomic)         CGSize                       contentSize; //contentView的大小                 
@property(nonatomic)         UIEdgeInsets                 contentInset; //contentView四周的擴展大小                 
@property(nullable,nonatomic,weak) id<UIScrollViewDelegate>        delegate;   //代理       
@property(nonatomic,getter=isDirectionalLockEnabled) BOOL directionalLockEnabled; //用來讓用戶每次只在一個方向上滾動，豎直或者水平    
@property(nonatomic)         BOOL                         bounces;//彈簧效果                       
@property(nonatomic)         BOOL                         alwaysBounceVertical;//bounces是YES的時候才能使用雀摘，設置垂直方向的反彈是否有效          
@property(nonatomic)         BOOL                         alwaysBounceHorizontal;//bounces是YES的時候才能使用裸删，設置水平方向的反彈是否有效         
@property(nonatomic,getter=isPagingEnabled) BOOL          pagingEnabled __TVOS_PROHIBITED;//contentView是否整頁翻動
@property(nonatomic,getter=isScrollEnabled) BOOL          scrollEnabled;   //contentView是否能滾動            
@property(nonatomic)         BOOL                         showsHorizontalScrollIndicator; //是否顯示水平方向的滾動條
@property(nonatomic)         BOOL                         showsVerticalScrollIndicator;//是否顯示垂直方向的滾動條  
@property(nonatomic)         UIEdgeInsets                 scrollIndicatorInsets; //滾動條在scrollerView中的位置的擴展        
@property(nonatomic)         UIScrollViewIndicatorStyle   indicatorStyle; //滾動條樣式              
@property(nonatomic)         CGFloat                      decelerationRate NS_AVAILABLE_IOS(3_0);//手指放開后的減速率

- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; //設置內容視圖原點的偏移點，并設置是否有動畫
- (void)scrollRectToVisible:(CGRect)rect animated:(BOOL)animated;  //使rect中定義的區(qū)域可以剛好顯示在滾動視圖中      
- (void)flashScrollIndicators;  //短暫地顯示滾動指示器        

@property(nonatomic,readonly,getter=isTracking)     BOOL tracking;//返回用戶是否觸摸內容并初始化滾動.（只讀）       
@property(nonatomic,readonly,getter=isDragging)     BOOL dragging;//表明用戶是否開始滾動內容阵赠。      
@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating;// 返回滾動視圖中的內容是否在提起手指后繼續(xù)移動涯塔。（只讀）
@property(nonatomic) BOOL delaysContentTouches; //布爾值，規(guī)定滾動視圖是否延遲處理觸摸下壓手勢清蚀。
@property(nonatomic) BOOL canCancelContentTouches; //布爾值匕荸，控制觸摸內容視圖時是否總是導致跟蹤。  
- (BOOL)touchesShouldBegin:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event inContentView:(UIView *)view;//
- (BOOL)touchesShouldCancelInContentView:(UIView *)view;//

@property(nonatomic) CGFloat minimumZoomScale;//該值規(guī)定了內容可被縮小到多小枷邪。默認值為1.0   
@property(nonatomic) CGFloat maximumZoomScale;//該值規(guī)定了內容可被放大到多大榛搔。默認值為1.0。  

@property(nonatomic) CGFloat zoomScale ;//該值規(guī)定了內容當前縮放了多少东揣。默認值是1.0践惑。           
- (void)setZoomScale:(CGFloat)scale animated:(BOOL)animated;//
- (void)zoomToRect:(CGRect)rect animated:(BOOL)animated;//
@property(nonatomic) BOOL  bouncesZoom; //若該屬性的值為YES，在縮放超出最大值或最小值時嘶卧，滾動視圖會臨時播放一個稍超出限制范圍的動畫再返回限制大小尔觉。       
@property(nonatomic,readonly,getter=isZooming)       BOOL zooming; //布爾值，表明內容視圖當前是否在縮芥吟。     
@property(nonatomic,readonly,getter=isZoomBouncing)  BOOL zoomBouncing; //布爾值侦铜，表明縮放已超過了指定接收器的縮放限制。
@property(nonatomic) BOOL  scrollsToTop __TVOS_PROHIBITED; //滾動至頂部手勢是觸摸狀態(tài)欄钟鸵；當此屬性為YES時泵额，滾動視圖在此手勢發(fā)生時跳轉至狀態(tài)欄。此屬性默認為YES携添。        
@property(nonatomic, readonly) UIPanGestureRecognizer *panGestureRecognizer ;//當前用于滑動手勢的手勢識別器
@property(nullable, nonatomic, readonly) UIPinchGestureRecognizer *pinchGestureRecognizer ;//當前用于擴張/收縮手勢的手勢識別器（只讀）
@property(nonatomic, readonly) UIGestureRecognizer *directionalPressGestureRecognizer ;//
@property(nonatomic) UIScrollViewKeyboardDismissMode keyboardDismissMode NS_AVAILABLE_IOS(7_0);//
@property (nonatomic, strong, nullable) UIRefreshControl *refreshControl NS_AVAILABLE_IOS(10_0) __TVOS_PROHIBITED;//
@end

@protocol UIScrollViewDelegate<NSObject>
@optional
- (void)scrollViewDidScroll:(UIScrollView *)scrollView;//已經滑動 
- (void)scrollViewDidZoom:(UIScrollView *)scrollView NS_AVAILABLE_IOS(3_2);//已經縮放
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;//開始拖動
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset;//
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;// 結束拖動
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView;//開始減速  
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;//減速停止   
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView;//滾動動畫停止時執(zhí)行
- (nullable UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;//返回一個放大或者縮小的視圖
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view;//開始放大或者縮小
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(nullable UIView *)view atScale:(CGFloat)scale;//縮放結束時
- (BOOL)scrollViewShouldScrollToTop:(UIScrollView *)scrollView; //是否支持滑動至頂部
- (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView; //滑動到頂部時調用該方法
@end
NS_ASSUME_NONNULL_END

Android圖片輪播

講解順序：

• 效果圖
• 代碼

1嫁盲、效果圖

未命名.gif

2、代碼

MainActivity文件

package com.example.work.viewpager;

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.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager viewPager;
    private List<ImageView> images;
    private List<View> points;
    private int oldPosition = 0;
    private int[] imageIds = new int[]{
            R.drawable.f27,
            R.drawable.f28,
            R.drawable.f29,
            R.drawable.f30
    };
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewPager = (ViewPager)findViewById(R.id.viewPager);
        initViews();
        viewPager.setAdapter(new MyPagerAdapter());
        timer.schedule(task, 1000, 1000); // 1s后執(zhí)行task,經過1s再次執(zhí)行
    }

    private void initViews(){
        //顯示的圖片
        images = new ArrayList<ImageView>();
        for(int i = 0; i < imageIds.length; i++){
            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);
            images.add(imageView);
        }
        //顯示的小點
        points = new ArrayList<View>();
        points.add(findViewById(R.id.dot_0));
        points.add(findViewById(R.id.dot_1));
        points.add(findViewById(R.id.dot_2));
        points.add(findViewById(R.id.dot_3));
        //設置默認顯示的選項卡
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        points.get(position).setBackgroundResource(R.drawable.p2);
        points.get(oldPosition).setBackgroundResource(R.drawable.point);

        oldPosition = position;
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    //適配器
    class MyPagerAdapter extends PagerAdapter{

        @Override
        public int getCount() {
            return images.size();
        }

        //實例化
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View v = images.get(position);
            container.addView(v);
            return v;
        }

        //刪除選項卡
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(images.get(position));
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //獲取標題
        public CharSequence getPageTitle(int position){

            return null;
        }
    }

    Handler handler = new Handler() {
        public void handleMessage(Message msg) {
            if (msg.what == 1) {
                viewPager.setCurrentItem((oldPosition+1)% imageIds.length);
            }
            super.handleMessage(msg);
        };
    };
    Timer timer = new Timer();
    TimerTask task = new TimerTask() {

        @Override
        public void run() {
            // 需要做的事:發(fā)送消息
            Message message = new Message();
            message.what = 1;
            handler.sendMessage(message);
        }
    };
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.work.viewpager.MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_height="200dp"
        android:layout_width="match_parent">
    </android.support.v4.view.ViewPager>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dip"
        android:layout_gravity="bottom"
        android:background="#33000000"
        android:gravity="center"
        android:orientation="horizontal">
        <View
            android:id="@+id/dot_0"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:background="@drawable/p2"/>

        <View
            android:id="@+id/dot_1"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:background="@drawable/point"/>
        <View
            android:id="@+id/dot_2"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:background="@drawable/point"/>
        <View
            android:id="@+id/dot_3"
            android:layout_width="10dip"
            android:layout_height="10dip"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:background="@drawable/point"/>
    </LinearLayout>
</LinearLayout>