iOSのアプリでグラデーションのかかった直線を引きたいです

Question

現在Xamarin FormsのPCL環境でiOSアプリを開発しています。

グラデーションのかかった直線の描画をしたいと思って、色々調べているのですがいまいち解りません。

描画方法をご教授いただけますと助かります。

Answer 1

直線は細長い四角形で実現したいと思います。その四角形を
CoreGraphics.CGContext.DrawLinearGradient Method を使ってグラデーションで塗ることにします。

「Creating Mobile Apps with Xamarin.Forms」の「Chapter 27. Custom renderers」を参考に、 View のカスタムレンダラーを作って、Draw をオーバーライドします。色を指定できるようにプロパティ Color1 と Color2 を作ってみました。

DrawLinearGradientView.cs

using Xamarin.Forms;

namespace DrawLinearGradientTest
{
    public class DrawLinearGradientView : View
    {
        public Color Color1 { get; set; }
        public Color Color2 { get; set; }
    }
}

DrawLinearGradientViewRenderer.cs

using CoreGraphics;
using DrawLinearGradientTest;
using DrawLinearGradientTest.iOS;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(DrawLinearGradientView), typeof(DrawLinearGradientViewRenderer))]
namespace DrawLinearGradientTest.iOS
{
    public class DrawLinearGradientViewRenderer : ViewRenderer<DrawLinearGradientView, UIView>
    {
        public CGColor Color1 { get; set; }
        public CGColor Color2 { get; set; }

        protected override void OnElementChanged(ElementChangedEventArgs<DrawLinearGradientView> e)
        {
            base.OnElementChanged(e);

            Color1 = Element.Color1.ToCGColor();
            Color2 = Element.Color2.ToCGColor();
        }

        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            
            using (var context = UIGraphics.GetCurrentContext())
            {
                context.DrawLinearGradient(
                        new CGGradient(CGColorSpace.CreateDeviceRGB(), new [] { Color1, Color2 }),
                        new CGPoint(0, 0),
                        new CGPoint(rect.Width, rect.Height),
                        CGGradientDrawingOptions.None
                    );
            }
        }
    }
}

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DrawLinearGradientTest;assembly=DrawLinearGradientTest"
             x:Class="DrawLinearGradientTest.MainPage">
    <ContentPage.Content>
        <AbsoluteLayout>
            <local:DrawLinearGradientView
                AbsoluteLayout.LayoutBounds="0.5,0.5,200,2" AbsoluteLayout.LayoutFlags="PositionProportional"
                Color1="#ff0000" Color2="#00ff00"/>
            <local:DrawLinearGradientView
                AbsoluteLayout.LayoutBounds="0.5,0.5,200,2" AbsoluteLayout.LayoutFlags="PositionProportional"
                TranslationX="50" TranslationY="-86.6" Rotation="60"
                Color1="#0000ff" Color2="#00ff00"/>
            <local:DrawLinearGradientView
                AbsoluteLayout.LayoutBounds="0.5,0.5,200,2" AbsoluteLayout.LayoutFlags="PositionProportional"
                TranslationX="-50" TranslationY="-86.6" Rotation="-60"
                Color1="#ff0000" Color2="#0000ff"/>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Comments

[monblanck]

ありがとうございます。
ソースまでありがとうございます。参考にしてやってみたいともいます。

できそうな気がしてきました。

また何かありましたらお願いいたします。

お礼が遅くなりすみません。