android viewpager和fragment相结合,实现菜单的滑动效果
2016-09-20 11:26
627 查看
ViewPager是SDK自带的可以控制界面滑动一个控件。现在可以上效果图给大家看看。
效果就是如上图一样,可以左右滑动下面菜单栏可以改变颜色和微信有点相似。
1 布局的介绍
2 四个功能菜单对应了4个fragment和4个布局文件
fragment的布局文件简单这里就不给代码了,只是给出fragment中添加布局文件的相关代码,如下:
3 mainactivity的布局已经给出现在来看,它的代码:
这里有几点需要注意的是
a.给ViewPager添加adapter: viewpager.setAdapter(new MenuApaper(getSupportFragmentManager()));但是这里的activity必须继承FragmentActivity不然是找不到getSupportFragmentManager()这个方法的。
b.给ViewPager添加监听事件,这样可以来监听滑动并且在相应的方法中处理事件。
附带源码:http://download.csdn.net/download/sky_918/9634600
效果就是如上图一样,可以左右滑动下面菜单栏可以改变颜色和微信有点相似。
1 布局的介绍
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/yinbaise" android:orientation="vertical" tools:context=".HomePageMenu" > <android.support.v4.view.ViewPager android:id="@+id/vp_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="0.40" android:background="#ffffff" > </android.support.v4.view.ViewPager> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/DarkGoldenrod1" > <TextView android:id="@+id/functionone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="首页" android:textSize="25dp" android:textColor="@color/black" /> <TextView android:id="@+id/functiontow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textSize="25dp" android:text="功能1" android:textColor="@color/black" /> <TextView android:id="@+id/functionthree" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:text="功能2" android:textSize="25dp" android:textColor="@color/black" /> <TextView android:id="@+id/functionfour" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" android:textSize="25dp" android:text="功能3" android:textColor="@color/black" /> </LinearLayout> </LinearLayout>这布局就很简单了,一眼就可以看清楚,不过需要注意的是在布局中添加ViewPage的时候,在eclipse中并没又找到,可能是我版本的问题或者是其他愿意,我是直接手打或者复制进布局中就可以了。
2 四个功能菜单对应了4个fragment和4个布局文件
fragment的布局文件简单这里就不给代码了,只是给出fragment中添加布局文件的相关代码,如下:
package com.menu.showfrag; import com.example.viewpagedemo.R; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class FunctionOne extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO Auto-generated method stub View view = View.inflate(getActivity(), R.layout.function1, null); return view; } }这里的ViewPager滑动切换的是fragment,这样就可以在fragment中去写相关的逻辑代码,逻辑很清楚方便。
3 mainactivity的布局已经给出现在来看,它的代码:
package com.example.viewpagedemo; import java.util.ArrayList; import java.util.List; import com.menu.showfrag.FunctionFour; import com.menu.showfrag.FunctionOne; import com.menu.showfrag.FunctionThree; import com.menu.showfrag.FunctionTow; import android.os.Bundle; import android.annotation.SuppressLint; import android.app.Activity; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.TextView; @SuppressLint("ResourceAsColor") public class MainActivity extends FragmentActivity implements OnClickListener { // tyy 四个功能按钮 TextView function_one, function_tow, function_three, function_four; // tyy viewpager ViewPager viewpager; // tyy fragment 数组保存fragment List<Fragment> fm_list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); function_one = (TextView) findViewById(R.id.functionone); function_tow = (TextView) findViewById(R.id.functiontow); function_three = (TextView) findViewById(R.id.functionthree); function_four = (TextView) findViewById(R.id.functionfour); viewpager = (ViewPager) findViewById(R.id.vp_content); fm_list = new ArrayList<Fragment>(); fm_list.add(new FunctionOne()); fm_list.add(new FunctionTow()); fm_list.add(new FunctionThree()); fm_list.add(new FunctionFour()); function_one.setOnClickListener(this); function_tow.setOnClickListener(this); function_three.setOnClickListener(this); function_four.setOnClickListener(this); viewpager.setAdapter(new MenuApaper(getSupportFragmentManager())); viewpager.setCurrentItem(0);// tyy 默认显示第一个 function_one.setBackgroundResource(R.color.Orange); // tyy 给viewpager添加监听事件 viewpager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { selectColor(arg0); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } @SuppressLint("ResourceAsColor") @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.functionone: viewpager.setCurrentItem(0); break; case R.id.functiontow: viewpager.setCurrentItem(1); break; case R.id.functionthree: viewpager.setCurrentItem(2); break; case R.id.functionfour: viewpager.setCurrentItem(3); break; default: break; } } /** * tyy 改变底部菜单颜色 * * @param i是fragment的index */ private void selectColor(int i) { // TODO Auto-generated method stub switch (i) { case 0: function_one.setBackgroundResource(R.color.Orange); function_tow.setBackgroundResource(R.color.DarkGoldenrod1); function_three.setBackgroundResource(R.color.DarkGoldenrod1); function_four.setBackgroundResource(R.color.DarkGoldenrod1); break; case 1: function_one.setBackgroundResource(R.color.DarkGoldenrod1); function_tow.setBackgroundResource(R.color.Orange); function_three.setBackgroundResource(R.color.DarkGoldenrod1); function_four.setBackgroundResource(R.color.DarkGoldenrod1); break; case 2: function_one.setBackgroundResource(R.color.DarkGoldenrod1); function_tow.setBackgroundResource(R.color.DarkGoldenrod1); function_three.setBackgroundResource(R.color.Orange); function_four.setBackgroundResource(R.color.DarkGoldenrod1); break; case 3: function_one.setBackgroundResource(R.color.DarkGoldenrod1); function_tow.setBackgroundResource(R.color.DarkGoldenrod1); function_three.setBackgroundResource(R.color.DarkGoldenrod1); function_four.setBackgroundResource(R.color.Orange); break; default: break; } } class MenuApaper extends FragmentPagerAdapter { public MenuApaper(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { // tyy 将fm_list中添加到了adapter中 return fm_list.get(position); } @Override public int getCount() { // TODO Auto-generated method stub return fm_list.size(); } } }
这里有几点需要注意的是
a.给ViewPager添加adapter: viewpager.setAdapter(new MenuApaper(getSupportFragmentManager()));但是这里的activity必须继承FragmentActivity不然是找不到getSupportFragmentManager()这个方法的。
b.给ViewPager添加监听事件,这样可以来监听滑动并且在相应的方法中处理事件。
附带源码:http://download.csdn.net/download/sky_918/9634600
相关文章推荐
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android开发之ViewPager结合Fragment实现滑动页面的效果(源代码分享)
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android :ViewPager+Fragment 实现顶部导航滑动效果
- Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果(牛逼)
- Android ViewPager和Fragment实现仿微信导航界面及滑动效果
- Android 使用TabLayout、ViewPager和Fragment实现顶部菜单可滑动切换
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- ViewPager+Fragment 滑动菜单效果 实现步骤
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
- Android App中使用ViewPager+Fragment实现滑动切换效果
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果(转载)
- Android ViewPager和Fragment实现顶部导航界面滑动效果、标签下的tab位置
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
- Android ViewPager和Fragment实现顶部导航界面滑动效果
- Android ViewPager + Fragment实现滑动页面效果