Android右对齐实践及优化

回想起去年做过的一个维语音乐平台，要求实现双语版本，汉语和维语。在维语版本中要求文字、控件，右对齐显示，我们都知道大部分语言都是左对齐，android默认的对齐方式也是左对齐方式。而像维语和阿拉伯语这种语言都是右对齐的，即是从右往左读的。
拿到这个问题我首先想到到的是自定义ViewGroup。233333~
其实从Android 4.2 (api 17)开始对rtl 提供了相应的支持。

项目中的实际效果

Paste_Image.png

那我们来试一下吧~

简单使用

ViewGroup 设置 android:layoutDirection="rtl 或 trl";
TextView 内文字对齐方式 android:textAlignmen = "textEnd 或 textStart" 或 android:textDirection="rtl 或 ltr"

特别的控件

imageview 右对齐

    <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<Fragment> mFragments = new ArrayList<>();
    private final List<String> 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

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:orientation="horizontal">

    <android.support.design.widget.TabLayout
        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.support.design.widget.TabLayout>

</LinearLayout>

<com.yankang.rtldemo.RTLViewPager
    android:id="@+id/act_viewpager"
    android:layout_width="match_parent"
    android:layout_weight="1"
    android:layout_height="0dp">
</com.yankang.rtldemo.RTLViewPager>


<Button
    android:id="@+id/change_lang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/change_lang"/>

</LinearLayout>

维语布局 activity_main.xml

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:orientation="horizontal">

        <android.support.design.widget.TabLayout
            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.support.design.widget.TabLayout>

    </LinearLayout>

    <com.yankang.rtldemo.RTLViewPager
        android:id="@+id/act_viewpager"
        android:layout_width="match_parent"
        android:layout_weight="1"
        android:layout_height="0dp">
    </com.yankang.rtldemo.RTLViewPager>


    <Button
        android:id="@+id/change_lang"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/change_lang"/>

</LinearLayout>

文件夹结构（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

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <import type="com.yankang.rtldemo.Strings.StringVaule"/>
        <import type="android.view.View"/>

        <variable
            name="string"
            type="StringVaule"/>
    </data>

    <LinearLayout
        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">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ffffff"
            android:orientation="horizontal">

            <android.support.design.widget.TabLayout
                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.support.design.widget.TabLayout>

        </LinearLayout>

        <com.yankang.rtldemo.Widgets.RTLViewPager
            android:id="@+id/act_viewpager"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp">
        </com.yankang.rtldemo.Widgets.RTLViewPager>

        <Button
            android:id="@+id/change_lang"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{string.langType ? string._btn : string.btn}"/>

    </LinearLayout>
</layout>

RecycleView item list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <import type="com.yankang.rtldemo.Strings.StringVaule"/>
        <import type="com.yankang.rtldemo.Model.Student"/>
        <variable
            name="string"
            type="StringVaule"/>
        <variable
            name="stu"
            type="Student"/>
    </data>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            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}"/>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@{stu.name}"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="@{stu.gender}"/>

        </LinearLayout>

        <ImageView
            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"/>

    </LinearLayout>

</layout>

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<CommonAdapter.ViewHoler>
{

    private final ArrayList<Student> mData = new ArrayList<>();

    public CommonAdapter(ArrayList<Student> 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~

最后编辑于：2017.12.05 13:51:20

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,080评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,422评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,630评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,554评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,662评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,856评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,014评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,752评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,212评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,541评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,687评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,347评论 4赞 331
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,973评论 3赞 315
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,777评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,006评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,406评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,576评论 2赞 349

Android右对齐实践及优化

Android右对齐实践及优化

相关配置

简单使用

特别的控件

完整布局代码

布局优化

实际效果

Paste_Image.png

推荐阅读更多精彩内容