Как создать нижеуказанный пользовательский индикатор в формах xamarin - PullRequest
Новая
       38

Как создать нижеуказанный пользовательский индикатор в формах xamarin

1 голос
/ 27 февраля 2020

Как разработать этот тип дизайна (я прикрепил изображение ниже)

enter image description here

1 Ответ

3 голосов
/ 28 февраля 2020

Возможно, вы имеете в виду столбцы, а не общий макет, но это не на 100% ясно из вашего вопроса. Хотя есть и другие возможности для отображения полос, я достиг весьма удовлетворительного результата, вложив AbsoluteLayout в кадр. В следующем примере один из столбцов справа 

<Frame HasShadow="False" HeightRequest="20" CornerRadius="5" HorizontalOptions="Fill" Padding="0" BackgroundColor="Silver" IsClippedToBounds="True">
    <AbsoluteLayout>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="0,0,.33,1" 
                     BackgroundColor="CadetBlue">
            <Label Text="33%" 
                   FontSize="Small" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
    </AbsoluteLayout>
</Frame>

Сам столбец обернут Frame, чтобы получить закругленные углы (см. Свойство CornerRadius). Установка IsClippedToBounds в true необходима, потому что иначе дети не будут обрезаны, а закругленные углы не будут отображаться.

Внутри Frame есть AbsoluteLayout, в которые помещены фактические бары. И внутри я добавил темно-зелёный sh бар как ContentView (чтобы иметь возможность добавить метку с процентом).

Пожалуйста, смотрите следующий код для одной из зеленых / красных полос. По сути это то же самое, но я добавил две суббары в абсолютном макете 

<Frame HasShadow="False" HeightRequest="20" CornerRadius="5" HorizontalOptions="Fill" Padding="0" BackgroundColor="Silver" IsClippedToBounds="True">
    <AbsoluteLayout>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="0,0,.25,1"
                     BackgroundColor="LimeGreen">
            <Label Text="25%" 
                   FontSize="Small"  
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="1,0,.75,1"
                     BackgroundColor="Red">
            <Label Text="75%" 
                   FontSize="Small" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
    </AbsoluteLayout>
</Frame>

Обобщение

Было бы полезно извлечь повторно используемый компонент. Я покажу для более простой бар. Перевести решение на более сложное должно быть легко.

Код позади

В коде позади должны быть добавлены следующие свойства 

public Rectangle FirstBarBounds => new Rectangle(0, 0, BarValue, 1);

public double BarValue
{
    get => this._barValue;
    set
    {
        if (this._barValue == value)
        {
            return;
        }

        this._barValue = value;
        this.OnPropertyChanged();
    }
}

(Добавление BindableProperty для BarValue также может быть полезным, но по общему признанию, я был слишком ленив.)

Свойства могут быть связаны с XAML 

<Frame ...>
    <AbsoluteLayout>
        <ContentView AbsoluteLayout.LayoutFlags="All" 
                     AbsoluteLayout.LayoutBounds="{Binding FirstBarBounds}"
                     BackgroundColor="CadetBlue" >
            <Label Text="{Binding FirstBarValue, StringFormat='{}{0:P0}'}" 
                   FontSize="Small" 
                   HorizontalOptions="Center" 
                   VerticalOptions="Center" 
                   TextColor="White" 
                   FontAttributes="Bold" />
        </ContentView>
    </AbsoluteLayout>
</Frame>

LayoutBounds из ContentView привязан к BarBounds (который, в свою очередь, использует BarValue для определения границ столбца), а текст связан с BarValue. Поскольку BarValue является двойным, значение форматируется в процентах: StringFormat='{}{0:P0}'.

Снимок экрана

Пожалуйста, см. Следующий снимок экрана о том, как столбцы отображаются на Android устройство (эмулятор).

Image displaying the bars

...