TabLayout+ViewPage 简单实现类似新闻顶部导航栏的效果

TabLayout+ViewPage 简单实现类似新闻顶部导航栏的效果

先上效果图吧，是你想要的吗？

第一步：添加依赖： 

compile 'com.android.support:design:25.1.1'

第二步：布局代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.jin.mynews.MainActivity"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/my_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:tabIndicatorColor="#000000"
        app:tabTextColor="#fff"
        app:tabSelectedTextColor="#000"
        app:tabIndicatorHeight="2dp">
    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/my_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

</LinearLayout>

第三步：Java代码

package com.jin.mynews;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
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.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private ViewPager my_viewpager;
    private TabLayout my_tab;
    private List<Fragment> fragments;
    private List<String> titles;

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

    private void initView() {
        my_tab=(TabLayout) findViewById(R.id.my_tab);
        my_viewpager=(ViewPager) findViewById(R.id.my_viewpager);
        fragments=new ArrayList<>();       //碎片的集合
        fragments.add(new Fragment1());
        fragments.add(new Fragment2());
        fragments.add(new Fragment3());
        fragments.add(new Fragment4());

        titles=new ArrayList<>();     //标题的集合
        titles.add("新闻1");
        titles.add("新闻2");
        titles.add("新闻3");
        titles.add("新闻4");

        MyAdapter adapter=new MyAdapter(getSupportFragmentManager());
        my_viewpager.setAdapter(adapter);
        my_tab.setupWithViewPager(my_viewpager);    //关联TabLayout和ViewPager

    }

    private class MyAdapter extends FragmentPagerAdapter{     //适配器
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);  //返回碎片集合的第几项
        }

        @Override
        public int getCount() {
            return fragments.size();    //返回碎片集合大小
        }

    @Override
    public CharSequence getPageTitle(int position) {
        return titles.get(position);    //返回标题的第几项
    }
}
}

第四步：编写要添加的Frgment

package com.jin.mynews;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by SuHongJin on 2018/6/24.
 */

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment1,container,false);
        return view;
    }
}

这是布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="第一个新闻界面"
        android:gravity="center"/>

</LinearLayout>

注：其他3个Fragment一样，这里不再重复写了。如果新闻标题比较多，想实现标题可以横向滚动，在布局中的TabLayout中添加即可

app:tabMode="scrollable"

如果以上觉得有帮到你的的话，点个赞支持一下小编！！！

记住！爱分享的人运气不会太差！！!

如果以上觉得有帮到你的的话，点个赞支持一下小编！！！

记住！爱分享的人运气不会太差！！!