38

ProgressView を使用して UISlider を取得するアップル製の方法はありますか。これは、ネイティブの quicktimeplayer や youtube などの多くのストリーミング アプリケーションで使用されます。（念のため：私は興味のあるビジュアライゼーションにのみ参加しています）

ローダー付スライダー

乾杯サイモン

4

9 に答える 9

47

これは、あなたが説明していることの簡単なバージョンです。

代替テキスト

わざわざ陰影やその他の微妙な点を追加しようとしなかったという意味で「シンプル」です。ただし、構築は簡単で、必要に応じて微調整して、より微妙な方法で描画することもできます. たとえば、独自の画像を作成して、それをスライダーのつまみとして使用できます。

これは実際には、温度計を描画する UIView サブクラス (MyTherm) の上にある UISlider サブクラスと、数値を描画する 2 つの UILabels です。

UISlider サブクラスは組み込みのトラックを削除して、その背後にある温度計が透けて見えるようにします。ただし、UISlider のサム (ノブ) は通常どおりドラッグ可能であり、カスタム イメージに設定したり、ユーザーがドラッグしたときに Value Changed イベントを取得したりできます。独自のトラックを削除する UISlider サブクラスのコードを次に示します。

- (CGRect)trackRectForBounds:(CGRect)bounds {
    CGRect result = [super trackRectForBounds:bounds];
    result.size.height = 0;
    return result;
}

温度計は、カスタム UIView サブクラス MyTherm のインスタンスです。ペン先でインスタンス化し、不透明度のチェックを外して、背景色をクリア カラーにしました。プロパティがあるvalueため、温度計をどれだけ満たすかを知っています。そのdrawRect:コードは次のとおりです。

- (void)drawRect:(CGRect)rect {
    CGContextRef c = UIGraphicsGetCurrentContext();
    [[UIColor whiteColor] set];
    CGFloat ins = 2.0;
    CGRect r = CGRectInset(self.bounds, ins, ins);
    CGFloat radius = r.size.height / 2.0;
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, CGRectGetMaxX(r) - radius, ins);
    CGPathAddArc(path, NULL, radius+ins, radius+ins, radius, -M_PI/2.0, M_PI/2.0, true);
    CGPathAddArc(path, NULL, CGRectGetMaxX(r) - radius, radius+ins, radius, M_PI/2.0, -M_PI/2.0, true);
    CGPathCloseSubpath(path);
    CGContextAddPath(c, path);
    CGContextSetLineWidth(c, 2);
    CGContextStrokePath(c);
    CGContextAddPath(c, path);
    CGContextClip(c);
    CGContextFillRect(c, CGRectMake(r.origin.x, r.origin.y, r.size.width * self.value, r.size.height));
}

温度計の値を変更するには、MyTherm インスタンスvalueを 0 から 1 の間の数値に変更し、それ自体を で再描画するように指示しsetNeedsDisplayます。

于 2011-01-01T23:37:39.377 に答える
20

これは、標準のコントロールを使用して実行できます。

Interface Builder でUISliderすぐにあなたの上に置き、UIProgressViewそれらを同じサイズにします。

背景のUISlider水平線はトラックと呼ばれ、見えないようにするのがコツです。これは、透明な PNG とUISliderメソッドsetMinimumTrackImage:forState:および を使用して行いsetMaximumTrackImage:forState:ます。

ビュー コントローラのviewDidLoadメソッドに以下を追加します。

[self.slider setMinimumTrackImage:[UIImage imageNamed:@"transparent.png"] forState:UIControlStateNormal];
[self.slider setMaximumTrackImage:[UIImage imageNamed:@"transparent.png"] forState:UIControlStateNormal];

はself.sliderあなたのを指しますUISlider。

Xcode でコードをテストしたところ、独立したプログレス バーを備えたスライダーが表示されます。

于 2010-12-31T12:32:29.543 に答える
4

UISlider を作成します。

// 1
// Make the slider as a public propriety so you can access it
playerSlider = [[UISlider alloc] init];
[playerSlider setContinuous:YES];
[playerSlider setHighlighted:YES];
// remove the slider filling default blue color
[playerSlider setMaximumTrackTintColor:[UIColor clearColor]];
[playerSlider setMinimumTrackTintColor:[UIColor clearColor]];
// Chose your frame
playerSlider.frame = CGRectMake(--- , -- , yourSliderWith , ----);

// 2
// create a UIView that u can access and make it the shadow of your slider 
shadowSlider = [[UIView alloc] init];
shadowSlider.backgroundColor = [UIColor lightTextColor];
shadowSlider.frame = CGRectMake(playerSlider.frame.origin.x , playerSlider.frame.origin.y , playerSlider.frame.size.width , playerSlider.frame.origin.size.height);
shadowSlider.layer.cornerRadius = 4;
shadowSlider.layer.masksToBounds = YES;
[playerSlider addSubview:shadowSlider];
[playerSlider sendSubviewToBack:shadowSlider];


// 3
// Add a timer Update your slider and shadow slider programatically 
 [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(updateSlider) userInfo:nil repeats:YES];


-(void)updateSlider {

    // Update the slider about the music time
    playerSlider.value = audioPlayer.currentTime; // based on ur case 
    playerSlider.maximumValue = audioPlayer.duration;

    float smartWidth = 0.0;
    smartWidth = (yourSliderFullWidth * audioPlayer.duration ) / 100;
    shadowSlider.frame = CGRectMake( shadowSlider.frame.origin.x , shadowSlider.frame.origin.y , smartWidth , shadowSlider.frame.size.height);

   }

楽しみ！PS 誤字脱字があるかもしれません。

于 2012-11-12T22:23:28.260 に答える
3

アイデア 1: UISlider をサブクラス化することで、進行状況ビューとして簡単に使用できます。これは、ビューの値 (進行状況) を設定できる「setValue:animated:」などのメソッドに応答します。

例に表示されているものを作成する唯一の「制限」はバッファバーです。これは、UISlider を「創造的に」スキニングすることで作成でき (カスタムスキンを追加できるため)、おそらくそのスキンをプログラムで設定できます。

アイデア 2: もう 1 つの (より簡単な) オプションは、UIProgressView をサブクラス化し、そのサブクラス内に UISlider を作成することです。UISlider をスキンしてシースルー スキン (バーはなく、ノブのみが表示される) にし、UIProgressView の上に配置できます。

プリロード (バッファリング) には UIProgressView を使用し、ムービー コントロール/進行状況表示には UISlider を使用できます。

かなり簡単に思えます:-)

編集:実際にあなたの質問に答えるには、社内の方法はありませんが、与えられたツールで簡単に達成できます.

于 2010-12-27T13:05:58.217 に答える