参考:慕课网《Android攻城狮的第二门课》和 博客园博客:
该Activity采用了fragment作为数据源的ViewPager和自定义的title。现在开始实现该Activity:
1.在layout中添加控件,两个TextView用作头标,一个ImageView当做滑动条,再添加一个ViewPager控件。
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:orientation="vertical" android:layout_width="match_parent" 4 android:layout_height="match_parent"> 5 <LinearLayout 6 android:id="@+id/linearLayout1" 7 android:layout_width="fill_parent" 8 android:layout_height="30dp" 9 android:background="#FFFFFF" > 10 11 <TextView 12 android:id="@+id/text1" 13 android:layout_width="fill_parent" 14 android:layout_height="wrap_content" 15 android:layout_weight="1.0" 16 android:gravity="center" 17 android:text="机房信息查询" 18 android:textColor="#000000" 19 android:textSize="22.0dip" /> 20 21 <TextView 22 android:id="@+id/text2" 23 android:layout_width="fill_parent" 24 android:layout_height="wrap_content" 25 android:layout_weight="1.0" 26 android:gravity="center" 27 android:text="页卡2" 28 android:textColor="#000000" 29 android:textSize="22.0dip" /> 30 </LinearLayout> 31 <ImageView 32 android:id="@+id/cursor" 33 android:layout_width="fill_parent" 34 android:layout_height="wrap_content" 35 android:scaleType="matrix" 36 android:src="@drawable/title_indicator" /> 37 38 <android.support.v4.view.ViewPager 39 android:id="@+id/stuPager" 40 android:layout_width="wrap_content" 41 android:layout_height="wrap_content" 42 android:layout_gravity="center"> 43 </android.support.v4.view.ViewPager> 44 45 </LinearLayout>
2.提取从LoginActivity中传来的值
1 /** 2 * 上个页面传递过来的值 3 */ 4 private int OldPagerNum(){ 5 oldpager = getIntent(); 6 return oldpager.getIntExtra("Authorization", 0); 7 }
3.初始化头标textview,在这里我们给每个头标定义了一个点击事件,点击头标切换fragment
1 /** 2 * 初始化头标 3 */ 4 private void InitTextView() { 5 t1 = (TextView) findViewById(R.id.text1); 6 t2 = (TextView) findViewById(R.id.text2); 7 t1.setBackgroundColor(Color.RED); 8 t2.setBackgroundColor(Color.GREEN); 9 10 t1.setOnClickListener(new MyOnClickListener(0)); 11 t2.setOnClickListener(new MyOnClickListener(1)); 12 }
点击事件的实现
1 /** 2 * 头标点击监听 3 */ 4 public class MyOnClickListener implements View.OnClickListener { 5 private int index = 0;//页面索引 6 7 public MyOnClickListener(int i) { 8 index = i; 9 } 10 //切换到对应页面 11 @Override 12 public void onClick(View v) { 13 pager.setCurrentItem(index); 14 } 15 }
4.初始化动画
1 /**
2 * 初始化动画
3 */
4 private void InitImageView() {
5 cursor = (ImageView) findViewById(R.id.cursor);
6 bmpWidth = BitmapFactory.decodeResource(getResources(), R.drawable.title_indicator)
7 .getWidth();// 获取图片宽度
8 DisplayMetrics dm = new DisplayMetrics();
9 getWindowManager().getDefaultDisplay().getMetrics(dm);
10 int screenW = dm.widthPixels;// 获取分辨率宽度
11 offset = (screenW / 2 - bmpWidth) / 2;// 计算偏移量
12 Matrix matrix = new Matrix();
13 matrix.postTranslate(offset, 0);
14 cursor.setImageMatrix(matrix);// 设置动画初始位置
15 }
5.初始化ViewPager
1 /** 2 * 初始化ViewPager 3 */ 4 private void InitViewPager(int num) { 5 pager = (ViewPager) findViewById(R.id.stuPager); 6 fragtList = new ArrayList<Fragment>(); 7 //把LoginActivity传来的值传给所有的fragment 8 Bundle bundle = new Bundle(); 9 bundle.putInt("Authorization", num); 10 machineInquiryActivity = new MachineInquiryActivity(); 11 machineInquiryActivity.setArguments(bundle); 12 fragtList.add(machineInquiryActivity); 13 if (num == 0) { 14 stuInfoActivity = new StuInfoActivity(); 15 stuInfoActivity.setArguments(bundle); 16 fragtList.add(stuInfoActivity); 17 t2.setText("用户信息"); 18 }else{ 19 stuInquiryActivity = new StuInquiryActivity(); 20 stuInquiryActivity.setArguments(bundle); 21 fragtList.add(stuInquiryActivity); 22 t2.setText("学生信息查询"); 23 } 24 //fragment适配器 25 MyFragmentPagerAdapter adapterFrag = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragtList); 26 pager.setAdapter(adapterFrag); 27 pager.setCurrentItem(0); 28 //换页监听器,改变ImageView位置 29 pager.addOnPageChangeListener(new MyOnPageChangeListener(offset, bmpWidth, cursor)); 30 }
Fragment适配器
1 package com.example.wanderingzj.stumanage; 2 3 import android.support.v4.app.Fragment; 4 import android.support.v4.app.FragmentManager; 5 import android.support.v4.app.FragmentStatePagerAdapter; 6 import android.view.ViewGroup; 7 8 import java.util.List; 9 10 /** 11 * Created by samsung on 2015/10/28. 12 */ 13 public class MyFragmentPagerAdapter extends FragmentStatePagerAdapter { 14 private List<Fragment> fragList; 15 16 public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragList){ 17 super(fm); 18 this.fragList = fragList; 19 } 20 21 @Override 22 public Fragment getItem(int position) { 23 return fragList.get(position); 24 } 25 26 @Override 27 public int getCount() { 28 return fragList.size(); 29 } 30 31 @Override 32 public Object instantiateItem(ViewGroup container, int position) { 33 return super.instantiateItem(container, position); 34 } 35 36 @Override 37 public void destroyItem(ViewGroup container, int position, Object object) { 38 super.destroyItem(container, position, object); 39 } 40 }
OnPageChangeListener类的实现,关于TranslateAnimation(float fromXDelta, float toXDelta,
float fromYDelta, float toYDelta)
第一个参数fromXDelta为动画起始时 X坐标上的移动位置
第二个参数toXDelta为动画结束时 X坐标上的移动位置
第三个参数fromYDelta为动画起始时Y坐标上的移动位置
第四个参数toYDelta为动画结束时Y坐标上的移动位置
1 package com.example.wanderingzj.stumanage; 2 3 import android.support.v4.view.ViewPager.OnPageChangeListener; 4 import android.view.animation.Animation; 5 import android.view.animation.TranslateAnimation; 6 import android.widget.ImageView; 7 8 /** 9 * Created by samsung on 2015/11/3. 10 */ 11 public class MyOnPageChangeListener implements OnPageChangeListener { 12 private int page1_offset, currIndex, page0_offset;//page0偏移量,当前页卡编号,page1偏移量 13 private ImageView cursor;//滑动条图片 14 15 16 public MyOnPageChangeListener(int offset, int bmpWidth, ImageView cursor){ 17 currIndex = 0; 18 this.cursor = cursor; 19 this.page0_offset = offset; 20 page1_offset = offset * 2 + bmpWidth;//滑动条图片宽度 21 } 22 23 @Override 24 public void onPageSelected(int arg0) { 25 Animation animation = null; 26 switch (arg0) { 27 case 0: 28 if (currIndex == 1) { 29 animation = new TranslateAnimation(page1_offset, page0_offset, 0, 0); 30 } 31 break; 32 case 1: 33 if (currIndex == 0) { 34 animation = new TranslateAnimation(page0_offset, page1_offset, 0, 0); 35 } 36 break; 37 } 38 currIndex = arg0; 39 animation.setFillAfter(true);// True:图片停在动画结束位置 40 animation.setDuration(300); 41 cursor.startAnimation(animation); 42 } 43 44 @Override 45 public void onPageScrolled(int arg0, float arg1, int arg2) { 46 } 47 48 @Override 49 public void onPageScrollStateChanged(int arg0) { 50 } 51 }
完整代码:
1 package com.example.wanderingzj.stumanage; 2 3 import android.app.Activity; 4 import android.content.Intent; 5 import android.graphics.BitmapFactory; 6 import android.graphics.Color; 7 8 import android.graphics.Matrix; 9 import android.os.Bundle; 10 import android.support.v4.app.Fragment; 11 import android.support.v4.app.FragmentActivity; 12 import android.support.v4.view.ViewPager.OnPageChangeListener; 13 import android.support.v4.view.ViewPager; 14 import android.util.DisplayMetrics; 15 import android.view.View; 16 import android.view.animation.Animation; 17 import android.view.animation.TranslateAnimation; 18 import android.widget.ImageView; 19 import android.widget.TextView; 20 21 import java.util.ArrayList; 22 import java.util.List; 23 24 25 /** 26 * Created by samsung on 2015/10/28. 27 */ 28 public class NaviActivity extends FragmentActivity{ 29 private ViewPager pager; 30 private Intent oldpager; 31 private List<Fragment> fragtList; 32 private StuInfoActivity stuInfoActivity; 33 private StuInquiryActivity stuInquiryActivity; 34 private MachineInquiryActivity machineInquiryActivity; 35 private TextView t1, t2;// 页卡头标 36 private int num; 37 private ImageView cursor;// 动画图片 38 private int offset = 0;// 动画图片偏移量 39 private int bmpWidth;// 动画图片宽度 40 41 @Override 42 protected void onCreate(Bundle savedInstanceState) { 43 super.onCreate(savedInstanceState); 44 setContentView(R.layout.activity_navi); 45 num = OldPagerNum(); 46 InitTextView(); 47 InitImageView(); 48 InitViewPager(num); 49 } 50 51 /** 52 * 初始化头标 53 */ 54 private void InitTextView() { 55 t1 = (TextView) findViewById(R.id.text1); 56 t2 = (TextView) findViewById(R.id.text2); 57 t1.setBackgroundColor(Color.RED); 58 t2.setBackgroundColor(Color.GREEN); 59 60 t1.setOnClickListener(new MyOnClickListener(0)); 61 t2.setOnClickListener(new MyOnClickListener(1)); 62 } 63 64 /** 65 * 头标点击监听 66 */ 67 public class MyOnClickListener implements View.OnClickListener { 68 private int index = 0; 69 70 public MyOnClickListener(int i) { 71 index = i; 72 } 73 74 @Override 75 public void onClick(View v) { 76 pager.setCurrentItem(index); 77 } 78 } 79 80 /** 81 * 初始化ViewPager 82 */ 83 private void InitViewPager(int num) { 84 pager = (ViewPager) findViewById(R.id.stuPager); 85 fragtList = new ArrayList<Fragment>(); 86 //把LoginActivity传来的值传给所有的fragment 87 Bundle bundle = new Bundle(); 88 bundle.putInt("Authorization", num); 89 machineInquiryActivity = new MachineInquiryActivity(); 90 machineInquiryActivity.setArguments(bundle); 91 fragtList.add(machineInquiryActivity); 92 if (num == 0) { 93 stuInfoActivity = new StuInfoActivity(); 94 stuInfoActivity.setArguments(bundle); 95 fragtList.add(stuInfoActivity); 96 t2.setText("用户信息"); 97 }else{ 98 stuInquiryActivity = new StuInquiryActivity(); 99 stuInquiryActivity.setArguments(bundle); 100 fragtList.add(stuInquiryActivity); 101 t2.setText("学生信息查询"); 102 } 103 //fragment适配器 104 MyFragmentPagerAdapter adapterFrag = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragtList); 105 pager.setAdapter(adapterFrag); 106 pager.setCurrentItem(0); 107 //换页监听器,改变ImageView位置 108 pager.addOnPageChangeListener(new MyOnPageChangeListener(offset, bmpWidth, cursor)); 109 } 110 111 /** 112 * 上个页面传递过来的值 113 */ 114 private int OldPagerNum(){ 115 oldpager = getIntent(); 116 return oldpager.getIntExtra("Authorization", 0); 117 } 118 119 /** 120 * 初始化动画 121 */ 122 private void InitImageView() { 123 cursor = (ImageView) findViewById(R.id.cursor); 124 bmpWidth = BitmapFactory.decodeResource(getResources(), R.drawable.title_indicator) 125 .getWidth();// 获取图片宽度 126 DisplayMetrics dm = new DisplayMetrics(); 127 getWindowManager().getDefaultDisplay().getMetrics(dm); 128 int screenW = dm.widthPixels;// 获取分辨率宽度 129 offset = (screenW / 2 - bmpWidth) / 2;// 计算偏移量 130 Matrix matrix = new Matrix(); 131 matrix.postTranslate(offset, 0); 132 cursor.setImageMatrix(matrix);// 设置动画初始位置 133 } 134 }