Xamarin Customizable Bottomsheet - iOS & Android
XBottomSheet.Touch | XBottomSheet.Droid | .Touch.Sample | .Droid.Sample |
---|---|---|---|
https://butonium.com/custom-bottomsheet-xamarin/
On client projects install the nuget XBottomSheet () and then follow the steps based on platform:
public override void ViewDidLoad()
{
base.ViewDidLoad();
var bottomSheetViewController = new BottomSheetViewController(100, 300, 500, true, BottomSheetState.Bottom);
}
For more details on options for the constructors or their parameters, please check the implementation.
AddChildViewController(bottomSheetViewController);
View.AddSubview(bottomSheetViewController.View);
bottomSheetViewController.DidMoveToParentViewController(this);
bottomSheetViewController.View.Frame = new CGRect(0, View.Frame.GetMaxY(), View.Frame.Width, View.Frame.Height);
customView = CustomView.Create();
customView.Frame = View.Frame;
bottomSheetViewController.SetCustomView(customView);
After following the steps from previous way, continue with following:
public UILabel CustomValue
{
get
{
return lbCustomValue;
}
set
{
lbCustomValue = value;
}
}
var set = this.CreateBindingSet<MainViewController, MainViewModel>();
set.Bind(customView.CustomValue).For(t => t.Text).To(vm => vm.CustomValue);
set.Apply();
Check the Touch.MSample for actual sample on how a value is passed in between.
<XBottomSheet.Droid.Views.XBottomSheetView
android:id="@+id/BottomSheet"
app:anchorOffset="320dp"
app:peekHeight="192dp"
app:defaultState="collapsed"
android:layout_width="match_parent"
android:layout_height="match_parent">
</XBottomSheet.Droid.Views.XBottomSheetView>
var bottomSheetView = FindViewById<XBottomSheetView>(Resource.Id.BottomSheet);
var customView = LayoutInflater.Inflate(Resource.Layout.CustomView, null);
bottomSheetView.ContentView = customView;
bottomSheetView.BackgroundColor = Color.Transparent;
After following previous steps, in order to bind the ViewModel with your CustomView you'll need to replace LayoutInflater.Inflate with BindingInflate
var customView = this.BindingInflate(Resource.Layout.CustomView, null);