web-dev-qa-db-ja.com

UISliderの親指の「クリック領域」を増やす

カスタムUISliderを作成していますが、親指の画像の「クリック領域」をどのように増やすのでしょうか。以下のコードは、親指の「クリック領域」が変更されないことを除いて、うまく機能します。私が間違っていなければ、標準の親指の面積は19ピクセルだと思いますか？以下のコードで35pxに増やしたいとしましょう。どのような手順を踏む必要がありますか？私はこの分野の専門家ではないことを覚えておいてください。

[〜＃〜] edit [〜＃〜]以下のコードが修正され、コピーパスタの準備が整いました！お役に立てば幸いです！

main.h

#import "MyUISlider.h"

@interface main : MLUIViewController <UITableViewDelegate, UITableViewDataSource, UISearchBarDelegate, UIActionSheetDelegate, UIAlertViewDelegate, MFMailComposeViewControllerDelegate, UIGestureRecognizerDelegate, MLSearchTaskDelegate, MLDeactivateDelegate, MLReceiptDelegate>
{
  ..........

}

- (void)create_Custom_UISlider;

main.m

- (void)viewDidLoad
{

[self create_Custom_UISlider];
[self.view addSubview: customSlider];

}

- (void)create_Custom_UISlider
{
CGRect frame = CGRectMake(20.0, 320.0, 280, 0.0);


customSlider = [[MyUISlider alloc] initWithFrame:frame];

[customSlider addTarget:self action:@selector(sliderAction:) forControlEvents:UIControlEventValueChanged];
// in case the parent view draws with a custom color or gradient, use a transparent color

customSlider.backgroundColor = [UIColor clearColor];

UIImage *stetchLeftTrack = [[UIImage imageNamed:@"blue_slider08.png"]
           stretchableImageWithLeftCapWidth: 10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:@"blue_slider08.png"]
            stretchableImageWithLeftCapWidth: 260.0 topCapHeight:0.0];


[customSlider setThumbImage: [UIImage imageNamed:@"slider_button00"] forState:UIControlStateNormal];
[customSlider setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[customSlider setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];


                    customSlider.minimumValue = 0.0;
                    customSlider.maximumValue = 1.0;
                    customSlider.continuous = NO;
                    customSlider.value = 0.00;

}

-(void) sliderAction: (UISlider *) sender{

if(sender.value !=1.0){
 [sender setValue: 0.00 animated: YES];
}
else{
[sender setValue 0.00 animated: YES];
 // add some code here depending on what you want to do!
  }
}

[〜＃〜] edit [〜＃〜]（以下のコードでサブクラス化しようとしています）

MyUISlider.h

#import <UIKit/UIKit.h>

@interface MyUISlider : UISlider {

}

@end

MyUISlider.m

#import "MyUISlider.h"

@implementation MyUISlider



- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value
{


return CGRectInset ([super thumbRectForBounds:bounds trackRect:rect value:value], 10 , 10);

}


@end
iphoneiosuislider
23
Jesper Martensson

カスタムでoverridethumbRectForBounds:trackRect:value:を実行する必要がありますsubclass（callingの代わりに）コードで行うのと同じように自分でメソッドを作成します。これは、取得する必要さえない値を返す以外は何もしません）。

thumbRectForBounds:trackRect:value:は、タム長方形をsetする方法ではなく、getそれ。スライダーは内部でこのthumbRectForBounds:trackRect:value:メソッドを呼び出して、親指の画像を描画する場所を認識します。そのため、ドキュメントで説明されているように、必要なCGRectを返すために、スライダーをオーバーライドする必要があります（必要に応じて35x35pxにします）。

12
AliSoftware

Swift 3.0およびiOS10用に更新

private func generateHandleImage(with color: UIColor) -> UIImage {
    let rect = CGRect(x: 0, y: 0, width: self.bounds.size.height + 20, height: self.bounds.size.height + 20)

    return UIGraphicsImageRenderer(size: rect.size).image { (imageContext) in
        imageContext.cgContext.setFillColor(color.cgColor)
        imageContext.cgContext.fill(rect.insetBy(dx: 10, dy: 10))
    }
}

呼び出し：

self.sliderView.setThumbImage(self.generateHandleImage(with: .white), for: .normal)

元の回答：

はるかに簡単な方法は、親指の画像のサイズを大きくして、周囲に境界線が表示されないようにすることです。

- (UIImage *)generateHandleImageWithColor:(UIColor *)color
{
    CGRect rect = CGRectMake(0.0f, 0.0f, self.bounds.size.height + 20.f, self.bounds.size.height + 20.f);
    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.f);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, color.CGColor);
    CGContextFillRect(context, CGRectInset(rect, 10.f, 10.f));

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

そして、この画像をスライダーに追加するよりも：

[self.sliderView setThumbImage:[self generateHandleImageWithColor:[UIColor redColor]] forState:UIControlStateNormal];
13
Borut Tomazin

デフォルトのスライダーの領域を変更できるのに、なぜカスタムスライダーを使いたいのか;）

このコードを見て、UISliderのタッチ領域を増やすことができたので、それがあなたにも役立つことを願っています

CGRect sliderFrame = yourSlider.frame;
sliderFrame.size.height = 70.0;
[yourSlider setFrame:sliderFrame];
0
D-eptdeveloper

あなたは私のダブルスライダーをチェックすることができます プロジェクト

要約すると、ヒットテストメソッドを実装したので、beginTrackingWithTouchが呼び出されます。

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    if (CGRectContainsPoint(self.leftHandler.frame, point) || CGRectContainsPoint(self.rightHandler.frame, point)) {
        return self;
    }

    return [super hitTest:point withEvent:event];
}

詳細については、 class を確認してください

0
Raphael Oliveira

私もこの問題を抱えていて、オーバーライドすることで解決しました

-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event

方法。触れたいポイントはYESを返すことができます。

0
Yerkezhan