2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【 Swift4.0】タブ型ニュースアプリ作成〜第1回〜

Last updated at Posted at 2019-08-04

キュレーションアプリを作る

横スライドのタブメニューライブラリPageMenuを使ったキュレーションアプリの実装手順を
2回に分けて紹介します。今回はyahooニュースのキュレーションアプリを作成します。

記事で取り扱っているサイトは説明の便宜上のためであり、利用は本記事内に留まります

1.プロジェクト作成

「Single View Application」をテンプレートにプロジェクトを新規作成します。今回は「NewsAppSample」という名前にしました。

2.PageMemuのインポート

https://github.com/orazz/PageMenu からSwift4.0版がダウンロードできます。ダウンロードしたらCAPSPageMenu.swiftをプロジェクトにドラッグ&ドロップします。
0.png

1-2.png

3.ウェブアクセスの設定

info.plistにApp Transport Security Settingsを追加します。その子要素にAllow Arbitray Loadsを追加してvalueをYESにします。これでウェブアクセスが全許可状態となります(2016.12月時点)。
2.png

4.コンテンツコントローラーの準備

PageMenuの各タブに対応するコントローラーを用意します。メニュー:File → New → Fileと辿り、「Cocoa Touch Class」をダブルクリックします。XIBファイルも同時作成したいので「Also create XIB file」にチェックを入れます。今回はViewControllerという名前にしました。
1.png

5.MainのViewControllerの実装

ViewControllerのプロパティにタブのタイトル名を格納し、
CAPSPageMenuOptionでタブの幅や高さを指定します。

ViewController.swift

// Swift4.0

import UIKit

class ViewController: UIViewController {
    
    var pageMenu: CAPSPageMenu?

    override func viewDidLoad() {
        super.viewDidLoad()
        
        var controllerArray : [UIViewController] = []
        
        let controller1:News1ViewController = News1ViewController()
        controller1.title = "トップ"
        controllerArray.append(controller1)
        let controller2:News2ViewController = News2ViewController()
        controller2.title = "ビジネス"
        controllerArray.append(controller2)
        let controller3:News3ViewController = News3ViewController()
        controller3.title = "スポーツ"
        controllerArray.append(controller3)
        let controller4:News4ViewController = News4ViewController()
        controller4.title = "エンタメ"
        controllerArray.append(controller4)
        let controller5:News5ViewController = News5ViewController()
        controller5.title = "2ちゃん"
        controllerArray.append(controller5)
        
        let paramerters: [CAPSPageMenuOption] = [
            
            .menuItemSeparatorWidth(4.3),
            .useMenuLikeSegmentedControl(true),
            .menuItemSeparatorPercentageHeight(0.1)
        ]
        
        pageMenu = CAPSPageMenu(viewControllers: controllerArray, frame: CGRect(x: 0.0, y: 20.0, width: self.view.frame.width, height: self.view.frame.size.height), pageMenuOptions: paramerters)
        
        //pageMenuのビューを親のビューに追加
        self.view.addSubview(pageMenu!.view)
        //pageMenuのビューをToolbarの後ろへ移動させた
        self.view.sendSubview(toBack: pageMenu!.view)
    }
    
    

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

6.各画面のViewControllerの実装

(1)進む・戻るボタンなどを簡単に実装可能なライブラリ「DotsLoader」を導入します。
 https://github.com/mattlawer/DotsLoader
 画面読み込み時に実行されるviewDidLoad内に各タブの表示画面を作成します。

// Swift4.0

import UIKit

class News1ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource,UIWebViewDelegate,XMLParserDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //背景画像を作る
        let imageView = UIImageView()
        imageView.frame = self.view.bounds
        imageView.image = UIImage(named: "1.jpg")
        self.view.addSubview(imageView)
        
        //引っ張って更新
        refreshControl = UIRefreshControl()
        refreshControl.tintColor = UIColor.white
        refreshControl.addTarget(self, action: #selector(refresh), for: UIControlEvents.valueChanged)
        
        //TableViewを作成する
        tableView.delegate = self
        tableView.dataSource = self
        tableView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height - 54.0)
        tableView.backgroundColor = UIColor.clear
        tableView.addSubview(refreshControl)
        self.view.addSubview(tableView)
        
        //WebView
        webView.frame = tableView.frame
        webView.delegate = self
        webView.scalesPageToFit = true
        webView.contentMode = .scaleAspectFit
        self.view.addSubview(webView)
        webView.isHidden = true
        
        //1つ進むボタン
        goButton = UIButton()
        goButton.frame = CGRect(x: self.view.frame.size.width - 50, y: self.view.frame.size.height - 128, width: 50, height: 50)
        goButton.setImage(UIImage(named: "go.png"), for: .normal)
        goButton.addTarget(self, action: #selector(nextPage), for: .touchUpInside)
        self.view.addSubview(goButton)
        
        //戻るボタン
        backButton = UIButton()
        backButton.frame = CGRect(x: 10, y: self.view.frame.size.height - 128, width: 50, height: 50)
        backButton.setImage(UIImage(named: "back.png"), for: .normal)
        backButton.addTarget(self, action: #selector(backPage), for: .touchUpInside)
        self.view.addSubview(backButton)
        
        //キャンセルボタン
        cancelButton = UIButton()
        cancelButton.frame = CGRect(x: 10, y: 80, width: 50, height: 50)
        cancelButton.setImage(UIImage(named: "cancel.png"), for: .normal)
        cancelButton.addTarget(self, action: #selector(cancel), for: .touchUpInside)
        self.view.addSubview(cancelButton)
        
        
        goButton.isHidden = true
        backButton.isHidden = true
        cancelButton.isHidden = true
        
        //ドッツビュー
        dotsView.frame = CGRect(x: 0, y: self.view.frame.size.height / 3, width: 
        self.view.frame.size.width, height: 100)
        dotsView.dotsCount = 5
        dotsView.dotsRadius = 10
        self.view.addSubview(dotsView)
        
        dotsView.isHidden = true

次の記事に続きます。

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?