仿网易新闻主界面（二）——TabLayout+ViewPager

最新推荐文章于 2017-09-12 18:51:59 发布

xhu_ww

最新推荐文章于 2017-09-12 18:51:59 发布

阅读量3.6k

点赞数 1

分类专栏： Android 文章标签： viewpager TabLayout Android

本文链接：https://blog.csdn.net/ww897532167/article/details/69941954

版权

Android 专栏收录该内容

27 篇文章 8 订阅

订阅专栏

接上文：仿网易新闻主界面（一）——RadioGroup+Fragment

前面实现了底部导航栏，现在需要实现顶部新闻的条目切换导航栏，使用TableLayout+ViewPager实现

1.TabLayout + ViewPager

1.1 TabLayout在design下，需要添加依赖

compile 'com.android.support:design:26.0.0-alpha1'

1.2布局文件

在新闻碎片所对应的布局文件中修改

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/home_viewpager_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        app:tabIndicatorColor="@color/bottom_color_press"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/bottom_color_press"
        app:tabTextAppearance="@style/TabLayoutTextStyle"
        app:tabTextColor="@color/bottom_color_normal"
        />

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

1.3 TabLayout的常用属性

a).设置选中字体的颜色

app:tabSelectedTextColor="@color/bottom_color_press"

b).设置未选中字体的颜色

app:tabTextColor="@color/bottom_color_normal"

c).设置指示器下标横线的颜色

app:tabIndicatorColor="@color/bottom_color_press"

d).设置字体的大小（无法直接设置sp）

app:tabTextAppearance="@style/TabLayoutTextStyle"

需要在style文件下设置字体样式，然后引用

    <style name="TabLayoutTextStyle">
        <item name="android:textSize">16sp</item>
    </style>

e).设置模式（默认为fixed：固定的）

app:tabMode="scrollable"

1.4 java代码

a).找到控件

b).设置TabLayout条目名称（可添加图片.setIcon）

tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.mipmap.ic_launcher));

c).关联ViewPager

tabLayout.setupWithViewPager(viewPager);//将TabLayout和ViewPager关联起来。

d).ViewPager设置适配器

其他

设置默认选中项

tablayout.getTabAt(position).select();

java代码设置模式

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置tab模式，MODE_FIXED是固定的,不能超出屏幕，MODE_SCROLLABLE可超出屏幕范围滚动的

具体代码

适配器

public class TabFragmentPagerAdapter extends FragmentPagerAdapter {

    //fragment列表  
    private List<Fragment> list_fragment;
    //tab名的列表
    private List<String> list_Title;

    public TabFragmentPagerAdapter(FragmentManager fm, List<Fragment> list_fragment, List<String> list_Title ) {
        super(fm);
        this.list_fragment = list_fragment;
        this.list_Title = list_Title;
    }


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

    @Override
    public int getCount() {
        return list_Title.size();
    }
    //显示tab上的字
    @Override
    public CharSequence getPageTitle(int position) {
        return list_Title.get(position);
    }
}

TabLayout与ViewPager关联

        //找到控件
        mViewpagerTab = findViewById(R.id.home_viewpager_tab);
        mNewsViewpager = findViewById(R.id.home_viewpager);
        //fragment列表  
        List<Fragment> list_fragment = new ArrayList<>();
        //tab名的列表
        List<String> list_Title = new ArrayList<>();

        list_fragment.add(new HeadlineFragment());
        list_fragment.add(new RecreationFragment());
        list_fragment.add(new SportFragment());
        list_fragment.add(new TechnologyFragment());
        list_fragment.add(new HeadlineFragment());
        list_fragment.add(new RecreationFragment());
        list_fragment.add(new SportFragment());
        list_fragment.add(new TechnologyFragment());
        list_fragment.add(new HeadlineFragment());
        list_fragment.add(new RecreationFragment());
        list_fragment.add(new SportFragment());
        list_fragment.add(new TechnologyFragment());

        list_Title.add("头条");
        list_Title.add("娱乐");
        list_Title.add("体育");
        list_Title.add("科技");
        list_Title.add("头条");
        list_Title.add("娱乐");
        list_Title.add("体育");
        list_Title.add("科技");
        list_Title.add("头条");
        list_Title.add("娱乐");
        list_Title.add("体育");
        list_Title.add("科技");

        //设置名称
        for (int i = 0; i < list_Title.size(); i++) {
            mViewpagerTab.addTab(mViewpagerTab.newTab().setText(list_Title.get(i)));
        }
        TabFragmentPagerAdapter adapter = new TabFragmentPagerAdapter(
                getActivity().getSupportFragmentManager(), list_fragment, list_Title
        );
        //viewpager 加载adapter
        mNewsViewpager.setAdapter(adapter);
        //TableLayout加载viewpager
        mViewpagerTab.setupWithViewPager(mNewsViewpager);
    }

此时效果

2.修改状态栏颜色
主体效果完成了，但是每个页面的标题都不一样，而且手机状态栏和网易新闻红不搭配

修改状态栏颜色

colorPrimaryDark（状态栏底色）：在风格 (styles) 或是主题 (themes) 里进行设定。
App bar 底色这个设定分为二，若你的 android app 仍是使用 actionbar ，则直接在风格 (styles) 或是主题 (themes) 里进行设定 colorPrimary 参数即可；
可若是采用 toolbar 的话，则要在界面 (layout) 里面设定 toolbar 控件的 background 属性。
navigationBarColor（导航栏底色）：仅能在 API v21 也就是 Android 5 以后的版本中使用，因此要将之设定在 res/values-v21/styles.xml 里面。

    <style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="AppTheme" parent="AppTheme.Base">

创建AppTheme.Base主题，使用AppTheme继承AppTheme.Base，在Api21以上已经可以了，

在Api21以下，需要在values-v19文件夹下styles文件设置主题

<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowTranslucentStatus">true</item>
    </style>
</resources>

然后在values-v21文件夹下styles

<resources>
    <style name="AppTheme" parent="AppTheme.Base">
        <item name="android:windowTranslucentStatus">false</item>
    </style>
</resources>

然后在主页的Fragment所对应的布局文件中加上自己的标题（每个Fragment对应的标题不一样，都需挨个编写）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:text="网易"
        android:textSize="20sp"
        android:gravity="bottom"
        android:paddingLeft="10dp"
        android:paddingBottom="5dp"
        android:textColor="#fff"
        android:background="@color/bottom_color_press"
        />

    <android.support.design.widget.TabLayout
        
        />

    <android.support.v4.view.ViewPager
        >
</LinearLayout>

具体代码：https://github.com/897532167/WYnews

具体效果：