Jak dostosować imageSize UIButton?


158

Jak mogę dostosować rozmiar obrazu przycisku UIButton? Ustawiam obraz tak:

[myLikesButton setImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

Jednak to wypełnia obraz do całego przycisku, jak zmniejszyć obraz?


6
Czy próbowałeś zmniejszyć obraz (LOL)?
CodaFi

1
@CodaFi ma rację, powinieneś generalnie dostarczać zasoby o odpowiednim rozmiarze, ponieważ zmniejsza to pracę procesora, zużywa mniej pamięci i najprawdopodobniej będzie wyglądać lepiej, ponieważ potencjalnie nie wprowadzasz żadnych artefaktów skalowania ...
Paul

Możesz także dostosować przycisk do rozmiaru obrazu (lub odwrotnie). Po co mieć duży przycisk ... z małym obrazkiem. Po prostu dodaj żądany obraz, do tego służą przyciski niestandardowe lub możesz wyjaśnij logikę, którą chcesz wdrożyć, aby inni mieli jasny pomysł.
Abhishek Singh

Odpowiedzi:


243

Jeśli dobrze rozumiem, co próbujesz zrobić, musisz pobawić się wstawką krawędzi obrazu przycisków. Coś jak:

myLikesButton.imageEdgeInsets = UIEdgeInsets(top, left, bottom, right)

96

Odpowiedź Tima jest poprawna, jednak chciałem dodać kolejną sugestię, ponieważ w moim przypadku było w sumie prostsze rozwiązanie.

Chciałem ustawić UIButtonwstawki obrazu, ponieważ nie zdawałem sobie sprawy, że mogę ustawić tryb treści na przycisku UIImageView, co całkowicie wyeliminowałoby potrzebę używania UIEdgeInsets i wartości zakodowanych na stałe. Po prostu uzyskaj dostęp do podstawowego widoku obrazu za pomocą przycisku i ustaw tryb treści:

myButton.imageView.contentMode = UIViewContentModeScaleAspectFit;

Widzisz, UIButton nie nasłuchuje ustawienia trybu treści?

Szybki 3

myButton.imageView?.contentMode = .scaleAspectFit

1
jak zrobić to samo dla backgroundImage?
Sergey Sahakyan

myButton.backgroundImageView? .contentMode = .scaleAspectFit
Andrea.Ferrando

@ Andrea.Ferrando button.backgroundImageView.contentModenie działa
Seong Lee

Zaoszczędź trochę czasu i upewnij się, że ustawiasz obraz, a nie obraz tła! @SeongLee ma rację, nie możesz manipulować obrazem tła za pomocą contentMode lub EdgeInserts
redPanda

42

Swift 3:

button.setImage(UIImage(named: "checkmark_white"), for: .normal)
button.contentVerticalAlignment = .fill
button.contentHorizontalAlignment = .fill
button.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

6
To zadziałało pięknie dla mnie. Stworzyłem ikonę PDF w Inkscape, a contentVerticalAlignment/contentHorizontalAlignmentopcje pozwoliły mi skalować ją tak, jak miałem nadzieję. Dziękuję za wysłanie tego.
Adrian

2
Ustawienie contentHorizontalAlignmenti contentVerticalAlignmentzałatwiło sprawę
Tom Knapen

1
To rozwiązanie doskonale sprawdza się w przypadku używania zasobów PDF jako ikon. Dziękuję Ci!
Eneko Alonso

38

Możesz to również zrobić w takim kreatorze interfejsów.

wprowadź opis obrazu tutaj

Myślę, że to pomocne.


26

Jeśli obraz jest za duży (i nie możesz / nie chcesz po prostu pomniejszyć obrazu), połączenie dwóch pierwszych odpowiedzi działa świetnie.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(15.0, 15.0, 15.0, 5.0)

O ile wstawki obrazu nie są prawidłowe, obraz zostanie przekrzywiony bez zmiany rozszerzenia contentMode.


23

you can use imageEdgeInsetsproperty Marginesy wewnętrzne lub początkowe prostokąta wokół obrazu przycisku.

 [self.btn setImageEdgeInsets:UIEdgeInsetsMake(6, 6, 6, 6)];

Dodatnia wartość zmniejsza lub wstawia tę krawędź - w ruchu. Ujemna wartość rozszerza lub przewyższa tę krawędź.


17

Oto inne rozwiązanie do skalowania imageView z UIButton.

button.imageView?.layer.transform = CATransform3DMakeScale(0.8, 0.8, 0.8)

Uratowałeś mi dzień. Chciałem tylko przeskalować swój obraz w przycisku. Żadnych wstawek, nic, dzięki!
Pedro Antonio

15

Oto wersja Swift:

myButton.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

8

Szybki 4

Będziesz musiał użyć tych dwóch wierszy kodu w tej określonej kolejności. Wystarczy zmienić górną i dolną wartość wstawek krawędziowych.

addButton.imageView?.contentMode = .scaleAspectFit
addButton.imageEdgeInsets = UIEdgeInsetsMake(10.0, 0.0, 10.0, 0.0)

To spowodowało EXC_BAD_ACCESSbłąd podczas wywołania z override func layoutSubviews().
Andrew Kirna

7

Z pomocą odpowiedzi Tima C. udało mi się stworzyć rozszerzenie dotyczące UIButtonkorzystania z języka Swift, które pozwala określić ramkę obrazu za pomocą .setImage()funkcji z dodatkowym frameparametrem

extension UIButton{

    func setImage(image: UIImage?, inFrame frame: CGRect?, forState state: UIControlState){
        self.setImage(image, forState: state)

        if let frame = frame{
            self.imageEdgeInsets = UIEdgeInsets(
                top: frame.minY - self.frame.minY,
                left: frame.minX - self.frame.minX,
                bottom: self.frame.maxY - frame.maxY,
                right: self.frame.maxX - frame.maxX
            )
        }
    }

}

Używając tego, jeśli chcesz ustawić ramkę a UIButtonna CGRectMake(0, 0, 64, 64)i ustawić jej obraz myImagez ramką CGRectMake(8, 8, 48, 48), możesz użyć

let button: UIButton = UIButton(frame: CGRectMake(0, 0, 64, 64))
button.setImage(
    myImage,
    inFrame: CGRectMake(8, 8, 48, 48),
    forState: UIControlState.Normal
)

4
Powinieneś if letzamiast sprawdzać, czy framejest, nila następnie wymusić rozpakowanie miliardów razy .
fpg1503,

7

Zmieniając rozmiar ikony za pomocą UIEdgeInsetsMake(top, left, bottom, right) , należy pamiętać o wymiarach przycisków i możliwościach UIEdgeInsetsMake do pracy z wartościami ujemnymi tak, jakby były dodatnie.

Przykład: dwa przyciski o wysokości 100 i proporcjach 1: 1.

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)

wprowadź opis obrazu tutaj

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(45, 0, 45, 0)

wprowadź opis obrazu tutaj

left.imageEdgeInsets = UIEdgeInsetsMake(40, 0, 40, 0)
right.imageEdgeInsets = UIEdgeInsetsMake(60, 0, 60, 0)

wprowadź opis obrazu tutaj

Przykłady 1 i 3 są identyczne, ponieważ ABS (100 - (40 + 40)) = ABS (100 - (60 + 60))


2

Szybki 3

Ustawiam szerokość i wysokość myButton na 40, a moje wypełnienie z EdgeInsetsMake to 15 ze wszystkich stron. Proponuję dodać kolor tła do przycisku, aby zobaczyć rzeczywiste wypełnienie.

myButton.backgroundColor = UIColor.gray // sample color to check padding
myButton.imageView?.contentMode = .scaleAspectFit
myButton.imageEdgeInsets = UIEdgeInsetsMake(15, 15, 15, 15)

2

Jedną z metod jest zmiana rozmiaru UIImage w kodzie, jak poniżej. Uwaga: ten kod skaluje się tylko według wysokości, ale można łatwo dostosować funkcję również do skalowania według szerokości.

let targetHeight = CGFloat(28)
let newImage = resizeImage(image: UIImage(named: "Image.png")!, targetHeight: targetHeight)
button.setImage(newImage, for: .normal)

fileprivate func resizeImage(image: UIImage, targetHeight: CGFloat) -> UIImage {
    // Get current image size
    let size = image.size

    // Compute scaled, new size
    let heightRatio = targetHeight / size.height
    let newSize = CGSize(width: size.width * heightRatio, height: size.height * heightRatio)
    let rect = CGRect(x: 0, y: 0, width: newSize.width, height: newSize.height)

    // Create new image
    UIGraphicsBeginImageContextWithOptions(newSize, false, 0)
    image.draw(in: rect)
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    // Return new image
    return newImage!
}

2

Zaktualizowano dla Swift> 5

ustaw rozmiar:

button.frame = CGRect(x: 0, y: 0, width: 44, height: 44)

ustaw marginesy:

button.imageEdgeInsets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)

1

Zaktualizowano dla Swift 3

yourButtonName.imageEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)

-6

Myślę, że rozmiar obrazu jest taki sam jak rozmiar przycisku, a następnie umieszczasz obraz w tle przycisku, na przykład:

[myLikesButton setBackgroundImage:[UIImage imageNamed:@"icon-heart.png"] forState:UIControlStateNormal];

masz maszt ma ten sam rozmiar obrazu i przycisku. Mam nadzieję, że rozumiesz mój punkt widzenia.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.