Question

我有自定义视图，我想模仿表格视图单元格中的披露指标。这可能吗？无论如何提取该图像？

Answer 1

这可以通过将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)

Answer 2

请注意必须使用透明背景

这是我可以在photoshop文件中获得的最佳匹配：

请注意，它包含下面的REAL iOS IMAGE（来自屏幕截图）作为图层，因此您可以进行比较。

http://www.filedropper.com/fakearrowiosnov2013psd

似乎VBK想要UITableView系列中的单个V形臂。这被称为'披露指标'而不是UIButton提供的'详细披露'。

我想你想要这样的东西：

UITableView Disclosure Indicator Image for Buttons

50x80，背景透明。在按钮或UIImageView上使用此图像。将其大小调整为您希望按钮的大小。 Apple建议命中目标不低于40x40。我在故事板中将其大小调整为10x16，但我使用的是透明按钮覆盖，因此尺寸无关紧要。

图像镜像：http://imgur.com/X00qn0Z.png

请注意，并不完全是iOS7中使用的图像。（2013年11月。）要获得精确的图像，只需在模拟器中运行视网膜中的应用程序，并制作屏幕截图。

Answer 3

由于Apple为不同的工具提供了official iOS design resources，因此您可以从那里提取人字形。

Answer 4

您可以使用此Xcode项目从Xcode Simulator中提取图形图像 - https://github.com/0xced/iOS-Artwork-Extractor

Answer 5

这对我有用：

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

Answer 6

我制作了一个完全在代码中的解决方案来绘制类似于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 gist

Answer 7

对于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));

Answer 8

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
    }
}

Answer 9

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)
    }
}

Answer 10

您可以使用一行代码在UITableViewCell的右侧添加任何自定义图像：

试试这个：

-(UITableViewCell *)tableView:(UITableView *)tableView 
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.accessoryView = [[UIImageView alloc]initWithImage:
    [UIImage imageNamed:@"blueButton.png"]];
}

使用uibutton ios的表视图披露指示器样式

10 个答案: