viewpager中的多窗格片段

时间:2013-04-18 15:18:47

标签: android android-viewpager fragment pager

我目前正在开发一款有望成为“电子书”播放器的应用。阅读了一些与片段相关的教程后,我决定采用'Fragment / Viewpager'方法。

稍微详细一点,我决定按照Linden Darlinghttps关于嵌套片段的精彩教程进行操作://plus.google.com/100467024733771542884/posts/24HcFW5hEiV。

我为每个单独的书页创建了一个'webview'片段,它有自己的布局。因此,如果我的书包含6页,那么我将有BookPage1Fragment,BookPage2Fragment,BookPage3Fragment,BookPage4Fragment,BookPage5Fragment,BookPage6Fragment等。我设法在viewpager中使这个工作,所以所有刷卡片段等工作正常。问题是,屏幕上一次只能看到一个片段。我想在大型设备上运行应用程序时有两个片段(多窗格),在小型设备或纵向视图上运行时,横向和单窗格(一次一个片段)。我想显示一个两个窗格布局,其中一个片段左边,一个片段righT。

见下面的代码:

public class ParentFragment extends Fragment {

public static final String TAG = ParentFragment.class.getSimpleName();

public static ParentFragment newInstance() {
return new ParentFragment();
}

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setRetainInstance(true);
}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle            savedInstanceState) {
return inflater.inflate(R.layout.fragment_parent, container, false);
}

@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);

ViewPager mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
mViewPager.setAdapter(new MyAdapter(getChildFragmentManager()));
}

public static class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public int getCount() {
    return 6;
}

/*

@Override
public Fragment getItem(int position) {
    Bundle args = new Bundle();
    args.putInt(TextViewFragment.POSITION_KEY, position);
    return TextViewFragment.newInstance(args);
}


*/

@Override
public Fragment getItem(int position) {
    switch (position) {
    case 0:
        return new BookPage1Fragment();
    case 1:
        return new BookPage2Fragment();
    case 2:
        return new BookPage3Fragment();
    case 3:
        return new BookPage4Fragment();
    case 4:
        return new BookPage5Fragment();
    case 5:
        return new BookPage6Fragment();


    default:
        return getItem(0);
    }
}


@Override
public CharSequence getPageTitle(int position) {
    return "Fragment # " + position;
}

}

}

基本上两个片段出现在横向模式下,一个片段在纵向模式下出现,就像示例在developer.blogspot http://android-developers.blogspot.in/2011/02/android-30-fragments-api.html中描述的那样,但嵌入在viewpager中。

这是我的main.layout。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout> xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     />

</RelativeLayout>

这是我的webview片段

public class WebViewFragment extends Fragment {

 @SuppressLint("SetJavaScriptEnabled")
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View mainView = (View) inflater.inflate(R.layout.fragment_web, container, false);
        WebView myWebView = (WebView) mainView.findViewById(R.id.webview);
        myWebView.loadUrl("file:///android_asset/Ebook-001.html");


        myWebView.setWebViewClient(new MyWebViewClient());
        myWebView.getSettings().setBuiltInZoomControls(true); 
        myWebView.getSettings().setJavaScriptEnabled(true);
        myWebView.getSettings().setSupportZoom(true);
        myWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);   
        myWebView.getSettings().setAllowFileAccess(true); 
        myWebView.getSettings().setDomStorageEnabled(true);
        myWebView.getSettings().setUseWideViewPort(true);
        myWebView.getSettings().setLoadWithOverviewMode(true);
            return mainView;
        }

    }

这是我的webview片段布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

</LinearLayout>

总而言之,我想:

1:在横向模式下在viewpager中显示两个片段,在纵向模式下显示单个片段。

2:无论设备大小如何,都使用一个活动,并在运行时决定是否在布局中组合片段(以创建多窗格设计)或交换片段(以创建单窗格设计)

希望这一切都有意义!提前感谢您提出任何建议......

1 个答案:

答案 0 :(得分:1)

您必须为横向模式创建一个布局文件。您必须在res文件夹中使用layout-land name创建一个文件。在该文件夹中创建一个具有相同名称的布局,放置在布局文件中.Android自动访问它当屏幕更改为横向模式时。