2016-05-18 13 views
-1

Swiftで書かれたソーシャルネットワーキングのiPhoneアプリで作業していて、好きなボタンやコメントボタンを作成する方法を理解しようとしていますFacebookとTwitterのiOSアプリ。Swift:FacebookやTwitterのiOSアプリのようなコメントボタンを作成する

例えば、私の現在のボタンのように、UIButtonの画像は、Cellの中にUIButtonの画像として笑顔の絵文字があります。このボタンの右に、UILabelのテキストが「好き」(左の笑顔の絵文字が好きなボタンであることを示します)というテキストがあります。

アイコンとテキストを1つのボタンとしてまとめたボタンを作成して、ボタンのLikeアイコン部分または「Like」部分のどちらかをタップすると、ユーザーにとって使いやすくなります好きなボタンをタップするには?

Screenshot: Facebook buttons example 

Facebook buttons example

Screenshot : Twitter buttons example 

Twitter buttons example

私の指のようなボタンを押したとき、私はTwitterのボタンのスクリーンショットを取りました。ここのようなボタンがグレー表示されていることに注目してください(心臓アイコンの部分と好きな数の両方)。これが私が望む効果です。

何か助けていただきありがとうございます。ありがとうございました。

答えて

0

私はあなたの質問が幅広く、あなたが試したことを示さなかったので、これを行う方法の基本的なアイデアを伝えます。

基本的にUIButtonサブクラスを作成します。それをSocialButtonとしましょう。

SocialButtonクラスのdrawRectメソッドをオーバーライドします。この方法では、UIGraphicsGetCurrentContext()を使用してCGContextを取得する必要があります。次にCGContextDrawImageと呼んでCGRectに画像を描画します。このCGRectは、あなたのイメージが表示される位置です。ここで

はあなたのアイデアを与えるためにいくつかのコードです:

class SocialButton: UIButton { 
    override func drawRect(rect: CGRect) { 
     let context = UIGraphicsGetCurrentContext() 
     CGContextDrawImage(context, someRect, UIImage(named: "someImage")?.CGImage) 
    } 
} 

someRectは画像がで描画される矩形である

EDIT:。

ストーリーボードへの社会的なボタンを追加するにはあなたのクラスの上に@IBDesignableを追加する必要があります。また、imageというプロパティを追加する必要があります。こうすることで、人々はボタン内でどのようなイメージを設定できるようになります。クラスは次のようになります:

@IBDesignable 
class SocialButton: UIButton { 
    @IBInspectable // This is added so that you can change the image in interface builder 
    var image: UIImage? 

    override func drawRect(rect: CGRect) { 
     let context = UIGraphicsGetCurrentContext() 
     CGContextDrawImage(context, someRect, self.image?.CGImage) 
     // You can also set the tint, bg color and other stuff here. 
    } 
} 

これで、クラスで変更する必要があります。ストーリーボードに!

まず、ビューコントローラにUIButtonをドラッグし、それを選択:

enter image description here

次に、右側のアイデンティティインスペクタを開きます。あなたが何であるかわからない場合は、Xcodeの左側にあるIDカードアイコンをクリックしてください。

enter image description here

あなたは "クラス" フィールドにいることがわかりますか?ただ、そこに「SocialButton」と入力し、Enterキーを押して入力します。

enter image description here

enter image description here

プロパティインスペクター(スライダーアイコンが付いたもの)に切り替えて、あなたのカスタムボタンのイメージプロパティが表示されるはずです

プロパティインスペクタを使用して画像を選択できます。drawRectを正しく実装している場合は、ボタンの左側に画像が描画されているはずです。

+0

私は、私のストーリーボードのプロトタイプのセルの中にある「UIButton」のイメージとして、笑顔の絵文字イメージを持つ「UIButton」をどうやって持っているかを説明しました。ストーリーボードボタンの代わりにプログラムボタンを配置するためのプログラマチックなアプローチをどのように適用するかはわかりません。 – DiligentDev

+0

@DiligentDev @DiligentDev私はあなたにそれを行う方法を示すために私の答えを編集しました。 – Sweeper

0

Font Awesomeを使用して、カスタムアイコンを追加してからテキストをUIBUttonに追加することもできます。

たとえば、あなたが使用することができます。

buttonName.setFAText(prefixText: "follow me on ", icon: FAType.FATwitter, postfixText: ". Thanks!", size: 25, forState: .Normal, iconSize: 30) 

はあなたのラベルやTwitterのアイコンを持っています。

これがあなたを手伝ってくれることを願っています!

関連する問題