Створення браузера з історією, адресним рядком, UIVisualEffectView

Вітаю, Хабр!

Сьогодні я хотів би вам розповісти про створення браузера на новому (відносно) мовою Swift.

Код досить простий. Як і сам браузер. Робив я його для практики. Всі питання обговорю і допоможу. Пишіть в коментарях.

Для початку створимо Single New Application Project.

image

Параметри, думаю, вам давно відомі. Втім, налаштуйте під себе. У мене наступні:

image

Хотілося б відзначити, як мінімум обов'язковим наявність Use Core Data. Цей фреймворк допомагає вам зберігати дані при абсолютному завершення програми, тобто виходу з режиму Background Working.

Спочатку розповім функціонал браузера:

1.При натисканні на кнопку «Почати» відкриває меню з параметрами: Історія, Адресна рядок, Кнопка перейти.
2. При натисканні на кнопку «Почати» браузер (сам сайт) розмивається Blur Effect.
3. Спочатку меню приховано.
4. Можливість перегляду історії сайтів.


Сам додаток дико сире. Якщо сподобається — пишіть. У наступному уроці навчу переходити по посиланнях на історії, забивати Історію сайтів Core Data та інше.

Почнемо з роботи над Storyboard. Додаємо 2 об'єкта: Button, Web View:

image

Для них створюємо 2 аутлети:

image

Тепер варто написати функцію завантаження сторінки (в початковому класі ViewController):

var url = "http://"
func loadUrl() {
let requestURL = NSURL(string: url)
let request = NSURLRequest(URL: requestURL!)
webViewOutlet.loadRequest(request)
} 

Тепер на StoryBoard додаємо ще кілька об'єктів. Це будуть Button і TextField.
Вони стоять на місці, прямо над клавіатурою. Якщо потрібно, то координати по y: 283

Створюємо аутлет до TextField, Button ставимо Action, втім, і аутлет теж.

@IBOutlet weak var textFieldOut: UITextField!
@IBOutlet weak var ButtonSend: UIButton!
@IBAction func ButtonSendAction(sender: UIButton) {
}

В Action ButtonSendAction прописуємо:

@IBAction func ButtonSendAction(sender: UIButton) {
url += textFieldOut.text
loadUrl()
url = "http://"
textFieldOut.hidden = true
ButtonSend.hidden = true
}

Зараз, якщо ми запустимо додаток, зможемо вільно переміщатися по сторінки, яку вбили в адресний рядок. Але нам потрібно вільне переміщення з двох і більше сторінок. Створюємо Action, щоб знову відкрити меню. Але перед цим треба зробити, щоб клавіатура прибирала за натисканні на кнопку return.

func textFieldShouldReturn(textField: UITextField) -> Bool {

textField.resignFirstResponder()

return true

}

Не забудьте прописати в класі метод UITextFieldDelegate і делегувати його з ViewController:

class ViewController: UIViewController, UITextFieldDelegate {}

Відмінно. Тепер створюємо Action, щоб знову відкрити меню. Приєднуємо Action до нижній кнопці. І відразу забиваємо його:

@IBAction func StartButtonAction(sender: UIButton) {
textFieldOut.hidden = false
ButtonSend.hidden = false
}


Готове. Тепер меню з'являється при натисканні на нижню і з'являється при натисканні на перейти.

image

Як бачите, UI виглядає жахливо. Тому зробимо, щоб при натисканні на Почати, сайт розмивався.

Створюємо функцію
func WebBlurred(){

blurViewed.frame = webViewOutlet.bounds
blurViewed.tag = 1
webViewOutlet.addSubview(blurViewed)
}

Як бачите, з'явилося багато неоголошених змінних. Тепер оголошуємо їх. Точніше її. Робиться це в самому класі. Тобто глобальна змінна.

var blurViewed = UIVisualEffectView(effect: UIBlurEffect(style: UIBlurEffectStyle.Light))

Тепер у @IBAction func StartButtonAction додамо цю функцію розмиття:

WebBlurred()

Півсправи зроблено. Залишилося, щоб при натисканні на Перейти, розмиття прибиралося. Робиться просто:

У ButtonSendAction додаємо:
blurViewed.removeFromSuperview()

Готове. Залишилася історія відвідувань:

image
image

Додаємо кнопку на ViewController.
Додаємо другий ViewController.

image

Затискаємо Ctrl, ведемо від кнопки до другого VC. Вибираємо Push.
Тепер, при натисканні, він буде переносити нас на 2VC.

Тепер нам потрібно додати на 2VC пару об'єктів: TableView, TableViewCell, BarItem,ItemButtonBar

image

У TableViewCell прописуємо индентификатор test.

image

Для пересування між VC, нам потрібно додати Navigation Controller. Робиться це тут:

image

У властивостях прибираємо галочку з Shows Navigation Controller:

image

Створюємо файл класу для другого VC. ПКМ на вікні файлів зліва > New File >:

imageCocoa Touch Class.

Підключаємо другий VC до нього через Indentity Inspector.

В клас додаємо методи:

class TableViewController: UIViewController, UITableViewDelegate, UITableViewDataSource 

TableView делегуємо з 2VC через Control.
Створюємо аутлет tableVIew.

@IBOutlet var tableview: UITableView!

І екшн до кнопки, яку ми створили (BarButton):

@IBAction func backbuttonPressed(sender: UIBarButtonItem) {

navigationController?.popViewControllerAnimated(true)
}


Ця функція дозволяє повертатися на попередній VC.

Створюємо новий Файл, називаємо TaskManager, тип NSObject і заповнюємо його:

import UIKit

var taskMgr : TaskManager = TaskManager()

struct task{

var name = "Un-Named"

}

class TaskManager: NSObject {

var tasks = [task]()


func addTask(name: String){
tasks.append(task(name:name))
}

}

Тут будемо зберігати нашу історію.

Повертаємося на VC1, додаємо в функцію, кнопки Перейти:

taskMgr.addTask(textFieldOut.text)

Додаємо функцію для 2VC:

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell: UITableViewCell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "test")

cell.текст мітки?.text = taskMgr.tasks[indexPath.row].name

return cell
}



І туди ж:

func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return taskMgr.tasks.count
}


image
image

ПРАЦЮЄ! Залишилася справа за малим. До функції перейти поставте аутлет кнопки Історія функції:

historyOutlet.hidden = true

Готове. Ви чудові. За хороші відгуки і конструктивну критику дам сурс код. Чекаю за коментарями, пишіть. Допоможу з будь-якою помилкою.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.