[UE4]ListViewのスクロールバーのデザインを変更する

はじめに

UMGでリスト表示をする際にListViewを使うとScrollBoxよりも負荷が軽いらしいという記事を見つけたので使ってみました。
ところがListViewではスクロールバーのデザインを変更することができないため、Blueprintに公開して変更できるようにしました。

今回はエンジンの改造は行わず、C++でListViewを継承する形で実現しています。

環境

• Windows 10
• Unreal Engine 4.27

できたもの

スクロールバーの形と色を変更、バー上下の線を非表示にしました。

Before

After

手順

C++でのクラス作成

SListViewCustom.h

#pragma once

#include "CoreMinimal.h"
#include "Widgets/Views/SListView.h"

/**
 * スクロールバーのスタイル情報を持つクラス
 */
template <typename ItemType>
class TEST_API SListViewCustom : public SListView<ItemType>
{
public:
	SListViewCustom(ETableViewMode::Type InListMode = ETableViewMode::List)
		: SListView(InListMode)
	{
	}

	/** Set Scroll Bar Style */
	void SetScrollBarStyle(const FScrollBarStyle* InStyle)
	{
		if (ScrollBar)
		{
			ScrollBar->SetStyle(InStyle);
		}
	}

	/** Set ScrollBarAlwaysVisible attribute */
	void SetScrollBarTrackAlwaysVisible(bool InAlwaysVisible)
	{
		if (ScrollBar)
		{
			ScrollBar->SetScrollBarTrackAlwaysVisible(InAlwaysVisible);
		}
	}
};

CustomizableListView.h

#pragma once

#include "CoreMinimal.h"
#include "Widgets/Views/SListView.h"
#include "Components/ListView.h"
#include "SListViewCustom.h"
#include "CustomizableListView.generated.h"

/**
 * ListViewを継承したクラス
 */
UCLASS()
class TEST_API UCustomizableListView : public UListView
{
	GENERATED_BODY()

public:
	UCustomizableListView(const FObjectInitializer& Initializer) : UListView(Initializer){}

	/** Set Scroll Bar Style */
	UFUNCTION(BlueprintCallable)
		void SetScrollBarStyle(const FScrollBarStyle& InStyle);

	/** Set ScrollBarAlwaysVisible attribute */
	UFUNCTION(BlueprintCallable)
		void SetScrollBarTrackAlwaysVisible(bool InAlwaysVisible);

protected:
	virtual TSharedRef<STableViewBase> RebuildListWidget() override;
};

CustomizableListView.cpp

#include "CustomizableListView.h"

TSharedRef<STableViewBase> UCustomizableListView::RebuildListWidget()
{
	return ConstructListView<SListView>();
}

void UCustomizableListView::SetScrollBarStyle(const FScrollBarStyle& InStyle)
{
	TSharedPtr<SListViewCustom<UObject*>> MyListViewCustom = StaticCastSharedPtr<SListViewCustom<UObject*>>(MyListView);
	MyListViewCustom->SetScrollBarStyle(&InStyle);
}

void UCustomizableListView::SetScrollBarTrackAlwaysVisible(bool InAlwaysVisible)
{
	TSharedPtr<SListViewCustom<UObject*>> MyListViewCustom = StaticCastSharedPtr<SListViewCustom<UObject*>>(MyListView);
	MyListViewCustom->SetScrollBarTrackAlwaysVisible(InAlwaysVisible);
}

Blueprintでデザイン変更

Blueprintに関数を公開できたので、Widget Blueprintから設定します。
Normal Thumb Image,Hovered Thumb Image,Dragged Thumb Imageを変更しました。
マテリアルはこちらの角丸マテリアルを使用しました。

今回できなかったこと

• スクロールバーにカーソルを合わせるとバー上下の線が表示されてしまう
  ここを消すにはさらに深い階層まで手を入れないといけなさそうだったので今回は断念しました。
  

• スクロールバーの横幅の変更
  どこで指定しているのかまでコードを追えていないです。

参考サイト