web-dev-qa-db-ja.com

RTL ViewPagerの作成方法は?

アプリケーションでViewPagerを使用していて、RTLをサポートしたいのですが、デバイス言語をRTlに変更すると、機能しないようです。

タブを右側から始めたい(右側の最初のフラグメント)。

それを解決するのを手伝ってください。

[〜#〜] edit [〜#〜]:これはその写真です: タブは左側から開始します

これが私のコードです:

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
xmlns:ads="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true">

<RelativeLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <include
        layout="@layout/app_bar_main"
        Android:id="@+id/toolbar_actionbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"/>

    <Android.support.v4.widget.DrawerLayout
        Android:id="@+id/drawer_layout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        tools:openDrawer="start"
        Android:layout_below="@id/toolbar_actionbar">

        <Android.support.design.widget.CoordinatorLayout
            Android:id="@+id/fragment_viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <Android.support.v4.view.ViewPager
                Android:id="@+id/viewpager"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:layout_gravity="start"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

            <com.google.Android.gms.ads.AdView
                Android:id="@+id/adView"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                ads:adSize="BANNER"
                ads:adUnitId="@string/banner_ad_unit_id"
                Android:layout_gravity="center_horizontal|bottom"
                Android:layout_alignParentBottom="true"
                Android:layout_centerHorizontal="true">
            </com.google.Android.gms.ads.AdView>

        </Android.support.design.widget.CoordinatorLayout>

        <Android.support.design.widget.NavigationView
            Android:id="@+id/nav_view"
            Android:layout_width="250dp"
            Android:layout_height="match_parent"
            Android:layout_gravity="start"
            app:menu="@menu/activity_main_drawer"/>

    </Android.support.v4.widget.DrawerLayout>

</RelativeLayout>

</Android.support.design.widget.CoordinatorLayout>

MainActivity.Java:

package ...;

import Android.content.Intent;
import Android.net.Uri;
import Android.os.Bundle;
import Android.support.design.widget.NavigationView;
import Android.support.design.widget.TabLayout;
import Android.support.v4.app.Fragment;
import Android.support.v4.app.FragmentManager;
import Android.support.v4.app.FragmentPagerAdapter;
import Android.support.v4.view.GravityCompat;
import Android.support.v4.view.ViewPager;
import Android.support.v4.widget.DrawerLayout;
import Android.support.v7.app.ActionBarDrawerToggle;
import Android.support.v7.app.AppCompatActivity;
import Android.support.v7.widget.Toolbar;
import Android.view.Menu;
import Android.view.MenuItem;

import com.google.Android.gms.ads.AdListener;
import com.google.Android.gms.ads.AdRequest;
import com.google.Android.gms.ads.AdView;
import com.google.Android.gms.ads.InterstitialAd;

import Java.util.ArrayList;
import Java.util.List;


public class MainActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

InterstitialAd mInterstitialAd;

@Override
protected void onCreate(Bundle savedInstanceState) {
    setTheme(R.style.AppTheme_NoActionBar);
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    setTitle(getString(R.string.app_name));

    ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
    setupViewPager(viewPager);

    TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);

    mInterstitialAd = new InterstitialAd(this);
    mInterstitialAd.setAdUnitId(getString(R.string.interstitial_ad_unit_id));

    mInterstitialAd.setAdListener(new AdListener() {
        @Override
        public void onAdClosed() {
            requestNewInterstitial();
        }
    });

    requestNewInterstitial();

    AdView mAdView = (AdView) findViewById(R.id.adView);
    AdRequest adRequest = new AdRequest.Builder().build();
    mAdView.loadAd(adRequest);


    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
            this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
    drawer.setDrawerListener(toggle);
    toggle.syncState();

    NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
    navigationView.setNavigationItemSelectedListener(this);
}

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    adapter.addFragment(new Intro(), getString(R.string.Introduction));
    adapter.addFragment(new S1(), getString(R.string.stage1));
    adapter.addFragment(new S2(), getString(R.string.stage2));
    adapter.addFragment(new S3(), getString(R.string.stage3));
    adapter.addFragment(new S4(), getString(R.string.stage4));
    adapter.addFragment(new S5(), getString(R.string.stage5));
    adapter.addFragment(new S6(), getString(R.string.stage6));
    adapter.addFragment(new S7(), getString(R.string.stage7));
    viewPager.setAdapter(adapter);
}

class ViewPagerAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager manager) {
        super(manager);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }
}


@Override
public void onBackPressed() {
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START);
    } else {
        super.onBackPressed();
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    switch (id) {
        case R.id.action_contact_us: {
            Intent browserIntent1 = new Intent(Intent.ACTION_VIEW,
                    Uri.parse(getString(R.string.Contact_us_URL)));
            startActivity(browserIntent1);
            return true;
        }
        case R.id.action_share: {
            Intent sharingIntent = new Intent(Android.content.Intent.ACTION_SEND);
            sharingIntent.setType("text/plain");
            String shareBody = getString(R.string.shareText);
            sharingIntent.putExtra(Android.content.Intent.EXTRA_TEXT, shareBody);
            startActivity(Intent.createChooser(sharingIntent, getString(R.string.share_via)));
            return true;
        }
        case R.id.action_rate_us: {
            Intent browserIntent2 = new Intent(Intent.ACTION_VIEW,
                    Uri.parse(getString(R.string.Rate_us_URL)));
            startActivity(browserIntent2);
            return true;
        }
        case R.id.action_help: {
            final Intent intent1 = new Intent(MainActivity.this, HelpActivity.class);
            if (mInterstitialAd.isLoaded()) {
                mInterstitialAd.show();
                mInterstitialAd.setAdListener(new AdListener() {
                    public void onAdClosed() {
                        requestNewInterstitial();
                        startActivity(intent1);
                    }
                });
            }
            else {
                startActivity(intent1);
            }
            return true;
        }
        case R.id.action_about_us: {
            final Intent intent2 = new Intent(MainActivity.this, AboutActivity.class);
            if (mInterstitialAd.isLoaded()) {
                mInterstitialAd.show();
                mInterstitialAd.setAdListener(new AdListener() {
                    public void onAdClosed() {
                        requestNewInterstitial();
                        startActivity(intent2);
                    }
                });
            }
            else {
                startActivity(intent2);
            }
            return true;
        }
        case R.id.action_settings: {
            Intent intent3 = new Intent(MainActivity.this, SettingsActivity.class);
            startActivity(intent3);
            return true;
        }
    }
    return super.onOptionsItemSelected(item);
}

@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
    // Handle navigation view item clicks here.
    int id = item.getItemId();

    switch (id){

        case R.id.action_contact_us:
            Intent browserIntent1 = new Intent(Intent.ACTION_VIEW,
                    Uri.parse(getString(R.string.Contact_us_URL)));
            startActivity(browserIntent1);
            break;

        case R.id.action_share:
            Intent sharingIntent = new Intent(Android.content.Intent.ACTION_SEND);
            sharingIntent.setType("text/plain");
            String shareBody = getString(R.string.shareText);
            sharingIntent.putExtra(Android.content.Intent.EXTRA_TEXT, shareBody);
            startActivity(Intent.createChooser(sharingIntent, getString(R.string.share_via)));
            break;

        case R.id.action_rate_us:
            Intent browserIntent2 = new Intent(Intent.ACTION_VIEW,
                    Uri.parse(getString(R.string.Rate_us_URL)));
            startActivity(browserIntent2);
            break;

        case R.id.action_help:
            final Intent intent1 = new Intent(MainActivity.this, HelpActivity.class);
            if (mInterstitialAd.isLoaded()) {
                mInterstitialAd.show();
                mInterstitialAd.setAdListener(new AdListener() {
                    public void onAdClosed() {
                        requestNewInterstitial();
                        startActivity(intent1);
                    }
                });
            }
            else {
                startActivity(intent1);
            }
            break;

        case R.id.action_about_us:
            final Intent intent2 = new Intent(MainActivity.this, AboutActivity.class);
            if (mInterstitialAd.isLoaded()) {
                mInterstitialAd.show();
                mInterstitialAd.setAdListener(new AdListener() {
                    public void onAdClosed() {
                        requestNewInterstitial();
                        startActivity(intent2);
                    }
                });
            }
            else {
                startActivity(intent2);
            }
            break;

        case R.id.action_settings:
            Intent intent3 = new Intent(this, SettingsActivity.class);
            startActivity(intent3);
            break;
    }
    DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
    drawer.closeDrawer(GravityCompat.START);
    return true;
    }

private void requestNewInterstitial() {
    AdRequest adRequest = new AdRequest.Builder().build();
    mInterstitialAd.loadAd(adRequest);
}

}

ありがとうございました!!!

13
Itiel Maimon

たくさんの研究の末、私はそれを行う方法を理解しました。私がする必要があるのは、フラグメントの順序を逆にし(フラグメントをViewPagerに初期化するとき)、viewPager.setCurrentItem(ViewPagerSize)を実行することです。しかし、それはロケールがRTLである場合にのみ発生する必要があるため、メソッドを使用してそれがそうであるかどうかを判断しました。

これはコードです:

 public static boolean isRTL() {
    return isRTL(Locale.getDefault());
 }

 public static boolean isRTL(Locale locale) {
    final int directionality = Character.getDirectionality(locale.getDisplayName().charAt(0));
    return directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT ||
            directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT_ARABIC;
 }

private void setupViewPager(ViewPager viewPager) {
    ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
    if (isRTL()) {
        // The view has RTL layout
        adapter.addFragment(new S7(), getString(R.string.stage7));
        adapter.addFragment(new S6(), getString(R.string.stage6));
        adapter.addFragment(new S5(), getString(R.string.stage5));
        adapter.addFragment(new S4(), getString(R.string.stage4));
        adapter.addFragment(new S3(), getString(R.string.stage3));
        adapter.addFragment(new S2(), getString(R.string.stage2));
        adapter.addFragment(new S1(), getString(R.string.stage1));
        adapter.addFragment(new Intro(), getString(R.string.Introduction));
    } else {
        // The view has LTR layout
        adapter.addFragment(new Intro(), getString(R.string.Introduction));
        adapter.addFragment(new S1(), getString(R.string.stage1));
        adapter.addFragment(new S2(), getString(R.string.stage2));
        adapter.addFragment(new S3(), getString(R.string.stage3));
        adapter.addFragment(new S4(), getString(R.string.stage4));
        adapter.addFragment(new S5(), getString(R.string.stage5));
        adapter.addFragment(new S6(), getString(R.string.stage6));
        adapter.addFragment(new S7(), getString(R.string.stage7));
    }
    viewPager.setAdapter(adapter);
}

また、タブについては、方向をLTRに設定する必要がありました(RTLの場合は面倒に見えます)。

だから私はこのコードを使用しました(それはAPI 17+でのみ利用可能です):

 TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
        tabLayout.setLayoutDirection(View.LAYOUT_DIRECTION_LTR);
    }

API 17より前でこれを行う方法を見つけることができませんでした。

16
Itiel Maimon

このライブラリ RtlViewPager ジョブをきれいに実行します

交換のみが必要

<Android.support.v4.view.ViewPager

<com.duolingo.open:rtl-viewpager

xMLで

tabLayoutもサポートします

アダプタのロジックを逆にする必要がないため、このアプローチを使用するとクリーンになります

こちらもご覧ください issue googleのレポート

14
Mohammad Yahia

私の解決策はAndroid:rotationY="@integer/view_pager_rotation"attributeをxmlのviewPagerに追加することです。

values/integerscontains<integer name="view_pager_rotation">0</integer>

values-ldrtl/integerscontains<integer name="view_pager_rotation">180</integer>

コンテンツも回転されることに注意してください。

更新2019年2月11日

viewpager2 でサポートされるようになりました。

5
Levon Petrosyan

あなたが私たちに与えたスクリーンショットでは、ViewPagerがそのRTLを描画していないだけでなく、RTLはまだ何もありません。 applicationタグでsupportsRtl = "true"に設定した場合、どうすればよいですか? RTLは、電話の[設定]の[開発オプション]で設定する必要があります。私が間違っていない場合は、ViewPagerでRTLを自動的にサポートするように何も設定する必要はありません。

viewPager.setCurrentItem(number) 

ここで、numberはゼロベースのインデックス内のフラグメントの数を示します。たとえば、最初のセットを選択するには、0を設定し、2番目のセットを1に設定します。

長い研究の末、私は非常に簡単な解決策を見つけました。逆アダプターなし、クラス内の回転子など.

open class RtlViewPager : ViewPager {

    constructor(context: Context) : super(context)

    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)

    override fun onRtlPropertiesChanged(layoutDirection: Int) {
        super.onRtlPropertiesChanged(layoutDirection)
        if (layoutDirection == View.LAYOUT_DIRECTION_RTL) {
            rotationY = 180f
        }
    }

    override fun onViewAdded(child: View?) {
        if (layoutDirection == View.LAYOUT_DIRECTION_RTL) {
            child?.rotationY = 180f
        }
        super.onViewAdded(child)
    }

}
1
Valery Boretsky

このライブラリを使用

https://github.com/duolingo/rtl-viewpager

implementation 'com.Android.support:support-core-ui:<choose_your_version>'
implementation 'com.duolingo.open:rtl-viewpager:1.0.3'
1
younes

これを行う別の簡単な方法は、次のようにViewPagerとその子ビューに回転を適用することです。

ステップ1。ビューページャーの回転を変更する

if(LocaleUtil.isRTL()) viewPager.setRotationY(180);

ステップ2。次に、ViewPagerの子であるフラグメントコンテナの方向を再度変更します。

if(LocaleUtil.isRTL()) rootView.setRotationY(180);

私の場合、ビューページャーの子として別のフラグメントがあったため、レイアウトを拡張した後、rootViewの方向を変更しました。

LocaleUtil.Java

public class LocaleUtil {

    // other functions

    public static boolean isRTL() {
        return isRTL(Locale.getDefault());
    }

    private static boolean isRTL(Locale locale) {
        final int directionality = Character.getDirectionality(locale.getDisplayName().charAt(0));
        return directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT ||
            directionality == Character.DIRECTIONALITY_RIGHT_TO_LEFT_ARABIC;
    }
}
1
Nauman Zubair

サードパーティのライブラリは必要ありません。 Android最近追加された、RTLレイアウトをサポートするViewPager2と呼ばれる新しいUIコンポーネント).

https://developer.Android.com/jetpack/androidx/releases/viewpager2

以下の回答へのリンクを見つけてください。答えは、移行ガイドとRTLビューページャーをサポートするためのサンプルgithubアプリについて説明しています。

https://stackoverflow.com/a/59558911/651377

0
Alok Gupta

viewPager.setCurrentItem()を使用して、現在のページを最後のページに設定できると思います。次に、左から右にスワイプします.. :)

0
Krishna