Question

您好。我试图在上面的图片中看到什么。

基本上它是一个带有3个单元的UICollectionView，每个单元都包含一个标签。我想要实现的是在所选标签/视图的顶部放置黑色视图，根据叠加的视图位置更改文本颜色。因此，当黑色视图离开文本区域时，当滑动标签颜色下方的视图时，应逐渐改变颜色。

我设法做了类似的事情，但是有一个显示活动视图的底线，如下所示：

我在Xamarin.iOS中这样做，但如果有人想解决这个问题，我对Swift解决方案/提示感到满意。

旁注：我没有使用故事板或界面构建器。仅用于创建我的界面的代码。此外，由于标签的大小不同，视图需要缩小/扩展以适合标签。

谢谢！

编辑：我当前解决方案的源代码。

public class HomeMenuBar : UIView
{
    UICollectionView _menuLabels;
    public HomeController HomeController { get; set; }
    public int val;
    public UICollectionView MenuLabels
    {
        get
        {
            if (_menuLabels != null) return _menuLabels;
            var layout = new UICollectionViewFlowLayout();
            _menuLabels = new UICollectionView(CGRect.Empty, layout);
            _menuLabels.BackgroundColor = UIColor.White;

            var del = new MenuLabelsFlowDelegate();
            _menuLabels.DataSource = new MenuLabelsDataSource();

            del.ItemSelectedEvent += (object sender, EventArgs e) =>
            {
                HomeController.ScrollToMenuItem(((MenuLabelsFlowDelegate)sender).selectedIndex);
            };

            _menuLabels.Delegate = del;
            return _menuLabels;
        }
    }
    private string _cellId = "cellId";

    [Export("initWithFrame:")]
    public HomeMenuBar(CGRect frame) : base(frame)
    {

    }

    public HomeMenuBar()
    {
        MenuLabels.RegisterClassForCell(typeof(MenuCell), _cellId);

        AddSubview(MenuLabels);

        this.ConstraintsWithFormat("H:|[v0]|", MenuLabels);
        this.ConstraintsWithFormat("V:|[v0]|", MenuLabels);

        var indexPath = NSIndexPath.FromItemSection(0, 0);
        MenuLabels.SelectItem(indexPath, false, UICollectionViewScrollPosition.None);

        SetupHighlitnigBar();
    }

    private UIView _menuItemHighlitghterBar;
    public NSLayoutConstraint BarLeftrAnchorConstraint { get; set; }
    public UIView MenuItemHighlitghterBar
    {
        get
        {
            if (_menuItemHighlitghterBar != null) return _menuItemHighlitghterBar;

            _menuItemHighlitghterBar = new UIView
            {
                BackgroundColor = UIColor.Black,
                TranslatesAutoresizingMaskIntoConstraints = false
            };

            return _menuItemHighlitghterBar;
        }
    }


    void SetupHighlitnigBar()
    {

        AddSubview(MenuItemHighlitghterBar);

        var width = UIApplication.SharedApplication.StatusBarFrame.Width / 3;
        this.ConstraintsWithFormat($"H:|[v0({width})]", MenuItemHighlitghterBar);
        this.ConstraintsWithFormat("V:[v0(2)]|", MenuItemHighlitghterBar);

        BarLeftrAnchorConstraint = _menuItemHighlitghterBar.LeftAnchor.ConstraintEqualTo(this.LeftAnchor);
        BarLeftrAnchorConstraint.Active = true;


    }


}


public class MenuLabelsDataSource : UICollectionViewDataSource
{
    string[] _labelText = { "Explore", "Following", "Likes" };

    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        var cell = (MenuCell)collectionView.DequeueReusableCell("cellId", indexPath);

        cell.ConstructLabelWithText(_labelText[indexPath.Item]);

        return cell;
    }

    public override nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        return 3;
    }




}

public class MenuLabelsFlowDelegate : UICollectionViewDelegateFlowLayout
{

    public event EventHandler<EventArgs> ItemSelectedEvent;
    public int selectedIndex = 0;

    public override CGSize GetSizeForItem(UICollectionView collectionView, UICollectionViewLayout layout, NSIndexPath indexPath)
    {
        return new CGSize(collectionView.Frame.Width / 3, collectionView.Frame.Height);
    }

    public override nfloat GetMinimumInteritemSpacingForSection(UICollectionView collectionView, UICollectionViewLayout layout, nint section)
    {
        return 0;

    }

    public override void ItemSelected(UICollectionView collectionView, NSIndexPath indexPath)
    {
        this.selectedIndex = (int)indexPath.Item;
        if (this.ItemSelectedEvent != null)
        {
            this.ItemSelectedEvent(this, new EventArgs());
        }
    }


}

public class MenuCell : UICollectionViewCell
{

    UILabel _label;

    public UILabel Label
    {
        get
        {
            if (_label != null) return _label;

            _label = new UILabel();


            return _label;
        }
    }

    [Export("initWithFrame:")]
    public MenuCell(CGRect frame) : base(frame)
    {

    }

    public void ConstructLabelWithText(string text)
    {
        AddSubview(Label);

        this.ConstraintsWithFormat("H:|-4-[v0]-4-|", Label);
        this.ConstraintsWithFormat("V:|-4-[v0]-4-|", Label);

        Label.Text = text;
        Label.TextAlignment = UITextAlignment.Center;

    }



}

Answer 1

您可以在更改时添加属性（例如，您的滑动操作触发），修改单元格的标签。

首先，我建议您在单元格的构造方法中配置Label：

[Export("initWithFrame:")]
public MenuCell(CGRect frame) : base(frame)
{
    AddSubview(Label);

    Label.TranslatesAutoresizingMaskIntoConstraints = false;
    this.ConstraintsWithFormat("H:|-4-[v0]-4-|", Label);
    this.ConstraintsWithFormat("V:|-4-[v0]-4-|", Label);

    //Try to configure the label's style
    Label.Layer.CornerRadius = 10;
    Label.Layer.MasksToBounds = true;

    Label.TextAlignment = UITextAlignment.Center;
}

然后为两种选择样式定义两种方法：

public void LabelSelected()
{
    Label.BackgroundColor = UIColor.Black;
    Label.TextColor = UIColor.White;
}

public void LabelUnSelected()
{
    Label.BackgroundColor = UIColor.White;
    Label.TextColor = UIColor.Black;
}

在DataSource中添加CollectionSelected：

public class MenuLabelsDataSource : UICollectionViewDataSource
{
    ...

    public int CollectionSelected { set; get; }

    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        var cell = (MenuCell)collectionView.DequeueReusableCell("cellId", indexPath);

        if (indexPath.Row == CollectionSelected) 
        {
            cell.LabelSelected();
        }
        else 
        {
            cell.LabelUnSelected();
        }

        //This method only sets the text of the label
        cell.ConstructLabelWithText(_labelText[indexPath.Item]);

        return cell;
    }

    ...

}

最后我们需要在HomeMenuBar：

中定义属性

public int SelectedIndex
{
    set
    {
        selectedIndex = value;

        (_menuLabels.DataSource as MenuLabelsDataSource).CollectionSelected = selectedIndex;
        _menuLabels.ReloadData();
    }
}

如果要更改所选索引，请尝试homeMenu.SelectedIndex = 1;。 homeMenu是HomeMenuBar的实例。

Answer 2

您无需在标签上放置单独的黑色视图。只要有这样的方法，

public void SetLabelState(UILabel label, bool active) {
    label.BackgroundColor = active ? UIColor.Black : UIColor.White;
    label.TextColor = active ? UIColor.White : UIColor.Black;
}

并相应地在每个标签上调用它。

在视图之间滑动时更改标签文本颜色

2 个答案: