12
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【Unity】Tinder風UIのライブラリをつくったよ

Last updated at Posted at 2018-06-06

TL;DR

カードを左右にスワイプすることで好き/嫌いを判定していくUIは、TinderUIとして親しまれていて、数多くのマッチングサービスに取り入れられています。
Unityでも左右にスワイプしたくなったのでライブラリとして実装してみました。
Tinderを知らない人はこちら

screenshot1.gif
screenshot2.gif

データ件数に関わらず生成されるカードオブジェクトは常に2つなので、メモリに優しい作りになっています。

ソースコード

【Github】Unity-SwipeableView

使い方

1. カードに表示させたいデータをもたせたオブジェクトをつくる

using UnityEngine;

public class DemoCardData
{
    public Color color;
}

2. UISwipeableViewを継承してスワイプビューをつくる

using System.Collections.Generic;

public class UISwipeableViewDemo : UISwipeableView<DemoCardData>
{
    public void UpdateData(List<DemoCardData> data)
    {
        base.Initialize(data);
    }
}

3. UISwipeableCardを継承してカードオブジェクトをつくる

using UnityEngine;
using UnityEngine.UI;

public class UISwipeableCardDemo : UISwipeableCard<DemoCardData>
{
    [SerializeField]
    private Image bg;

    public override void UpdateContent(DemoCardData data)
    {
        bg.color = data.color;
    }
}

4. ビューにデータを渡す

using UnityEngine;
using System.Linq;

public class DemoScene : MonoBehaviour
{
    [SerializeField]
    private UISwipeableViewDemo swipeableView;

    void Start()
    {
        var data = Enumerable.Range(0, 20)
            .Select(i => new DemoCardData
            {
                color = new Color(Random.value, Random.value, Random.value, 1.0f)
            })
            .ToList();

        swipeableView.UpdateData(data);
    }
}

今後

現状ではUIの動きに関するカスタマイズ性が低いため、需要があれば改善していこうと思っています。
ご意見・ご要望などいただけると嬉しいです。

12
9
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?