Android之ViewPager+Fragment实现页面点击切换和手势滑动
来源：互联网 发布：好看的卷发知乎 编辑：程序博客网 时间：2024/05/06 01:30
使用ViewPager+Fragment实现页面点击切换和手势滑动，效果图如下：
源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590
布局文件activity_main.xml如下：
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="@dimen/top_tab_height" android:background="@color/main_top_color" > <TextView android:id="@+id/picture_text" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/picture" android:textStyle="bold" android:textColor="@color/main_top_tab_color" android:textSize="@dimen/main_top_tab_text_size" /> <TextView android:id="@+id/movie_text" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/movie" android:textStyle="bold" android:textColor="@color/main_top_tab_color" android:textSize="@dimen/main_top_tab_text_size" /> <TextView android:id="@+id/music_text" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="@string/music" android:textStyle="bold" android:textColor="@color/main_top_tab_color" android:textSize="@dimen/main_top_tab_text_size" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="@dimen/main_line_height" android:layout_gravity="bottom" android:orientation="vertical" android:background="@color/main_top_color" > <ImageView android:id="@+id/cursor" android:layout_width="@dimen/main_matrix_width" android:layout_height="@dimen/main_line_height" android:scaleType="matrix" android:src="@color/matrix_color" /> </LinearLayout> <View android:layout_width="fill_parent" android:layout_height="0.5dp" android:background="@color/main_top_color"/> <android.support.v4.view.ViewPager android:id="@+id/vPager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_gravity="center" android:layout_weight="1.0" android:background="@color/white" android:flipInterval="30" android:persistentDrawingCache="animation" /></LinearLayout>其中strings.xml为：
<resources> <string name="app_name">VF</string> <string name="action_settings">Settings</string> <string name="picture">图片</string> <string name="movie">电影</string> <string name="music">音乐</string></resources>dimens.xml为：
<resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> <dimen name="fab_margin">16dp</dimen> <dimen name="top_tab_height">50dp</dimen> <dimen name="main_top_tab_text_size">14sp</dimen> <!--48px--> <dimen name="main_line_height">2.7dp</dimen><!--8px--> <dimen name="main_matrix_width">95dp</dimen> <dimen name="text_size">32sp</dimen></resources>colors.xml为：
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#3F51B5</color> <color name="colorPrimaryDark">#303F9F</color> <color name="colorAccent">#FF4081</color> <color name="transparent">#00000000</color> <color name="main_top_color">#f7614d</color> <color name="main_top_tab_color">#fcc9c5</color> <color name="main_top_tab_color_2">#ffffff</color> <color name="matrix_color">#ffffff</color> <color name="white">#ffffff</color> <color name="red">#FFFF1826</color></resources>MainActivity.java 如下：
package com.android.vf;import android.content.Context;import android.content.pm.ActivityInfo;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.os.Bundle;import android.util.AttributeSet;import android.util.DisplayMetrics;import android.view.KeyEvent;import android.view.View;import android.view.ViewGroup;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.widget.ImageView;import android.widget.TextView;import java.util.ArrayList;/** * 主界面显示，包括图片、电影和音乐三个选项 * @author weizhi * @version 1.0 */public class MainActivity extends FragmentActivity { //图片 private TextView pictureTextView; //电影 private TextView movieTextView; //音乐 private TextView musicTextView; //实现Tab滑动效果 private ViewPager mViewPager; //动画图片 private ImageView cursor; //动画图片偏移量 private int offset = 0; private int position_one; private int position_two; //动画图片宽度 private int bmpW; //当前页卡编号 private int currIndex = 0; //存放Fragment private ArrayList<Fragment> fragmentArrayList; //管理Fragment private FragmentManager fragmentManager; public Context context; public static final String TAG = "MainActivity"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = this; //初始化TextView InitTextView(); //初始化ImageView InitImageView(); //初始化Fragment InitFragment(); //初始化ViewPager InitViewPager(); } @Override public View onCreateView(String name, Context context, AttributeSet attrs) { return super.onCreateView(name, context, attrs); } @Override protected void onResume() { /** * 设置为竖屏 */ if(getRequestedOrientation()!= ActivityInfo.SCREEN_ORIENTATION_PORTRAIT){ setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); } super.onResume(); } /** * 初始化头标 */ private void InitTextView(){ //图片头标 pictureTextView = (TextView)findViewById(R.id.picture_text); //电影头标 movieTextView = (TextView) findViewById(R.id.movie_text); //音乐头标 musicTextView = (TextView)findViewById(R.id.music_text); //添加点击事件 pictureTextView.setOnClickListener(new MyOnClickListener(0)); movieTextView.setOnClickListener(new MyOnClickListener(1)); musicTextView.setOnClickListener(new MyOnClickListener(2)); } /** * 初始化页卡内容区 */ private void InitViewPager() { mViewPager = (ViewPager) findViewById(R.id.vPager); mViewPager.setAdapter(new MFragmentPagerAdapter(fragmentManager, fragmentArrayList)); //让ViewPager缓存2个页面 mViewPager.setOffscreenPageLimit(2); //设置默认打开第一页 mViewPager.setCurrentItem(0); //将顶部文字恢复默认值 resetTextViewTextColor(); pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); //设置viewpager页面滑动监听事件 mViewPager.setOnPageChangeListener(new MyOnPageChangeListener()); } /** * 初始化动画 */ private void InitImageView() { cursor = (ImageView) findViewById(R.id.cursor); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); // 获取分辨率宽度 int screenW = dm.widthPixels; bmpW = (screenW/3); //设置动画图片宽度 setBmpW(cursor, bmpW); offset = 0; //动画图片偏移量赋值 position_one = (int) (screenW / 3.0); position_two = position_one * 2; } /** * 初始化Fragment，并添加到ArrayList中 */ private void InitFragment(){ fragmentArrayList = new ArrayList<Fragment>(); fragmentArrayList.add(new PictureFragment()); fragmentArrayList.add(new MovieFragment()); fragmentArrayList.add(new MusicFragment()); fragmentManager = getSupportFragmentManager(); } /** * 头标点击监听 * @author weizhi * @version 1.0 */ public class MyOnClickListener implements View.OnClickListener{ private int index = 0 ; public MyOnClickListener(int i) { index = i; } @Override public void onClick(View v) { mViewPager.setCurrentItem(index); } } /** * 页卡切换监听 * @author weizhi * @version 1.0 */ public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{ @Override public void onPageSelected(int position) { Animation animation = null ; switch (position){ //当前为页卡1 case 0: //从页卡1跳转转到页卡2 if(currIndex == 1){ animation = new TranslateAnimation(position_one, 0, 0, 0); resetTextViewTextColor(); pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); }else if(currIndex == 2){//从页卡1跳转转到页卡3 animation = new TranslateAnimation(position_two, 0, 0, 0); resetTextViewTextColor(); pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); } break; //当前为页卡2 case 1: //从页卡1跳转转到页卡2 if (currIndex == 0) { animation = new TranslateAnimation(offset, position_one, 0, 0); resetTextViewTextColor(); movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); } else if (currIndex == 2) { //从页卡1跳转转到页卡2 animation = new TranslateAnimation(position_two, position_one, 0, 0); resetTextViewTextColor(); movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); } break; //当前为页卡3 case 2: //从页卡1跳转转到页卡2 if (currIndex == 0) { animation = new TranslateAnimation(offset, position_two, 0, 0); resetTextViewTextColor(); musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); } else if (currIndex == 1) {//从页卡1跳转转到页卡2 animation = new TranslateAnimation(position_one, position_two, 0, 0); resetTextViewTextColor(); musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color_2)); } break; } currIndex = position; animation.setFillAfter(true);// true:图片停在动画结束位置 animation.setDuration(300); cursor.startAnimation(animation); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } }; /** * 设置动画图片宽度 * @param mWidth */ private void setBmpW(ImageView imageView,int mWidth){ ViewGroup.LayoutParams para; para = imageView.getLayoutParams(); para.width = mWidth; imageView.setLayoutParams(para); } /** * 将顶部文字恢复默认值 */ private void resetTextViewTextColor(){ pictureTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color)); movieTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color)); musicTextView.setTextColor(getResources().getColor(R.color.main_top_tab_color)); }}其中用到的适配器MFragmentPagerAdapter.java如下：
package com.android.vf;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.view.ViewGroup;import java.util.ArrayList;/** * Fragment适配器 * @author weizhi * @version 1.0 */public class MFragmentPagerAdapter extends FragmentPagerAdapter { //存放Fragment的数组 private ArrayList<Fragment> fragmentsList; public MFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragmentsList) { super(fm); this.fragmentsList = fragmentsList; } @Override public Fragment getItem(int position) { return fragmentsList.get(position); } @Override public int getCount() { return fragmentsList.size(); } @Override public void destroyItem(ViewGroup container, int position, Object object) { super.destroyItem(container, position, object); }}三个Fragment如下（相同，不一一赘述）：
PictureFragment.java:
package com.android.vf;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class PictureFragment extends Fragment { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_picture, container, false); }}用到的dotshape.xml如下：
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"> <solid android:color="@color/white"/> <stroke android:width="1dp" android:color="@color/red"/> <size android:width="8dp" android:height="8dp"/> </shape>三个Fragment对应的布局文件如下（相同，不一一赘述）：
<FrameLayout 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" > <TextView android:layout_gravity="center" android:layout_width="200dp" android:layout_height="200dp" android:background="@drawable/dotshape"/> <TextView android:gravity="center" android:layout_width="match_parent" android:layout_height="match_parent" android:text="@string/movie" android:textSize="@dimen/text_size" android:textColor="@color/main_top_color"/></FrameLayout>沉浸式效果用到的style如下：
<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar"> <item name="android:colorPrimary">@color/main_top_color</item> <item name="android:statusBarColor">@color/main_top_color</item> <item name="android:colorPrimaryDark">@color/main_top_color</item> </style>源码下载地址：
http://download.csdn.net/detail/wei_zhi/9422590
3 0
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- Android ViewPager加Fragment实现滑动或者点击页面切换
- 使用ViewPager和Fragment同时实现点击底部Tab切换和手势滑动切换Fragment
- Android 使用ViewPager和RadioGroup配合Fragment实现标签页，可点击按钮切换、滑动切换。
- Fragment+ViewPager实现仿微信点击和滑动切换界面
- Android之Fragment+ViewPager实现点击+滑动界面切换学习笔记
- Viewpager和Fragment点击滑动切换
- Android 通过ViewPager实现点击和滑动切换Fragment标签页
- TabLayou+fragment+viewpager实现滑动切换页面
- Viewpager+Fragment实现左右滑动切换页面
- fragment+viewpager+tablayou实现滑动切换页面
- viewpager滑动fragment点击textview切换页面线条滑动效果
- Android之fragment点击切换和滑动切换结合
- Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面
- android使用viewPager和Fragment实现滑动切换activity！
- Fragment点击和滑动切换页面
- 滑动或点击按钮切换页面 ViewPager+RadioGroup+Fragment
- 关于Android SQLite3多线程并发问题，学习笔记。
- 真实感场景绘制（附源码）
- Python subprocess模块总结
- strlen()函数运算符操作与size_t
- MVC3 用Ajax删除数据和无刷新更新数据
- Android之ViewPager+Fragment实现页面点击切换和手势滑动
- Linux下查看CPU信息[/proc/cpuinfo]
- Linux脚本的问题
- FPGA 3-8译码器
- Periscope点赞效果，红心乱飞
- Android总结篇系列：Activity启动模式（lauchMode）
- oracle 10.2.0.1.0下载 for windows 32
- Android 一行显示全部内容的TextView--SingleLineTextView
- 2015年大二上-数据结构-图-1-(5)-迷宫问题之图深度优先遍历解法
