Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记
今天在上一个界面切换的基础上来添加一个功能,就是模仿微信滑动界面的切换,我们不仅可以点击下面的控件来选择我们的界面,而且可以自由的滑动切换界面,所有的功能我将通过在代码中添加注释来说明,这里的Fragment代码我就不重复写了,和上一个篇的Fragment代码是一样的,需要了解的请点击无滑动界面切换进行查看。
先看一下显示效果:
MyAdapter.java
public class MyAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public MyAdapter(FragmentManager fm,List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
/**
* 返回对应位置的Fragment
*/
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
/**
* 获取ViewPager显示的数量
*/
@Override
public int getCount() {
return fragments == null ? 0 : fragments.size();
}
}
MainActivity.java
public class MainActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
//指南页面常量
private final int ZN = 0;
//热门页面常量
private final int RM = 1;
//分类页面常量
private final int FL = 2;
//我的页面常量
private final int WD = 3;
//指南页面布局控件
private LinearLayout mLinZN;
//分类页面布局控件
private LinearLayout mLinFL;
//热门页面布局控件
private LinearLayout mLinRM;
//我的页面布局控件
private LinearLayout mLinWD;
//分类Fragment
private Fragment mFLFragment;
//指南Fragment
private Fragment mZNFragment;
//我的Fragment
private Fragment mWDFragment;
//热门Fragment
private Fragment mRMFragment;
//热门ImageButton控件
private ImageButton mRMIBtn;
//指南ImageButton控件
private ImageButton mZNIBtn;
//分类ImageButton控件
private ImageButton mFLIBtn;
//我的ImageButton控件
private ImageButton mWDIBtn;
//热门文字控件
private TextView mRMTv;
//指南文字控件
private TextView mZNTv;
//分类文字控件
private TextView mFLTv;
//我的文字控件
private TextView mWDTv;
//适配器数据集
private List<Fragment> mFragments;
//适配器对象
private MyAdapter mAdapter;
//ViewPager对象
private ViewPager mViewPager;
//上一个被选中的底部控件
private int mPreviousItem;
//当前被选中的底部控件
private int mCurrentItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
event();
showViewPagerData(mFragments);
}
/**
* 初始化所有控件
*/
private void initView() {
mLinZN = (LinearLayout) findViewById(R.id.mLinZN);
mLinFL = (LinearLayout) findViewById(R.id.mLinFenLei);
mLinRM = (LinearLayout) findViewById(R.id.mLinReMen);
mLinWD = (LinearLayout) findViewById(R.id.mLinUser);
mRMIBtn = (ImageButton) findViewById(R.id.mBtnRM);
mZNIBtn = (ImageButton) findViewById(R.id.mBtnZN);
mFLIBtn = (ImageButton) findViewById(R.id.mBtnFL);
mWDIBtn = (ImageButton) findViewById(R.id.mBtnWD);
mRMTv = (TextView) findViewById(R.id.mTvReMen);
mZNTv = (TextView) findViewById(R.id.mTvZhiNan);
mFLTv = (TextView) findViewById(R.id.mTvFenLei);
mWDTv = (TextView) findViewById(R.id.mTvUser);
mViewPager = (ViewPager) findViewById(R.id.mViewPager);
}
/**
* 初始化ViewPager上要显示的所有Fragment数据
*/
private void initData() {
mFragments = new ArrayList<>();
if (mZNFragment == null) {
mZNFragment = new ZNFragment();
mFragments.add(mZNFragment);
}
if (mRMFragment == null) {
mRMFragment = new RMFragment();
mFragments.add(mRMFragment);
}
if (mFLFragment == null) {
mFLFragment = new FLFragment();
mFragments.add(mFLFragment);
}
if (mWDFragment == null) {
mWDFragment = new WDFragment();
mFragments.add(mWDFragment);
}
}
private void showViewPagerData(List<Fragment> fragments) {
if (mAdapter == null) {
//设置对应的适配器
mAdapter = new MyAdapter(getSupportFragmentManager(), fragments);
mViewPager.setAdapter(mAdapter);
} else {
//这里是更新数据时,刷新ViewPager显示的数据
mFragments.addAll(fragments);
mAdapter.notifyDataSetChanged();
}
}
/**
* 初始化事件
*/
private void event() {
mLinFL.setOnClickListener(this);
mLinRM.setOnClickListener(this);
mLinWD.setOnClickListener(this);
mLinZN.setOnClickListener(this);
mViewPager.addOnPageChangeListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.mLinFenLei:
//当前控件项减去上一次的控件项,表示的就是他们之间的一个偏移量
//例如上一次控件选中的是第3个item,当前要选择的是第0个,则相减
//之后的偏移量为FL - mPreviousItem = 0 - 3 = -3
int disItem = FL - mPreviousItem;
//然后设置当前被选择的是第几项,mViewPager.getCurrentItem()获取的是当前
// 选中的为3,即mViewPager.getCurrentItem() + disItem = 3 + (-3) = 0
//拿到当前需要被选择的位置后,设置一下即可
mCurrentItem = mViewPager.getCurrentItem() + disItem;
break;
case R.id.mLinReMen:
disItem = RM - mPreviousItem;
mCurrentItem = mViewPager.getCurrentItem() + disItem;
break;
case R.id.mLinUser:
disItem = WD - mPreviousItem;
mCurrentItem = mViewPager.getCurrentItem() + disItem;
break;
case R.id.mLinZN:
disItem = ZN - mPreviousItem;
mCurrentItem = mViewPager.getCurrentItem() + disItem;
break;
}
//先隐藏上一个被选中的控件的为未选中状态,就是改变上一个控件显示的颜色
hidePreviousColor(mPreviousItem);
//设置当前被选中的控件为选中状态,改变颜色为橙色
setCurrentItem(mCurrentItem);
}
private void setCurrentItem(int current) {
//每次先隐藏上一个控件
hidePreviousColor(mPreviousItem);
switch (current) {
case ZN:
//设置对应的
mZNTv.setTextColor(getResources().getColor(R.color.pressed));
mZNIBtn.setBackgroundResource(R.mipmap.zhinan_pressed);
break;
case RM:
mRMTv.setTextColor(getResources().getColor(R.color.pressed));
mRMIBtn.setBackgroundResource(R.mipmap.remen_pressed);
break;
case FL:
mFLTv.setTextColor(getResources().getColor(R.color.pressed));
mFLIBtn.setBackgroundResource(R.mipmap.fenlei_pressed);
break;
case WD:
mWDTv.setTextColor(getResources().getColor(R.color.pressed));
mWDIBtn.setBackgroundResource(R.mipmap.user_pressed);
break;
}
mViewPager.setCurrentItem(current);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//记录当前的位置
mCurrentItem = position;
//隐藏上一次的位置
hidePreviousColor(mPreviousItem);
//设置上一个控件的位置
mPreviousItem = mCurrentItem;
//设置当前需要选择的控件
setCurrentItem(mCurrentItem);
}
/**
* 隐藏上一个被选中的控件的橙色颜色,设置为未选中的灰色颜色
* @param previousItem
*/
private void hidePreviousColor(int previousItem) {
Log.d("IT_Real", "hidePreviousColor: current = " + mCurrentItem + "previous = " + previousItem);
switch (previousItem) {
case FL:
mFLTv.setTextColor(getResources().getColor(R.color.normal));
mFLIBtn.setBackgroundResource(R.mipmap.fenlei_normal);
break;
case ZN:
mZNTv.setTextColor(getResources().getColor(R.color.normal));
mZNIBtn.setBackgroundResource(R.mipmap.zhinan_normal);
break;
case RM:
mRMTv.setTextColor(getResources().getColor(R.color.normal));
mRMIBtn.setBackgroundResource(R.mipmap.remen_normal);
break;
case WD:
mWDTv.setTextColor(getResources().getColor(R.color.normal));
mWDIBtn.setBackgroundResource(R.mipmap.user_normal);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
基本功能就已经实现了,对于不同的项目有不同的需求,有些项目不需要滑动切换界面,所以根据具体的项目需求选择即可。需要源代码的请点击获取源代码进行下载