5

アート部門の担当者が画質の低下に気付いた最近のプロジェクトで、私はこの問題に遭遇しました。何が原因かはわかりませんが、ネストされていた ScrollView を削除することで問題を解決できました。

私のコードは次のようになりました：

<View>
    <ScrollView>
         <View>
              <ImageView image="someImage.png" />
         </View>
    </ScrollView>
</View>

ネストされた ScrollView とその直接の親ビューの両方から ImageView を削除すると、正常にレンダリングされます。これを示す簡単なプロジェクトでレポを作成しました。くすんだ効果は、文字の色、テキストの白いドロップ シャドウ、およびグレーの境界線のぼかしで最も顕著です。

https://bitbucket.org/bwellons/blurry-images

これは報告が必要なバグですか、それとも私が知らない「このようにしないでください」と書かれているドキュメントはありますか?

よろしくブラント

4

1 に答える 1

2

これは、ビューの境界 (幅、高さ) とアンカー (上、左、右、下) を一貫した方法で定義していないことが原因だと思います。たとえば、これを変更した場合:

".parent": {
    width: '100%',
    height : 59,
}

これに：

".parent": {
    top : 0,
    width: '100%',
    height : 59
}

ぼやけが消えます。これは、厳密にバインドされたボックス (.parent ビューは子イメージ ビューとまったく同じ高さ) で相対ビュー レイアウト手法と絶対ビュー レイアウト手法 (パーセンテージと絶対ピクセル) を混在させているために発生していると思います。親ビュー内に画像を描画するときに少しごちゃごちゃします。

これは、変換エラーの余地を増やすことで、ぼかしを著しく除去するためにも機能するためです。

".parent": {
    width: '100%',
    height : 62 // Added 3 pixels of padding
}

幅と高さの両方に同じレイアウト メカニズムを使用するか、変換のためにより多くのスペースを与えることにより、同様に機能する他の方法を次に示します。

".parent": {
    width: '100%',
    height : '50%' // Dont do this, but shows the point
}

".parent": {
    bottom : 0,
    width: Ti.UI.FILL, // I use Ti.UI.FILL instead of 100% generally
    height : 59
}

そのため、一般的には、ネストされたビュー チェーンのディメンションでパーセンテージと絶対値を混在させないでください。ただし、親に多少のゆとりを持たせたり、アンカー (上、左、右、下) を定義して描画変換を機能させたりする場合を除きます。

免責事項: このステートメントは、約 15 ～ 20 の異なる限定的なレイアウト テストと私自身の経験 (まだネイティブ コードは試していません) に基づいているため、決して科学的ではありません。

于 2013-08-20T12:45:43.407 に答える