ますます多くの Apple モデルが登場するにつれて、Android 開発者を悩ませていた画面適応の問題が Apple 開発者を悩ませ始めています。画面適応の問題を最も簡単な方法で解決するにはどうすればよいでしょうか?
この記事は主に、ui デザイナーから与えられたデザイン案を元に、どんな画面でも崩れない ui を書くことを目的としています。すべてのコードは純粋に手書きです。個人的には、手書きの UI がデザイン ドラフトと一致しているため、手書きの UI が好きです。UI がデザイン ドラフトを変更するたびに、彼女のようにいくつかの値を変更するだけで、私の UI がデザイン ドラフトと一貫していることを確認できます。 。
UIデザイン案を提出する際には、通常、基準となる画面サイズが決まっており、例えば当社の場合は750*1334ですが、機種ごとにサイズが異なります。480*640 モデルを入手したときに思いつく方法は、750*1334 モデルで元々幅 100 だったコントロールを 100/750 に変換することでした。次に、480 を掛けます。これにより、コントロールが同じ位置に残り、同じサイズが維持され、変形しないことが保証されます。960*1800 モデルの場合、幅を 960*100/750 に調整するだけで済みます。
実際、新しい画面の値は次の式で決定できます。
ow: デザイン ドラフトの合計幅 oh:
デザイン ドラフトの合計高さ
nw: 特定の携帯電話の幅nh: 特定の携帯電話の高さw: 特定の
携帯電話の幅
デザイン ドラフト
上のコントロール h: デザイン ドラフトの上 適応したホーム コントロールの高さ h
: 新しい電話機で調整された高さ 適応し
た w: 新しい電話機で調整された幅
adaptedw = w/ow*nw;
adaptedh = h/oh*nh;新しい画面が表示されるたびに、常に同じ位置にあるという要件を達成するには、上記の式の最後の値を置き換えるだけで済みます。
新しい object-c ファイルを作成します。存在。次のコードは h ファイルに実装されています。
#import <Foundation/Foundation.h>
@interface UIUtil : NSObject
@property (nonatomic) float width;
@property (nonatomic) float height;
-(instancetype) initWithWidthAndHeight:(int)width height:(int)height;
-(int)adaptedWidth:(float)width;
-(int)adaptedHeight:(float)height;
@endこのファイルは 2 つのパラメーターと 3 つのメソッドを定義します。長さ、幅、長さと幅を初期化する方法、調整された長さと幅を取得する方法。
次は私たちです。特定の実装を m ファイルに記述します。
#import "UIUtil.h"
@implementation UIUtil
-(int)adaptedWidth:(float)width{
return (int)_width*width/500;
}
-(int)adaptedHeight:(float)height{
return (int)_height*height/1000;
}
-(instancetype) initWithWidthAndHeight:(int)width height:(int)height
{
if(self = [super init]){
_width=width;
_height=height;
}
return self;
}
@endここの500と1000はデザイン案の任意の値に置き換えて使用することができますので、
使用する際には現在の画面の幅と高さに合わせてこのツールを初期化し、使用箇所にこれを記述する必要があります。
UIUtil * ui = [UIutil alloc] initWithWidthAndHeight:[UIScreen mainScreen].bounds.size.width height:[UIScreen mainScreen].bounds.size.height];このようにして、ツールは正常に初期化され、ツールを呼び出すたびに、設計草案に従って書き込みが行われます。
UIImageView *login = [[UIImageView alloc]initWithFrame:CGRectMake(0, 64+[UI adaptedHeight:104], self.view.frame.size.width, [UI adaptedHeight:250]) ];
[UIadaptedHeight: 104]; つまり、デザインドラフト上の 104 のサイズは、現在の画面比率を上回るサイズに調整されます。最後に注意すべきことは、adaptedWidth を幅方向に使用する必要があり、adaptedheightツールを使用する必要があることです。高さ方向に使用する必要があります。枠を書くのに使用でき、フォントサイズの変形にも適用できます。フォントのサイズを設定するときに値を渡す必要があることはわかっています。渡すだけで済みます。デザイン案の上の値を指定すると、希望する値も得られます フォント サイズ
int textsize = [ui adaptedwidth: 24]
このフォント サイズは、幅の比率に応じて再設定されたフォント サイズです。
もちろん、ツールは死んでいますが、人は生きています。私たちがいくつかのコントロールに遭遇したとき、同じ幅と高さを維持する必要がありますが、初期化時に幅と高さを設定することを忘れないでください。高さを同じに設定します。つまり、幅と高さの両方に適応した xxx を入力します。