সহজ প্রশ্ন, আমি কীভাবে ট্যাব বার আইটেমের পাঠ্য সরাতে পারি এবং কেবল চিত্রটিই প্রদর্শন করতে পারি?
আমি ইনস্ট্রগ্রাম অ্যাপে বার আইটেমগুলি পছন্দ করতে চাই:
এক্সকোড in-তে পরিদর্শকের মধ্যে আমি শিরোনামটি সরিয়ে একটি @ 2x (50px) এবং একটি @ 3x (75px) চিত্র চয়ন করি। তবে চিত্রটি মুছে ফেলা পাঠ্যের মুক্ত স্থান ব্যবহার করে না। ইনস্টাগ্রাম অ্যাপের মতো একই ট্যাব বার আইটেম চিত্রটি কীভাবে অর্জন করবেন কোনও ধারণা?
""শিরোনামের জন্য ব্যবহার করছেন, সম্ভবত?
উত্তর:
আপনার imageInsetsসম্পত্তি সঙ্গে খেলা উচিত UITabBarItem। এখানে নমুনা কোড রয়েছে:
let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)
ভিতরে থাকা মানগুলি UIEdgeInsetsআপনার চিত্রের আকারের উপর নির্ভর করে। আমার অ্যাপ্লিকেশনটিতে কোডটির ফলাফল এখানে রয়েছে:
// Remove the titles and adjust the inset to account for missing title
for(UITabBarItem * tabBarItem in self.tabBar.items){
tabBarItem.title = @"";
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
}
আপনি স্টোরিবোর্ডে এটি কীভাবে করেন তা এখানে।
শিরোনাম পাঠ্য সাফ করুন এবং নীচের স্ক্রিনশটের মতো চিত্রটি ইনসেটটি সেট করুন
মনে রাখবেন আইকন আকারটি আপেল ডিজাইনের গাইডলাইনটি অনুসরণ করবে
এর অর্থ আপনার @ 1x এর জন্য 25px x 25px, @ 2x এর জন্য 50px x 50px, @ 3x এর জন্য 75px x 75px থাকা উচিত
প্রতিটি সেটিং পদ্ধতির ব্যবহার UITabBarItemগুলি titleকরার সম্পত্তি ""
এবং আপডেট imageInsetsঠিকমত কাজ করবে না যদি দৃশ্য নিয়ামক মধ্যে self.titleসেট করা হয়। উদাহরণস্বরূপ, যদি self.viewControllersইউআইটিববারকন্ট্রোলারটি এম্বেড থাকে UINavigationControllerএবং নেভিগেশন বারে আপনাকে শিরোনামের প্রয়োজন হয়। এই ক্ষেত্রে UINavigationItems ব্যবহার করে সরাসরি শিরোনাম ব্যবহার করুন self.navigationItem.title, না self.title।
সুইচ সংস্করণ ডিডিগো উত্তর
আইওএস 11 এর সাথে সামঞ্জস্যপূর্ণ
ভিউকন্ট্রোলারের শিরোনাম স্থাপনের পরে ভিউকন্ট্রোলারগুলির প্রতিটি প্রথম সন্তানের ভিউডিডোডে এই ফাংশনটি কল করুন
ভাল অভ্যাস:
বিকল্প হিসাবে @ দাস্পিয়ান হিসাবে মন্তব্যগুলিতে পরামর্শ দেওয়া হয়েছে
এই শ্রেণীর বেস টববারকন্ট্রোলারের মতো একটি সাবক্লাস তৈরি করুন: ইউআইটিববারকন্ট্রোলার, ইউআইটিববারকন্ট্রোলারডেলিগেট এবং এই ফাংশনটি সাবক্লাসের ভিউডিলডোডে রাখুন
func removeTabbarItemsText() {
var offset: CGFloat = 6.0
if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
offset = 0.0
}
if let items = tabBar.items {
for item in items {
item.title = ""
item.imageInsets = UIEdgeInsets(top: offset, left: 0, bottom: -offset, right: 0)
}
}
}
class BaseTabBarController: UITabBarController, UITabBarControllerDelegateএবং এই ফাংশনটি সাবক্লাসেরviewDidLoad
আপনি যদি স্টোরিবোর্ডগুলি ব্যবহার করেন তবে এটি আপনার সেরা বিকল্প হবে। এটি সমস্ত ট্যাব বার আইটেমের মধ্য দিয়ে লুপ করে এবং প্রত্যেকটির জন্য এটি শিরোনামটি কিছুই নির্ধারণ করে না এবং চিত্রটিকে পূর্ণ স্ক্রিন করে। (আপনি অবশ্যই স্টোরিবোর্ডে একটি চিত্র যুক্ত করেছেন)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
আইওএস 11 এই সমাধানগুলিতে অনেকগুলি একটি কঙ্ককে ছুঁড়ে ফেলেছে, তাই আমি ইউআইটিববার সাবক্লাসিং করে এবং লেআউটসুভিউগুলিকে ওভাররাইড করে আইওএস 11 এ আমার সমস্যাগুলি ঠিক করেছি।
class MainTabBar: UITabBar {
override func layoutSubviews() {
super.layoutSubviews()
// iOS 11: puts the titles to the right of image for horizontal size class regular. Only want offset when compact.
// iOS 9 & 10: always puts titles under the image. Always want offset.
var verticalOffset: CGFloat = 6.0
if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
verticalOffset = 0.0
}
let imageInset = UIEdgeInsets(
top: verticalOffset,
left: 0.0,
bottom: -verticalOffset,
right: 0.0
)
for tabBarItem in items ?? [] {
tabBarItem.title = ""
tabBarItem.imageInsets = imageInset
}
}
}
আমি আমার বেসট্যাববারকন্ট্রোলারের ভিডিডিলোডে নিম্নলিখিত কোডগুলি ব্যবহার করেছি। মনে রাখবেন যে আমার উদাহরণে আমার কাছে 5 টি ট্যাব রয়েছে এবং নির্বাচিত চিত্রটি সর্বদা বেস_মেজ + "_নির্বাচিত" থাকবে।
// Get tab bar and set base styles
let tabBar = self.tabBar;
tabBar.backgroundColor = UIColor.whiteColor()
// Without this, images can extend off top of tab bar
tabBar.clipsToBounds = true
// For each tab item..
let tabBarItems = tabBar.items?.count ?? 0
for i in 0 ..< tabBarItems {
let tabBarItem = tabBar.items?[i] as UITabBarItem
// Adjust tab images (Like mstysf says, these values will vary)
tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0);
// Let's find and set the icon's default and selected states
// (use your own image names here)
var imageName = ""
switch (i) {
case 0: imageName = "tab_item_feature_1"
case 1: imageName = "tab_item_feature_2"
case 2: imageName = "tab_item_feature_3"
case 3: imageName = "tab_item_feature_4"
case 4: imageName = "tab_item_feature_5"
default: break
}
tabBarItem.image = UIImage(named:imageName)!.imageWithRenderingMode(.AlwaysOriginal)
tabBarItem.selectedImage = UIImage(named:imageName + "_selected")!.imageWithRenderingMode(.AlwaysOriginal)
}
for var i = 0; i < tabBar... , আপনি সবেমাত্র বলতে পারতেন; for tabBarItems in tabBar.items!
সুইফট 4 পদ্ধতির
আমি একটি ফাংশন যা একটি ট্যাববার্টিম লাগে এবং এটিতে কিছু ফর্ম্যাটিং করে তা প্রয়োগ করে কৌতুকটি করতে পেরেছিলাম।
চিত্রটিকে আরও কেন্দ্রিক করে তুলতে কিছুটা নিচে নিয়ে যায় এবং ট্যাব বারের পাঠ্যও আড়াল করে। খালি স্ট্রিংয়ের জন্য এটির শিরোনাম সেট করার চেয়ে আরও ভাল কাজ করেছেন, কারণ আপনার যখন একটি নেভিগেশনবার থাকে তখন ট্যাববারটি নির্বাচিত হওয়ার পরে ভিউকন্ট্রোলারের শিরোনামটি পুনরায় অর্জন করে
func formatTabBarItem(tabBarItem: UITabBarItem){
tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .selected)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .normal)
}
সর্বশেষ বাক্য গঠন
extension UITabBarItem {
func setImageOnly(){
imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .selected)
setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .normal)
}
}
এবং এটি কেবল আপনার ট্যাববারে এটি ব্যবহার করুন:
tabBarItem.setImageOnly()
শীর্ষ উত্তর ছাড়া এটি করার জন্য এখানে আরও ভাল, আরও নির্বোধ উপায় way
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
AppDelegate.didFinishLaunchingWithOptionsএটি আপনার এতে রাখুন যাতে এটি আপনার অ্যাপ্লিকেশন জুড়ে সমস্ত ট্যাব বার বোতামকে প্রভাবিত করে।
একটি সংক্ষিপ্ত, নিরাপদ UITabBarController এক্সটেনশন সুইফট (উপর ভিত্তি করে @ korgx9 উত্তর):
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
সুইড ৪.২- এ ডিডিয়েগোর উত্তরের ভিত্তিতে :
extension UITabBarController {
func cleanTitles() {
guard let items = self.tabBar.items else {
return
}
for item in items {
item.title = ""
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
এবং আপনাকে কেবল self.tabBarController?.cleanTitles()আপনার ভিউ কন্ট্রোলারে কল করতে হবে ।
এই পৃষ্ঠায় সমস্ত দুর্দান্ত উত্তরের উপর ভিত্তি করে, আমি আরও একটি সমাধান তৈরি করেছি যা আপনাকে আবার শিরোনাম প্রদর্শন করতে দেয়। শিরোনামের বিষয়বস্তু অপসারণ করার পরিবর্তে, আমি কেবল হরফের রঙটি স্বচ্ছতে পরিবর্তন করি।
extension UITabBarItem {
func setTitleColorFor(normalState: UIColor, selectedState: UIColor) {
self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: normalState], for: .normal)
self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: selectedState], for: .selected)
}
}
extension UITabBarController {
func hideItemsTitle() {
guard let items = self.tabBar.items else {
return
}
for item in items {
item.setTitleColorFor(normalState: UIColor(white: 0, alpha: 0), selectedState: UIColor(white: 0, alpha: 0))
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
func showItemsTitle() {
guard let items = self.tabBar.items else {
return
}
for item in items {
item.setTitleColorFor(normalState: .black, selectedState: .yellow)
item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
}
}
সবচেয়ে সহজ উপায় এবং সর্বদা কাজ করে:
class TabBar: UITabBar {
override func layoutSubviews() {
super.layoutSubviews()
subviews.forEach { subview in
if subview is UIControl {
subview.subviews.forEach {
if $0 is UILabel {
$0.isHidden = true
subview.frame.origin.y = $0.frame.height / 2.0
}
}
}
}
}
}
আমার ক্ষেত্রে, একই ভিউকন্ট্রোলারটি ট্যাববার এবং অন্যান্য নেভিগেশন প্রবাহে ব্যবহৃত হয়েছিল। আমার ভিউকন্ট্রোলারের অভ্যন্তরে, আমি সেট করে রেখেছি self.title = "Some Title"যা ট্যাববারে শিরোনাম নির্ধারণ nilবা ফাঁকা নির্ধারণ না করেই ট্যাববারে প্রদর্শিত হচ্ছে । আমি imageInsetsঅনুসরণ হিসাবে সেট করেছি :
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
সুতরাং আমার ভিউকন্ট্রোলারের ভিতরে আমি নেভিগেশন শিরোনামটি নিম্নরূপে পরিচালনা করেছি:
if isFromTabBar {
// Title for NavigationBar when ViewController is added in TabBar
// NOTE: Do not set self.title = "Some Title" here as it will set title of tabBarItem
self.navigationItem.title = "Some Title"
} else {
// Title for NavigationBar when ViewController is opened from navigation flow
self.title = "Some Title"
}
ইউআইটিববারকন্ট্রোলারের একটি সাবক্লাস তৈরি করুন এবং এটি আপনার ট্যাববারে অর্পণ করুন, তারপরে ভিডডিডলড পদ্ধতিতে কোডটির এই লাইনটি রাখুন:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
})
কাস্টম ট্যাববার - আইওএস 13, সুইফ্ট 5, এক্সকোড 11
স্টোরিবোর্ড ভিত্তিক। এটি প্রোগ্রামিমেও খুব সহজেই অর্জন করা যায়। অনুসরণ করতে কেবল 4 টি পদক্ষেপ:
ট্যাব বার আইকনগুলি অবশ্যই 3 টি আকারের, কালো রঙের হতে হবে। সাধারণত, আমি fa2png.io - আকারগুলি থেকে ডাউনলোড করি: 25x25, 50x50, 75x75। পিডিএফ ইমেজ ফাইল কাজ করে না!
ট্যাব বার আইটেমটির স্টোরিবোর্ডে আপনি বৈশিষ্ট্য পরিদর্শকের মাধ্যমে আইকনটি ব্যবহার করতে চান তা সেট করে। (স্ক্রিনশট দেখুন)
ইউআইটিববারকন্ট্রোলার ক্লাস
ক্লাস রাউন্ডডট্যাববারভিউ কনট্রোলার: ইউআইটিববারকন্ট্রোলার {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// Custom tab bar view
customizeTabBarView()
}
private func customizeTabBarView() {
let tabBarHeight = tabBar.frame.size.height
self.tabBar.layer.masksToBounds = true
self.tabBar.isTranslucent = true
self.tabBar.barStyle = .default
self.tabBar.layer.cornerRadius = tabBarHeight/2
self.tabBar.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let viewWidth = self.view.bounds.width
let leadingTrailingSpace = viewWidth * 0.05
tabBar.frame = CGRect(x: leadingTrailingSpace, y: 200, width: viewWidth - (2 * leadingTrailingSpace), height: 49)
}
}
ফলাফল
আপনি যদি যাদু সংখ্যা ব্যবহার না করে ট্যাবগুলি কেন্দ্র করে / চিত্রের পোকামাকড় পরিবর্তন করতে চান তবে নীচেরগুলি আমার পক্ষে কাজ করেছে (সুইফট 5.2.2 এ):
একটি ইউআইটিববারকন্ট্রোলার সাবক্লাসে, আপনি ভিউ কন্ট্রোলারগুলি সেট করার পরে চিত্রের ইনসেটগুলি যুক্ত করতে পারেন।
override var viewControllers: [UIViewController]? {
didSet {
addImageInsets()
}
}
func addImageInsets() {
let tabBarHeight = tabBar.frame.height
for item in tabBar.items ?? [] where item.image != nil {
let imageHeight = item.image?.size.height ?? 0
let inset = CGFloat(Int((tabBarHeight - imageHeight) / 4))
item.imageInsets = UIEdgeInsets(top: inset,
left: 0,
bottom: -inset,
right: 0)
}
}
পাঠ্যটি লুকিয়ে রাখার জন্য উপরের বিকল্পগুলির বেশ কয়েকটিতে সমাধানের সমাধান রয়েছে।