| XBottomSheet.Touch | XBottomSheet.Droid | .Touch.Sample | .Droid.Sample |
|---|---|---|---|
https://butonium.com/custom-bottomsheet-xamarin/
On client projects install the nuget XBottomSheet (
- Create a new ViewController of type BottomSheetViewController within the ViewController that you want to add it to:
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.
- Add the newly created ViewController as a child to the current one:
AddChildViewController(bottomSheetViewController);
View.AddSubview(bottomSheetViewController.View);
bottomSheetViewController.DidMoveToParentViewController(this);
- Define the Frame for the View of the BottomSheet control:
bottomSheetViewController.View.Frame = new CGRect(0, View.Frame.GetMaxY(), View.Frame.Width, View.Frame.Height);
- Add your custom view within as until now it would be only a blue view that can be dragged around:
customView = CustomView.Create();
customView.Frame = View.Frame;
bottomSheetViewController.SetCustomView(customView);
After following the steps from previous way, continue with following:
- As you can add any control within that custom view, in order to make it available for binding, you have to create a public geter/setter for it, similar to this:
public UILabel CustomValue
{
get
{
return lbCustomValue;
}
set
{
lbCustomValue = value;
}
}
- Within the MainViewController (or parent view controller) create a binding set between the controls that you have in the custom view and the view model associated with the parent view controller:
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.
- You can use this view by adding it within your layout:
<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>
- In order to use a custom view you will need to inflate a desired Android layout file (ex. CustomView.axml) and assign it to the ContentView property of 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);
- If you add this controll with GMSMapView or other similar feature that has its own gesture management it is possible to prevent XBottomSheet to trigger the PanGesture method, even if it registers it. For GMSMapView, the fix is to have "mapView.Settings.ConsumesGesturesInView = false;", where mapView is your GMSMapView object.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent