android 使用viewpage+fragment 打造顶部导航界面+滑动效果

今天给大家分享一篇简单使用viewpage+fragment打造属于自己的顶部导航。

老规矩先上截图

效果大致上就是上图展示的，各位童鞋可以根据自己的需求更改导航标题，以及加图片之类的

废话不说多，上工程截图

工程是不是很简单。使用androidstudio的童鞋直接拷贝java文件进工程就可以了

首先看我们的布局文件activity_main

然后是fragment.xml，这里要说明一下，我比较懒，就只写了一个fragment布局文件，正常做项目的话，是一个页面一个fragment。我这里为了方便就使用了一个。

接下来看我们的通用展示页面CurrencyFragment

package com.example.viewpagedemo;

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

/**
 * @author 作者  刘明昆 Q:571039838
 * @version 创建时间：2018年8月27日 上午9:46:38
 * 类说明
 */
public class CurrencyFragment extends Fragment {

	private TextView txt,content;
	private String flag; //判断是哪个页面过来的数据
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		View v=inflater.inflate(R.layout.fragment, container,false);
		txt=(TextView) v.findViewById(R.id.txt);
		content=(TextView) v.findViewById(R.id.content);
		flag=getArguments().getString("flag");
		if("one".equals(flag)){
			txt.setText("这是第一个页面的fragment");
		}else if("two".equals(flag)){
			content.setVisibility(View.GONE);
			txt.setText("这是第二个页面的fragment");
		}else if("three".equals(flag)){
			content.setVisibility(View.GONE);
			txt.setText("这是第三个页面的fragment");
		}
		return v;
	}
}

我们的自定义适配器

package com.example.viewpagedemo;

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

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * @author 作者  刘明昆 Q:571039838
 * @version 创建时间：2018年8月27日 上午9:51:29
 * 适配器
 */
public class MyfragmentViewpageAdapter extends FragmentPagerAdapter {

	private List list;
	public MyfragmentViewpageAdapter(FragmentManager fm,ArrayList list) {
		super(fm);
		this.list=list;
	}

	@Override
	public Fragment getItem(int arg0) {
		return list.get(arg0);
	}

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

}

最后就是我们的Activity啦，注释写的比较详细了，就不多说啦

package com.example.viewpagedemo;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

//注意MainActivity是继承自FragmentActivity类
public class MainActivity extends FragmentActivity implements OnClickListener,
		OnPageChangeListener {

	// 布局文件中自己的myvirwpager
	private ViewPager myvirwpager;
	// 选项卡中的三个Button
	private Button one, two, three;
	// 指示标签的ImageView
	private ImageView cursor;
	// 指示标签的横坐标
	private float cursorX = 0;
	// 定义获取所有按钮的宽度数组
	private int[] WidrhArgs;
	// 定义所有标题按钮的数组
	private Button[] ButtonArgs;
	// fragment的集合
	private ArrayList list;
	// viewpage适配器
	private MyfragmentViewpageAdapter adapter;
	FragmentManager fm=getSupportFragmentManager();

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

	private void Init() {
		// 获取控件
		myvirwpager = (ViewPager) findViewById(R.id.myviewpager);
		one = (Button) findViewById(R.id.one);
		two = (Button) findViewById(R.id.two);
		three = (Button) findViewById(R.id.three);
		// 初始化按钮数组
		ButtonArgs = new Button[] { one, two, three };
		// 设置指示标签颜色为红色
		cursor = (ImageView) findViewById(R.id.cursor);
		cursor.setBackgroundColor(Color.RED);
		// 按钮单机事件
		one.setOnClickListener(this);
		two.setOnClickListener(this);
		three.setOnClickListener(this);

		// 将fragment放进集合，并初始化适配器
		list = new ArrayList();
		list.add(new CurrencyFragment());
		list.add(new CurrencyFragment());
		list.add(new CurrencyFragment());
		adapter = new MyfragmentViewpageAdapter(fm,
				list);
		myvirwpager.setAdapter(adapter);
		// viewpage监听事件，重写onPageSelected()方法，实现左右滑动页面
		myvirwpager.setOnPageChangeListener(this);
		// 初始按钮颜色
		resetButtonColor();
		// 默认第一页
		one.setTextColor(Color.RED);
	}

	// 设置按钮颜色
	public void resetButtonColor() {
		one.setBackgroundColor(Color.parseColor("#DCDCDC"));
		two.setBackgroundColor(Color.parseColor("#DCDCDC"));
		three.setBackgroundColor(Color.parseColor("#DCDCDC"));
		one.setTextColor(Color.BLACK);
		two.setTextColor(Color.BLACK);
		three.setTextColor(Color.BLACK);

	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.one:
			myvirwpager.setCurrentItem(0);
			cursorAnim(0);
			break;
		case R.id.two:
			myvirwpager.setCurrentItem(1);
			cursorAnim(1);
			break;
		case R.id.three:
			myvirwpager.setCurrentItem(2);
			cursorAnim(2);
			break;
		}
	}

	@Override
	public void onPageScrollStateChanged(int arg0) {

	}

	@Override
	public void onPageScrolled(int arg0, float arg1, int arg2) {

	}

	@Override
	public void onPageSelected(int arg0) {

		if (WidrhArgs == null) {
			WidrhArgs = new int[] { one.getWidth(), two.getWidth(),
					three.getWidth() };
		}

		// 根据每次选中的按钮，重置颜色
		resetButtonColor();
		// 将滑动到当前的标签下，改动标签颜色
		ButtonArgs[arg0].setTextColor(Color.RED);
		cursorAnim(arg0);

	}

	// 指示器的跳转，传入当前所处的页面的下标
	public void cursorAnim(int curItem) {
		// 每次调用，就将指示器的横坐标设置为0，即开始的位置
		cursorX = 0;
		// 再根据当前的curItem来设置指示器的宽度
		LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) cursor
				.getLayoutParams();
		// 减去边距*2，以对齐标题栏文字
		lp.width = WidrhArgs[curItem] - ButtonArgs[0].getPaddingLeft() * 2;
		cursor.setLayoutParams(lp);
		// 循环获取当前页之前的所有页面的宽度
		for (int i = 0; i < curItem; i++) {
			cursorX = cursorX + ButtonArgs[i].getWidth();
		}
		// 再加上当前页面的左边距，即为指示器当前应处的位置
		cursor.setX(cursorX + ButtonArgs[curItem].getPaddingLeft());
	}
}

附上Demo下载地址