Android开发：AS开发底下菜单页面切换、滑动效果
Android开发：AS开发底下菜单页面切换、滑动效果
- 目前市面上开发的app，其页面切换方式五花八门，我会在最后贴上几种比较炫酷的造型，下面还是给大家解析下页面切换的两位老祖ViewPager与Fragment：
1、ViewPager实现滑动切换页面
- ViewPager布局文件要求，也可以说这是在主布局界面(activity_main.xml)给ViewPager申请空间位置：
....
<android.support.v4.view.ViewPager
android:layout_weight="1"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_above="@+id/bottom_tab_layout">
</android.support.v4.view.ViewPager>
....
- 自定义适配器(adapter)类，新建CustomViewPagerAdapter.java文件
package com.sylanty.syvideo;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import java.util.List;
public class CustomViewPagerAdapter extends PagerAdapter {
List<View> pages;
public CustomViewPagerAdapter(List<View> pages){
this.pages = pages;
};
//获取页面数量
@Override
public int getCount() {
return pages.size();
}
//判断类型是否匹配
@Override
public boolean isViewFromObject(View view, Object object) {
return object==view;
}
//加载page
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = pages.get(position);
container.addView(view);
return view;
}
//移除page
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(pages.get(position));
}
}
- 在MainActivity类文件，MainActivity.java中调用ViewPager
....
//MainActivity起始函数
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
initPages();
//初始化自定义适配器
customViewPagerAdapter = new CustomViewPagerAdapter(pages);
//设置adapter
viewPager.setAdapter(customViewPagerAdapter);
viewPager.setOnPageChangeListener(this);
}
....
....
// 初始化viewpager页面
private void initPages() {
pages = new ArrayList<View>();
View homepage = View.inflate(MainActivity.this,R.layout.home_viewpager,null);
View mepage = View.inflate(MainActivity.this,R.layout.me_viewpager,null);
pages.add(homepage);
pages.add(mepage);
}
....
....
//继承自ViewPager.OnPageChangeListener接口
//实现页面滑动的事件监听
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//继承自ViewPager.OnPageChangeListener接口
//实现页面选中后的事件监听
@Override
public void onPageSelected(int position) {
resumeTab();
switch (position){
case 0:
homeImage.setImageResource(R.drawable.home_blue);
homeText.setTextColor(getResources().getColor(R.color.colorTextBlue));
toolbartitle.setText(R.string.app_home);
break;
case 1:
meImage.setImageResource(R.drawable.me_blue);
meText.setTextColor(getResources().getColor(R.color.colorTextBlue));
toolbartitle.setText(R.string.app_me);
break;
default:
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
....
这样你的滑动切换页面的效果就实现了；
配图羽：
2、Fragment实现切换页面
- 跟ViewPager一样，也要在主布局界面(activity_main.xml)先申请空间位置：
....
<FrameLayout
android:id="@+id/main_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
....
- 因为Fragment是固定界面，所以我们需要根据你的菜单栏中项目数来定义Fragment个数，这里我们申请两个Fragment，以下是java文件，对于xml布局文件你可以自己建立，不出错就行：
public class HomeFrament extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.frament_home,null);
}
@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
}
}
public class MeFrament extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.frament_me,null);
}
}
- 在MainActivity类文件，MainActivity.java中完成切换Fragment页：
//MainActivity起始函数
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化并设置当前Fragment
initFragment(0);
}
//设置Fragment
private void initFragment(int index) {
// 由于是引用了V4包下的Fragment，所以管理器要用getSupportFragmentManager获取
FragmentManager fragmentManager = getSupportFragmentManager();
// 开启事务
FragmentTransaction transaction = fragmentManager.beginTransaction();
// 隐藏所有Fragment
hideFragment(transaction);
switch (index) {
case 0:
if (homeFragment == null) {
homeFragment = new HomeFragment();
transaction.add(R.id.home_activity, homeFragment);
} else {
transaction.show(homeFragment);
}
break;
case 1:
if (meFragment == null) {
meFragment = new MeFragment();
transaction.add(R.id.me_activity, meFragment);
} else {
transaction.show(addressFragment);
}
break;
default:
break;
}
// 提交事务
transaction.commit();
}
//隐藏Fragment
private void hideFragment(FragmentTransaction transaction) {
if (homeFragment != null) {
transaction.hide(homeFragment);
}
if (meFragment != null) {
transaction.hide(meFragment);
}
}
- 注意：
- 主要代码就是这些，你可以通过findViewById()方法或者是按钮控件来控制切换页面，切换的方法是调用initFragment()函数。如何创建菜单栏控件可以看我的文章Android开发：AS开发APP底下菜单栏设计
- 还需要在AndroidManifest.xml里面对应的activity里添设置
android:configChanges=“orientation|keyboardHidden|screenSize”
这是为了改换屏幕方向等操作时不触发oncreate事件，避免界面重复叠加现象。
至此，两位老祖就介绍完了。
- 虽然两位老祖介绍完了，但是还存在它们融合的方法，毕竟是顶端的两位大师，肯定要交流的嘛！那我就不废话了，看下面融合技吧！
3、Fragment嵌入ViewPager融合技
- 在这里，我想介绍一个新的布局方法，activity_main.xml布局文件如下：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
tools:context="com.sylanty.sy.MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/vp_container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/include"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.v4.view.ViewPager>
<include layout="@layout/layout_bottom"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_height="0dp"
android:layout_width="0dp"
android:id="@+id/include" />
</android.support.constraint.ConstraintLayout>
- 自定义适配器(adapter)类，新建CustomFragmentPagerAdapter.java文件
public class CustomFragmentPagerAdapter extends FragmentPagerAdapter {
public List<Fragment> mFragmentList;
public CustomFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentList) {
super(fm);
mFragmentList=fragmentList;
}
@Override
public Fragment getItem(int position) {
return mFragmentList==null?null:mFragmentList.get(position);
}
@Override
public int getCount() {
return mFragmentList==null?0:mFragmentList.size();
}
}
- MainActivity实现代码，如下：
public class MainActivity extends AppCompatActivity {
@BindView(R.id.vp_container)
ViewPager mcContainer;
@BindView(R.id.tv_homepage)
TextView mcHome;
@BindView(R.id.tv_setting)
TextView mcSetting;
@BindView(R.id.tv_calculator)
TextView mcCalculator;
private List<Fragment> fragmentList;
private List<TextView> textViewList;
private int mDefaultColor= Color.BLACK;
private int mActiveColor=Color.RED;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
fragmentList=new ArrayList<Fragment>();
fragmentList.add(new FrontPageFragment());
fragmentList.add(new SalaryFragment());
fragmentList.add(new SettingFragment());
textViewList=new ArrayList<TextView>();
textViewList.add(mcHome);
textViewList.add(mcCalculator);
textViewList.add(mcSetting);
textViewList.get(0).setTextColor(mActiveColor);
mcContainer.setAdapter(new CustomFragmentPagerAdapter(getSupportFragmentManager(),fragmentList));
mcContainer.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
for (TextView viewer:textViewList) {
viewer.setTextColor(mDefaultColor);
}
textViewList.get(position).setTextColor(mActiveColor);
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}
}
注意：
融合技很强，你能驾驭吗，加油吧！
4、更多华丽页面滑动
期待我的GitHub吧
各色各样
总结：
ViewPager与Fragment各具特点，希望我们能灵活运用，笔录万岁，加油吧！