最近項(xiàng)目適配阿拉伯，記錄一下最近的工作內(nèi)容。在此之前，我是沒有了解過(guò)這方面的知識(shí)。
首先說(shuō)說(shuō)為什么要適配阿拉伯呢，是因?yàn)槲覀冎形暮陀⑽倪@些是從左往右顯示的語(yǔ)言，但是阿拉伯的語(yǔ)言是從右往左顯示(RTL)，恰好與我們的習(xí)慣相反，剛開始的時(shí)候?qū)嵲诤軇e扭，
首先在適配的項(xiàng)目的開始，我查找了一下網(wǎng)上的資料
感謝這幾位大佬的博客：
https://blog.csdn.net/a657651096/article/details/102805114
http://www.lxweimin.com/p/042f3db234ad
http://www.lxweimin.com/p/3383ca5f6de0
我的項(xiàng)目是OC開發(fā)，布局用的masonry。
先來(lái)捋一下阿拉伯適配需要做哪些事情呢。
1阿拉伯從右往左顯示，我們所有的約束需要更換。
2所有的UIView的處理
3帶方向的圖片處理
4手勢(shì)的處理
5文字顯示方向TextAlignment（大部分是UILabel）
6UIEdgeInsets（UIButton）
7富文本AttributeString
8Unicode文字的處理
9UICollectionView的處理（水平方向的）
10UIScrollView的處理（水平方向）
我們先來(lái)看一組效果圖：
這是在中文下的效果
[圖片上傳失敗...(image-399ff5-1659059722645)]
image.png
這是阿拉伯下的效果
[圖片上傳失敗...(image-ab55c1-1659059722645)]
image.png
列了一下需要處理的問題列表，接下來(lái)就是解決問題的具體方案了：
我寫了一個(gè)公共的宏定義判斷是不是阿拉伯語(yǔ)言，這個(gè)地方可以根據(jù)不同的需求做判斷
#define isRTL() [[[[NSBundle mainBundle] preferredLocalizations] firstObject] hasPrefix:@"ar"]
1將所有的left更換成leading，right更換成trailing，這至少解決了50%的問題。是不是非常簡(jiǎn)單NONONO~~
全部UIView處理
iOS9之后，蘋果出了API適配RTL
UIView有一個(gè)semanticContentAttribute的屬性，當(dāng)我們將其設(shè)置成UISemanticContentAttributeForceRightToLeft之后，UIView將強(qiáng)制變?yōu)镽TL布局。當(dāng)然在非RTL語(yǔ)言下，我們需要設(shè)置它為UISemanticContentAttributeForceLeftToRight，來(lái)適配系統(tǒng)是阿拉伯語(yǔ)，App是其他語(yǔ)言不需要RTL布局的情況。
項(xiàng)目中有無(wú)數(shù)個(gè)UIView，是不是需要我們一個(gè)一個(gè)去設(shè)置呢，當(dāng)然不是，這時(shí)候大家想到的是不是hook一下UIView的方法，來(lái)達(dá)到效果呢，好像是不行的呢，原因可以看我前面提到的三位的博客，我在appdelegate里面統(tǒng)一設(shè)置的，當(dāng)我們?cè)O(shè)置UIView的semanticContentAttribute以后，發(fā)現(xiàn)UISearchBar還沒有改變，那我們?cè)僭O(shè)置一下UISearchBar
if (isRTL()) {
[UIView appearance].semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
[UISearchBar appearance].semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
}
處理帶方向的圖片，這個(gè)部分有兩種方式可以處理，要么讓UI切兩套圖，分別展示，或者是把圖片翻轉(zhuǎn)一下，當(dāng)然，圖片不能帶文字，這里得多說(shuō)一句，經(jīng)過(guò)這一次的教訓(xùn)，我發(fā)誓以后再也不要用帶文字的圖片了，如果只是帶方向的圖片，翻轉(zhuǎn)就行了，但是圖片帶文字那就玩不轉(zhuǎn)了，只能用幾套圖，還有國(guó)際化的時(shí)候，圖片帶文字，也不好處理，很不幸，我項(xiàng)目中很多帶文字的圖片，我只能一個(gè)一個(gè)去修改，言歸正傳，先來(lái)看一下處理帶方向圖片處理：
給UIImage寫了一個(gè)分類，添加了一個(gè)方法，在方法里面判斷是不是阿拉伯語(yǔ)，如果是翻轉(zhuǎn)了圖片，翻轉(zhuǎn)圖片的方法用的系統(tǒng)自帶的。
#import "UIImage+HALFlipped.h"
@implementation UIImage (HALFlipped)
- (UIImage *)hal_imageFlippedForRightToLeftLayoutDirection
{
if (isRTL()) {
return [UIImage imageWithCGImage:self.CGImage
scale:self.scale
orientation:UIImageOrientationUpMirrored];
}
return self;
}
@end
這樣子在帶方向的地方使用這個(gè)方法，就可以了
UIButton * backBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[backBtn setImage:[[UIImage imageNamed:@"kls_Room_Box_back"] hal_imageFlippedForRightToLeftLayoutDirection] forState:UIControlStateNormal];
手勢(shì)的處理
滑動(dòng)返回
RTL下，除了布局需要調(diào)整，手勢(shì)的方向也是需要調(diào)整的
正常的滑動(dòng)返回手勢(shì)是右滑，在RTL下，是需要變成左滑返回的。為了讓滑動(dòng)返回也適配RTL，我們需要修改navigationBar和UINavigationController.view的semanticContentAttribute。使用[UIView appearance]修改semanticContentAttribute并不能使手勢(shì)隨之改變，我們需要手動(dòng)修改。為了讓所有的UINavigationController都生效。我們hook了UINavigationController的initWithNibName:bundle:
#import "UINavigationController+HALRTL.h"
@implementation UINavigationController (HALRTL)
+ (void)load
{
if (isRTL()) {
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
Method oldMethod = class_getInstanceMethod(self, @selector(initWithNibName:bundle:));
Method newMethod = class_getInstanceMethod(self, @selector(rtl_initWithNibName:bundle:));
method_exchangeImplementations(oldMethod, newMethod);
});
}
}
- (instancetype)rtl_initWithNibName:(nullable NSString *)nibNameOrNil bundle:(nullable NSBundle *)nibBundleOrNil
{
if ([self rtl_initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
if (@available(iOS 9.0, *)) {
self.navigationBar.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;;
self.view.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
}
}
return self;
}
@end
其他手勢(shì)
跟方向有關(guān)的手勢(shì)有2個(gè)：UISwipeGestureRecognizer和UIPanGestureRecognizer
UIPanGestureRecognizer是無(wú)法直接設(shè)置有效方向的。為了設(shè)置只對(duì)某個(gè)方向有效，一般都是通過(guò)實(shí)現(xiàn)它的delegate中的gestureRecognizerShouldBegin:方法，來(lái)指定是否生效。對(duì)于這種情況，我們只能手動(dòng)修gestureRecognizerShouldBegin:中的邏輯，來(lái)適配RTL
UISwipeGestureRecognizer有一個(gè)direction的屬性，可以設(shè)置有效方向。為了適配RTL，我們可以hook它的setter方法，達(dá)到自動(dòng)適配的目的：
#import "UISwipeGestureRecognizer+HALRTL.h"
@implementation UISwipeGestureRecognizer (HALRTL)
+ (void)load
{
Method oldAttMethod = class_getInstanceMethod(self,@selector(setDirection:));
Method newAttMethod = class_getInstanceMethod(self,@selector(rtl_setDirection:));
method_exchangeImplementations(oldAttMethod, newAttMethod); //交換成功
}
- (void)rtl_setDirection:(UISwipeGestureRecognizerDirection)direction
{
if (isRTL()) {
if (direction == UISwipeGestureRecognizerDirectionRight) {
direction = UISwipeGestureRecognizerDirectionLeft;
} else if (direction == UISwipeGestureRecognizerDirectionLeft) {
direction = UISwipeGestureRecognizerDirectionRight;
}
}
[self rtl_setDirection:direction];
}
@end
UIButton的RTL適配
UIButton的imageEdgeInsets和titleEdgeInsets。正常的時(shí)候，我們?cè)O(shè)置一個(gè)titleEdgeInsets的left。但是當(dāng)RTL的情況下，因?yàn)樗械臇|西都左右鏡像了，應(yīng)該設(shè)置titleEdgeInsets的right布局才會(huì)正常。然而系統(tǒng)卻不會(huì)自動(dòng)幫我們將left和right調(diào)換。我們需要手動(dòng)去適配它。
@implementation UIButton (HALRTL)
UIEdgeInsets RTLEdgeInsetsWithInsets(UIEdgeInsets insets) {
if (insets.left != insets.right && isRTL()) {
CGFloat temp = insets.left;
insets.left = insets.right;
insets.right = temp;
}
return insets;
}
+ (void)load{
if (isRTL()) {
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
Method oldMethod = class_getInstanceMethod(self, @selector(setContentEdgeInsets:));
Method newMethod = class_getInstanceMethod(self, @selector(rtl_setContentEdgeInsets:));
method_exchangeImplementations(oldMethod, newMethod);
Method oldImageMethod = class_getInstanceMethod(self, @selector(setImageEdgeInsets:));
Method newImageMethod = class_getInstanceMethod(self, @selector(rtl_setImageEdgeInsets:));
method_exchangeImplementations(oldImageMethod,newImageMethod);
Method oldTitleMethod = class_getInstanceMethod(self, @selector(setTitleEdgeInsets:));
Method newTitleMethod = class_getInstanceMethod(self, @selector(rtl_setTitleEdgeInsets:));
method_exchangeImplementations(oldTitleMethod,newTitleMethod);
});
}
}
- (void)rtl_setContentEdgeInsets:(UIEdgeInsets)contentEdgeInsets {
[self rtl_setContentEdgeInsets:RTLEdgeInsetsWithInsets(contentEdgeInsets)];
}
- (void)rtl_setImageEdgeInsets:(UIEdgeInsets)imageEdgeInsets {
[self rtl_setImageEdgeInsets:RTLEdgeInsetsWithInsets(imageEdgeInsets)];
}
- (void)rtl_setTitleEdgeInsets:(UIEdgeInsets)titleEdgeInsets {
[self rtl_setTitleEdgeInsets:RTLEdgeInsetsWithInsets(titleEdgeInsets)];
}
@end
TextAlignment
RTL下textAlignment也是需要調(diào)整的，官方文檔中默認(rèn)textAlignment是NSTextAlignmentNatural，并且NSTextAlignmentNatural可用自動(dòng)適配RTL
然而，情況并沒有文檔描述的那么好，當(dāng)我們?cè)谙到y(tǒng)內(nèi)切換語(yǔ)言的時(shí)候，系統(tǒng)經(jīng)常會(huì)錯(cuò)誤的設(shè)置textAlignment。沒有辦法，我們只有自己去適配textAlignment.
以UILabel為例，我們hook它的setter的方法，根據(jù)當(dāng)前是否是RTL，來(lái)設(shè)置正確的textAlignment，如果UILabel從未調(diào)用setTextAlignment:，我們還需要給它一個(gè)正確的默認(rèn)值。
#import "UILabel+HALRTL.h"
@implementation UILabel (HALRTL)
+ (void)load
{
Method oldInitMethod = class_getInstanceMethod(self,@selector(initWithFrame:));
Method newInitMethod = class_getInstanceMethod(self, @selector(rtl_initWithFrame:));
method_exchangeImplementations(oldInitMethod, newInitMethod); //交換成功
Method oldTextMethod = class_getInstanceMethod(self,@selector(setTextAlignment:));
Method newTextMethod = class_getInstanceMethod(self, @selector(rtl_setTextAlignment:));
method_exchangeImplementations(oldTextMethod, newTextMethod); //交換成功
}
- (instancetype)rtl_initWithFrame:(CGRect)frame
{
if ([self rtl_initWithFrame:frame]) {
self.textAlignment = NSTextAlignmentNatural;
}
return self;
}
- (void)rtl_setTextAlignment:(NSTextAlignment)textAlignment
{
if (isRTL()) {
if (textAlignment == NSTextAlignmentNatural || textAlignment == NSTextAlignmentLeft) {
textAlignment = NSTextAlignmentRight;
} else if (textAlignment == NSTextAlignmentRight) {
textAlignment = NSTextAlignmentLeft;
}
}
[self rtl_setTextAlignment:textAlignment];
}
富文本AttributeString和Unicode字符串
以UILabel為例，對(duì)于AttributeString，UILabel的textAlignment是不生效的，因?yàn)锳ttributeString自帶attributes。為了讓attributeString也能自動(dòng)適配RTL。我們需要在RTL下，將Alignment的left和right互換。
attributeString的alignment一般使用NSMutableParagraphStyle設(shè)置，所以我們首先hook NSMutableParagraphStyle，在setAlignment的時(shí)候設(shè)上正確的alignment：
由于閱讀習(xí)慣的差異（阿拉伯語(yǔ)從右往左閱讀，其他語(yǔ)言從左往右閱讀），所以字符的排序是不一樣的，普通語(yǔ)言左邊是第一個(gè)字符，阿拉伯語(yǔ)右邊是第一個(gè)字符。
如果是單純某種文字，不管是阿拉伯語(yǔ)還是英文，系統(tǒng)都是已經(jīng)幫助我們做好適配了的。然而混排的情況下，系統(tǒng)的適配是有問題的。對(duì)于一個(gè)string，系統(tǒng)會(huì)用第一個(gè)字符來(lái)決定當(dāng)前是LTR還是RTL。
那么坑來(lái)了，假設(shè)有一個(gè)這樣的字符串@"小明??? ?? ???????"（翻譯過(guò)來(lái)為：小明關(guān)注了你），在阿拉伯語(yǔ)的情況下，由于閱讀順序是從右往左，我們希望他顯示為@"??? ?? ???????小明"。然而按照系統(tǒng)的適配方案，是永遠(yuǎn)無(wú)法達(dá)到我們期望的。
如果"小明"放前面，第一個(gè)字符是中文，系統(tǒng)識(shí)別為L(zhǎng)TR，從左往右排序，顯示為@"小明??? ?? ???????"。
如果"小明"放后面，第一個(gè)字符是阿拉伯語(yǔ)，系統(tǒng)識(shí)別為RTL，從右往左排序，依然顯示為@"小明??? ?? ???????"。
為了適配這種情況，可以在字符串前面加一些不會(huì)顯示的字符，強(qiáng)制將字符串變?yōu)長(zhǎng)TR或者RTL。
在字符串前面添加"\u202B"表示RTL，加"\u202A"LTR。為了統(tǒng)一適配剛剛的情況，我們hook了UILabel的setText:方法。當(dāng)然這種方法沒法適配所有的情況，項(xiàng)目中具體的場(chǎng)景還得具體處理。
#import "UILabel+HALAttrRTL.h"
BOOL isRTLString(NSString *string) {
if ([string hasPrefix:@"\u202B"] || [string hasPrefix:@"\u202A"]) {
return YES;
}
return NO;
}
NSString * RTLString(NSString *string) {
if (string.length == 0 || isRTLString(string)) {
return string;
}
if (isRTL()) {
string = [@"\u202B" stringByAppendingString:string];
} else {
string = [@"\u202A" stringByAppendingString:string];
}
return string;
}
NSAttributedString *RTLAttributeString(NSAttributedString *attributeString ){
if (attributeString.length == 0) {
return attributeString;
}
NSRange range;
NSDictionary *originAttributes = [attributeString attributesAtIndex:0 effectiveRange:&range];
NSParagraphStyle *style = [originAttributes objectForKey:NSParagraphStyleAttributeName];
if (style && isRTLString(attributeString.string)) {
return attributeString;
}
NSMutableDictionary *attributes = originAttributes ? [originAttributes mutableCopy] : [NSMutableDictionary new];
if (!style) {
NSMutableParagraphStyle *mutableParagraphStyle = [[NSMutableParagraphStyle alloc] init];
UILabel *test = [UILabel new];
test.textAlignment = NSTextAlignmentLeft;
mutableParagraphStyle.alignment = test.textAlignment;
style = mutableParagraphStyle;
[attributes setValue:mutableParagraphStyle forKey:NSParagraphStyleAttributeName];
}
NSString *string = RTLString(attributeString.string);
return [[NSAttributedString alloc] initWithString:string attributes:attributes];
}
@implementation UILabel (HALAttrRTL)
+(void)load{
Method oldAttMethod = class_getInstanceMethod(self,@selector(setAttributedText:));
Method newAttMethod = class_getInstanceMethod(self, @selector(rtl_setAttributedText:));
method_exchangeImplementations(oldAttMethod, newAttMethod); //交換成功
Method oldTextMethod = class_getInstanceMethod(self,@selector(setText:));
Method newTextMethod = class_getInstanceMethod(self,@selector(rtl_setText:));
method_exchangeImplementations(oldTextMethod, newTextMethod); //交換成功
}
- (void)rtl_setAttributedText:(NSAttributedString *)attributedText
{
if (isRTL()) {
attributedText = RTLAttributeString(attributedText);
}
[self rtl_setAttributedText:attributedText];
}
- (void)rtl_setText:(NSString *)text
{
[self rtl_setText:RTLString(text)];
}
@end
以上是常見的適配了，接下來(lái)說(shuō)兩個(gè)特殊的
UICollectionView在RTL下的適配
繼承UICollectionViewFlowLayout 重寫兩個(gè)方法
-(UIUserInterfaceLayoutDirection)effectiveUserInterfaceLayoutDirection {
if (isRTL()) {
return UIUserInterfaceLayoutDirectionRightToLeft;
}
return UIUserInterfaceLayoutDirectionLeftToRight;
}
- (BOOL)flipsHorizontallyInOppositeLayoutDirection{
return YES;
}
最后UIScrollView在RTL適配
普通的UIScrollView可以通過(guò)把UIScrollView的transform和scrollView的subviews翻轉(zhuǎn)一下
if (isRTL()) {
self.scrollView.transform = CGAffineTransformMakeRotation(M_PI);
NSArray *subViews = self.scrollView.subviews;
for (UIView *subView in subViews) {
if ([subView isKindOfClass:[HALUserInfoRelationshipView class]]) {
subView.transform = CGAffineTransformMakeRotation(M_PI);
}
}
}
我項(xiàng)目中太多的地方用到了UIScrollView,因?yàn)槲覀兊腢I設(shè)計(jì)，有非常多的分頁(yè)控制器，所以我們項(xiàng)目中使用JXCategory搭配UIScrollView。
在使用的過(guò)程中遇到一個(gè)小問題，例如ScrollView加載三個(gè)不同的view，每個(gè)view的寬度都是屏幕的寬，這在RTL下有個(gè)問題，就是有view不顯示，我從左往右適配的時(shí)候，右邊的不顯示，從右往左適配，左邊的不顯示，后來(lái)我使用了一種比較愚蠢的方法。最左的view從左適配，最右的View從右適配
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 85 * SCREEN_SCALEIPhone6, kScreenWidth, 233 * SCREEN_SCALEIPhone6)];
self.scrollView.pagingEnabled = YES;
self.scrollView.bounces = NO;
self.scrollView.showsVerticalScrollIndicator = NO;
self.scrollView.showsHorizontalScrollIndicator = NO;
self.scrollView.backgroundColor = UIColor.clearColor;
[self.bottomView addSubview:self.scrollView];
[self.scrollView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.mas_equalTo(self.bottomView.mas_leading);
make.top.mas_equalTo(self.userListView.mas_bottom);
make.width.mas_equalTo(ScreenWidth);
make.height.mas_equalTo(233*SCREEN_SCALEIPhone6);
}];
self.scrollContentView = [UIView new];
[self.scrollView addSubview:self.scrollContentView];
[self.titleArray addObject:klstring(@"label_410")];
HALRoomTempGiftView *giftView = [[HALRoomTempGiftView alloc] initWithRoomId:self.room_id GiftRoomType:self.gift_roomType IsBackPack:YES TagId:@"0"];
[self.scrollContentView addSubview:giftView];
[giftView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(0);
if (isRTL()) {
make.trailing.mas_equalTo(0);
}else{
make.leading.mas_equalTo(0);
}
make.height.mas_equalTo(245*SCREEN_SCALEIPhone6);
make.width.mas_equalTo(ScreenWidth);
}];
HALRoomTempGiftView *giftView = [[HALRoomTempGiftView alloc] initWithRoomId:self.room_id GiftRoomType:self.gift_roomType IsBackPack:NO TagId:tempModel.tag_id];
[self.scrollContentView addSubview:giftView];
[giftView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.mas_equalTo(self.scrollView.mas_top);
if (isRTL()) {
make.leading.mas_equalTo(ScreenWidth *i);
}else{
make.leading.mas_equalTo(ScreenWidth*(i+1));
}
make.height.mas_equalTo(245*SCREEN_SCALEIPhone6);
make.width.mas_equalTo(ScreenWidth);
}];
@weakify(self);
giftView.spec_listBlock = ^(NSArray * _Nonnull array) {
@strongify(self);
self.selectedGiftCountNumber = [array firstObject];
self.numberView.spec_list = array;
[self.selectedNumberBtn configWithNumber:self.selectedGiftCountNumber];
};
giftView.didSelectGiftMoldeBlock = ^(EBCounterItemModel * _Nonnull model) {
@strongify(self);
self.selectedGiftModel = model;
};
[self.giftViews addObject:giftView];
if (i == 0) {
[giftView configurationGiftListData];
}
}
self.giftTitleView.titles = self.titleArray;
[self.scrollContentView mas_makeConstraints:^(MASConstraintMaker *make) {
make.trailing.top.mas_equalTo(0);
make.width.mas_equalTo(ScreenWidth * self.titleArray.count);
make.height.mas_equalTo(233 * SCREEN_SCALEIPhone6);
}];
self.scrollView.contentSize = CGSizeMake(kScreenWidth*self.titleArray.count, 0);
self.giftTitleView.contentScrollView = self.scrollView;
