在ViewPager中使用具有相同布局的不同片段

时间:2014-01-09 10:21:05

标签: android android-layout android-fragments android-viewpager

在我的应用程序中,我有一个ViewPager,其中每个页面都显示一个列表。当我开始时,我直接将ListFragement添加到ViewPager。为了改变每个页面的布局(例如在每个列表下面添加一个ViewText),我后来创建了一个包含这个listFragement的自己的布局文件,我将其添加到ViewPager

这是这种布局(每页看起来)的方式

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab_history"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<FrameLayout
    android:id="@+id/tab_fragment"
    android:layout_width="match_parent"
    android:layout_height="0sp"
    android:layout_weight="1" >
</FrameLayout>

<LinearLayout
    android:id="@+id/message_canvas"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/lightgreen"
    android:orientation="horizontal"
    android:paddingBottom="6sp"
    android:paddingTop="6sp"
    android:visibility="visible" >

    <TextView
        android:id="@+id/message"
        android:layout_width="0sp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:contentDescription="@string/emptyString"
        android:gravity="center_horizontal"
        android:text="@string/emptyString"
        android:textAlignment="center"
        android:textColor="@color/green"
        android:textStyle="bold" />
</LinearLayout>

这是ViewPager的布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/main_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="horizontal" >
</LinearLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/white" >       
</android.support.v4.view.ViewPager>

这是我如何将每个ListFragement添加到其父Fragement(具有相同的布局)(在这种情况下是联系人列表)

public class FragmentTabContacts extends FragmentTab{

@Override
protected Fragment getFragment() {
    return new ListFragmentContactlist();
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    this.fragment = getFragment();
    View view = inflater.inflate(R.layout.tab_fragement, null);
    messageCanvas = (ViewGroup)view.findViewById(R.id.message_canvas);      
    FragmentManager fragmentManager = getFragmentManager();
    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
    fragmentTransaction.add(R.id.tab_fragment, this.fragment);
    fragmentTransaction.commit();       
    return view;
}
}

这是ViewPager的适配器

public class FragmentAdapter extends FragmentPagerAdapter {
    /**
     * list of {@link NinjaListFragment} used for all tabs
     */
    private List<ITabContainer> fragments;

    public FragmentAdapter(FragmentManager fm, List<ITabContainer> fragments) {
        super(fm);
        this.fragments = fragments;
    }

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

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

    @Override
    public int getItemPosition(Object object) {
        return fragments.indexOf(object);
    }

}

这是我在ViewPager中编写的方法,用于设置新的Fragements以及相应的选项卡

/**
 * adds the {@link ViewGroup} representing the tab to the {@value #mapTabs} for generating the tabs
 * @param inflater the {@link LayoutInflater} used to inflate the tab
 * @param tabs the {@link ViewGroup} containing the inflated tabs.
 * @param tabContainer the fragment with the interface {@link ITabContainer} used as content for the tab added to {@link #fragments}
 * @param imageId the id of the image to be shown on the tab
 * @param onClickListener the {@link View.OnClickListener} to receive the tab clicks
 */
private void addTab(LayoutInflater inflater, ViewGroup tabs, ITabContainer tabContainer, int imageId, View.OnClickListener onClickListener) {
    inflater.inflate(R.layout.main_tab, tabs);
    int index = tabs.getChildCount() - 1;
    ImageView ivTab = (ImageView) tabs.getChildAt(index);
    ivTab.setTag(String.valueOf(index));
    ivTab.setImageResource(imageId);
    ivTab.setOnClickListener(onClickListener);
    mapTabs.put(index, ivTab);
    fragments.add(tabContainer);
}

这就是我在ViewPager的onCreate方法中调用此方法的方法

       addTab(inflater, vgTabs, new FragmentTabContacts(), R.drawable.ic_tab_contacts, onClickListener);
    addTab(inflater, vgTabs, new FragmentTabHistory(), R.drawable.ic_tab_history, onClickListener);
    addTab(inflater, vgTabs, new ListFragmentGroups(), R.drawable.ic_tab_groups, onClickListener);
    addTab(inflater, vgTabs, new FragmentTabFavorits(), R.drawable.ic_tab_favorits, onClickListener);

因为自然所有具有相同布局的片段都包含相同的ID(android:id =“@ + id / tab_fragment”),我在其中添加了ListFragement的Framelayout,看起来ViewPager在识别每个他们。我只完成了前两页(第四个选项卡包含另一个ViewPager,这有效),但结果是第一页显示第二页的内容,而第二页是空的。

我希望每个页面都有一个单独的TextView,因为我想在每个页面中存储不同的文本,我不想复制相同的布局(只是使用不同的ID)4次(如果没有其他解决方案它)。我不想把TextView放在主PageView布局中,并在每个标签切换后刷新内容。

如何为每个页面的每个ListFragement重用相同的布局?

1 个答案:

答案 0 :(得分:1)

同时我找到了一个简单的解决方法。我为所有4个页面创建了4种不同的布局(4种不同的ID),并在每个页面中包含相同的冗余部分

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tab_page"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<fragment
    android:id="@+id/list_history"
    android:name="at.happyninja.addressbook.fragments.ListFragmentHistory"
    android:layout_width="match_parent"
    android:layout_height="0sp"
    android:layout_weight="1" />

<include layout="@layout/tab_message" />
<include layout="@layout/tab_keyboardview" />