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>

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

以上是 ViewPager+Fragment实现侧滑导航栏 的全部内容, 来源链接: utcz.com/p/243552.html

回到顶部