定制器材UI-接口设计和实现
<p>[TOC]</p>
<table>
<thead>
<tr>
<th>最后修订日期</th>
<th>2023-11-15</th>
</tr>
</thead>
<tbody>
<tr>
<td>作者</td>
<td>林七佛</td>
</tr>
<tr>
<td>V1.0.0</td>
<td>创建文档</td>
</tr>
</tbody>
</table>
<p>[接口设计基于用例（定制器材UI-需求分析）](<a href="https://www.showdoc.com.cn/eleeditor/10691573240810644">https://www.showdoc.com.cn/eleeditor/10691573240810644</a> "接口设计基于用例（定制器材UI-需求分析）")</p>
<h1>常用样式的内容总结</h1>
<p>- 文本颜色：这是Text、InputField、Dropdown等控件的常用样式，可以通过设置颜色来改变文本的外观。
- 背景色：这是Button、InputField、ScrollView、Toggle、Slider、Dropdown等控件的常用样式，可以通过设置颜色来改变背景的外观。
- 背景图片：这是Button、InputField、ScrollView、Toggle、Slider、Dropdown等控件的常用样式，可以通过设置图片来改变背景的外观。
- 字体大小：这是Text、InputField、Dropdown等控件的常用样式，可以通过设置大小来改变文本的外观。
- 滑块颜色：这是Slider控件的常用样式，可以通过设置颜色来改变滑块的外观。
- 滑块图片：这是Slider控件的常用样式，可以通过设置图片来改变滑块的外观。
- 填充颜色：这是Slider控件的常用样式，可以通过设置颜色来改变填充的外观。
- 填充图片：这是Slider控件的常用样式，可以通过设置图片来改变填充的外观。
- 选中标记颜色：这是Toggle控件的常用样式，可以通过设置颜色来改变选中标记的外观。
- 选中标记图片：这是Toggle控件的常用样式，可以通过设置图片来改变选中标记的外观。
- 箭头图片：这是Dropdown控件的常用样式，可以通过设置图片来改变箭头的外观。</p>
<h1>接口设计和实现代码</h1>
<h2>①：设置文本(Text)控件样式</h2>
<pre><code class="language-csharp">/// &lt;summary&gt;
/// ITextAppearance接口定义了设置Text组件的字体、字体大小和颜色的方法。
/// &lt;/summary&gt;
public interface ITextAppearance
{
/// &lt;summary&gt;
/// 设置Text组件的字体。
/// &lt;/summary&gt;
/// &lt;param name=&quot;font&quot;&gt;要设置的字体。&lt;/param&gt;
void SetFont(Font font);
/// &lt;summary&gt;
/// 设置Text组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
void SetFontSize(int size);
/// &lt;summary&gt;
/// 设置Text组件的颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的颜色。&lt;/param&gt;
void SetColor(Color color);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// TextAppearance类实现了ITextAppearance接口，用于设置Text组件的字体、字体大小和颜色。
/// &lt;/summary&gt;
public class TextAppearance : MonoBehaviour, ITextAppearance
{
private Text textComponent;
private void Awake()
{
textComponent = GetComponent&lt;Text&gt;();//这里是针对Text的，如果是TMP的，可以参考下面的InputField-TextMeshPro的。
}
/// &lt;summary&gt;
/// 设置Text组件的字体。
/// &lt;/summary&gt;
/// &lt;param name=&quot;font&quot;&gt;要设置的字体。&lt;/param&gt;
public void SetFont(Font font)
{
textComponent.font = font;
}
/// &lt;summary&gt;
/// 设置Text组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
public void SetFontSize(int size)
{
textComponent.fontSize = size;
}
/// &lt;summary&gt;
/// 设置Text组件的颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的颜色。&lt;/param&gt;
public void SetColor(Color color)
{
textComponent.color = color;
}
}</code></pre>
<h2>②：设置图片(Image)控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// IImageAppearance接口定义了设置Image组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface IImageAppearance
{
/// &lt;summary&gt;
/// 设置Image组件的Sprite。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的Sprite。&lt;/param&gt;
void SetSprite(Sprite sprite);
/// &lt;summary&gt;
/// 设置Image组件的颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的颜色。&lt;/param&gt;
void SetColor(Color color);
/// &lt;summary&gt;
/// 设置Image组件的透明度。
/// &lt;/summary&gt;
/// &lt;param name=&quot;alpha&quot;&gt;要设置的透明度，范围从0（完全透明）到1（完全不透明）。&lt;/param&gt;
void SetAlpha(float alpha);
/// &lt;summary&gt;
/// 设置Image组件的填充类型。
/// &lt;/summary&gt;
/// &lt;param name=&quot;type&quot;&gt;要设置的填充类型。&lt;/param&gt;
void SetFillMethod(Image.FillMethod type);
/// &lt;summary&gt;
/// 设置Image组件的填充量。
/// &lt;/summary&gt;
/// &lt;param name=&quot;amount&quot;&gt;要设置的填充量，范围从0（无填充）到1（完全填充）。&lt;/param&gt;
void SetFillAmount(float amount);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// ImageAppearance类实现了IImageAppearance接口，用于设置Image组件的常用外观样式。
/// &lt;/summary&gt;
public class ImageAppearance : MonoBehaviour, IImageAppearance
{
private Image imageComponent;
private void Awake()
{
imageComponent = GetComponent&lt;Image&gt;();
}
/// &lt;summary&gt;
/// 设置Image组件的Sprite。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的Sprite。&lt;/param&gt;
public void SetSprite(Sprite sprite)
{
imageComponent.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置Image组件的颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的颜色。&lt;/param&gt;
public void SetColor(Color color)
{
imageComponent.color = color;
}
/// &lt;summary&gt;
/// 设置Image组件的透明度。
/// &lt;/summary&gt;
/// &lt;param name=&quot;alpha&quot;&gt;要设置的透明度，范围从0（完全透明）到1（完全不透明）。&lt;/param&gt;
public void SetAlpha(float alpha)
{
var color = imageComponent.color;
color.a = alpha;
imageComponent.color = color;
}
/// &lt;summary&gt;
/// 设置Image组件的填充类型。
/// &lt;/summary&gt;
/// &lt;param name=&quot;type&quot;&gt;要设置的填充类型。&lt;/param&gt;
public void SetFillMethod(Image.FillMethod type)
{
imageComponent.fillMethod = type;
}
/// &lt;summary&gt;
/// 设置Image组件的填充量。
/// &lt;/summary&gt;
/// &lt;param name=&quot;amount&quot;&gt;要设置的填充量，范围从0（无填充）到1（完全填充）。&lt;/param&gt;
public void SetFillAmount(float amount)
{
imageComponent.fillAmount = amount;
}
}</code></pre>
<h2>③：设置按钮(Button)控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// IButtonAppearance接口定义了设置Button组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface IButtonAppearance
{
/// &lt;summary&gt;
/// 设置Button组件的文本颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的文本颜色。&lt;/param&gt;
void SetTextColor(Color color);
/// &lt;summary&gt;
/// 设置Button组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
void SetBackgroundColor(Color color);
/// &lt;summary&gt;
/// 设置Button组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
void SetBackgroundImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置Button组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
void SetFontSize(int size);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// ButtonAppearance类实现了IButtonAppearance接口，用于设置Button组件的常用外观样式。
/// &lt;/summary&gt;
public class ButtonAppearance : MonoBehaviour, IButtonAppearance
{
private Button buttonComponent;
private Text buttonText;
private void Awake()
{
buttonComponent = GetComponent&lt;Button&gt;();
buttonText = buttonComponent.GetComponentInChildren&lt;Text&gt;();//这里是针对Text的，如果是TMP的，可以参考下面的InputField-TextMeshPro的。
}
/// &lt;summary&gt;
/// 设置Button组件的文本颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的文本颜色。&lt;/param&gt;
public void SetTextColor(Color color)
{
buttonText.color = color;
}
/// &lt;summary&gt;
/// 设置Button组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
public void SetBackgroundColor(Color color)
{
ColorBlock colorBlock = buttonComponent.colors;
colorBlock.normalColor = color;
buttonComponent.colors = colorBlock;
}
/// &lt;summary&gt;
/// 设置Button组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
public void SetBackgroundImage(Sprite sprite)
{
buttonComponent.image.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置Button组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
public void SetFontSize(int size)
{
buttonText.fontSize = size;
}
}</code></pre>
<h2>④：设置输入框(InputField-TextMeshPro)控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// IInputFieldAppearance接口定义了设置InputField组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface IInputFieldAppearance
{
/// &lt;summary&gt;
/// 设置InputField组件的文本颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的文本颜色。&lt;/param&gt;
void SetTextColor(Color color);
/// &lt;summary&gt;
/// 设置InputField组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
void SetBackgroundColor(Color color);
/// &lt;summary&gt;
/// 设置InputField组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
void SetBackgroundImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置InputField组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
void SetFontSize(int size);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using TMPro;
/// &lt;summary&gt;
/// InputFieldAppearance类实现了IInputFieldAppearance接口，用于设置InputField组件的常用外观样式。
/// &lt;/summary&gt;
public class InputFieldAppearance : MonoBehaviour, IInputFieldAppearance
{
private TMP_InputField inputFieldComponent;
private TextMeshProUGUI inputFieldText;
private void Awake()
{
inputFieldComponent = GetComponent&lt;TMP_InputField&gt;();
inputFieldText = inputFieldComponent.GetComponentsInChildren&lt;TextMeshProUGUI&gt;()[0];
}
/// &lt;summary&gt;
/// 设置InputField组件的文本颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的文本颜色。&lt;/param&gt;
public void SetTextColor(Color color)
{
inputFieldText.color = color;
}
/// &lt;summary&gt;
/// 设置InputField组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
public void SetBackgroundColor(Color color)
{
inputFieldComponent.image.color = color;
}
/// &lt;summary&gt;
/// 设置InputField组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
public void SetBackgroundImage(Sprite sprite)
{
inputFieldComponent.image.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置InputField组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
public void SetFontSize(int size)
{
inputFieldText.fontSize = size;
}
}</code></pre>
<h2>⑤：设置滚动视图(ScrollView)控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// IScrollViewAppearance接口定义了设置ScrollView组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface IScrollViewAppearance
{
/// &lt;summary&gt;
/// 设置ScrollView组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
void SetBackgroundColor(Color color);
/// &lt;summary&gt;
/// 设置ScrollView组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
void SetBackgroundImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置ScrollView组件的滚动条颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的滚动条颜色。&lt;/param&gt;
void SetScrollbarColor(Color color);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// ScrollViewAppearance类实现了IScrollViewAppearance接口，用于设置ScrollView组件的常用外观样式。
/// &lt;/summary&gt;
public class ScrollViewAppearance : MonoBehaviour, IScrollViewAppearance
{
private ScrollRect scrollRectComponent;
private Image backgroundImage;
private Scrollbar scrollbar;
private void Awake()
{
scrollRectComponent = GetComponent&lt;ScrollRect&gt;();
backgroundImage = GetComponent&lt;Image&gt;();
scrollbar = scrollRectComponent.verticalScrollbar;
}
/// &lt;summary&gt;
/// 设置ScrollView组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
public void SetBackgroundColor(Color color)
{
backgroundImage.color = color;
}
/// &lt;summary&gt;
/// 设置ScrollView组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
public void SetBackgroundImage(Sprite sprite)
{
backgroundImage.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置ScrollView组件的滚动条颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的滚动条颜色。&lt;/param&gt;
public void SetScrollbarColor(Color color)
{
scrollbar.GetComponent&lt;Image&gt;().color = color;
}
}</code></pre>
<h2>⑥：设置切换(Toogle)控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// IToggleAppearance接口定义了设置Toggle组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface IToggleAppearance
{
/// &lt;summary&gt;
/// 设置Toggle组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
void SetBackgroundColor(Color color);
/// &lt;summary&gt;
/// 设置Toggle组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
void SetBackgroundImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置Toggle组件的选中标记颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的选中标记颜色。&lt;/param&gt;
void SetCheckmarkColor(Color color);
/// &lt;summary&gt;
/// 设置Toggle组件的选中标记图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的选中标记图片。&lt;/param&gt;
void SetCheckmarkImage(Sprite sprite);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// ToggleAppearance类实现了IToggleAppearance接口，用于设置Toggle组件的常用外观样式。
/// &lt;/summary&gt;
public class ToggleAppearance : MonoBehaviour, IToggleAppearance
{
private Toggle toggleComponent;
private Image backgroundImage;
private Image checkmarkImage;
private void Awake()
{
toggleComponent = GetComponent&lt;Toggle&gt;();
backgroundImage = GetComponent&lt;Image&gt;();
checkmarkImage = toggleComponent.graphic as Image;
}
/// &lt;summary&gt;
/// 设置Toggle组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
public void SetBackgroundColor(Color color)
{
backgroundImage.color = color;
}
/// &lt;summary&gt;
/// 设置Toggle组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
public void SetBackgroundImage(Sprite sprite)
{
backgroundImage.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置Toggle组件的选中标记颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的选中标记颜色。&lt;/param&gt;
public void SetCheckmarkColor(Color color)
{
checkmarkImage.color = color;
}
/// &lt;summary&gt;
/// 设置Toggle组件的选中标记图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的选中标记图片。&lt;/param&gt;
public void SetCheckmarkImage(Sprite sprite)
{
checkmarkImage.sprite = sprite;
}
}</code></pre>
<h2>⑦：设置滚动条(Slider)的控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// ISliderAppearance接口定义了设置Slider组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface ISliderAppearance
{
/// &lt;summary&gt;
/// 设置Slider组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
void SetBackgroundColor(Color color);
/// &lt;summary&gt;
/// 设置Slider组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
void SetBackgroundImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置Slider组件的滑块颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的滑块颜色。&lt;/param&gt;
void SetHandleColor(Color color);
/// &lt;summary&gt;
/// 设置Slider组件的滑块图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的滑块图片。&lt;/param&gt;
void SetHandleImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置Slider组件的填充颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的填充颜色。&lt;/param&gt;
void SetFillColor(Color color);
/// &lt;summary&gt;
/// 设置Slider组件的填充图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的填充图片。&lt;/param&gt;
void SetFillImage(Sprite sprite);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using UnityEngine.UI;
/// &lt;summary&gt;
/// SliderAppearance类实现了ISliderAppearance接口，用于设置Slider组件的常用外观样式。
/// &lt;/summary&gt;
public class SliderAppearance : MonoBehaviour, ISliderAppearance
{
private Slider sliderComponent;
private Image backgroundImage;
private Image handleImage;
private Image fillImage;
private void Awake()
{
sliderComponent = GetComponent&lt;Slider&gt;();
backgroundImage = GetComponent&lt;Image&gt;();
handleImage = sliderComponent.handleRect.GetComponent&lt;Image&gt;();
fillImage = sliderComponent.fillRect.GetComponent&lt;Image&gt;();
}
/// &lt;summary&gt;
/// 设置Slider组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
public void SetBackgroundColor(Color color)
{
backgroundImage.color = color;
}
/// &lt;summary&gt;
/// 设置Slider组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
public void SetBackgroundImage(Sprite sprite)
{
backgroundImage.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置Slider组件的滑块颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的滑块颜色。&lt;/param&gt;
public void SetHandleColor(Color color)
{
handleImage.color = color;
}
/// &lt;summary&gt;
/// 设置Slider组件的滑块图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的滑块图片。&lt;/param&gt;
public void SetHandleImage(Sprite sprite)
{
handleImage.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置Slider组件的填充颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的填充颜色。&lt;/param&gt;
public void SetFillColor(Color color)
{
fillImage.color = color;
}
/// &lt;summary&gt;
/// 设置Slider组件的填充图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的填充图片。&lt;/param&gt;
public void SetFillImage(Sprite sprite)
{
fillImage.sprite = sprite;
}
}</code></pre>
<h2>⑧：设置下拉框(Dropdown-TextMeshPro)的控件样式</h2>
<pre><code class="language-csharp">using UnityEngine;
using TMPro;
/// &lt;summary&gt;
/// IDropdownAppearance接口定义了设置Dropdown-TextMeshPro组件的常用外观样式的方法。
/// &lt;/summary&gt;
public interface IDropdownAppearance
{
/// &lt;summary&gt;
/// 设置Dropdown组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
void SetBackgroundColor(Color color);
/// &lt;summary&gt;
/// 设置Dropdown组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
void SetBackgroundImage(Sprite sprite);
/// &lt;summary&gt;
/// 设置Dropdown组件的文本颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的文本颜色。&lt;/param&gt;
void SetTextColor(Color color);
/// &lt;summary&gt;
/// 设置Dropdown组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
void SetFontSize(int size);
/// &lt;summary&gt;
/// 设置Dropdown组件的箭头图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的箭头图片。&lt;/param&gt;
void SetArrowImage(Sprite sprite);
}</code></pre>
<pre><code class="language-csharp">using UnityEngine;
using TMPro;
using UnityEngine.UI;
/// &lt;summary&gt;
/// DropdownAppearance类实现了IDropdownAppearance接口，用于设置Dropdown-TextMeshPro组件的常用外观样式。
/// &lt;/summary&gt;
public class DropdownAppearance : MonoBehaviour, IDropdownAppearance
{
private TMP_Dropdown dropdownComponent;
private Image backgroundImage;
private TextMeshProUGUI labelText;
private Image arrowImage;
private void Awake()
{
dropdownComponent = GetComponent&lt;TMP_Dropdown&gt;();
backgroundImage = GetComponent&lt;Image&gt;();
labelText = dropdownComponent.captionText;
arrowImage = dropdownComponent.transform.Find(&quot;Arrow&quot;).GetComponent&lt;Image&gt;();
}
/// &lt;summary&gt;
/// 设置Dropdown组件的背景色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的背景色。&lt;/param&gt;
public void SetBackgroundColor(Color color)
{
backgroundImage.color = color;
}
/// &lt;summary&gt;
/// 设置Dropdown组件的背景图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的背景图片。&lt;/param&gt;
public void SetBackgroundImage(Sprite sprite)
{
backgroundImage.sprite = sprite;
}
/// &lt;summary&gt;
/// 设置Dropdown组件的文本颜色。
/// &lt;/summary&gt;
/// &lt;param name=&quot;color&quot;&gt;要设置的文本颜色。&lt;/param&gt;
public void SetTextColor(Color color)
{
labelText.color = color;
}
/// &lt;summary&gt;
/// 设置Dropdown组件的字体大小。
/// &lt;/summary&gt;
/// &lt;param name=&quot;size&quot;&gt;要设置的字体大小。&lt;/param&gt;
public void SetFontSize(int size)
{
labelText.fontSize = size;
}
/// &lt;summary&gt;
/// 设置Dropdown组件的箭头图片。
/// &lt;/summary&gt;
/// &lt;param name=&quot;sprite&quot;&gt;要设置的箭头图片。&lt;/param&gt;
public void SetArrowImage(Sprite sprite)
{
arrowImage.sprite = sprite;
}
}</code></pre>
<h2>⑨：重置接口和实现</h2>
<pre><code class="language-csharp">/*
每个控件都需要添加ResetAppearance，并在每个实现类中存储原始的外观样式，然后在ResetAppearance方法中恢复这些外观样式。
以下是一个示例，展示了如何在ButtonAppearance类中实现这个功能
*/
using UnityEngine;
using UnityEngine.UI;
using TMPro;
public interface IResettable
{
void ResetAppearance();
}
public class ButtonAppearance : MonoBehaviour, IButtonAppearance, IResettable
{
private Button buttonComponent;
private TextMeshProUGUI buttonText;
private Color originalTextColor;
private Color originalBackgroundColor;
private Sprite originalBackgroundImage;
private int originalFontSize;
private void Awake()
{
buttonComponent = GetComponent&lt;Button&gt;();
buttonText = buttonComponent.GetComponentInChildren&lt;TextMeshProUGUI&gt;();
originalTextColor = buttonText.color;
originalBackgroundColor = buttonComponent.colors.normalColor;
originalBackgroundImage = buttonComponent.image.sprite;
originalFontSize = buttonText.fontSize;
}
// ... (省略了IButtonAppearance接口的其他方法)
public void ResetAppearance()
{
SetTextColor(originalTextColor);
SetBackgroundColor(originalBackgroundColor);
SetBackgroundImage(originalBackgroundImage);
SetFontSize(originalFontSize);
}
}</code></pre>