Tạo điểm nhấp nháy

Ta muốn tạo một điểm có màu đỏ nhấp nháy lúc nhỏ lúc to để thu hút sự chú ý của người dùng hoặc để trang trí.

Copy đoạn code sau vào trong viewDidLoad

var ar = [UIImage]()

        let w : CGFloat = 18

        for i in 0 ..< 6 {

            UIGraphicsBeginImageContextWithOptions(CGSizeMake(w,w), false, 0)

            let con = UIGraphicsGetCurrentContext()

            CGContextSetFillColorWithColor(con, UIColor.redColor().CGColor)

            let ii = CGFloat(i)

            CGContextAddEllipseInRect(con, CGRectMake(0+ii,0+ii,w-ii*2,w-ii*2))

            CGContextFillPath(con)

            let im = UIGraphicsGetImageFromCurrentImageContext()

            UIGraphicsEndImageContext()

            ar += [im]

        }

        let imm = UIImage.animatedImageWithImages(ar, duration:0.5)

        button.setImage(imm, forState:.Normal)

Điểm đỏ tạo ra sẽ nhấp nháy bên trong nút bấm.

Nếu muốn nó đứng độc lập, ta không set tên cho nút bấm, đổ nền trắng, nó vẫn là nút bấm những nhìn không thấy gì, chỉ có điểm đỏ.

Custom button Swift

Nút bấm mặc định của swift khá đơn điệu

Để thay đổi font chữ cho nút, ta dùng lệnh

let at=NSMutableAttributedString(string: t, attributes: [NSForegroundColorAttributeName: UIColor.blueColor(), NSFontAttributeName: UIFont(name: "Arial", size: 15.0)!])

       button.setAttributedTitle(at, forState: .Normal)

Để làm chữ đậm ta dùng lệnh

button.font = UIFont.boldSystemFontOfSize(17)

Để đổ màu nền ta dùng lệnh

button.backgroundColor = hex("#e6e6fa")

Hàm hex để dùng mã hex code bạn xem ở đây.

Để tạo góc bo tròn, ta dùng

button.layer.cornerRadius = 20

Tăng giảm chỉ số sẽ làm góc tròn ít hay nhiều

Để tạo viền, đổ màu cho viền, ta dùng lệnh

button.layer.borderColor = hex("#6699cc").CGColor

button.layer.borderWidth = 1

Để nút bấm trông có vẻ nổi như hình 3D, bạn chuẩn bị môt cái ảnh png hình nút bấm nổi, đây là ảnh tôi làm trong Word, dùng Insert Shapes, đổ nền.

Sau đó bạn khai báo image lên trên viewDidLoad.

let im = UIImage(named: "noi")

Rồi set nó thành nền của nút bấm dưới dòng định vị.

bu1.setBackgroundImage(im, forState: .Normal)

Custom nút bấm android

Nút bấm nguyên bản của Android nhìn khá đơn điệu.

Ta muốn nút bấm bo tròn hai đầu, có màu sắc tùy ý, có viền, ta tạo một file xml có tên back trong thư mục drawable.

Nếu chưa có thư mục này, ta nháy chuột phải vào folder res để tạo nó.

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle">

<solid android:color="#E6E6FA"/>

<stroke

android:width="1dip"

 android:color="#4b5320" />

<corners android:radius="20dp"/>

</shape>

Nếu không muốn có viền thì bỏ dòng stroke đi, muốn viền mỏng thì giảm chỉ số width xuống 0.5 chẳng hạn.

Bây giờ trong file xml định dạng nút bấm, ta thêm dòng sau.

android:background="@drawable/back"

Chạy thử, nút bấm trông như sau

Nếu bạn muốn nút bấm tròn, chỉ cần để chiều dài, rộng của nó là 50dp, rồi chỉnh file back, dòng corners thành

<corners android:radius="25dp"/>

Nếu bạn muốn khi ấn vào nút nó hiện màu xanh lá cây, hãy tạo một file có tên back2 trong thư mục drawable với code như sau.

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android" >

 <item android:state_pressed="true" >

  <shape android:shape="rectangle"  >

   <corners android:radius="20dip" />

    <stroke android:width="0.5dip" android:color="#6699cc" />

 <gradient android:angle="-90" android:startColor="#66ff00" android:endColor="#bcd4e6"  />           

 </shape>

 </item>

<item android:state_focused="true">

  <shape android:shape="rectangle"  >

  <corners android:radius="20dip" />

 <stroke android:width="0.5dip" android:color="#6699cc" />

  <solid android:color="#afeeee"/>      

 </shape>

 </item> 

<item >

 <shape android:shape="rectangle"  >

 <corners android:radius="20dip" />

 <stroke android:width="0.5dip" android:color="#6699cc" />

<gradient android:angle="-90" android:startColor="#E6E6FA" android:endColor="#e6e8fa" />           

</shape>

</item>

</selector>

Chỉnh background của nút thành back2, khi đó lúc bạn ấn nút sẽ có màu xanh lá hiện lên chứng tỏ nó đang được ấn.

Khi bạn đặt nút bấm lên trên một view khác, như imageView chẳng hạn, bạn sẽ muốn nó trong suốt không có nền.

Để làm nút bấm trong suốt, trong file xml của nó bạn chỉ cần thêm dòng sau vào.

android:background="@android:color/transparent"

Nút bấm lúc này trông như một dòng chữ bình thường.

Để nút bấm trông có vẻ nổi như hình 3D, bạn chuẩn bị một cái ảnh hình nút bấm nổi, đây là ảnh tôi làm trong Word, dùng Insert Shapes, đổ nền.

Copy ảnh vào thư mục drawable, sau đó trong file xml, thêm dòng set nền cho nút bấm.

android:background="@drawable/tenanh"

Muốn nút có màu từ nhạt đến đậm, tạo một file xml tên bu trong thư mục drawable

<?xml version="1.0" encoding="UTF-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"

    android:shape="rectangle" >

    <stroke

        android:width="2dp"

        android:color="#FFFFFFFF" />

    <gradient

        android:angle="225"

        android:endColor="#DD2ECCFA"

        android:startColor="#DD000000" />

    <corners

        android:bottomLeftRadius="7dp"

        android:bottomRightRadius="7dp"

        android:topLeftRadius="7dp"

        android:topRightRadius="7dp" />

</shape>

Sau đó set background cho nút.

android:background="@drawable/bu"

Lúc đó nút trông như sau.

Có thể thay đổi màu tùy ý trong file bu.

Muốn bóng mờ ở giữa thì sửa file bu thành.

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">      

    <item>     

        <shape>

            <corners

                android:radius="5dp" />

            <gradient

                android:angle="270"

                android:startColor="#8BB6F5"

                android:centerColor="#DFE8F9"

                android:endColor="#3F83E9"

                android:centerY="0.2"

                android:type="linear"

            />         

        </shape>

    </item>

</layer-list>