滑动导航栏(PagerSlidingTabStrip)实践

本篇介绍另一个开源项目滑动导航栏(PagerSlidingTabStrip)。

  1. 开源项目PagerSlidingTabStrip地址:

    https://github.com/astuetz/PagerSlidingTabStrip

  2. 全例程代码实现:

    1). activity:


/**
 * 滑动导航栏(PagerSlidingTabStrip)test
 *
 */
public class MainActivity extends FragmentActivity {

    private Fragment1 mFragment1;
    private Fragment2 mFragment2;

    /**
     * PagerSlidingTabStrip的实例
     */
    private PagerSlidingTabStrip tabs;

    /**
     * 获取当前屏幕的密度
     */
    private DisplayMetrics dm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setOverflowShowingAlways();
        dm = getResources().getDisplayMetrics();
        ViewPager pager = (ViewPager) findViewById(R.id.pager);
        tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
        pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
        tabs.setViewPager(pager);
        setTabsValue();
    }

    /**
     * 对PagerSlidingTabStrip的各项属性进行赋值。
     */
    private void setTabsValue() {

        // 设置Tab是自动填充满屏幕的
        tabs.setShouldExpand(true);
        // 设置Tab的分割线是透明的
        //tabs.setDividerColor(Color.TRANSPARENT);
        // 设置Tab底部线的高度
        tabs.setUnderlineHeight((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 3, dm));
        // 设置Tab Indicator的高度
        tabs.setIndicatorHeight((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP, 2, dm));
        // 设置Tab标题文字的大小
        tabs.setTextSize((int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_SP, 16, dm));
        // 设置Tab Indicator的颜色
        tabs.setIndicatorColor(Color.parseColor("#45c01a"));
        // 设置选中Tab文字的颜色 (这是我自定义的一个方法)
        tabs.setSelectedTextColor(Color.parseColor("#45c01a"));
        // 取消点击Tab时的背景色
        tabs.setTabBackground(0);
    }

    public class MyPagerAdapter extends FragmentPagerAdapter {

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        private final String[] titles = { "Apps", "MyData"};

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

        @Override
        public int getCount() {
            return titles.length;
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
            case 0:
                if (mFragment1 == null) {
                    mFragment1 = new Fragment1();
                }
                return mFragment1;
            case 1:
                if (mFragment2 == null) {
                    mFragment2 = new Fragment2();
                }
                return mFragment2;

            default:
                return null;
            }
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onMenuOpened(int featureId, Menu menu) {
        if (featureId == Window.FEATURE_ACTION_BAR && menu != null) {
            if (menu.getClass().getSimpleName().equals("MenuBuilder")) {
                try {
                    Method m = menu.getClass().getDeclaredMethod(
                            "setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onMenuOpened(featureId, menu);
    }

    private void setOverflowShowingAlways() {
        try {
            ViewConfiguration config = ViewConfiguration.get(this);
            Field menuKeyField = ViewConfiguration.class
                    .getDeclaredField("sHasPermanentMenuKey");
            menuKeyField.setAccessible(true);
            menuKeyField.setBoolean(config, false);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

2). Fragment:

3. 下载地址:

http://download.csdn.net/detail/liranke/8758765

开源的力量是无穷的!

时间: 2024-10-12 12:38:41

滑动导航栏(PagerSlidingTabStrip)实践的相关文章

【Andord实战】SlideMenu+ViewPagerIndictor滑动侧边双栏+滑动导航栏

采用SlideMenu实现侧边栏的效果: 其中 setContentView是设置主背景的布局 setBehindContentView是设置左边菜单的布局 setSecondaryMenu是设置右边的布局 setShadowWidth是设置阴影的宽度 setBehindWidth是设置有效的拉出宽度 setMode是设置开启左右两边的菜单 采用ViewPagerIndictor实现滑动的导航栏和页面布局 其中采用TabPageIndicator做可滑动导航栏 ViewPager做滑动的布局 首

仿网易新闻导航栏PagerSlidingTabStrip源码分析

转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持!   前言 最近工作比较忙,所以现在才更新博文,对不住大家了~!言归正传,我们来说说这个PagerSlidingTabStrip,它是配合ViewPager使用的导航栏,网易新闻就是用的这个导航,我们仔细观察这个导航栏不仅他是跟着ViewPager滑动而滑动,而且指示器还会随着标题的长度而动态的变化长度. · 下载地址: Github:https://github.com/astuet

ym——Android仿网易新闻导航栏PagerSlidingTabStrip源码分析

转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 前言 最近工作比较忙,所以现在才更新博文,对不住大家了~!言归正传,我们来说说这个PagerSlidingTabStrip,它是配合ViewPager使用的导航栏,网易新闻就是用的这个导航,我们仔细观察这个导航栏不仅他是跟着ViewPager滑动而滑动,而且指示器还会随着标题的长度而动态的变化长度,还可以改变多种样式哦~! · 下载地址: Github:https://github.

ios 导航栏透明, 上下滑动 导航栏 颜色渐变

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #008400 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #3d1d81 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #008400 } p.p4 {

在UWP中页面滑动导航栏置顶

最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms-uap的文章,淘宝的实现方式是改变顶部显示栏的大小,我本来准备按照他那个思路去做的,但发现效果不理想,在滑动的时候,底部的界面也跟着在滑动,这样使得很不友好,所以我准备自己实现一个 先上个最终效果图吧,图比较大,请耐心等待 思路大概是这样的 将这个界面分为两行 <Grid.RowDefinitio

仿今日头条滑动导航栏

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>今日头条APP顶部点击可居中导航</title> <meta name="viewport" content="width=device-width

【Andord真】SlideMenu+ViewPagerIndictor双滑动边栏+滑动导航条

采取SlideMenu达到的效果侧边栏: 间 setContentView是设置主背景的布局 setBehindContentView是设置左边菜单的布局 setSecondaryMenu是设置右边的布局 setShadowWidth是设置阴影的宽度 setBehindWidth是设置有效的拉出宽度 setMode是设置开启左右两边的菜单 採用ViewPagerIndictor实现滑动的导航栏和页面布局 当中採用TabPageIndicator做可滑动导航栏 ViewPager做滑动的布局 首先

jquery 实现导航栏滑动效果

精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,right=0px,margin-left=auto,margin-right=auto实现: 3.通过jQuery动态改变滑块的Left和Width,然后通过animate实现动画效果. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m

css3制作炫酷导航栏效果

今天主要利用hover选择器.鼠标滑过查看效果. 一.普通导航栏 Home Content Service Team Contact 对于这种普通的导航栏,只是鼠标滑过的时候颜色会变,所以思路变得很简单. (1)使用ul标签布局 (2)鼠标经过事件 <div id="demo1"> <ul> <li>Home</li> <li>Content</li> <li>Service</li> &l