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
+