Android 和 iOS 圖片輪播

史耀傑發表於2019-02-26

iOS圖片輪播

講解順序：

效果圖
程式碼
所用類的官方文件講解

1、效果圖

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;//總頁數
    _myPageControl.currentPageIndicatorTintColor = [UIColor redColor];//選中點的顏色
    _myPageControl.pageIndicatorTintColor = [UIColor whiteColor];//其它點的顏色
    [self.view addSubview:_myPageControl];

    //建立定時器
    _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;
    //顯示指定區域
    [_scroll setContentOffset:offset animated:YES];
}
-(void)viewDidDisappear:(BOOL)animated
{
    [_myTimer invalidate];// 將定時器從執行迴圈中移除，
    _myTimer = nil;// 銷燬定時器
}

@end複製程式碼

3、官方文件講解

NSTimer官方文件參考作者文章

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

NS_ASSUME_NONNULL_BEGIN
@interface NSTimer : NSObject
//建立定時器，ti時間後啟動，這種方式建立後，需要手動新增到RunLoop，引數repeats是指定是否迴圈執行
+ (NSTimer *)timerWithTimeInterval:(NSTimeInterval)ti invocation:(NSInvocation *)invocation repeats:(BOOL)yesOrNo;
//建立定時器，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 ，將定時器從迴圈池中移除
- (void)invalidate;
// 獲取定時器是否有效
@property (readonly, getter=isValid) BOOL valid;
// 獲取引數資訊
@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;//指定頁數，也就是顯示的點數
@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中定義的區域可以剛好顯示在滾動檢視中      
- (void)flashScrollIndicators;  //短暫地顯示滾動指示器        

@property(nonatomic,readonly,getter=isTracking)     BOOL tracking;//返回使用者是否觸控內容並初始化滾動.（只讀）       
@property(nonatomic,readonly,getter=isDragging)     BOOL dragging;//表明使用者是否開始滾動內容。      
@property(nonatomic,readonly,getter=isDecelerating) BOOL decelerating;// 返回滾動檢視中的內容是否在提起手指後繼續移動。（只讀）
@property(nonatomic) BOOL delaysContentTouches; //布林值，規定滾動檢視是否延遲處理觸控下壓手勢。
@property(nonatomic) BOOL canCancelContentTouches; //布林值，控制觸控內容檢視時是否總是導致跟蹤。  
- (BOOL)touchesShouldBegin:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event inContentView:(UIView *)view;//
- (BOOL)touchesShouldCancelInContentView:(UIView *)view;//

@property(nonatomic) CGFloat minimumZoomScale;//該值規定了內容可被縮小到多小。預設值為1.0   
@property(nonatomic) CGFloat maximumZoomScale;//該值規定了內容可被放大到多大。預設值為1.0。  

@property(nonatomic) CGFloat zoomScale ;//該值規定了內容當前縮放了多少。預設值是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; //滾動至頂部手勢是觸控狀態列；當此屬性為YES時，滾動檢視在此手勢發生時跳轉至狀態列。此屬性預設為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;//滾動動畫停止時執行
- (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、效果圖

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後執行task,經過1s再次執行
    }

    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() {
            // 需要做的事:傳送訊息
            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>複製程式碼

圖片輪播--純css
2018-05-15
CSS
文字輪播與圖片輪播？CSS 不在話下
2022-06-07
CSS
ViewFlipper探索與使用——順便實現Android圖片輪播
2018-12-03
ViewAndroid
造輪子之圖片輪播元件(swiper)
2019-01-03
元件
Android輪播圖從0到1
2019-01-09
Android
java學習---前端---使用JavaScript和jQuery實現圖片輪播圖
2020-10-28
前端JavaScriptjQuery
實現簡單的輪播圖（單張圖片、多張圖片）
2020-02-11
用原生js實現圖片輪播器
2018-03-08
JS
jQuery輪播圖之上下輪播
2018-06-30
jQuery
輪播圖
2020-10-22
[外掛擴充套件]圖片輪播外掛
2019-05-11
套件
安卓之viewPager簡單用法圖片輪播
2018-04-19
安卓Viewpager
JQuery實現圖片輪播無縫滾動
2022-06-28
jQuery
微信小程式------輪播圖------縱向輪播圖
2024-05-28
微信小程式
vue輪播圖
2019-02-25
Vue
Flutter輪播圖
2020-07-02
Flutter
直播軟體原始碼，Android---Banner輪播圖
2023-04-10
原始碼Android
jQuery實現3D圖片輪播詳解
2018-12-02
jQuery3D
用原生JS實現圖片輪播切換功能
2018-06-06
JS
記一個JavaScript圖片輪播思路與程式碼
2019-03-03
JavaScript
手機直播原始碼，android 輪播圖自定製元件
2022-03-10
原始碼Android元件
原生JS實現輪播圖--第一章圖片展示
2018-09-02
JS
手機瀏覽器不能顯示輪播圖或是其他圖片
2021-09-09
瀏覽器
js 輪播圖 (原生)
2022-04-16
JS
面向Vue新人：使用Vue寫一個圖片輪播元件
2018-03-19
Vue元件
一個基於Vue的圖片輪播元件的實現
2018-05-03
Vue元件
直播平臺搭建原始碼，bootstrap實現圖片輪播效果
2023-05-03
原始碼boot
web前端入門到實戰：簡單的圖片輪播
2020-01-13
Web前端
PbootCMS模板呼叫幻燈片輪播圖及引數說明
2024-11-15
boot
app直播原始碼，Banner廣告圖片輪播控制元件
2022-05-09
APP原始碼控制元件
ViewPage實現輪播圖
2018-10-29
View
Banner實現輪播圖
2018-10-29
vue輪播圖外掛
2019-01-10
Vue
js實現輪播圖
2021-01-02
JS
微信小程式之swiper輪播圖中的圖片自適應高度
2019-02-16
微信小程式
『ios』view和tableview的截圖和圖片拼接
2018-09-25
iOSView
Android常用控制元件-BannerView(無限輪播圖控制元件)
2018-08-05
Android控制元件View
直播平臺製作，依靠C語言實現圖片輪播
2022-12-12
C語言

Android 和 iOS 圖片輪播

iOS圖片輪播

1、效果圖

2、程式碼

3、官方文件講解

NSTimer官方文件 參考作者文章

UIPageControl官方文件

UIScrollView官方文件

Android圖片輪播

1、效果圖

2、程式碼

MainActivity檔案

佈局檔案

相關文章

NSTimer官方文件參考作者文章