首页 文章

如何在Xamarin Forms中创建类似聊天的页脚布局？

提问于
浏览 次
2

我正在使用Xamarin Forms为Abdroid和UWP创建一个类似聊天的应用程序 . 我想创建一个类似于this的页脚布局（含义2个按钮和水平方向的编辑器） .

我使用以下xaml在图像中创建了布局：

<Grid >
        <Grid.Margin>
            <OnPlatform x:TypeArguments="Thickness">
                <On Platform="Android">5,0,5,5</On>
                <On Platform="Windows">5,0,5,25</On>
            </OnPlatform>
        </Grid.Margin>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
            <ColumnDefinition Width="Auto"></ColumnDefinition>
        </Grid.ColumnDefinitions>

        <Editor x:Name="MessageText"  Text="" Grid.Column="0" />
        <local:RoundedButton x:Name="Button2" Clicked="click2"  BackgroundColor="#000000" Grid.Column="1" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center" />
        <local:RoundedButton x:Name="Button1" Clicked="click1"  BackgroundColor="#000000" Grid.Column="2" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center"/>
</Grid>

这种布局的问题是编辑器没有't display fully more than one line. When I continue writing text that is longer than the Editor'的宽度我得到类似this的东西 . 如您所见，第一行是cut-of，当我开始一个新行时，只显示它的底部 .

据我所知，使用LinearLayout和layout_weight属性在Android中创建这种布局非常容易 . 但我现在试图避免为整个页脚创建一个渲染器 .

编辑

这是我在Android中用想要的结果写的一个例子：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
  <EditText 
    android:layout_height="wrap_content"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:hint="Enter a message"/>
  <Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="hi"/>
  <Button
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="bi"/>
</LinearLayout>

结果如下：

Wanted result

android xamarin xamarin.android uwp xamarin.forms

2 回答

  • 0

    要在文本更改时增大编辑器，您需要触发InvalidateMeasure方法，这将强制布局调整大小 . 它是受保护的方法，因此您需要子类化Editor控件并进行以下更改：

    public class CustomEditor : Editor
{      
    public CustomEditor ()     
    {
        TextChanged += (sender, e) => 
        { 
            InvalidateMeasure(); 
        };     
    } 
}
    回复于
  • 0

    好的，我最终想到了这一点 .

    解决了我的问题是将我的CustomEditor放在ScrollView中 .

    所以，这是适合我的代码：

    <Grid VerticalOptions="Start">
    <Grid.Margin>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="Android">5,0,5,5</On>
            <On Platform="Windows">5,0,5,25</On>
        </OnPlatform>
    </Grid.Margin>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <ScrollView>
        <local:RoundedEditor x:Name="MessageText"  Text="" Grid.Column="0" />
    </ScrollView>
    <Button x:Name="Button2"  BackgroundColor="#000000" Grid.Column="1" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center" />
    <Button x:Name="Button1" BackgroundColor="#000000" Grid.Column="2" WidthRequest="50" HeightRequest="50" BorderRadius="25" VerticalOptions="Center"/>
</Grid>
    回复于

相关问题