add text(multiple line support) to imageView, edit, rotate or resize them as you want, then render the text on image

Overview

About

StickerTextView is an subclass of UIImageView. You can add multiple text to it, edit, rotate, resize the text as you want with one finger, then render the text on Image.

Features

  • You can add multiple Text to StickerTextView at the same time
  • Multiple line Text support
  • Rotate, resize the text with one finger
  • Set the Color, alpha, font, alignment, TextShadow, lineSpacing...... of the text
  • StickerTextView also handle the process of rendering text on Image
  • Written in Swift

Installation

Manually

Just drag the Source files into your project(To get the latest version, please install manually)

CocoaPods

To integrate StickerTextView into your Xcode project using CocoaPods, specify it in your Podfile and run pod install:

0.1.1" ">
use_frameworks!
pod "JLStickerTextView", "~> 0.1.1"

To get the latest version:

"https://github.com/Textcat/JLStickerTextView.git" ">
use_frameworks!
pod "JLStickerTextView", :git =>
"https://github.com/Textcat/JLStickerTextView.git"

Usage

Start

First, import JLStickerTextView, then subclass the UIImageView, which you want to add text on, to JLStickerImageView, like this:

import JLStickerTextView
class ViewController: UIViewController {
	@IBOutlet var stickerView: JLStickerImageView!
}

If you use Storyboard, you also need connect the UIImageView to JLStikcerImageView Class in Identity Inspector.

Add new Label

It is quite easy to add new label to current StickerImageView:

stickerView.addLabel()

Set the Label

You can set the color, font , alignment, alpha.... of the label.(check all avaliable text attributes)

stickerView.textColor = UIColor.whiteColor()

Note: when you set the properties, you make change to the current selected TextLabel.

Render Text on Image

When you feel good, you are going to render the Text on Image and save the image:

let image = stickerView.renderTextOnView(stickerView)
UIImageWriteToSavedPhotosAlbum(image!, nil, nil, nil)

Customize the StickerTextView appearance

Customize stickerTextView appearance is very strightforward:

//Set the image of close Button
stickerView.currentlyEditingLabel.closeView!.image = UIImage(named: "cancel")
//Set the image of rotate Button
stickerView.currentlyEditingLabel.rotateView?.image = UIImage(named: "rotate")
//Set the border color of textLabel
stickerView.currentlyEditingLabel.border?.strokeColor = UIColor.redColor().CGColor

Note: closeView and rotateView are both UIimageView, while border is CAShapeLayer

Scale stickerView proportionally

This function is not complete yet, I just make it to fit my requirement.

stickerView.limitImageViewToSuperView()

When you render the text on UIImageView whose content mode is AspectFit, it is possible you will get some unwanted border. This function will scale UIImageView to fit the image.

Avaliable Text Attributes Reference(Let's add more 😉 )

Key JLStickerImageView Property value Type
Font .fontName String
Alignment .textAlignment NSTextAlignment
Alpha .textAlpha CGFloat
textColor .textColor UIColor
lineSpacing .lineSpacing CGFloat
TextShadow .textShadowOffset CGSize
.textShadowColor UIColor
.textShadowBlur CGFloat

Contributon

Any suggestion, request, pull are welcome. If you encounter any problem, feel free to create an issue.

If you want to add more text attributes:

  1. Please fork this project
  2. Define the attribute you want in JLAttributedTextView.swift
  3. implement user interface in JLStickerImageVIew.swift
  4. Write appropriate docs and comments in the README.md
  5. Submit a pull request

Plan

Here are some ideas:

  • More options for text(eg: lineSpacing)
  • Interface to customize the appearance of StickerLabelView(close Button, rotate button, border,etc)
  • More general solution for Scaling stickerView proportionally
  • Support placeholder

Reference

Based on

Also inspired by

Comments
  • Seems to be poorly formatted and no longer maintained

    Seems to be poorly formatted and no longer maintained

    First of all, really thanks for your repo to provide me some nice initial ideas on creating my own stickerView.

    I just wonder if the owner is still maintaining this repo. If not, I'd someday post my solution here for convenience.

    opened by yo1995 1
  • Failed to compile and run the example

    Failed to compile and run the example

    I tried to compile and run the example. I followed both approach (the manual and the Pod) both were unsuccessful.

    For the Pod attempt, I couldn't pass the error againest import JLStickerTextView, the error is : Cannot load underlying module for 'JLStickerTextView'. I'm using Xcode version 7.3 and used the Example.xcworkspace file. I cleaned and ran again but no luck. My Pod version is the latest and was able to include other pods like SwiftyJSON.

    I even downloaded the Xcode 8 beta 6 to try it, and it was worst because it seems the code is not yet upgraded to swift 3.0

    I'm happy to try anything you may suggest and I'm so greatful for your help screen shot 2016-08-20 at 9 41 06 pm

    opened by alisa140 1
  • Swift Support

    Swift Support

    I am able to run the example but, while adding it in my swift project using pod it is giving me below error when I imported JLStickerTextView.

    Could not build Objective-C module 'JLStickerTextView'

    Can you please suggest how I can use this in my project?

    opened by harshjoshi096 0
  • Update to Swift 3.1

    Update to Swift 3.1

    Update framework to Swift 3.1 Important: This version have to update master branch to v0.1.2 for Cocoapods, later I'll have to update the pods in the example project.

    opened by pedrohr99 0
  • TextLable is going outside parent

    TextLable is going outside parent

    i have added JLSticker textView in my code but i am facing two issue

    1. how can i set width constraint whenever i add text it goes outside the screen but i want to convert my text in multiple line
    2. when i rotate or increase size of view it goes outside of parent view how we can manage to limit it to it's parent Screenshot 2020-05-22 at 1 22 30 PM
    opened by Khushboo-gupta-123 0
  • Video Editing

    Video Editing

    Hi @luiyezheng great tutorial many useful, how to change - - - - - border line,

    i want to develop a same to same as on video editing any idea how to do that as a multiple sticker with bubble add a different different timeline ?

    opened by Mitesh-Mewada 0
  • Editing Time cursor issue

    Editing Time cursor issue

    There is something wrong when I want to write something in textview from the middle position cursor goes at the end of the text. Please resolve this issue ASAP.

    opened by KrishnaPatell 0
  • When text is selected everything becomes white

    When text is selected everything becomes white

    When I select a text inside the JLAttributedTextView, everything becomes white.

    Normally it looks like this

    screen shot 2018-04-12 at 3 23 21 pm

    But after selecting the texts, it becomes like this

    screen shot 2018-04-12 at 3 23 38 pm

    opened by ahsanaasim 0
Releases(0.1.1)
Owner
Textcat
Textcat
A crop, compression, resize and trimming library for videos, based on AVKit.

VideoKit VideoKit is a high level layer on top of AVKit How it works // With this config, the video will get resized to 1920x1080p, the maximal length

Knoggl 9 Dec 24, 2022
A ninepatch image render framework for iOS and MacOS

NinePatchKit NinePatch image parser and render framework for iOS & macOS Multilingual translation Chinese README Main Features parse png's binary data

Theo 14 Sep 30, 2022
WhiteAndFluffyTest - Scroll images and add them to your favourites via image page

Image service application Scroll images and add them to your favourites via imag

Ruben Egikian 0 Feb 4, 2022
Agrume - 🍋 An iOS image viewer written in Swift with support for multiple images.

Agrume An iOS image viewer written in Swift with support for multiple images. Requirements Swift 5.0 iOS 9.0+ Xcode 10.2+ Installation Use Swift Packa

Jan Gorman 601 Dec 26, 2022
A custom ImageView that is used to cover the surface of other view like a scratch card, user can swipe the mulch to see the view below.

MCScratchImageView GIF Showcase Requirments iOS 8.0+ Xcode 7.2+ Swift 4.0 Installation CocoaPods pod "MCScratchImageView" Manually Just drag MCScratch

Jaylen Bian 359 Dec 17, 2022
Rounded async imageview downloader lightly cached and written in Swift

PASImageView ============ **Rounded async imageview downloader lightly cached and written in Swift 3 ** Objective-C version here Snapshot Usage //XIB

Pierre Abi-aad 173 Nov 6, 2022
DG Zoomable ImageView

DGZoomableImageView A zoomable, pan-able image view Requirements iOS 12.0+ Swift

donggyu 7 Aug 17, 2022
ImageView - Component for loading and displaying different images aka SVG/PNG/JPG/JPEG

ImageView Component that loads and displays images(.svg/.png/.jpg/.jpeg) form as

Sergei 1 Mar 23, 2022
Create ImageView for User or Group like Messenger app

MessengerBubbles Example To run the example project, clone the repo, and run pod install from the Example directory first. Requirements Installation C

Laurent Grondin 29 Mar 8, 2022
An iOS app that helps you check, edit and delete metadata of photos, including but not limited to EXIF, TIFF...

MetaX A simple iOS app that helps you check, edit and delete metadata of photos, including but not limited to EXIF, TIFF... Feature List main metadata

Yuhan Chen 189 Dec 29, 2022
A complete Mac App: drag an image file to the top section and the bottom section will show you the text of any QRCodes in the image.

QRDecode A complete Mac App: drag an image file to the top section and the bottom section will show you the text of any QRCodes in the image. QRDecode

David Phillip Oster 2 Oct 28, 2022
TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage

TextDrawer TextDrawer, is a UIView allows you to add text, with gesture, on UIView, or UIImage. About Annotating Images TextDrawer is the easiest way

Remi ROBERT 106 Dec 18, 2022
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.

ATGMediaBrowser ATGMediaBrowser is an image slide-show viewer that supports multiple predefined transition styles, and also allows the client to defin

null 200 Dec 19, 2022
FLImagePicker - A simple image picker supported multiple selection

FLImagePicker A simple image picker supported multiple selection. Features Multiple selection Gesture supported Dark mode Easy modification Installati

Allen Lee 4 Aug 17, 2022
BeatboxiOS - A sample implementation for merging multiple video files and/or image files using AVFoundation

MergeVideos This is a sample implementation for merging multiple video files and

null 3 Oct 24, 2022
Jogendra 113 Nov 28, 2022
AZS - There are two frameworks in the pod file, you need to install them to work with the project

AZS There are two frameworks in the pod file, you need to install them to work w

Nikita12G 0 Jan 14, 2022
Slide image viewer library similar to Twitter and LINE.

Overview You can use it simply by passing the necessary information! Serrata is a UI library that allows you to intuitively view images. Features King

Takuma Horiuchi 324 Dec 9, 2022