1

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];