IOS changes the height of the search box in Uisearchbar _ios

Source: Internet
Author: User

I. The searchbar of the system
1. Neutron control and its layout of Uisearchbar
UIView (direct child control) frame equals Searchbar bounds,view child control and its layout

    • Uisearchbarbackground (Indirect child control) frame equals searchbar bounds
    • Uisearchbartextfield (Indirect child control) Frame.origin equals (8.0, 6.0), that is not equal to searchbar bounds

2. Changing the Searchbar frame will only affect the width of the search box and will not affect its height, for the following reasons:

    • The height of the Uisearchbartextfield in the system searchbar is fixed to 28 by default
    • The left and right margins are fixed to 8, the top and bottom margins are the height of the parent control view minus 28 divided by 2

Second, change the height of Uisearchbar
1, the programme
Rewrite the Uisearchbar (Idsearchbar) of the Uisearchbar child control layout
Add member Property Contentinset, control Uisearchbartextfield distance from parent control margins

    • If the user does not set Contentinset, the default contentinset is calculated
    • If the user sets the Contentinset, it is based on the latest Contentinset layout Uisearchbartextfield

2, Concrete realization
To override a Uisearchbar subclass

Class Idsearchbar:uisearchbar {

}

Add member Property Contentinset (optional type), control Uisearchbartextfield distance from parent control, listen for changes in value, rearrange layout of searchbar child controls

var contentinset:uiedgeinsets? {
  Didset {
    self.layoutsubviews ()
  }
}

overriding child controls for Layoutsubviews () layout Searchbar

Override Func Layoutsubviews () {super.layoutsubviews ()//view is the only direct child control in the Searchbar for view in Self.subviews { Uisearchbarbackground and Uisearchbartextfield are Searchbar's introduction child controls for Subview in View.subviews {//Find Uisearchbar TextField if Subview.iskindofclass (Uitextfield.classforcoder ()) {if let Textfieldcontentinset = Contentins ET {//if Contentinset is assigned//According to Contentinset change Uisearchbartextfield layout subview.frame = CGRect (X:textfiel Dcontentinset.left, Y:textfieldcontentinset.top, Width:self.bounds.width-textfieldcontentinset.left-
        Textfieldcontentinset.right, Height:self.bounds.height-textfieldcontentinset.top-textfieldcontentinset.bottom) else {//if Contentset is not assigned/set Uisearchbar uisearchbartextfield default margin Let Top:cgfloat = (Self.boun  ds.height-28.0)/2.0 Let Bottom:cgfloat = top let Left:cgfloat = 8.0 let right:cgfloat = Left Contentinset = UiedgeiNsets (Top:top, Left:left, Bottom:bottom, Right:right)}}}

 

Three, Idsearchbar use example
1, not set Contentinset
Set frame for Searchbar

Searchbar.frame = CGRect (x:80, y:100, width:200, height:40)

Effect as shown


2, set Contentinset
Set frame for Searchbar

Searchbar.frame = CGRect (x:80, y:100, width:200, height:40)

Set the Searchbar contentinset

Set Contentinset
searchbar.contentinset = Uiedgeinsets (top:0, Left:8, bottom:0, Right:8)

Effect as shown

Iv. design principles of Idsearchbar
1. Note

    • Uisearchbar default is to have its own default layout way
    • Design Idsearchbar is designed to change the height of the search box in Searbar, but there may be a need to change the width

2. Design principles

    • You need to use the Uisearchbar default layout when you don't have to change the height of the search box in Searchbar
    • If you need to change the height of the search box in the Searchbar, you need to change the layout of the Uisearchbar according to the requirements
    • In order to increase controllability, the member property Contentinset is added to the Idsearchbar to control the Idsearchbar margin

The above is the entire content of this article, I hope to help you learn.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.