在android中的选项卡内的屏幕之间滑动

时间:2014-05-21 10:22:39

标签: android android-layout android-tabs

我的应用中有4个标签,每个标签包含3个屏幕,我想使用滑动手势在屏幕之间切换:

enter image description here

public class AndroidTabLayoutActivity extends TabActivity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    TabHost tabHost = getTabHost();

    // Tab for Photos
    TabSpec photospec = tabHost.newTabSpec("Photos");
    photospec.setIndicator("Photos", getResources().getDrawable(R.drawable.icon_photos_tab));
    Intent photosIntent = new Intent(this, PhotosActivity.class);
    photospec.setContent(photosIntent);

    // Tab for Songs
    TabSpec songspec = tabHost.newTabSpec("Songs");
    // setting Title and Icon for the Tab
    songspec.setIndicator("Songs", getResources().getDrawable(R.drawable.icon_songs_tab));
    Intent songsIntent = new Intent(this, SongsActivity.class);
    songspec.setContent(songsIntent);

    // Tab for Videos
    TabSpec videospec = tabHost.newTabSpec("Videos");
    videospec.setIndicator("Videos", getResources().getDrawable(R.drawable.icon_videos_tab));
    Intent videosIntent = new Intent(this, VideosActivity.class);
    videospec.setContent(videosIntent);

 // Tab for Videos
    TabSpec otherspec = tabHost.newTabSpec("Others");
    otherspec.setIndicator("Others", getResources().getDrawable(R.drawable.icon_others_tab));
    Intent othersIntent = new Intent(this, OthersActivity.class);
    otherspec.setContent(othersIntent);

    // Adding all TabSpec to TabHost
    tabHost.addTab(photospec); // Adding photos tab
    tabHost.addTab(songspec); // Adding songs tab
    tabHost.addTab(videospec); // Adding videos tab
    tabHost.addTab(otherspec); // Adding videos tab
}

}

这是我上面java代码

的main.xml文件
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TabWidget
        android:id="@android:id/tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />

    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@android:id/tabs"
        android:layout_alignParentTop="true" />

</RelativeLayout>





this is my photos activity that appears in one of my tab

public class PhotosActivity extends Activity{

private GestureDetector gestureDetector;

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.photos_layout);
    gestureDetector = new GestureDetector(new SwipeGestureDetector());
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    if (gestureDetector.onTouchEvent(event)) {
        return true;
    }
    return super.onTouchEvent(event);
}

private void onLeftSwipe(){
    Toast.makeText(this, "Left Swipe", Toast.LENGTH_LONG).show();
    Log.d("Gesture", "Left Swipe");
}

private void onRightSwipe(){
    Toast.makeText(this, "Right Swipe", Toast.LENGTH_LONG).show();
    Log.d("Gesture", "Right Swipe");
}

class SwipeGestureDetector extends SimpleOnGestureListener{

    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 200;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
            float velocityY) {

        try {
            float diffAbs = Math.abs(e1.getY() - e2.getY());
            float diff = e1.getX() - e2.getX();

            if (diffAbs > SWIPE_MAX_OFF_PATH)
                return false;

            // Left swipe
            if (diff > SWIPE_MIN_DISTANCE
                    && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                PhotosActivity.this.onLeftSwipe();

                // Right swipe
            } else if (-diff > SWIPE_MIN_DISTANCE
                    && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
                PhotosActivity.this.onRightSwipe();
            }

        } catch (Exception e) {
            Log.e("YourActivity", "Error on gestures");
        }
        return false;
    }


}

}

1 个答案:

答案 0 :(得分:1)

是否有任何理由避免使用ViewPager?我不知道您为什么要尝试使用手势检测器实现自己的滑动。您可以使用viewpager,在向右/向左滑动时自定义其滑动行为以更改为下一个/上一个选项卡,并在单击选项卡时执行相同操作,更改为ViewPager的下一个/上一个页面。

编辑 - &gt;你可以在这里看到和示例:lateral navigation using tabs and ViewPager

我不知道您为什么不使用原生操作栏标签,但无论如何,如果您想继续使用设计,可以使用ViewPager。

我不知道我是否真的错过了解某些事情,但......我想你可以补充一下:

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

布局xml中的

请记住设置所需的宽度和高度,以防您仍然不想使用本机操作栏标签。

如果您使用本机标签,那么在onTabSelected中,您将切换到下一个视图,将下一个项目设置为ViewPager:

`public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) {             
// When the tab is selected, switch to the             
// corresponding page in the ViewPager.             mViewPager.setCurrentItem(tab.getPosition());         
}` 

并且在ViewPager的监听器中:

`mViewPager.setOnPageChangeListener(
            new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // When swiping between pages, select the
                    // corresponding tab.
                    getActionBar().setSelectedNavigationItem(position);
                }
            });
`

您在滑动后选择标签。

如果您想继续使用标签导航,您也可以这样做,同时考虑到这些听众。 viewpager中的一个将反映您的一个选项卡的新选择,以及选项卡的监听器,将更改ViewPager的页面。