ViewPager+Fragment的用法在android开发中比较常见,最近刚好要实现这个功能,写个笔记记录下来,以供参考。
1.activity_main.xml
activity_main.xml文件中包含了3个TextView页面标签,分别代表着3个不同的页面,下面有个ImageView标签是能在每个标签下滑动的滚动条。
<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:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:orientation="horizontal" >
<TextView
android:id="@+id/tv_message"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="消息"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_contact"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="联系人"
android:textSize="18sp" />
<TextView
android:id="@+id/tv_dynimic"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1.0"
android:gravity="center"
android:text="动态"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="@+id/cursor"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:scaleType="fitXY"
android:src="@drawable/ic_blue_bg_i" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:flipInterval="30"
android:persistentDrawingCache="animation" />
</LinearLayout>
2.MainActivity.java
MainActivity是主程序部分。
package com.example.viewpagerfragmenttest;
import java.util.ArrayList;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
/**
* 程序的主Activity
* @author xielip 2015-9-21
*
*/
public class MainActivity extends FragmentActivity {
private ViewPager mPager;
private ImageView mTabLineIv;
private TextView tvMessage, tvCantact, tvDinamic;
private ArrayList<Fragment> fragmentList;
private int currIndex;// 当前选项卡编号
private int bmpW;// 选项卡下方指示器的宽度
private int screenWidth; // 屏幕的宽度
private int offset;// 图片移动的偏移量
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
InitTextView();
InitImage();
initTabLineWidth();
InitViewPager();
}
public void InitTextView() {
tvMessage = (TextView) findViewById(R.id.tv_message);
tvCantact = (TextView) findViewById(R.id.tv_contact);
tvDinamic = (TextView) findViewById(R.id.tv_dynimic);
// 为3个选项卡绑定监听事件,参数就代表哪个选项卡
tvMessage.setOnClickListener(new tvOnclickListener(0));
tvCantact.setOnClickListener(new tvOnclickListener(1));
tvDinamic.setOnClickListener(new tvOnclickListener(2));
}
/**
* 选项卡的点击事件,tab切换
* @author xieli
*
*/
public class tvOnclickListener implements View.OnClickListener {
private int index = 0;
public tvOnclickListener(int i) {
index = i;
}
@Override
public void onClick(View v) {
// 设置viewpager当前的页面
mPager.setCurrentItem(index);
}
}
/**
* 初始化图片的位移像素,例如:有3个tab,页面就滑动总共3个位置
*/
public void InitImage() {
mTabLineIv = (ImageView) findViewById(R.id.cursor);
bmpW = BitmapFactory.decodeResource(getResources(),
R.drawable.ic_blue_bg_i).getWidth();
DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);
int screenW = dm.widthPixels;
offset = (screenW / 3 - bmpW) / 2; // 3,代表有3个选项卡,滑动时,下方指示器一共有3个位置
// imgageview设置平移,使下划线平移到初始位置(平移一个offset)
Matrix matrix = new Matrix();
matrix.postTranslate(offset, 0);
mTabLineIv.setImageMatrix(matrix);
}
/**
* 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)
*/
private void initTabLineWidth() {
DisplayMetrics dpMetrics = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay().getMetrics(dpMetrics);
screenWidth = dpMetrics.widthPixels;
LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv.getLayoutParams();
lp.width = screenWidth / 3;
mTabLineIv.setLayoutParams(lp);
}
/**
* 初始化ViewPager
*/
@SuppressWarnings("deprecation")
public void InitViewPager() {
mPager = (ViewPager) findViewById(R.id.viewpager);
fragmentList = new ArrayList<Fragment>();
Fragment messageFragment = new MessageFragment();
Fragment contactFragment = new ContactFragment();
Fragment dynamicFragment = new DynamicFragment();
// Fragment secondFragment = TestFragment.newInstance("this is second fragment");
// Fragment thirdFragment = TestFragment.newInstance("this is third fragment");
fragmentList.add(messageFragment);
fragmentList.add(contactFragment);
fragmentList.add(dynamicFragment);
// 给ViewPager设置适配器
mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));
mPager.setCurrentItem(0);// 设置当前显示标签页为第一页
mPager.setOnPageChangeListener(new MyOnPageChangeListener());// 页面变化时的监听器
}
/**
* viewpager滑动时的监听器
* @author xieli
*
*/
public class MyOnPageChangeListener implements OnPageChangeListener {
private int one = offset * 2 + bmpW;// 两个相邻页面的偏移量
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
Animation animation = new TranslateAnimation(currIndex * one, position * one, 0, 0);// 平移动画
currIndex = position;
animation.setFillAfter(true);// 动画终止时停留在最后一帧,不然会回到没有执行前的状态
animation.setDuration(200);// 动画持续时间0.2秒
mTabLineIv.startAnimation(animation);// 是用ImageView来显示动画的
// int i = currIndex + 1;
reSetTextViewColor();
switch (position) {
case 0:
break;
case 1:
break;
case 2:
break;
default:
break;
}
}
}
public void reSetTextViewColor(){
tvMessage.setTextColor(Color.BLACK);
tvCantact.setTextColor(Color.BLACK);
tvDinamic.setTextColor(Color.BLACK);
}
}
3.MyFragmentPagerAdapter.java
实例化Fragment的适配器。
package com.example.viewpagerfragmenttest;
import java.util.ArrayList;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter {
ArrayList<Fragment> list;
public MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
}
4.MessageFragment.java
3个Fragment页面中的一个,其他2个Fragment代码一样。
package com.example.viewpagerfragmenttest;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class MessageFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_message, container, false);
return rootView;
}
}
5.fragment_message.xml
MessageFragment 的视图。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="消息" />
</RelativeLayout>
总体来说,使用起来还是比较简单的,开发中也很常见。
源码连接:http://download.csdn.net/detail/u011387921/9140217