カスタムビューがあり、テーブルビューのセルにある開示インジケーターを模倣したいと思います。これは可能ですか？その画像を抽出する方法はありますか？
質問する
38690 次
11 に答える
87
これは、 ：UITableViewCell内に開示インジケーターを配置することにより、コードで完全に実行できます。UIButton
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.frame = button.bounds;
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
disclosure.userInteractionEnabled = NO;
[button addSubview:disclosure];
迅速：
let disclosure = UITableViewCell()
disclosure.frame = button.bounds
disclosure.accessoryType = .disclosureIndicator
disclosure.isUserInteractionEnabled = false
button.addSubview(disclosure)
于 2013-12-29T01:19:18.847 に答える
30
Appleはさまざまなツール用の公式iOSデザインリソースを提供しているため、そこからシェブロンを抽出できます。
アップデート
Appleは、WWDC'19基調講演でアイコンフォントSFSymbolsを発表しました。
chevron.rightSF Symbolsコンパニオンアプリには、すぐに使用できるというアイコンが含まれています。アイコンの太さを指定することもできます。
于 2018-10-10T13:48:06.647 に答える
12
透明な背景を使用する必要があることに注意してください
これが、フォトショップファイルで取得できる最良の一致です。
比較できるように、下にREAL iOS IMAGE（スクリーンショットから）がレイヤーとして含まれていることに注意してください。
http://www.filedropper.com/fakearrowiosnov2013psd
VBKはUITableViewコレクションから単一のシェブロンを必要としているようです。これは、「詳細開示」であるUIButtonから利用可能なものとは対照的に、「開示インジケーター」と呼ばれます。
私はあなたがこのようなものが欲しいと思います：
背景が透明な50x80です。この画像をボタンまたはUIImageViewの上に使用します。ボタンのサイズを変更します。Appleは、40x40以上のヒットターゲットを推奨しています。ストーリーボードで10x16のサイズにしましたが、透明なボタンオーバーレイを使用しているため、サイズは関係ありません。
イメージミラー： http： //imgur.com/X00qn0Z.png
ただし、これはiOS7で使用されている画像とは異なります。（2013年11月。）正確な画像を取得するには、シミュレーターの網膜でアプリを実行し、スクリーンショットを作成します。
于 2013-04-17T17:31:28.860 に答える
4
私がやりたいのは、を使って描くことUIBezierPathです。これにより、明確さを失うことなく、必要に応じてサイズを変更することができます。また、フォトエディタなしで必要な場合は、後で色を変更する機会も与えられます。原則は一般的であり、任意のパスに適用できます。使用法は非常に簡単です：
//suppose we want to apply disclosure arrow image to this button:
@IBOutlet weak var btnDisclosure: UIButton!
私が今する必要があるのは：
//get an image from UIBezierPath, resize it for the button and stroke with white:
let arrowImage = UIImage.imageWithBezierPath(UIBezierPath.disclosureArrowPath().scaleToAspectFitRect(CGRect(x: 0, y: 0, width: 22, height: 22)), fillColor: UIColor.clearColor(), strokeColor: UIColor.whiteColor())
//assign disclosure arrow image to the button:
btnDisclosure.setImage(arrowImage, forState: .Normal)
したがって、開示ボタンのように見えるUIBezierPathを描画するためのコードの一部：
extension UIBezierPath
{
///Disclosure arrow path. Use scaleToAspectFitRect to resize it to any given rect.
class func disclosureArrowPath() -> UIBezierPath
{
//// arrow Drawing
let arrowPath = UIBezierPath()
arrowPath.moveToPoint(CGPointMake(4, 4))
arrowPath.addLineToPoint(CGPointMake(26.5, 25.24))
arrowPath.addLineToPoint(CGPointMake(4, 47.5))
arrowPath.lineWidth = 3
return arrowPath
}
///Makes a path scalable to any size.
///- parameter newRect: The path will be resized to aspect fit into this rectangle.
func scaleToAspectFitRect(newRect: CGRect) -> UIBezierPath
{
var scaleFactor : CGFloat = 1.0
//this is probably only the case of scale factor < 1:
if bounds.width > bounds.height
{
//fit witdth:
scaleFactor = newRect.width/bounds.width
}
else
{
//fit height:
scaleFactor = newRect.height/bounds.height
}
//scale to aspect fill rect:
self.applyTransform(CGAffineTransformMakeScale(scaleFactor, scaleFactor))
return self
}
}
次に、から抜け出す方法が必要UIImageですUIBezierPath。繰り返しますが、次のようにUIImageに拡張機能を追加できます。
extension UIImage
{
///Custom fill and stroke colours for our image based on UIBezierPath
class func imageWithBezierPath(path: UIBezierPath, fillColor: UIColor, strokeColor: UIColor) -> UIImage
{
//enlarge the rect so that stroke line is not clipped:
let rect = CGRectInset(path.bounds, -path.lineWidth / 2, -path.lineWidth / 2)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0) //size of the image, opaque, and scale (set to screen default with 0)
let bezierLayer = CAShapeLayer()
bezierLayer.path = path.CGPath;
bezierLayer.fillColor = fillColor.CGColor
bezierLayer.strokeColor = strokeColor.CGColor
bezierLayer.lineWidth = path.lineWidth;
let imgViewTmp = UIImageView(frame: path.bounds)
imgViewTmp.layer.addSublayer(bezierLayer);
imgViewTmp.layer.renderInContext(UIGraphicsGetCurrentContext()!)
let image = UIGraphicsGetImageFromCurrentImageContext()
//UIGraphicsEndImageContext()
return image
}
}
この特定のタスクにはやり過ぎのように見えるかもしれませんが、それは一般的です。また、サイズ変更や適切なデザインの作成などを頻繁に行う場合に便利です。
于 2016-08-16T10:41:33.000 に答える
3
UITableView開示インジケーターに似た矢印を描画するための完全なコードソリューションを作成しました。
これは次のように使用されます：
let arrowImage = ArrowImageGenerator.generateArrow(withDirection: .down)
デフォルトの矢印は、UITableView開示インジケーターのデフォルトと同じように見えます。必要に応じて、方向（上、下、左、右）、サイズ、色などをカスタマイズできます。
コードは次のとおりです。
//
// ArrowImageGenerator.swift
//
// Created by Alessio Orlando on 07/10/15.
// Copyright © 2015 Alessio Orlando. All rights reserved.
//
import Foundation
import UIKit
enum ArrowDirection {
case up
case down
case left
case right
}
class ArrowImageGenerator {
static var defaultColor: UIColor = {
let color = UIColor(red: 0.783922, green: 0.780392, blue: 0.8, alpha: 1)
return color
}()
class func generateArrow(withDirection direction: ArrowDirection = .right,
size: CGSize? = nil,
lineWidth: CGFloat = 2.0,
arrowColor: UIColor = ArrowImageGenerator.defaultColor,
backgroundColor: UIColor = UIColor.clear,
scale: CGFloat = UIScreen.main.scale)
-> UIImage? {
var actualSize: CGSize
if let size = size {
actualSize = size
}
else {
actualSize = defaultSize(for: direction)
}
let scaledSize = actualSize.applying(CGAffineTransform(scaleX: scale, y: scale))
let scaledLineWidth = lineWidth * scale
UIGraphicsBeginImageContext(CGSize(width: scaledSize.width, height: scaledSize.height))
defer {
UIGraphicsEndImageContext()
}
guard let context = UIGraphicsGetCurrentContext() else { return nil }
configureForArrowDrawing(context)
UIGraphicsPushContext(context)
strokeArrow(context, size: scaledSize, arrowColor: arrowColor, backgroundColor: backgroundColor, lineWidth: scaledLineWidth, direction: direction)
UIGraphicsPopContext()
guard let outputImage = UIGraphicsGetImageFromCurrentImageContext(),
let quartzImage = context.makeImage() else {
return nil
}
let scaledImage = UIImage(cgImage: quartzImage, scale: scale, orientation: outputImage.imageOrientation)
return scaledImage
}
private class func generateResizableArrow(_ arrowImage: UIImage, direction: ArrowDirection) -> UIImage {
var edgeInset: UIEdgeInsets?
switch direction {
case .up:
edgeInset = UIEdgeInsets(top: 11, left: 0, bottom: 1, right: 0)
case .down:
edgeInset = UIEdgeInsets(top: 1, left: 0, bottom: 11, right: 0)
case .left:
edgeInset = UIEdgeInsets(top: 1, left: 11, bottom: 1, right: 0)
case .right:
edgeInset = UIEdgeInsets(top: 1, left: 0, bottom: 1, right: 11)
}
let resizableImage = arrowImage.resizableImage(withCapInsets: edgeInset!)
return resizableImage
}
private class func configureForArrowDrawing(_ context: CGContext) {
context.setBlendMode(CGBlendMode.normal)
context.setAllowsAntialiasing(true)
context.setShouldAntialias(true)
}
private class func strokeArrow(_ context: CGContext, size: CGSize, arrowColor: UIColor, backgroundColor: UIColor, lineWidth: CGFloat = 1.0, direction: ArrowDirection) {
backgroundColor.setFill()
UIRectFill(CGRect(origin: CGPoint(x: 0, y: 0), size: size))
arrowColor.setStroke()
context.setLineWidth(lineWidth)
let lineWidthOffset = lineWidth / 2 // needed to make the arrow pointy.
switch direction {
case .up:
context.move(to: CGPoint(x: size.width, y: size.height))
context.addLine(to: CGPoint(x: size.width / 2, y: 0 + lineWidthOffset))
context.addLine(to: CGPoint(x: 0, y: size.height))
case .down:
context.move(to: CGPoint(x: size.width, y: 0))
context.addLine(to: CGPoint(x: size.width / 2, y: size.height - lineWidthOffset))
context.addLine(to: CGPoint(x: 0, y: 0))
case .left:
context.move(to: CGPoint(x: size.width, y: 0))
context.addLine(to: CGPoint(x: lineWidthOffset, y: size.height / 2))
context.addLine(to: CGPoint(x: size.width, y: size.height))
case .right:
context.move(to: CGPoint(x: 0, y: 0))
context.addLine(to: CGPoint(x: size.width - lineWidthOffset, y: size.height / 2))
context.addLine(to: CGPoint(x: 0, y: size.height))
}
context.strokePath()
}
class func defaultSize(for direction: ArrowDirection) -> CGSize {
switch direction {
case .up, .down:
return CGSize(width: 12, height: 7)
case .left, .right:
return CGSize(width: 7, height: 12)
}
}
}
完全な要点は次のとおりです。github要点
于 2018-03-14T14:56:33.187 に答える
2
このXcodeプロジェクトを使用してXcodeシミュレーターからグラフィック画像を抽出できます-https ://github.com/0xced/iOS-Artwork-Extractor
于 2015-01-27T20:34:55.253 に答える
1
これは私のために働いた：
UITableViewCell *disclosure = [[UITableViewCell alloc] init];
disclosure.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
for (UIView*v1 in disclosure.subviews)
{
if ([v1 isKindOfClass:[UIButton class]])
{
for (UIView*v2 in v1.subviews)
{
if ([v2 isKindOfClass:[UIImageView class]])
{
return ((UIImageView*)v2).image;
}
}
}
}
于 2015-04-18T20:02:05.690 に答える
1
SWIFT 5
private lazy var iconImageView: UIImageView = {
let imageView = UIImageView()
let configuration = UIImage.SymbolConfiguration(pointSize: 13, weight: .medium)
imageView.image = UIImage(systemName: "chevron.right", withConfiguration: configuration)
imageView.tintColor = .lightGray
imageView.contentMode = .scaleAspectFit
imageView.constrainAspectRatio(17.0/10.0)
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
アスペクト比UIView拡張機能
extension UIView {
/// Ratio height/width. Example: 20/40 (20 is height, 40 is width)
func constrainAspectRatio(_ ratio: CGFloat) {
NSLayoutConstraint(item: self,
attribute: .height,
relatedBy: .equal,
toItem: self,
attribute: .width,
multiplier: ratio,
constant: 0).isActive = true
}
}
于 2020-09-26T03:36:36.740 に答える
0
Xamarin.iOSの場合
//create your button
var systolicWell = new UIButton(UIButtonType.RoundedRect);
systolicWell.BackgroundColor = UIColor.White;
//create the UITableViewCell
var systolicDisclosure = new UITableViewCell();
systolicDisclosure.Accessory = UITableViewCellAccessory.DisclosureIndicator;
systolicDisclosure.UserInteractionEnabled = false;
//add the button, then the UITableViewCell to the View
View.AddSubviews(systolicWell, systolicDisclosure);
//using FluentLayout https://github.com/slodge/Cirrious.FluentLayout
View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
View.AddConstraints(
systolicWell.AtTopOf(View).Plus(5),
systolicWell.Width().EqualTo().WidthOf(View),
systolicWell.Height().EqualTo(10),
systolicDisclosure.WithSameTop(systolicWell),
systolicDisclosure.WithSameWidth(systolicWell),
systolicDisclosure.WithSameHeight(systolicWell));
于 2015-04-24T02:00:29.520 に答える
0
Swift3 / Swift4：
ボタンの開示インジケーター
let disclosureIndicator = UITableViewCell(style: .value1,
reuseIdentifier: nil)
let theWidth = UIScreen.main.bounds.width
let theHeight = yourButton.frame.height
yourButton.frame = CGRect(0,0, theWidth, theHeight)
disclosureIndicator.textLabel?.text = "title"
disclosureIndicator.detailTextLabel?.textColor = .black
disclosureIndicator.detailTextLabel?.text = "subtitle"
disclosureIndicator.accessoryType = .disclosureIndicator
disclosureIndicator.isUserInteractionEnabled = false
disclosureIndicator.frame = yourButton.bounds
yourButton.addSubview(disclosureIndicator)
CGRectにこの拡張機能を追加します
extension CGRect {
init(_ x:CGFloat, _ y:CGFloat, _ w:CGFloat, _ h:CGFloat) {
self.init(x:x, y:y, width:w, height:h)
}
}
于 2017-09-19T12:42:08.383 に答える
-3
UITableViewCellの右側に、1行のコードで任意のカスタム画像を追加できます。
これを試して：
-(UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
cell.accessoryView = [[UIImageView alloc]initWithImage:
[UIImage imageNamed:@"blueButton.png"]];
}
于 2012-12-12T10:36:52.687 に答える