java - 在标签内容不重叠的情况下滑动

Question

我创建了一个带有标签的滑动 View ，但是当在标签之间滑动时，标签中的内容会随着手指滑动，并且之前标签的内容会与被滑入的标签重叠。

例如:

这是我的 MainActivity.java:

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends ActionBarActivity {
    Fragment tab1Fragment = new Tab1();
    Fragment tab2Fragment = new Tab2();
    Fragment tab3Fragment = new Tab3();

    ViewPager mViewPager;
    private TabsPagerAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setOnPageChangeListener(
                new ViewPager.SimpleOnPageChangeListener() {
                    @Override
                    public void onPageSelected(int position) {
                        getSupportActionBar().setSelectedNavigationItem(position);
                    }
                });

        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        //Instantiate the tabs.
        tab1 = actionBar.newTab();
        tab2 = actionBar.newTab();
        tab3 = actionBar.newTab();

        //Set the tabs' text.
        tab1.setText("Tab 1");
        tab2.setText("Tab 2");
        tab3.setText("Tab 3");

        //Setting up the tab listeners
        tab1.setTabListener(new MyTabListener(tab1Fragment));
        tab2.setTabListener(new MyTabListener(tab2Fragment));
        tab3.setTabListener(new MyTabListener(tab3Fragment));

        //Adding tabs to the ActionBar
        actionBar.addTab(tab1);
        actionBar.addTab(tab2);
        actionBar.addTab(tab3);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

MyTabListener.java:

import android.support.v4.app.Fragment;

public class MyTabListener implements android.support.v7.app.ActionBar.TabListener {
    private Fragment fragment;

    public MyTabListener(Fragment fragment) {
        this.fragment = fragment;
    }

    @Override
    public void onTabSelected(android.support.v7.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
        ft.add(android.R.id.content, fragment);
        ft.attach(fragment);
    }

    @Override
    public void onTabUnselected(android.support.v7.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {
        ft.remove(fragment);
    }

    @Override
    public void onTabReselected(android.support.v7.app.ActionBar.Tab tab, android.support.v4.app.FragmentTransaction ft) {

    }
}

Tab1.java(Tab2.java和Tab3.java类似):

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Tab1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.tab1_layout, container, false);

        return rootView;
    }
}

TabsPagerAdapter.java:

import android.support.v4.app.FragmentManager;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;

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

    @Override
    public Fragment getItem(int index) {
        switch (index) {
            case 0:
                return new Tab1();
            case 1:
                return new Tab2();
            case 2:
                return new Tab3();
        }
        return null;
    }

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

activity_main.xml:

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
                                   android:id="@+id/pager"
                                   android:layout_width="match_parent"
                                   android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

tab1_layout.xml(tab2_layout.xml和tab3_layout.xml类似):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is tab 1."/>
</LinearLayout>

我尝试在选项卡 XML 布局文件中添加背景颜色，但是根本没有滑动动画。我的安卓版本是4.4.2，不知道是不是这个问题。我该如何解决这个问题，以便标签滑动时不会与前一个标签内容重叠？

Answer 1

参见 Developer site - adding tabs with swipe view 上的解释

不要调用 add() 或附加方法，而是这样做:

public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {
    mViewPager.setCurrentItem(tab.getPosition());
}