LoginSignup
0
0

More than 5 years have passed since last update.

ScrollViewに長い文字?を入れるとレンダリングがはみ出る問題の対応

Last updated at Posted at 2015-11-04

追記(2016/01/26)

以下のプロパティを設定することにより、オーバーレイ表示が解消する場合があります。
IsClippedToBounds = true
設定する箇所はScrollViewですが、ScrollViewだけに設定しても解消しない場合は、
ヘッダー部分やフッター部分にも同様に設定してみてください。

問題

タイトルのとおり、ScrollViewの中のLabelに大量の文字をバインドした結果、
ScrollViewの描画領域をはみ出して下のボタンの背景にまで文字がレンダリングされました。

言葉で説明しづらいですが、まんま下記参考URLのような現象です。

Xamarin.Forms ScrollView with long text
http://stackoverflow.com/questions/30369438/xamarin-forms-scrollview-with-long-text

ScrollView in Xaml
https://forums.xamarin.com/discussion/20945/scrollview-in-xaml

解決策

上記URLではStackLayoutをうまく調整するか、
Gridを使うということでしたが、どちらもうまくいきませんでした。
※Androidのみで確認です。

最終的にScrollViewの使用をやめて1行のみのListViewにすることで解決しました。
※ListViewにはもともとスクロール処理が実装されています。

なおこのまま利用すると、スクロール領域をタップしたときに背景色が青く(Androidだと)なってしまいます。
Xamarin.Formsでは選択時の色を変更するにはカスタムレンダーを利用するしかありません。

下記のようなコードを書けば選択時の色の変更がされなくなります。

コード

カスタムViewCell

using Xamarin.Forms;

namespace MyProject.Controls
{
    public class CustomViewCell : ViewCell
    {
        public static readonly BindableProperty BackgroundColorProperty = BindableProperty.Create<CustomViewCell, Color>(i => i.BackgroundColor, default(Color), BindingMode.OneWay);

        /// <summary>
        /// 背景色を取得または設定します。
        /// 選択時の色も同時に指定されます。
        /// </summary>
        public Color BackgroundColor
        {
            get
            {
                return (Color)this.GetValue(BackgroundColorProperty);
            }
            set
            {
                this.SetValue(BackgroundColorProperty, value);
            }
        }
    }
}

カスタムViewCellのレンダラー

using Android.Content;
using Android.Views;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using View = Android.Views.View;
using MyProject.Controls;

[assembly: ExportRenderer(typeof(CustomViewCell)
    , typeof(MyProject.Droid.Renderer.CustomViewCellRenderer))]
namespace MyProject.Droid.Renderer
{
    public class CustomViewCellRenderer : ViewCellRenderer
    {
        protected override View GetCellCore(Cell item, View convertView, ViewGroup parent, Context context)
        {
            View cellcore = base.GetCellCore(item, convertView, parent, context);

            var cell = item as CustomViewCell;
            cellcore.SetBackgroundColor(cell.BackgroundColor.ToAndroid());

            return cellcore;
        }
    }
}

CustomViewCellクラスはViewCellクラスにBackgroundColorプロパティを追加しただけのものです。
カスタムレンダラーでは、BackgroundColorプロパティに設定されている色を上書きしているだけです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0