ViewPager+Fragment实现侧滑导航栏

本文实例为大家分享了viewpager+fragment实现侧滑导航栏的具体代码，供大家参考，具体内容如下

本文主要整理和记录下

本来想用gif图片，这里暂时就用图片代替下吧：

activity：

package com.example.administrator.android006;
 
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentactivity;
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.view;
import android.widget.imagebutton;
import android.widget.imageview;
import android.widget.linearlayout;
 
import com.example.administrator.android006.fragment.fragment1;
import com.example.administrator.android006.fragment.fragment2;
import com.example.administrator.android006.fragment.fragment3;
import com.example.administrator.android006.fragment.fragment4;
 
import java.util.arraylist;
import java.util.list;
 
public class mainactivity extends fragmentactivity implements view.onclicklistener {
 
    //顶部4个按钮
    private linearlayout main_home_layout,main_msg_layout,main_pal_layout,main_me_layout;
    private viewpager main_mviewpager;
    //viewpager的适配器
    private fragmentpageradapter madapter;
    //4个fragment碎片的集合
    private list<fragment> mfragments = new arraylist<>();
 
    @override
    protected void oncreate(bundle savedinstancestate) {
        super.oncreate(savedinstancestate);
        setcontentview(r.layout.activity_main);
 
        //初始化，加载碎片
        initview();
        initadapter();
    }
 
    public void initadapter(){
        madapter = new fragmentpageradapter(getsupportfragmentmanager()) {
            @override
            public fragment getitem(int position) {
                return mfragments.get(position);
            }
 
            @override
            public int getcount() {
                return mfragments.size();
            }
        };
        main_mviewpager.setadapter(madapter);
        main_mviewpager.setonpagechangelistener(new viewpager.onpagechangelistener() {
            @override
            public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
 
            }
 
            @override
            public void onpageselected(int position) {
                //重置imageview的颜色
                resetimg();
                //设置选中时的图片
                switch (position) {
                    case 0:
                        ((imageview) main_home_layout.findviewbyid(r.id.main_home_img))
                                .setimageresource(r.drawable.home_black);
                        break;
                    case 1:
                        ((imageview) main_msg_layout.findviewbyid(r.id.main_msg_img))
                                .setimageresource(r.drawable.msg_black);
                        break;
                    case 2:
                        ((imageview) main_pal_layout.findviewbyid(r.id.main_pal_img))
                                .setimageresource(r.drawable.pal_black);
                        break;
                    case 3:
                        ((imageview) main_me_layout.findviewbyid(r.id.main_me_img))
                                .setimageresource(r.drawable.me_black);
                        break;
                }
            }
 
            @override
            public void onpagescrollstatechanged(int state) {
 
            }
        });
    }
 
    //重置imageview的图片
    protected void resetimg(){
        ((imageview) main_home_layout.findviewbyid(r.id.main_home_img))
                .setimageresource(r.drawable.home_gray);
        ((imageview) main_msg_layout.findviewbyid(r.id.main_msg_img))
                .setimageresource(r.drawable.msg_gray);
        ((imageview) main_pal_layout.findviewbyid(r.id.main_pal_img))
                .setimageresource(r.drawable.pal_gray);
        ((imageview) main_me_layout.findviewbyid(r.id.main_me_img))
                .setimageresource(r.drawable.me_gray);
    }
 
    public void initview(){
        main_home_layout = findviewbyid(r.id.main_home_layout);
        main_msg_layout = findviewbyid(r.id.main_msg_layout);
        main_pal_layout = findviewbyid(r.id.main_pal_layout);
        main_me_layout = findviewbyid(r.id.main_me_layout);
        main_mviewpager = findviewbyid(r.id.main_mviewpager);
 
        fragment1 vp_fr1 = new fragment1();
        fragment2 vp_fr2 = new fragment2();
        fragment3 vp_fr3 = new fragment3();
        fragment4 vp_fr4 = new fragment4();
        mfragments.add(vp_fr1);
        mfragments.add(vp_fr2);
        mfragments.add(vp_fr3);
        mfragments.add(vp_fr4);
        main_home_layout.setonclicklistener(this);
        main_msg_layout.setonclicklistener(this);
        main_pal_layout.setonclicklistener(this);
        main_me_layout.setonclicklistener(this);
    }
 
    @override
    public void onclick(view view) {
        switch (view.getid()) {
            //点击首页时,设置viewpager的下标为0
            case r.id.main_home_layout:
                main_mviewpager.setcurrentitem(0);
                break;
            //点击消息时,设置viewpager的下标为1
            case r.id.main_msg_layout:
                main_mviewpager.setcurrentitem(1);
                break;
            //点击好友时,设置viewpager的下标为2
            case r.id.main_pal_layout:
                main_mviewpager.setcurrentitem(2);
                break;
            //点击我时,设置viewpager的下标为3
            case r.id.main_me_layout:
                main_mviewpager.setcurrentitem(3);
                break;
        }
    }
}

.xml文件中:

<?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">
 
    <linearlayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        >
        <linearlayout
            android:id="@+id/main_home_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <imageview
                android:id="@+id/main_home_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/home_black"
                android:scaletype="fitxy"
                />
            <textview
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                />
        </linearlayout>
        <linearlayout
            android:id="@+id/main_msg_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <imageview
                android:id="@+id/main_msg_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/msg_gray"
                />
            <textview
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="消息"
                />
        </linearlayout>
        <linearlayout
            android:id="@+id/main_pal_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <imageview
                android:id="@+id/main_pal_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/pal_gray"
                />
            <textview
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="好友"
                />
        </linearlayout>
        <linearlayout
            android:id="@+id/main_me_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <imageview
                android:id="@+id/main_me_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/me_gray"
                />
            <textview
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我"
                />
        </linearlayout>
    </linearlayout>
    <android.support.v4.view.viewpager
        android:id="@+id/main_mviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
    </android.support.v4.view.viewpager>
</linearlayout>

这个是viewpager中的其中一个fragment:

public class fragment1 extends fragment {
    @nullable
    @override
    public view oncreateview(layoutinflater inflater, @nullable viewgroup container, @nullable bundle savedinstancestate) {
        return inflater.inflate(r.layout.fragment1,container,false);
    }
}

其fragment布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.constraintlayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <textview
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是fragment1"
        />
 
</android.support.constraint.constraintlayout>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。