如何使FloatingActionButton在ListView顶部工作并正确放置

时间：2018-11-13 20:51:05

标签： android listview xamarin floating-action-button

我试图按照此页面上的示例-https://devlinduldulao.pro/how-to-create-a-floating-action-button/

使SuaveControls.FloatingActionButton在ListView上工作

我的ListView在StackLayout内，所以我决定将它们包装到AbsoluteLayout

这是View / 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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:DPM.XForms"
             x:Class="DPM.XForms.ProjectListPage" 
             Title="Drive Plus Mobile"
             >
    <AbsoluteLayout>
        <StackLayout Orientation="Vertical" Spacing="1">

            <Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />



            <ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!-- Project Row -->
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                </Button>
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <Label 
                                    Text="{Binding Name}" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text="{Binding Brand}" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                </StackLayout>
                                <Button Text="3"  WidthRequest="44"></Button>
                                <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
        <views:FloatingActionButton 
            Image="CreateProject.png" 

            WidthRequest="80" 
            HeightRequest="80" 
            HorizontalOptions="CenterAndExpand" 
            VerticalOptions="CenterAndExpand"
            Clicked="FloatingActionButton_Clicked"
            >

        </views:FloatingActionButton>
    </AbsoluteLayout>

</ContentPage>

但是通过这种方法，发生了两件事

  1. 设备处于横向模式时，ListView不会像添加AbsoluteLayout之前那样增长

Horizontal Layout Fails

  1. 不知道如何放置FloatingActionButton使其始终位于任何设备的右下角

FAB position

我还尝试过将FloatingActionButton放置在当前StackLayout内，但它不会浮动，只是像下面显示的常规“行”那样被添加到列表视图的下方或上方

enter image description here

如果不清楚，请随意使用注释。

3 个答案:

答案 0 :(得分：1)

您可以删除绝对布局，因为您会看到布局在横向模式下无法完全展开。

您可以尝试这个

<MainLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
    //YourTopBar
   // YourListView

  <StackLayout HorizontalOptions="End"
               VerticalOptions="End"
               Spacing="0"
               Margin="15">
       <YourFloatingButton />

  </StackLayout>
</MainLayout>

主布局可以是网格或堆栈布局

答案 1 :(得分：1)

您可以修改布局以使用Grid和AbsoluteLayout来包装listview和Floating按钮。因此，它类似于以下内容：（由于我没有您的列表数据源，为简单起见，我只放置了一个模拟列表）

<?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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:App51"
             x:Class="App51.MainPage">

    <StackLayout Orientation="Vertical" HorizontalOptions="CenterAndExpand">
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" ></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />
        <Grid>
            <Grid.RowDefinitions>
            <RowDefinition Height="1*" />
            <RowDefinition Height="8*" />
            </Grid.RowDefinitions>
            <Label Grid.Row="0" Text="FAB" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="24" FontAttributes="Bold" BackgroundColor="LightGray"
               TextColor="CadetBlue" />
            <AbsoluteLayout Grid.Row="1">
                <ListView AbsoluteLayout.LayoutFlags="All"
                      AbsoluteLayout.LayoutBounds="0,1,1,1"
                      VerticalOptions="FillAndExpand"
                      SeparatorColor="Black"
                      RowHeight="50"
                      BackgroundColor="Gray">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <!-- Project Row -->
                                <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                    <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                    </Button>
                                    <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                        <Label 
                                    Text="Binding Name" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                        <Label 
                                   Text="Binding Name" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                        <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                    </StackLayout>
                                    <Button Text="3"  WidthRequest="44"></Button>
                                    <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                                </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <views:FloatingActionButton  Grid.Row="1" Grid.Column="1"
                    Image="CreateProject.png" 
                    WidthRequest="80" 
                    HeightRequest="80" 
                    HorizontalOptions="End" 
                    VerticalOptions="End"
                    AbsoluteLayout.LayoutFlags="PositionProportional"
                                                AbsoluteLayout.LayoutBounds="1.0,1.0,-1,-1"
                                                Margin="10" >
                </views:FloatingActionButton>
            </AbsoluteLayout>
        </Grid>

    </StackLayout>

</ContentPage>

结果是这样的：

enter image description here

enter image description here

答案 2 :(得分：0)

基于@Swift_Talt答案和此讨论-https://forums.xamarin.com/discussion/52420/create-a-layered-page-layering-controls

我使用一（1）个单元格的网格找到了此解决方案，其中ListView（背景）和FloatingActionButton处于同一唯一的单元格上

外观如下：

enter image description here

enter image description here

这是视图/页面

<?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:views="clr-namespace:SuaveControls.Views;assembly=SuaveControls.FloatingActionButton"
             xmlns:local="clr-namespace:DPM.XForms"
             x:Class="DPM.XForms.ProjectListPage" 
             Title="Drive Plus Mobile"
             >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackLayout Grid.Row="0" Grid.Column="0" Orientation="Vertical" Spacing="1">

            <Label Text="TopBar             ..." BackgroundColor="Gray" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"/>
            <!-- Project Search/Filter toolbar-->
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Padding="7" BackgroundColor="White">
                <Label Text="Projects " TextColor="DarkGray" Font="Bold,17" HorizontalOptions="Center" VerticalOptions="Center"/>
                <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand" Padding="0">
                    <Button Image="Search.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="LeftBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Image="CenteredBS.png" BackgroundColor="White" WidthRequest="27" HeightRequest="27"></Button>
                    <Button Text="++" WidthRequest="27" HeightRequest="27" Clicked="CreateProject_Clicked"></Button>
                </StackLayout>
            </StackLayout>
            <Label Text="Pin projects" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" BackgroundColor="LightGray" HeightRequest="25" />



            <ListView x:Name="lvProjects" ItemTapped="OnProjectTapped" RowHeight="54" BackgroundColor="DarkGray">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <!-- Project Row -->
                            <StackLayout Orientation="Horizontal" HorizontalOptions="Fill" BackgroundColor="White" Margin="0,1,0,1" >
                                <Button 
                                Image="Colombia.png" 
                                BackgroundColor="White" 
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                WidthRequest="54"
                                HeightRequest="54"
                                >
                                </Button>
                                <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand">
                                    <Label 
                                    Text="{Binding Name}" 
                                    TextColor="Black"
                                    Font="Bold,17"
                                    HorizontalOptions="StartAndExpand"
                                    VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text="{Binding Brand}" 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="Start" 
                                />
                                    <Label 
                                   Text=".." 
                                   TextColor="Black"
                                   HorizontalOptions="Start"
                                   VerticalOptions="End" 
                                />
                                </StackLayout>
                                <Button Text="3"  WidthRequest="44"></Button>
                                <Button Text=">"  WidthRequest="44" BackgroundColor="White" ></Button>

                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
        <StackLayout Grid.Row="0" Grid.Column="0"  HorizontalOptions="End" VerticalOptions="End" Spacing="0" Margin="15">
            <views:FloatingActionButton 
            Image="CreateProject.png" 

            WidthRequest="80" 
            HeightRequest="80" 
            HorizontalOptions="CenterAndExpand" 
            VerticalOptions="CenterAndExpand"
            Clicked="FloatingActionButton_Clicked"
            >

            </views:FloatingActionButton>
        </StackLayout>
    </Grid>
</ContentPage>
相关问题
最新问题