હલ: બટન પર સરહદ ઉમેરો

મુખ્ય પૃષ્ઠ » સ્વિફ્ટ » સ્વીફ્ટયુઆઈ » હલ: બટન પર સરહદ ઉમેરો

ચોક્કસ, ચાલો આમાં ડૂબકી મારીએ!

ઝડપી, સ્ટાઇલિશ અને કાર્યાત્મક ડિઝાઇન ઘણીવાર અમને iOS એપ્લિકેશન પર વિશિષ્ટ UI ઘટકો બનાવવા તરફ દોરી જાય છે. આવા એક સામાન્ય તત્વ એ બોર્ડર સાથેનું બટન છે. એક બટન સરળ લાગે છે, તેમ છતાં તે વપરાશકર્તાની મુસાફરીનો સ્વર સેટ કરવામાં નોંધપાત્ર શક્તિ ધરાવે છે.

ઉન્નત વપરાશકર્તા અનુભવ પ્રદાન કરવા માટે, એક બટન આકર્ષક અને આમંત્રિત હોવું જોઈએ, જે ક્રિયાપ્રતિક્રિયા માટે સ્પષ્ટ માર્ગ સૂચવે છે. આ તે છે જ્યાં સૌંદર્યલક્ષી કોણ રમતમાં આવે છે. અને, આ કરવા માટેની ક્લાસિક રીતોમાંની એક એ છે કે બટન પર બોર્ડર ઉમેરીને. સ્વિફ્ટનો ઉપયોગ કરીને તમે આ કેવી રીતે કરી શકો તે અહીં છે.

સ્વિફ્ટમાં એક બટનમાં બોર્ડર ઉમેરવું

iOS માં બટન પર બોર્ડર ઉમેરવાનું કાર્ય UIButton ની 'લેયર' પ્રોપર્ટીમાં હેરફેર કરીને એકદમ સરળ રીતે પરિપૂર્ણ કરી શકાય છે. `લેયર` પ્રોપર્ટી `CALayer` પ્રકારની છે, જે એક શક્તિશાળી વર્ગ છે જે તમને UIView અને તેના પેટા વર્ગો, જેમ કે UIButton ની વિઝ્યુઅલ સામગ્રીની હેરફેર કરવાની મંજૂરી આપે છે.

let button = UIButton()
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.black.cgColor

ઉપરના સ્નિપેટમાં, સૌ પ્રથમ, અમે UIButton નું ઉદાહરણ બનાવ્યું છે. પછી, અમે અમારી સરહદની પહોળાઈ દર્શાવતા `બોર્ડરવિડ્થ` ને 1.0 પર સેટ કર્યું છે. આ પછી, અમે અમારી બોર્ડર માટે `borderColor` સાથેનો રંગ પસંદ કર્યો છે. અહીં, તે કાળો છે.

કોડનું પગલું દ્વારા પગલું સમજૂતી

બટન પર બોર્ડર ઉમેરવા માટે, અમારે તેના CALayer ને એક્સેસ કરવાની અને તેની પ્રોપર્ટીમાં ચાલાકી કરવાની જરૂર છે. આ કરવા માટેના પગલાં અહીં છે:

• UIButton() દ્વારા એક બટન બનાવો, જ્યાં UIButton એ એક દૃશ્ય છે જે સ્વાભાવિક રીતે સ્પર્શ કરી શકાય તેવું છે, જે જ્યારે વપરાશકર્તા તેની સાથે ક્રિયાપ્રતિક્રિયા કરે છે ત્યારે ફંક્શનને એક્ઝિક્યુટ કરે છે.
• સરહદની જાડાઈને વ્યાખ્યાયિત કરવા માટે `બોર્ડરવિડ્થ` સેટ કરો. આ એક CGFloat મૂલ્ય છે જે 0.0 પર ડિફોલ્ટ થાય છે, એટલે કે કોઈ બોર્ડર નથી. જેમ જેમ તમે આ મૂલ્યમાં વધારો કરો છો તેમ, સરહદ વધુ જાડી બને છે.
• તમારો `બોર્ડર કલર` પસંદ કરો. UIColor ને CGColor માં કન્વર્ટ કરવાનું યાદ રાખો કારણ કે CALayer ની `borderColor` ગુણધર્મ CGColor ની અપેક્ષા રાખે છે.

તેથી, કોડની આ સરળ રેખાઓ સાથે, તમે તમારા વપરાશકર્તાઓને કોઈ પણ સમયે ક્રિયાપ્રતિક્રિયા માટે આકર્ષક અને સાહજિક માર્ગ પ્રદાન કરી શકો છો!

વધુ કસ્ટમાઇઝેશન અને લાઇબ્રેરીઓ

સ્વિફ્ટ વધુ કસ્ટમાઇઝેશનની મંજૂરી આપે છે. ઉદાહરણ તરીકે, બટનના ગોળાકાર ખૂણાઓને વધુ નરમ, મૈત્રીપૂર્ણ ડિઝાઇન તરફ દોરી જવા માટે `કોર્નરરેડિયસ` ને હેરફેર કરી શકાય છે.

તમે તૃતીય-પક્ષ પુસ્તકાલયોનો પણ ઉપયોગ કરી શકો છો જેમ કે `કોસ્મિકમાઇન્ડ/મટીરિયલ`, જે જટિલ એનિમેશન અને સંક્રમણો સાથે અભિવ્યક્ત, લવચીક UI બનાવવાની મંજૂરી આપે છે. જો કે, તૃતીય-પક્ષ લાઇબ્રેરીઓનો ઉપયોગ કુશળતાપૂર્વક કરો કારણ કે તેઓ એપ્લિકેશનના કદમાં વધારો કરે છે.

નિષ્કર્ષમાં, સફળ વપરાશકર્તા ક્રિયાપ્રતિક્રિયા અનુભવ માટે આકર્ષક અને સાહજિક ડિઝાઇન નિર્ણાયક છે અને સ્વિફ્ટ તમને આ ઉદ્દેશ્ય હાંસલ કરવા માટે ઘણા આકર્ષક કસ્ટમાઇઝેશન વિકલ્પો આપે છે. સ્માર્ટ રીતે ડિઝાઇન કરો!