【问题标题】:How to Create Android Tabbed style with Page Swipe View如何使用页面滑动视图创建 Android 选项卡式样式
【发布时间】:2014-03-08 06:07:16
【问题描述】:

我想要一个这样的标签示例

我搜索了,但刚刚得到这个。

viewpageindicator

我无法使用此来源。谁能告诉我另一个带有滑动选项的标签示例。
我认为 viewpageindicator 与谷歌播放标签不同。

因为当我在谷歌播放页面滚动时,标签下方的行在滚动时移动,但在 viewpageindicator 中它不是。

谢谢

【问题讨论】:

标签: android tabs android-viewpager sliding


【解决方案1】:

首先你需要用viewpagerandroid.support.v4.view.ViewPager创建一个xml布局文件

然后在你的主要活动中膨胀这个布局,确保你的活动实现

android.support.v7.app.ActionBar.TabListener 比方说,你想要 4 个标签,然后创建

4 个不同的片段。

创建一个通用的适配器来方便这些片段

您选择的标签。

这是一个简单的例子,代码为 sn-p,http://www.feelzdroid.com/2014/10/android-action-bar-tabs-swipe-views.html

注意:上面的例子适用于android support lib,它提供了backward actionbar

兼容早期版本的安卓手机

希望对您有所帮助。

谢谢

【讨论】:

    【解决方案2】:

    当我实现类似的东西时,我以一种更好的方式完成了它,在类的意义上。我在一个名为 working 的包中创建了适配器。

    下面是代码:

    public class TabsPagerAdapter extends FragmentPagerAdapter {
    
        public TabsPagerAdapter(FragmentManager fm) {
            super(fm);
        }
    
        @Override
        public Fragment getItem(int index) {
    
            switch (index) {
            case 0:
              return new WorkingFragment();
            //You can add as many fragments as you wish here by adding the cases and calling the different fragments.
            }      
            return null;
        }
    
        @Override
        public int getCount() {
            // get item count - equal to number of tabs. 4 is only the number of fragments I had used.
            return 4;
        }
    }
    

    然后您需要在我给出的示例中创建一个名为WorkingFragment 的新类。为了代码简洁,我在主包中创建了这个类。

    以下是片段的代码:

    public class NewEventFragment extends Fragment {
    
        View rootView;
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        //reference the xml file containing the view with all the code here.
        }
    }
    

    MainActivity 中,您需要将功能从一个选项卡更改为另一个选项卡。就我而言,我已将其包含在主包中。

    下面是 MainActivity 类的代码:

    public class MainActivity extends FragmentActivity implements ActionBar.TabListener {
    
        private ViewPager ViewPager;
        private TabsPagerAdapter SectionsPagerAdapter;
        private ActionBar actionBar;
    
        //Include the name for the tabs in this array. Make sure the number of elements in this string matches the number of views you will have in your app. 
        private String[] tabs = {};
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
         // Initialisation
            ViewPager = (ViewPager) findViewById(R.id.pager);
            actionBar = getActionBar();
            SectionsPagerAdapter = new TabsPagerAdapter(getSupportFragmentManager());
    
            ViewPager.setAdapter(SectionsPagerAdapter);
            actionBar.setHomeButtonEnabled(false);
            actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 
    
         // Adding Tabs
            for (String tab_name : tabs) {
                actionBar.addTab(actionBar.newTab().setText(tab_name).setTabListener(this));
            }
    
            ViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    
                @Override
                public void onPageSelected(int position) {
                    // on changing the page
                    // make respected tab selected
                    actionBar.setSelectedNavigationItem(position);
                }
    
                @Override
                public void onPageScrolled(int arg0, float arg1, int arg2) {
                }
    
                @Override
                public void onPageScrollStateChanged(int arg0) {
                }
            });
        }
    
        @Override
        public void onTabReselected(Tab tab, android.app.FragmentTransaction ft) {
    
        }
    
        @Override
        public void onTabSelected(Tab tab, android.app.FragmentTransaction ft) {
            ViewPager.setCurrentItem(tab.getPosition());
    
        }
    
        @Override
        public void onTabUnselected(Tab tab, android.app.FragmentTransaction ft) {
        }
    } 
    

    希望这有助于您为您的应用实现必要的功能:)

    【讨论】:

    • 不错的答案,但得票最高的答案更清晰。
    【解决方案3】:

    使用片段标签的简单方法

        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);
    
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    

    在创建然后

    private void setupViewPager(ViewPager viewPager) {
            ViewPagerAdapter adapter = new 
            ViewPagerAdapter(getSupportFragmentManager());        
            adapter.addFrag(new RootDetailFragment(), "TAB 1");
            adapter.addFrag(new ShiftDetailFragment(), "TAB 2");        
            viewPager.setAdapter(adapter);
    }
    
    
    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
    
        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }
    
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }
    
        @Override
        public int getCount() {
            return mFragmentList.size();
        }
    
        public void addFrag(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
    

    在布局文件中添加

     <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000"
            app:tabGravity="fill"
            app:tabMode="fixed" />
    </android.support.design.widget.AppBarLayout>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-05-13
      相关资源
      最近更新 更多