android 9.0 中的列表视图滚动问题 - xamarin.forms

Question

I am trying to create a chat UI in my xamarin.forms app.I followed this tutorial Xamboy chat UI .The github link is Sample .

In this tutorial to acheive the chat UI,They rotated the ListView and ViewCells main layout to 180 degrees so that the list start from the bottom.

Xaml

 <Grid RowSpacing="0" 
       ColumnSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="1" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <controls:ExtendedListView Grid.Row="0" 
             ItemTemplate="{StaticResource MessageTemplateSelector}" 
             ItemsSource="{Binding Messages}" 
             Margin="0"                
             ItemTapped="OnListTapped"
             Rotation="180" 
             FlowDirection="RightToLeft"                               
             HasUnevenRows="True" x:Name="ChatList"
             VerticalOptions="FillAndExpand" 
             SeparatorColor="Transparent"
             ItemAppearingCommand="{Binding MessageAppearingCommand}"
             ItemDisappearingCommand="{Binding MessageDisappearingCommand}">
     </controls:ExtendedListView>
    <BoxView HorizontalOptions="FillAndExpand"
             HeightRequest="1"
             BackgroundColor="#61427D"
             Grid.Row="1"/>
    <partials:ChatInputBarView Grid.Row="2"
                               Margin="0,0,0,0"
                               x:Name="chatInput"/>
</Grid>

This worked till android 8.0. But in android 9.0, the chat scrolling is stuck and scroll in the wrong direction. How can I solve this. Is there any better solution for implementing chat UI in xamarin forms? Any help is appreciated.

Edit: I removed the rotation of listview and followed this repo. Monkeychat Which worked fine.

Answer 1

This bug is reported in github xamrin.forms so go through it, it helps you https://github.com/xamarin/Xamarin.Forms/issues/7166 .

Workaround: credits mabdollahiasl

Use CollectionView instead of ListView. Use custom renderer:

[assembly: ExportRenderer(typeof(CollectionView), typeof(ExCollectionViewRenderer))]

namespace Healx.Droid.CustomRenderer
{
    public class ExCollectionViewRenderer : CollectionViewRenderer
    {
        public ExCollectionViewRenderer(Context context) : base(context)
        {
            
        }
        private int dy = 0;
        public override void OnScrolled(int dx, int dy)
        {
            this.dy = dy;

            base.OnScrolled(dx, dy);
        }
        public override bool Fling(int velocityX, int velocityY)
        {

            return base.Fling(velocityX, Math.Abs(velocityY) * Math.Sign(dy));

        }

        protected override void OnElementChanged(ElementChangedEventArgs<ItemsView> elementChangedEvent)
        {
            
            base.OnElementChanged(elementChangedEvent);
        }
    }
    
}

Answer 2

You can use the list in normal degrees and change the list orientation from c#.

Try something like this:

 var list = your message list;
 new ObservableCollection<Model of your list>(list.OrderByDescending(x => 
 x.yourObjectDateTime).ToList());

I presume you use datetime in your Model, if u don't you'll need to implement this to properly order your list.