回想起去年做过的一个维语音乐平台,要求实现双语版本,汉语和维语。在维语版本中要求文字、控件,右对齐显示,我们都知道大部分语言都是左对齐,android默认的对齐方式也是左对齐方式。而像维语和阿拉伯语这种语言都是右对齐的,即是从右往左读的。
拿到这个问题我首先想到到的是自定义ViewGroup。233333~
其实从Android 4.2 (api 17)开始 对rtl 提供了相应的支持。
项目中的实际效果
Paste_Image.png
那我们来试一下吧~
相关配置
minsdk 大于17
manifest 文件中添加 android:supportsRtl="true"
使用
android:layout_marginEnd=""
android:layout_marginStart=""
android:paddingEnd=""
android:paddingStart=""
简单使用
ViewGroup 设置 android:layoutDirection="rtl 或 trl";
TextView 内文字对齐方式 android:textAlignmen = "textEnd 或 textStart" 或 android:textDirection="rtl 或 ltr"
特别的控件
imageview 右对齐
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleX="-1" //反向
android:src="@drawable/ic_record_voice_over_blue_900_36dp"
/>
viewpager 与 tablayout 右对齐,要求至右往左滑动
public class RTLViewPager extends ViewPager {
// direction
private boolean mIsRtlOriented;
public RTLViewPager(Context context){
this(context, null);
}
public RTLViewPager(Context context, AttributeSet attrs){
super(context, attrs);
}
//rtl 时设置当前页码 自定义属性修改更好
public void setRtlOriented(boolean isRtlOriented){
mIsRtlOriented = isRtlOriented;
if(mIsRtlOriented && getAdapter() != null){
setCurrentItem(getAdapter().getCount() - 1 , false);
}else{
setCurrentItem(0 , false);
}
}
}
设置 adapter 数据反置
public class CommonPagerAdapter extends FragmentStatePagerAdapter
{
private final List mFragments = new ArrayList<>();
private final List mFragmentsTitles = new ArrayList<>();
private boolean mIsRtrl;
public CommonPagerAdapter(FragmentManager fm , boolean mIsRtrl)
{
super(fm);
this.mIsRtrl = mIsRtrl;
}
public void addFragment(Fragment fragment , String title)
{
mFragments.add(fragment);
mFragmentsTitles.add(title);
}
public void clearFragment()
{
mFragments.clear();
mFragmentsTitles.clear();
}
@Override
public Fragment getItem(int position)
{
if (mIsRtrl && mFragments.size() > 0)
{
return mFragments.get(mFragments.size() - position - 1);
}
else
{
return mFragments.get(position);
}
}
@Override
public int getCount()
{
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position)
{
if (mIsRtrl && mFragmentsTitles.size() > 0)
{
return mFragmentsTitles.get(mFragmentsTitles.size() - position - 1);
}
else
{
return mFragmentsTitles.get(position);
}
}
}
完整布局代码
汉语布局 activity_main.xml
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal">
android:id="@+id/act_tab"
android:layout_width="wrap_content"
android:layout_height="48dp"
app:layout_scrollFlags="scroll"
app:tabSelectedTextColor="#666666"
app:tabTextColor="@android:color/darker_gray"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/colorPrimary">
android:id="@+id/act_viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
android:id="@+id/change_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/change_lang"/>
维语布局 activity_main.xml
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layoutDirection="rtl"
android:layout_height="match_parent"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal">
android:id="@+id/act_tab"
android:layout_width="wrap_content"
android:layout_height="48dp"
android:layoutDirection="ltr"
app:layout_scrollFlags="scroll"
app:tabSelectedTextColor="#666666"
app:tabTextColor="@android:color/darker_gray"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/colorPrimary">
android:id="@+id/act_viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
android:id="@+id/change_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/change_lang"/>
文件夹结构(rtl布局我放在 layout_en_rUS 下)
Paste_Image.png
好吧, 到这里我们基本实现了双语版本 , 以及版本的切换。
但是 ,我们layout 多了一份 , String.xml多了一份(这个无法避免),一方面需要同时维护两套布局,布局文件很多的情况下很不方便,另一方面也增大了app的大小。
布局优化
使用databinding 简化布局
App字符串常量类 StringVaule.java
package com.yankang.rtldemo.Strings;
import android.databinding.BaseObservable;
import android.databinding.Bindable;
import com.yankang.rtldemo.BR;
/**
* Created by yankang on 2017/1/8.
* app 字符串常量类
*/
public class StringVaule extends BaseObservable
{
private boolean langType = false;
@Bindable
public boolean isLangType() {
return langType;
}
public void setLangType(boolean langType)
{
this.langType = langType;
notifyPropertyChanged(BR.langType);
}
// 文字
public final String btn = "改变";
public final String _btn = "change";
}
activity_main.xml
name="string"
type="StringVaule"/>
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="@{string.langType ? View.LAYOUT_DIRECTION_RTL : View.LAYOUT_DIRECTION_LTR}"
android:orientation="vertical">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal">
android:id="@+id/act_tab"
android:layout_width="wrap_content"
android:layout_height="48dp"
app:layout_scrollFlags="scroll"
android:layoutDirection="ltr"
app:tabSelectedTextColor="#666666"
app:tabTextColor="@android:color/darker_gray"
app:tabIndicatorHeight="2dp"
app:tabMode="scrollable"
app:tabIndicatorColor="@color/colorPrimary">
android:id="@+id/act_viewpager"
android:layout_width="match_parent"
android:layout_weight="1"
android:layout_height="0dp">
android:id="@+id/change_lang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{string.langType ? string._btn : string.btn}"/>
RecycleView item list_item.xml
xmlns:app="http://schemas.android.com/apk/res-auto">
name="string"
type="StringVaule"/>
name="stu"
type="Student"/>
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_margin="15dp"
android:scaleType="centerCrop"
android:scaleX="@{string.langType ? -1f : 1f}"
app:image="@{stu.imageUrl}"/>
android:layout_width="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:orientation="vertical"
android:layout_height="wrap_content">
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@{stu.name}"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="@{stu.gender}"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="10dp"
android:scaleX="@{string.langType ? -1f : 1f}"
android:src="@drawable/ic_keyboard_arrow_right_black_36dp"/>
MainActivity.java
package com.yankang.rtldemo1;
import android.content.Intent;
import android.databinding.DataBindingUtil;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import com.yankang.rtldemo1.Adapters.CommonPagerAdapter;
import com.yankang.rtldemo1.Widgets.RTLViewPager;
import com.yankang.rtldemo1.data.PreferManager;
import com.yankang.rtldemo1.databinding.ActivityMainBinding;
import butterknife.Bind;
import butterknife.ButterKnife;
import butterknife.OnClick;
import static com.yankang.rtldemo1.App.stringVaule;
public class MainActivity extends AppCompatActivity
{
@Bind(R.id.act_tab)
TabLayout actTab;
@Bind(R.id.act_viewpager)
RTLViewPager actViewpager;
private CommonPagerAdapter adapter;
private boolean isRtl = false;
private ActivityMainBinding binding;
private PreferManager preferManager;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this , R.layout.activity_main);
ButterKnife.bind(this);
initView();
}
private void initView()
{
preferManager = PreferManager.getInstance(this);
binding.setString(App.stringVaule);
isRtl = preferManager.getLangType() == Constant.LANG_EN;
stringVaule.setLangType(isRtl);
adapter = new CommonPagerAdapter(getSupportFragmentManager() , isRtl);
for (int i = 0 ; i < 3 ; i ++)
{
Fragment fragment = new TestFragment();
adapter.addFragment(fragment , "标签" + i);
}
actTab.setupWithViewPager(actViewpager);
actViewpager.setAdapter(adapter);
actViewpager.setRtlOriented(isRtl);
}
@OnClick(R.id.change_lang)
public void change()
{
if (preferManager.getLangType() == Constant.LANG_EN)
{
preferManager.setLangType(Constant.LANG_ZH);
}else
{
preferManager.setLangType(Constant.LANG_EN);
}
startActivity(new Intent(this , MainActivity.class));
finish();
}
}
RecycleView adapter 配置Databinding CommonAdapter.java
package com.yankang.rtldemo.Adapters;
import android.databinding.DataBindingUtil;
import android.databinding.ViewDataBinding;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import com.yankang.rtldemo.App;
import com.yankang.rtldemo.BR;
import com.yankang.rtldemo.Model.Student;
import com.yankang.rtldemo.R;
import java.util.ArrayList;
/**
* Created by yankang on 2017/1/8.
* MVVM 在recycleview 中的应用
*/
public class CommonAdapter extends RecyclerView.Adapter
{
private final ArrayList mData = new ArrayList<>();
public CommonAdapter(ArrayList data)
{
mData.addAll(data);
}
@Override
public ViewHoler onCreateViewHolder(ViewGroup parent, int viewType)
{
ViewDataBinding binding = DataBindingUtil.inflate(LayoutInflater
.from(parent.getContext()), R.layout.list_item, parent, false);
ViewHoler holder = new ViewHoler(binding.getRoot());
holder.setViewDataBinding(binding);
return holder;
}
//设置数据
@Override
public void onBindViewHolder(ViewHoler holder, int position)
{
//修改绑定数据
holder.getViewDataBinding().setVariable(BR.stu, mData.get(position));
holder.getViewDataBinding().setVariable(BR.string , App.stringVaule);
//刷新
holder.getViewDataBinding().executePendingBindings();
}
@Override
public int getItemCount() {
return mData.size();
}
class ViewHoler extends RecyclerView.ViewHolder{
private ViewDataBinding viewDataBinding;
public ViewHoler(View itemView) {
super(itemView);
}
public ViewDataBinding getViewDataBinding() {
return viewDataBinding;
}
public void setViewDataBinding(ViewDataBinding viewDataBinding) {
this.viewDataBinding = viewDataBinding;
}
}
}
实际效果
Paste_Image.png
使用DataBinding后,我们不用再维护多套布局 , 极大的简化了代码。总体来说还是很简单的。
end~