android之TabLayout实现PagerSlidingTabStrip,ViewpagerIndicator之类的效果滑动页面导航效果（类似网易新闻）

今天上班没啥任务，就写了个小demo玩玩，以前都是用底部导航栏+fragment实现主页，今天想试试类似网易新闻实现滑动页面导航效果，即上面是可以滑动的分类导航卡，下面是根据上面导航卡进行变动的内容显示，效果如下：

首先，我们先来分析一下实现方式:

1.导航卡是TabLayout实现导航卡并可以左右滑动（我们这里实现7个导航卡效果）

2.中间是Viewpager+fragment实现左右滑动

3.中间的ViewPager和顶部的TabLayout要进行联动，即点击导航卡后下面的ViewPager内容跟着变，同理滑动ViewPager后导航卡TabLayout跟着变（TabLayout自带实现）

首先，我们先来进行总布局的xml文件(注意，我们要使用Tablayout需要先使用design包，compile 'com.android.support:design:23.1.1')

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        app:tabIndicatorColor="#0000ff"
        app:tabIndicatorHeight="1px"
        app:tabMode="scrollable"
        app:tabGravity="center"
        app:tabTextColor="#ff0000"
        app:tabSelectedTextColor="#00ff00"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
    </android.support.v4.view.ViewPager>

</LinearLayout>

LinearLayout布局，方向vertical；其中app:tabIndicatorColor="#0000ff"是设置指示器那个蓝色横条颜色，app:tabIndicatorHeight="1px"是设置横条的高度，app:tabMode="scrollable"是设置为可以滑动，如果不设置这个值，那么就不能滑动，效果就变了（如下），

页面直接显示所有的导航卡并平分，这样效果会导致如果导航卡的文字太多显示不全（我写的是tab01,tab02.。。。。。。结果数字没显示出来，因为空间太小显示不全），所以如果我们导航卡过多，就使用滑动的方式来实现，效果就完美了。

app:tabSelectedTextColor="#ff0000" 设置选中后的字体颜色

app:tabTextColor="#FF000000" 设置导航卡字体的颜色

其他属性都可以根据自己的需求写，我这里就不多说了

然后ViewPager里面包含的fragment的布局，我们只放个textview来显示下是第几页就行了

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

    <TextView
        android:id="@+id/fra_tv"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#450000ff"
        android:textColor="@android:color/holo_red_light"
        android:textSize="18sp"/>

</LinearLayout>

布局我们写完了，现在我们写实现的逻辑

1.我们先写viewpager里面需要的MyFragment

package com.custom.my.tablayout.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import com.custom.my.tablayout.R;

/**
 * Created by Administrator on 2016/3/31.
 */
public class MyFragment extends Fragment {
    private TextView content;
    private String text;

    public MyFragment(String text){  //用于初始化的时候传递一个文字显示在textview中便于知道是第几页，把后面看完就懂了
        this.text = text;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView(inflater, container);
    }

    private View initView(LayoutInflater inflater, ViewGroup container) {
        View view = inflater.inflate(R.layout.fragment_my,null);
        content = (TextView) view.findViewById(R.id.fra_tv);
        content.setText(text);
        return view;
    }
}

然后MainActivity实现逻辑

package com.custom.my.tablayout.activity;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import com.custom.my.tablayout.R;
import com.custom.my.tablayout.fragment.MyFragment;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<String> titles;  //七个导航卡

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

        initView(); //加载布局
        initData();  //加载数据

    }

    private void initData() {
        titles = Arrays.asList("tab1","tab2","tab3","tab4","tab5","tab6","tab7");  //给七个导航卡取名字
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {   //给viewpager绑定内容fragment
            @Override
            public Fragment getItem(int position) {  
                return new MyFragment(titles.get(position));  //初始化并将导航卡的名字传过去显示在fragment中
            }

            @Override
            public int getCount() {
                return titles.size();  //数量
            }

            @Override
            public CharSequence getPageTitle(int position) {  //这个方法是重点！tablayout就是根据这个来绑定导航卡的名字的
                return titles.get(position);
            }
        });
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {  //设置联动，点击导航卡后viewpager跟着滑动
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tablayout);  //获取tablayout
        viewPager = (ViewPager) findViewById(R.id.viewpager);  //获取viewpager
    }
}

然后运行，完成了，是不是很简单，当然这是使用默认的显示方式，比如我们想让每个导航卡自己来设置样式呢，其实也很简单

首先，我们写个item布局，将item背景设为红色，导航卡名字设为蓝色，然后看是不是我们想要的效果，当然你也可以再放图标之类的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:background="#ff0000"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/tab_tv"
        android:padding="5dp"
        android:layout_width="60dp"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#2222ff"/>

</LinearLayout>

写完之后，我们只需要将逻辑重新改一下就行了

package com.custom.my.tablayout.activity;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;
import com.custom.my.tablayout.R;
import com.custom.my.tablayout.fragment.MyFragment;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private TabLayout tabLayout;
    private ViewPager viewPager;
    private List<String> titles;

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

        initView();
        initData();

    }

    private void initData() {
        titles = Arrays.asList("tab1","tab2","tab3","tab4","tab5","tab6","tab7");
        viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return new MyFragment(titles.get(position));
            }

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

//            @Override
//            public CharSequence getPageTitle(int position) {  //注释掉，因为tablayout导航卡名字是根据这里进行绑定的，现在我们自定义了，不需要了
//                return titles.get(position);
//            }
        });
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
        tabLayout.setupWithViewPager(viewPager);
        for(int i = 0;i < tabLayout.getTabCount();i++){  //获取七个导航卡并遍历
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if(tab != null){
                tab.setCustomView(initTabItemView(i));  //将每个导航卡都绑定为我们自己写的布局
            }
        }
    }

    private void initView() {
        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);
    }

    private View initTabItemView(int position){  //获取item的布局，然后将名字放进去
        View tabView = LayoutInflater.from(this).inflate(R.layout.tab_item,null);
        TextView tv = (TextView) tabView.findViewById(R.id.tab_tv);
        tv.setText(titles.get(position));
        return tabView;
    }
}

然后就完成了

用法大概就是这样，很多细节的地方大家多用用就会了，其实用起来还是很简单的，也很实用

晨兮_夏天

发布了33 篇原创文章 · 获赞 49 · 访问量 14万+

私信关注

android之TabLayout实现PagerSlidingTabStrip,ViewpagerIndicator之类的效果滑动页面导航效果（类似网易新闻）

猜你喜欢