ViewPager+Fragment实现顶部导航滑动

实现效果：

这个效果就是使用ViewPager+Fragment实现的

导入依赖：

compile 'com.android.support:support-v4:26.+'

因为ViewPager是在v4包里面的，所以要导入这条依赖

XML布局:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/main_top_linlayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/reddemo">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <ImageView
                    android:id="@+id/main_menu_imgv"
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="15dp"
                    android:src="@mipmap/ic_menu" />

                <TextView
                    android:id="@+id/main_logic_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp"
                    android:text="我的音乐"
                    android:textColor="@color/white"
                    android:textSize="25dp" />


            </RelativeLayout>


        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:id="@+id/main_online_tv"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginLeft="10dp"
                    android:text="在线音乐"
                    android:textColor="@color/white_60P"
                    android:textSize="25dp" />

                <ImageView
                    android:id="@+id/main_search_imgv"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_alignParentRight="true"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="10dp"
                    android:src="@mipmap/ic_menu_search" />


            </RelativeLayout>


        </LinearLayout>

    </LinearLayout>

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

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

</LinearLayout>

继承FragmentPagerAdapter

public class MusicPager extends FragmentPagerAdapter{
    public List<Fragment> getList() {
        return list;
    }

    public void setList(List<Fragment> list) {
        this.list = list;
    }

    private List<Fragment> list;


    public MusicPager(FragmentManager fm) {
        super(fm);
       // this.list=list;
    }

    @Override
    public Fragment getItem(int position) {
        return  list.get(position);   //正在显示的页面
    }

    @Override
    public int getCount() {
        return list.size();  //总共有几个页面
    }
}

MainActivity实现滑动

import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import com.example.administrator.mymusic.adapter.MusicPager;

import java.util.ArrayList;
import java.util.List;



public class MainActivity extends AppCompatActivity implements View.OnClickListener{
  private TextView logicTv;
    private TextView onlineTv;
    private ViewPager viewPager;
    private MusicPager  adapter;
    private List<Fragment> list=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          //初始化
           initView();
        LogicFragment logic=new LogicFragment();
        OnlieFragment onlie=new OnlieFragment();
        list.add(logic);
        list.add(onlie);
        adapter=new MusicPager(getSupportFragmentManager());
        adapter.setList(list);
        viewPager.setAdapter(adapter);

    }

    private void initView() {
    logicTv = (TextView) findViewById(R.id.main_logic_tv);
    onlineTv = (TextView) findViewById(R.id.main_online_tv);
    viewPager = (ViewPager) findViewById(R.id.main_vp);
    logicTv.setOnClickListener(this);
    onlineTv.setOnClickListener(this);
    viewPager.addOnPageChangeListener(new MyViewPager());
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.main_logic_tv:
                //实现点击TextView切换fragment
                viewPager.setCurrentItem(0);  //切换到
                break;
            case R.id.main_online_tv:
                viewPager.setCurrentItem(1);
                break;
        }
    }
    public class MyViewPager implements ViewPager.OnPageChangeListener{
         //这个方法会在屏幕滑动过程中不断被调用。
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }
        //：这个方法有一个参数position，代表哪个页面被选中。
        @Override
        public void onPageSelected(int position) {
            switch (position) {
                case 0:
                    logicTv.setTextColor(getResources().getColor(R.color.white));
                    onlineTv.setTextColor(getResources().getColor(R.color.white_60P));
                    break;
                case 1:
                    onlineTv.setTextColor(getResources().getColor(R.color.white));
                    logicTv.setTextColor(getResources().getColor(R.color.white_60P));
                    break;
            }

        }
        //这个方法在手指操作屏幕的时候发生变化。有三个值：0（END）,1(PRESS) , 2(UP) 。
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

这样一个ViewPager+Fragment滑动就实现了，很简单也没有很多代码，至于其中扫描出来的音乐，就放在了下篇说明。

另外提供一篇大神写的，ViewPager实现app启动的引导页面，非常好。

[启动屏&&新功能导航](https://github.com/fanatic-mobile-developer-for-android/A-week-to-develop-android-app-plan/tree/master/001_FeatureGuide)

下一篇地址

二次元第一