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>複製程式碼