2017-02-28 4 views
3

XamarinフォームのFrameクラスは非常に限定されており、フレームの背後に影をつけることはできません。私はこのコードを使用してiOS用のカスタムレンダラを作った:XamarinはAndroidのフレームに影をつけます

public class RatingInfoFrameRenderer : FrameRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e) 
    { 
     base.OnElementChanged(e); 

     Layer.BorderColor = UIColor.White.CGColor; 
     Layer.CornerRadius = 10; 
     Layer.MasksToBounds = false; 
     Layer.ShadowOffset = new CGSize(-2, 2); 
     Layer.ShadowRadius = 5; 
     Layer.ShadowOpacity = 0.4f; 
    } 
} 

Androidのネイティブの私の知識は一種の制限があるため、Android上で同様のものが、私の問題を引き起こして作ります。誰かが私に何を見てもらえますか、おそらく良いコードの例でしょうか?私はこれに似た何かを見つけませんでした。

答えて

4

Androidプラットフォームでは非常に簡単ですが、まずはAndroidリソースのDrawableフォルダーにあなたの影を作成する必要があります。

<?xml version="1.0" encoding="utf-8" ?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item> 
    <shape android:shape="rectangle"> 
     <solid android:color="#CABBBBBB" /> 
     <corners android:radius="2dp" /> 
    </shape> 
    </item> 

    <item 
     android:left="0dp" 
     android:right="0dp" 
     android:top="0dp" 
     android:bottom="2dp"> 
    <shape android:shape="rectangle"> 
     <solid android:color="@android:color/white" /> 
     <corners android:radius="2dp" /> 
    </shape> 
    </item> 
</layer-list> 

名この「shadow.xml」などのファイルとあなたのRatingInfoFrameRendererで、その後、AndroidのプロジェクトのDrawableフォルダの下に置く:

public class RatingInfoFrameRenderer : FrameRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e) 
    { 
     base.OnElementChanged(e); 
     if (e.NewElement != null) 
     { 
      ViewGroup.SetBackgroundResource(Resource.Drawable.shadow); 
     } 
    } 
} 

は、影のスタイルを変更するには、たとえば、 shadow.xmlファイルを変更することができます。詳細については、googleの公式ドキュメントLayerListを参照してください。

+0

ありがとうございました。 –

1

Xamarinフォームでボックスビューのシャドーエフェクトを取得できましたが、これはフレームに対しても同様に使用できます。私は

 public static readonly BindableProperty HasShadowProperty = 
      BindableProperty.Create("HasShadow", typeof(bool), typeof(ExtendedBoxView), false); 

     public bool HasShadow 
     { 
      get { return (bool)GetValue(HasShadowProperty); } 
      set { SetValue(HasShadowProperty, value); } 
     } 

はここアンドロイド

 public class ExtendedBoxViewRenderer : BoxRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) 
    { 
     base.OnElementChanged(e); 
     var element = e.NewElement as ExtendedBoxView; 


     if (element == null) return; 

     if (element.HasShadow) 
     { 
      ViewGroup.Elevation = 8.0f; 
      ViewGroup.TranslationZ = 10.0f; 


     } 

    } 

} 

のレンダラーのコードだと、これはそれが

をどのように見えるかですHasShadowと呼ばれる新しいプロパティを追加 Android Documentation

から手掛かりを得ました

更新

この方法でAndroidの古いバージョンのアプリがクラッシュすることがわかりました。 Lollipopの前にAndroid版でShadowsを表示する方法は見つけられませんでしたがこれによりアプリのクラッシュを防ぐことができます

public class ExtendedBoxViewRenderer : BoxRenderer 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<BoxView> e) 
     { 
      base.OnElementChanged(e); 
      var element = e.NewElement as ExtendedBoxView; 


      if (element == null) return; 

      if (element.HasShadow) 
      { 
//For some reason ViewCompat has issues when running in debug hence the workaround. 
#if DEBUG 
       double dAndroidVersion; 
       if (double.TryParse(Build.VERSION.Release, out dAndroidVersion)) 
       { 
        if (dAndroidVersion < 21) 
         return; 
       } 
#else 
       ViewCompat.SetElevation(ViewGroup, 8.0f); 
       ViewCompat.SetTranslationZ(ViewGroup, 10.0f); 
#endif 
      } 

     } 

    } 
関連する問題