1

keyBoard.xcodeproj/project.pbxproj

@@ -124,6 +124,8 @@
 		A1B2E1012EBC7AAA00000001 /* KBTopThreeView.m in Sources */ = {isa = PBXBuildFile; fileRef = A1B2E0022EBC7AAA00000001 /* KBTopThreeView.m */; };
 		A1B2E1022EBC7AAA00000001 /* HomeHotCell.m in Sources */ = {isa = PBXBuildFile; fileRef = A1B2E0042EBC7AAA00000001 /* HomeHotCell.m */; };
 		ECC9EE02174D86E8D792472F /* Pods_keyBoard.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 967065BB5230E43F293B3AF9 /* Pods_keyBoard.framework */; };
+        048909F62EC0AAAA00FABA60 /* KBCategoryTitleCell.m in Sources */ = {isa = PBXBuildFile; fileRef = 048909F12EC0AAAA00FABA60 /* KBCategoryTitleCell.m */; };
+        048909F72EC0AAAA00FABA60 /* KBCategoryTitleView.m in Sources */ = {isa = PBXBuildFile; fileRef = 048909F32EC0AAAA00FABA60 /* KBCategoryTitleView.m */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -353,6 +355,10 @@
 		B12EC429812407B9F0E67565 /* Pods-CustomKeyboard.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CustomKeyboard.release.xcconfig"; path = "Target Support Files/Pods-CustomKeyboard/Pods-CustomKeyboard.release.xcconfig"; sourceTree = "<group>"; };
 		B8CA018AB878499327504AAD /* Pods-CustomKeyboard.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-CustomKeyboard.debug.xcconfig"; path = "Target Support Files/Pods-CustomKeyboard/Pods-CustomKeyboard.debug.xcconfig"; sourceTree = "<group>"; };
 		F67DDBD716E4E616D8CC2C9C /* Pods-keyBoard.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-keyBoard.debug.xcconfig"; path = "Target Support Files/Pods-keyBoard/Pods-keyBoard.debug.xcconfig"; sourceTree = "<group>"; };
+        048909F02EC0AAAA00FABA60 /* KBCategoryTitleCell.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = KBCategoryTitleCell.h; sourceTree = "<group>"; };
+        048909F12EC0AAAA00FABA60 /* KBCategoryTitleCell.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = KBCategoryTitleCell.m; sourceTree = "<group>"; };
+        048909F22EC0AAAA00FABA60 /* KBCategoryTitleView.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = KBCategoryTitleView.h; sourceTree = "<group>"; };
+        048909F32EC0AAAA00FABA60 /* KBCategoryTitleView.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = KBCategoryTitleView.m; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -490,6 +496,10 @@
 			children = (
 				048908F02EC047FD00FABA60 /* KBShopHeadView.h */,
 				048908F12EC047FD00FABA60 /* KBShopHeadView.m */,
+                048909F02EC0AAAA00FABA60 /* KBCategoryTitleCell.h */,
+                048909F12EC0AAAA00FABA60 /* KBCategoryTitleCell.m */,
+                048909F22EC0AAAA00FABA60 /* KBCategoryTitleView.h */,
+                048909F32EC0AAAA00FABA60 /* KBCategoryTitleView.m */,
 			);
 			path = V;
 			sourceTree = "<group>";
@@ -1298,6 +1308,8 @@
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+                048909F62EC0AAAA00FABA60 /* KBCategoryTitleCell.m in Sources */,
+                048909F72EC0AAAA00FABA60 /* KBCategoryTitleView.m in Sources */,
 				04FC95E92EB23B67007BD342 /* KBNetworkManager.m in Sources */,
 				04FC95D22EB1E7AE007BD342 /* MyVC.m in Sources */,
 				047C65582EBCC06D0035E841 /* HomeRankCardCell.m in Sources */,

keyBoard/Class/Shop/V/KBCategoryTitleCell.h

@@ -0,0 +1,14 @@
+//
+//  KBCategoryTitleCell.h
+//  keyBoard
+//
+//  Custom title cell to show a smaller pill background for unselected state
+//  without modifying the third-party JXCategoryView sources.
+//
+
+#import <JXCategoryView/JXCategoryView.h>
+
+@interface KBCategoryTitleCell : JXCategoryTitleCell
+
+@end
+

keyBoard/Class/Shop/V/KBCategoryTitleCell.m

@@ -0,0 +1,56 @@
+//
+//  KBCategoryTitleCell.m
+//  keyBoard
+//
+//  A JXCategoryTitleCell subclass that renders a 20pt-high rounded pill
+//  as the cell background. The pill is gray when unselected and clear when
+//  selected (so the indicator can show the white+border style).
+//
+
+#import "KBCategoryTitleCell.h"
+#import <JXCategoryView/JXCategoryView.h>
+
+@interface KBCategoryTitleCell ()
+@property (nonatomic, strong) UIView *kb_pillBackgroundView;
+@end
+
+@implementation KBCategoryTitleCell
+
+- (void)initializeViews {
+    [super initializeViews];
+    self.kb_pillBackgroundView = [[UIView alloc] initWithFrame:CGRectZero];
+    self.kb_pillBackgroundView.userInteractionEnabled = NO;
+    // 放在最底层，避免遮挡标题
+    [self.contentView insertSubview:self.kb_pillBackgroundView atIndex:0];
+}
+
+- (void)layoutSubviews {
+    [super layoutSubviews];
+    // 固定圆角块高度 20pt，使之更接近设计稿
+    CGFloat pillHeight = 20.0;
+    CGFloat vPadding = MAX(0.0, (self.contentView.bounds.size.height - pillHeight)/2.0);
+    CGRect frame = CGRectInset(self.contentView.bounds, 0, vPadding);
+    self.kb_pillBackgroundView.frame = frame;
+    self.kb_pillBackgroundView.layer.cornerRadius = CGRectGetHeight(frame)/2.0;
+    self.kb_pillBackgroundView.layer.masksToBounds = YES;
+}
+
+- (void)reloadData:(JXCategoryBaseCellModel *)cellModel {
+    [super reloadData:cellModel];
+    // 使用父类的模型即可，里面已经包含了 cell 背景色渐变能力
+    JXCategoryTitleCellModel *model = (JXCategoryTitleCellModel *)cellModel;
+    // 取消父类对 contentView 背景色的设置，由我们自己的 pill 来渲染
+    self.contentView.backgroundColor = [UIColor clearColor];
+    if (model.isCellBackgroundColorGradientEnabled) {
+        // 未选中：灰色椭圆；选中：透明（由指示器负责白底+描边）
+        if (model.isSelected) {
+            self.kb_pillBackgroundView.backgroundColor = [UIColor clearColor];
+        } else {
+            self.kb_pillBackgroundView.backgroundColor = model.cellBackgroundUnselectedColor;
+        }
+    } else {
+        self.kb_pillBackgroundView.backgroundColor = [UIColor clearColor];
+    }
+}
+
+@end

keyBoard/Class/Shop/V/KBCategoryTitleView.h

@@ -0,0 +1,13 @@
+//
+//  KBCategoryTitleView.h
+//  keyBoard
+//
+//  A JXCategoryTitleView subclass that uses KBCategoryTitleCell.
+//
+
+#import <JXCategoryView/JXCategoryView.h>
+
+@interface KBCategoryTitleView : JXCategoryTitleView
+
+@end
+

keyBoard/Class/Shop/V/KBCategoryTitleView.m

@@ -0,0 +1,18 @@
+//
+//  KBCategoryTitleView.m
+//  keyBoard
+//
+//  Swap in KBCategoryTitleCell to add a custom unselected pill background.
+//
+
+#import "KBCategoryTitleView.h"
+#import "KBCategoryTitleCell.h"
+
+@implementation KBCategoryTitleView
+
+- (Class)preferredCellClass {
+    return [KBCategoryTitleCell class];
+}
+
+@end
+

keyBoard/Class/Shop/VC/KBShopVC.m

@@ -9,6 +9,7 @@
 #import "JXPagerView.h"
 #import "KBShopHeadView.h"
 #import <JXCategoryView/JXCategoryView.h>
+#import "KBCategoryTitleView.h"
 #import <JXPagingView/JXPagerView.h>
 #import <MJRefresh/MJRefresh.h>
 #import "KBShopItemVC.h"
@@ -42,7 +43,7 @@ static const CGFloat JXheightForHeaderInSection = 50;
 
     _userHeaderView = [[KBShopHeadView alloc] init];
 
-    _categoryView = [[JXCategoryTitleView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, JXheightForHeaderInSection)];
+    _categoryView = (JXCategoryTitleView *)[[KBCategoryTitleView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, JXheightForHeaderInSection)];
     self.categoryView.titles = self.titles;
     self.categoryView.backgroundColor = [UIColor whiteColor];
     self.categoryView.delegate = self;
@@ -51,10 +52,21 @@ static const CGFloat JXheightForHeaderInSection = 50;
     self.categoryView.titleColorGradientEnabled = YES;
     self.categoryView.titleLabelZoomEnabled = YES;
     self.categoryView.contentScrollViewClickTransitionAnimationEnabled = NO;
+    // Unselected items need a rounded gray background like the screenshot.
+    // JXCategoryTitleView supports cell background colors via JXCategoryIndicatorView.
+    self.categoryView.cellBackgroundColorGradientEnabled = YES;
+    self.categoryView.cellBackgroundUnselectedColor = [UIColor colorWithHex:0xEFEFEF];
+    self.categoryView.cellBackgroundSelectedColor = [UIColor whiteColor];
+    // Make the pills look compact
+    self.categoryView.cellWidthIncrement = 20; // horizontal padding for each item
+    self.categoryView.cellSpacing = 12;        // spacing between items
+    self.categoryView.contentEdgeInsetLeft = 16;
+    self.categoryView.contentEdgeInsetRight = 16;
 
     JXCategoryIndicatorBackgroundView *backgroundView = [[JXCategoryIndicatorBackgroundView alloc] init];
     backgroundView.indicatorHeight = 20;
     backgroundView.indicatorCornerRadius = JXCategoryViewAutomaticDimension;
+    backgroundView.indicatorColor = [UIColor whiteColor]; // keep selected fill white
     backgroundView.layer.borderColor = [UIColor colorWithHex:0x02BEAC].CGColor;
     backgroundView.layer.borderWidth = 1;
     self.categoryView.indicators = @[backgroundView];