Android右對齊實(shí)踐及優(yōu)化

回想起去年做過的一個維語音樂平臺,要求實(shí)現(xiàn)雙語版本瞭恰,漢語和維語。在維語版本中要求文字狱庇、控件惊畏,右對齊顯示,我們都知道大部分語言都是左對齊密任,android默認(rèn)的對齊方式也是左對齊方式颜启。而像維語和阿拉伯語這種語言都是右對齊的,即是從右往左讀的浪讳。
??拿到這個問題我首先想到到的是自定義ViewGroup缰盏。233333~
??其實(shí)從Android 4.2 (api 17)開始 對rtl 提供了相應(yīng)的支持。

項(xiàng)目中的實(shí)際效果

Paste_Image.png

那我們來試一下吧~

相關(guān)配置

  1. minsdk 大于17
  2. manifest 文件中添加 android:supportsRtl="true"
  3. 使用
    android:layout_marginEnd=""
    android:layout_marginStart=""
    android:paddingEnd=""
    android:paddingStart=""

簡單使用

  • ViewGroup 設(shè)置 android:layoutDirection="rtl 或 trl";
  • TextView 內(nèi)文字對齊方式 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 時設(shè)置當(dāng)前頁碼  自定義屬性修改更好
        public void setRtlOriented(boolean isRtlOriented){
            mIsRtlOriented = isRtlOriented;
            if(mIsRtlOriented && getAdapter() != null){
                setCurrentItem(getAdapter().getCount() - 1 , false);
            }else{
                setCurrentItem(0 , false);
            }
        }
    }

設(shè)置 adapter 數(shù)據(jù)反置

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>

文件夾結(jié)構(gòu)(rtl布局我放在 layout_en_rUS 下)


Paste_Image.png

以上源碼地址


好吧, 到這里我們基本實(shí)現(xiàn)了雙語版本 形葬, 以及版本的切換合呐。
但是 ,我們layout 多了一份 笙以, String.xml多了一份(這個無法避免)淌实,一方面需要同時維護(hù)兩套布局,布局文件很多的情況下很不方便猖腕,另一方面也增大了app的大小拆祈。

布局優(yōu)化

使用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 , "標(biāo)簽" + 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 中的應(yīng)用
 */

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;
    }

    //設(shè)置數(shù)據(jù)
    @Override
    public void onBindViewHolder(ViewHoler holder, int position)
    {
        //修改綁定數(shù)據(jù)
        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;
        }
    }
}

以上源碼地址

實(shí)際效果

Paste_Image.png

使用DataBinding后,我們不用再維護(hù)多套布局 倘感, 極大的簡化了代碼放坏。總體來說還是很簡單的老玛。

end~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末淤年,一起剝皮案震驚了整個濱河市钧敞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌麸粮,老刑警劉巖溉苛,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異弄诲,居然都是意外死亡愚战,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進(jìn)店門齐遵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來寂玲,“玉大人,你說我怎么就攤上這事洛搀「易拢” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵留美,是天一觀的道長彰檬。 經(jīng)常有香客問我,道長谎砾,這世上最難降的妖魔是什么逢倍? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮景图,結(jié)果婚禮上较雕,老公的妹妹穿的比我還像新娘。我一直安慰自己挚币,他們只是感情好亮蒋,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著妆毕,像睡著了一般慎玖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上笛粘,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天趁怔,我揣著相機(jī)與錄音,去河邊找鬼薪前。 笑死润努,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的示括。 我是一名探鬼主播铺浇,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼垛膝!你這毒婦竟也來了随抠?” 一聲冷哼從身側(cè)響起裁着,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拱她,沒想到半個月后二驰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡秉沼,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年桶雀,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片唬复。...
    茶點(diǎn)故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡矗积,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出敞咧,到底是詐尸還是另有隱情棘捣,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布休建,位于F島的核電站乍恐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏测砂。R本人自食惡果不足惜茵烈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望砌些。 院中可真熱鬧呜投,春花似錦、人聲如沸存璃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纵东。三九已至粘招,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間篮迎,已是汗流浹背男图。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工示姿, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留甜橱,地道東北人。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓栈戳,卻偏偏與公主長得像岂傲,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子子檀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評論 2 348

推薦閱讀更多精彩內(nèi)容