如何将窗口小部件中的可滑动标签用作片段?

时间:2014-04-20 07:11:09

标签: android android-fragments tabs

这个问题的组成部分是在线的,但没有任何东西可以实现它们。我想创建一个主活动,其中包含一个包含可滑动标签的部分(将是一个片段)。下图说明了该部分的外观。我是Android新手,我不知道如何将我的主要活动,片段活动和所有标签视图编码到活动中(我读过每个标签部分应该有自己的活动)。

我也不知道在我的活动主布局或片段布局中使用哪些小部件或布局。喜欢我应该使用哪个小部件,TabHost / TabWidget?虽然我听说TabHost是折旧的。如何让标签滑动?在下图中,灰色区域是每个标签中图像的位置,因此用户应该能够向左或向右滑动,并且标签会自行更改。

请参阅,大多数教程都会告诉您如何在ActionBar中使用可滑动的标签,但我不希望它在屏幕上显示得那么高。就在图像显示的片段小部件内部。谢谢你的任何建议。因为我还是初学者,所以越一步越好。非常感谢你。

main activity with tab widget

2 个答案:

答案 0 :(得分:1)

以下是滚动标签的一个小例子。希望这对你有所帮助。

<强> MainActivity.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends ActionBarActivity {
    // used ActionBarActivity from v7 support library, 
    // for backward compatibility 

    private ViewPager viewPager;
    private MyPagerAdapter adapter;

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

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        adapter = new MyPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(adapter);
    }

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

        @Override
        public Fragment getItem(int arg0) {
            // each page corresponds to a new fragment
            // I'll return the same fragment for now
            return new MyFragment();
        }

        @Override
        public int getCount() {
            // return no of pages
            return 5;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // return the page title
            return "Tab " + position;
        }
    }

    public static class MyFragment extends Fragment {
        public MyFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container,
                    false);
            return rootView;
        }
    }
}

<强> activity_main.xml中

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MergeRootFrame" >

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

        <android.support.v4.view.PagerTitleStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="#33b5e5"
            android:paddingBottom="4dp"
            android:paddingTop="4dp"
            android:textColor="#fff" />
    </android.support.v4.view.ViewPager>

</FrameLayout>

fragment_main.xml 只是hello world片段。您需要自定义PagerTitleStrip以使其看起来像标签。为此,我真的很喜欢这个library

答案 1 :(得分:0)

以下是固定标签的一个小例子:

<强> MainActivity.java

public class MainActivity extends ActionBarActivity implements ActionBar.TabListener {

    private ViewPager viewPager;
    private MyPagerAdapter adapter;

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

        viewPager = (ViewPager) findViewById(R.id.viewPager);
        adapter = new MyPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(adapter);

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

        for(int i=0; i<5; i++)
            actionBar.addTab(actionBar.newTab().setTabListener(this).setText("Tab " + i));

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageSelected(int arg0) {
                actionBar.selectTab(actionBar.getTabAt(arg0));
            }
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    private static class MyPagerAdapter extends FragmentPagerAdapter {
        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public Fragment getItem(int arg0) {
            // each page corresponds to a new fragment
            // I'll return the same fragment for now
            return new MyFragment();
        }
        @Override
        public int getCount() {
            // return no of pages
            return 5;
        }
    }

    public static class MyFragment extends Fragment {
        public MyFragment() {
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            View rootView = inflater.inflate(R.layout.fragment_main, container,
                    false);
            return rootView;
        }
    }

    @Override
    public void onTabReselected(Tab arg0, FragmentTransaction arg1) {
    }

    @Override
    public void onTabSelected(Tab arg0, FragmentTransaction arg1) {
        viewPager.setCurrentItem(arg0.getPosition());
    }

    @Override
    public void onTabUnselected(Tab arg0, FragmentTransaction arg1) {
    }
}

<强> activity_main.xml中

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:ignore="MergeRootFrame" >

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

</FrameLayout>