使用ViewPagerIndicator结合ViewPager实现网易新闻客户端的Tab标签效果

【转载,请注明出处】,博客链接:http://blog.csdn.net/jxnk25/article/details/50590596

在最近的项目中,我们开发是新闻客户端中,有很多Tab标签,有很多实现方式,我使用的是一个开源控件ViewPageIndicatorViewPageIndicator就是ViewPger指示器,使用ViewPageIndicator集合Viewpager来实现网易新闻客户端的Tab标签效果。

ViewPageIndicator就是一个分页指示器,一个应用上有很多Tab,使用ViewPageIndicator都可以实现,并且这个开源控件很多公司也都在使用中。


代码未行,效果先上:




使用步骤:

方式一:

1.在我们程序中直接读入ViewPageIndicator的库(Github上面下载这个库,下载地址:https://github.com/JakeWharton/Android-ViewPagerIndicator
下载下来后,我们打开压缩文件,找到library,将它作为第三方库引入到我们的应用中。


下面我是以AS作为案例引入到我们的程序中,点击导入ImportModule,找到ViewPageIndicator的库所在的文件夹

第一步:找到ViewPageIndicator的library



第二步:导入到AS中



第三步:将 ViewPageIndicator的library作为项目依赖库



选择我们刚刚导入的 ViewPageIndicator的librar,点击ok,等待构建完成就可以了。

方式二:

步骤:
(1)在Gradle Scripts下面的第一个build.gradle,添加如下代码(添加标记):
buildscript {
repositories {
maven { url "http://dl.bintray.com/populov/maven" }
mavenCentral()

jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:1.5.0'

// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
maven { url "http://dl.bintray.com/populov/maven" }
mavenCentral()

jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
(2)在Gradle Scripts下面的第二个build.gradle,添加如下代码:
dependencies {
compile 'com.viewpagerindicator:library:2.4.1@aar'
}
(3)同步一下即可


MainActivity代码 MainActvity必须继承FragmentActivity

第1步:实例化ViewPager,给ViewPager设置Adapter
第2步:实例化TabPageIndicator,TabPageIndicator与ViewPager绑在一起
第3步:在Indicator上设置OnPagerChangeListner监听器
第4步:定义Adapter(继承FragmentPagerAdapter)

先实例化ViewPager,然后实例化TabPageIndicator,然后设置TabPageIndicator和ViewPager关联,就是调用TabPageIndicator的setViewPager(ViewPager view)方法,这样子就实现了点击上面的Tab,下面的ViewPager切换;滑动ViewPager,上面的Tab跟着切换。
ViewPager的每一个Item我们使用的是Fragment,使用Fragment可以使布局更加灵活一点,建议多用Fragment。
设置监听的时候,需要用Indicator提供的OnPagerChangeListener方法

public class MainActivity extends FragmentActivity {
private static final String[] ContentTitle = new String[] { "最新", "销量",
            "佣金" };
       //实例化ViewPager, 然后给ViewPager设置Adapter  
        ViewPager pager = (ViewPager)findViewById(R.id.pager);  
        FragmentPagerAdapter adapter = new TabPageIndicatorAdapter(getSupportFragmentManager());  
        pager.setAdapter(adapter);  

        //实例化TabPageIndicator,然后与ViewPager绑在一起(核心步骤)  
        TabPageIndicator indicator = (TabPageIndicator)findViewById(R.id.indicator);  
        indicator.setViewPager(pager);  

        //如果要设置监听ViewPager中包含的Fragment的改变(滑动切换页面),使用OnPageChangeListener为它指        定一个监听器,那么不能像之前那样直接设置在ViewPager上了,而要设置在Indicator上,
        indicator.setOnPageChangeListener(new OnPageChangeListener() {  

            @Override  
            public void onPageSelected(int arg0) {  
                Toast.makeText(getApplicationContext(), TITLE[arg0], Toast.LENGTH_SHORT).show();  
            }  

            @Override  
            public void onPageScrolled(int arg0, float arg1, int arg2) {  

            }  

            @Override  
            public void onPageScrollStateChanged(int arg0) {  

            }  
        });  
}


定义一个ViewPager的适配器

/**
 * Created by xhb on 2016/1/18.
 * 文章界面的Fragment适配器
 */
public class TabPageIndicatorAdapter extends FragmentStatePagerAdapter {
    //fragments集合
    private List<Fragment> fragments;
    //标题
    private String[] title;

    public TabPageIndicatorAdapter(FragmentManager fm, List<Fragment> fragments, String[] title) {
        super(fm);
        this.fragments = fragments;
        this.title = title;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

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

    //获取当前位置的标题
    @Override
    public CharSequence getPageTitle(int position) {
        return title[position % title.length];
    }
}


MainActivity布局:(由于里面有多个指示器,我们需要的是Tab标签的indicator,所以是TabPageIndicator,大家不要引入错了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
    xmlns:ptr="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:orientation="vertical"
    tools:context="com.xhb.testbw.MainActivity" >

    <include layout="@layout/main_header" />

    <com.viewpagerindicator.TabPageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

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

</LinearLayout>


TabPageIndicator的样式修改:
第1步:在values/styles中添加<style>:
本例中,添加了3个<style>,其中"StyledIndicators"是我们需要的<style>,它其中的<item>使用了"CustomTabPageIndicator"这个<style>,这个<style>其中的一个<item>又使用了"CustomTabPageIndicator.Text"这个<style>。
实际上可以把"StyledIndicators"<style>的<item>属性全部写死在"StyledIndicators"下面。 但这样层级分离式的写法,增强了代码的复用性,以便后期维护和功能代码增删操作。
<!--Tabindicator的自定义style-->
 <style name="StyledIndicators" parent="@android:style/Theme.Holo.Light.NoActionBar">
     <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
     <item name="android:fitsSystemWindows">true</item>
 </style>
 <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
     <item name="android:background">@drawable/tab_indicator</item>
     <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
     <item name="android:textSize">14sp</item>
     <item name="android:dividerPadding">8dp</item>
     <item name="android:showDividers">middle</item>
     <item name="android:paddingLeft">15dp</item>
     <item name="android:paddingRight">15dp</item>
     <item name="android:fadingEdge">horizontal</item>
     <item name="android:fadingEdgeLength">8dp</item>
 </style>

 <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
     <item name="android:typeface">monospace</item>
     <item name="android:textColor">@drawable/selector_tabtext</item>
 </style>

第2步:创建<style>中使用到的drawable资源文件:
在drawable目录下添加tab_indicator.xml 和selector_tabtext.xml。
本例中使用到了自定义的drawable资源,自定义drawable一般配合上面的自定义style使用,提供图片、颜色等资源来支持自定义样式:

tab_indicator.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="false" android:state_pressed="false" android:drawable="@android:color/transparent" />
    <item android:state_selected="false" android:state_pressed="true" android:drawable="@android:color/transparent" />
    <item android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/base_tabpager_indicator_selected" />
    <item android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/base_tabpager_indicator_selected" />
</selector>


selcetor_tabtext.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#EE2C2C" />
    <item android:state_pressed="true" android:color="#EE2C2C" />
    <item android:state_focused="true" android:color="#EE2C2C" />
    <item android:color="@android:color/darker_gray"/>
</selector> 

base_tabpager_indicator_selected.9.png 是指示器的.9图片,大家可以自己画一个


第3步:在Manifest中改用我们自定义的样式:
可以直接在application上修改,也可以单独修改一个activity


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,`Fragment` 和 `ViewPager` 结合使用可以实现滑动切换的效果。通过在 `ViewPager` 中添加多个 `Fragment`,可以实现左右滑动切换不同的页面。需要注意的是,在使用 `ViewPager` 时,需要自定义一个 `PagerAdapter`,用于管理 `ViewPager` 中的 `Fragment`。同时,也可以通过 `TabLayout` 等其他的控件,为 `ViewPager` 添加标签,提高用户体验。 以下是 `ViewPager` 和 `Fragment` 结合使用的示例代码: 1. 在布局文件中添加 `ViewPager` 控件: ``` <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> ``` 2. 在 Activity 或 Fragment 中,为 `ViewPager` 设置 Adapter: ``` ViewPager viewPager = findViewById(R.id.view_pager); MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); ``` 3. 自定义一个 PagerAdapter,用于管理 ViewPager 中的 Fragment: ``` public class MyPagerAdapter extends FragmentPagerAdapter { private static final int PAGE_COUNT = 3; public MyPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch (position) { case 0: return new Fragment1(); case 1: return new Fragment2(); case 2: return new Fragment3(); default: return null; } } @Override public int getCount() { return PAGE_COUNT; } } ``` 在上述示例代码中,`MyPagerAdapter` 继承自 `FragmentPagerAdapter`,并重写了 `getItem()` 和 `getCount()` 方法,用于返回不同位置的 `Fragment` 对象。通过以上步骤,即可实现使用 `ViewPager` 和 `Fragment` 结合使用实现滑动切换的效果

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值