ViewPager And Fragment
1.之前有篇博客是讲ViewPager的用法的：http://www.cnblogs.com/liangstudyhome/p/3773156.html
2.这里用ViewPager+Fragment做个导航界面：
效果图如下：
3.对实现的思路进行一个简单的介绍：
- 上面的导航菜单里面的选项卡的总长度是超过了屏幕的，所以用了一个自定义HorizontalScrollView，在自定义HorizontalScrollView中加了两个箭头的图片根据滚动的位置来显示箭头（用的方法是onScrollChanged）
- 自定义HorizontalScrollView定义好以后，往里面添加选项卡，用的方法是忘RadioGroup里面添加没有button的RadioButton,每个RadioButton的宽度是屏幕宽度的1/4
- 然后把导航的ImageView相关参数设置好后，添加动画效果(导航ImageView的每次移动到第N个RadioButton 下面,通过该RadioButton的getleft()直接获取到移动到的距离)
- 当移动到选项卡4的时候要将自定义的HorizontalScrollView也要跟随滑动(滑动的时候用的函数smoothScrollTo，用ScrollTo没有效果的)，移动的距离就是一个RadioButton的宽度
4.相关代码：
自定义HorizontalScrollView：
1 public class SyncHorizontalScrollView extends HorizontalScrollView {
2
3 private View view;
4 private ImageView leftImage;
5 private ImageView rightImage;
6 private int windowWitdh = 0;
7 private Activity mContext;
8
9 public void setSomeParam(View view, ImageView leftImage,
10 ImageView rightImage, Activity context) {
11 this.mContext = context;
12 this.view = view;
13 this.leftImage = leftImage;
14 this.rightImage = rightImage;
15 DisplayMetrics dm = new DisplayMetrics();
16 this.mContext.getWindowManager().getDefaultDisplay().getMetrics(dm);
17 windowWitdh = dm.widthPixels;
18 }
19
20 public SyncHorizontalScrollView(Context context) {
21 super(context);
22 // TODO Auto-generated constructor stub
23 }
24
25 public SyncHorizontalScrollView(Context context, AttributeSet attrs) {
26 super(context, attrs);
27 // TODO Auto-generated constructor stub
28 }
29
30 // 显示和隐藏左右两边的箭头
31 // public void showAndHideArrow() {
32 // if (!mContext.isFinishing() && view != null) {
33 // this.measure(0, 0);
34 // if (windowWitdh >= this.getMeasuredWidth()) {
35 // leftImage.setVisibility(View.GONE);
36 // rightImage.setVisibility(View.GONE);
37 // } else {
38 // if (this.getLeft() == 0) {
39 // leftImage.setVisibility(View.GONE);
40 // rightImage.setVisibility(View.VISIBLE);
41 // } else if (this.getRight() == 0) {
42 // leftImage.setVisibility(View.VISIBLE);
43 // rightImage.setVisibility(View.GONE);
44 // } else {
45 // leftImage.setVisibility(View.VISIBLE);
46 // rightImage.setVisibility(View.VISIBLE);
47 // }
48 // }
49 // }
50 // }
51
52 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
53 super.onScrollChanged(l, t, oldl, oldt);
54 if (!mContext.isFinishing() && view != null && rightImage != null
55 && leftImage != null) {
56 if (view.getWidth() <= windowWitdh) {
57 leftImage.setVisibility(View.GONE);
58 rightImage.setVisibility(View.GONE);
59 } else {
60 if (l == 0) {
61 leftImage.setVisibility(View.GONE);
62 rightImage.setVisibility(View.VISIBLE);
63 } else if (view.getWidth() - l == windowWitdh) {
64 leftImage.setVisibility(View.VISIBLE);
65 rightImage.setVisibility(View.GONE);
66 } else {
67 leftImage.setVisibility(View.VISIBLE);
68 rightImage.setVisibility(View.VISIBLE);
69 }
70 }
71 }
72 }
73 }
LaunchUIFragment：
1 public class LaunchUIFragment extends Fragment {
2
3 @Override
4 public View onCreateView(LayoutInflater inflater, ViewGroup container,
5 Bundle savedInstanceState) {
6
7 View rootView = inflater.inflate(R.layout.fragment_selection_launch, container, false);
8
9 return rootView;
10 }
11 @Override
12 public void onActivityCreated(Bundle savedInstanceState) {
13 super.onActivityCreated(savedInstanceState);
14 }
15
16 }
fragment_selection_launch.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView android:id="@+id/tv_intro" 8 android:layout_width="300dp" 9 android:layout_height="wrap_content" 10 android:layout_marginTop="20dp" 11 android:layout_marginBottom="16dp" 12 android:text="@string/launch_intro"/> 13 14 <Button android:id="@+id/bt_click" 15 android:layout_width="300dp" 16 android:layout_height="wrap_content" 17 android:layout_marginBottom="16dp" 18 android:text="@string/launch_click_me"/> 19 20 </LinearLayout>
CommonUIFragment：
1 public class CommonUIFragment extends Fragment {
2
3 @SuppressLint("NewApi")
4 @Override
5 public View onCreateView(LayoutInflater inflater, ViewGroup container,
6 Bundle savedInstanceState) {
7
8 View rootView = inflater.inflate(R.layout.fragment_selection_common, container, false);
9
10 TextView tv_tabName = (TextView) rootView.findViewById(R.id.tv_tabName);
11
12 Bundle bundle = getArguments();
13
14 tv_tabName.setText(bundle.getString(MainActivity.ARGUMENTS_NAME, ""));
15
16 return rootView;
17 }
18 @Override
19 public void onActivityCreated(Bundle savedInstanceState) {
20 super.onActivityCreated(savedInstanceState);
21 }
22
23 }
fragment_selection_common.xml:
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:layout_width="300dp" 9 android:layout_height="wrap_content" 10 android:textSize="18sp" 11 android:text="@string/common_intro" 12 /> 13 14 <TextView 15 android:id="@+id/tv_tabName" 16 android:layout_marginTop="30dp" 17 android:layout_width="wrap_content" 18 android:layout_height="30dp" 19 android:layout_gravity="center" 20 android:textSize="20sp" 21 /> 22 23 </LinearLayout>
rb_blue_bg.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 3 4 <item android:state_checked="true" android:color="#5AB0EB"/> 5 <item android:state_checked="false" android:color="#000000"/> 6 7 </selector>
MainActivity.xml:
1 public class MainActivity extends FragmentActivity {
2
3 public static final String ARGUMENTS_NAME = "arg";
4 private RelativeLayout rl_nav;
5 private SyncHorizontalScrollView mHsv;
6 private RadioGroup rg_nav_content;
7 private ImageView iv_nav_indicator;
8 private ImageView iv_nav_left;
9 private ImageView iv_nav_right;
10 private ViewPager mViewPager;
11 private int indicatorWidth;
12 public static String[] tabTitle = { "选项1", "选项2", "选项3", "选项4", "选项5" }; //标题
13 private LayoutInflater mInflater;
14 private TabFragmentPagerAdapter mAdapter;
15 private int currentIndicatorLeft = 0;
16
17 @Override
18 protected void onCreate(Bundle savedInstanceState) {
19 super.onCreate(savedInstanceState);
20 setContentView(R.layout.activity_main);
21
22 findViewById();
23 initView();
24 setListener();
25 }
26
27 private void setListener() {
28
29 mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
30
31 @Override
32 public void onPageSelected(int position) {
33
34 if(rg_nav_content!=null && rg_nav_content.getChildCount()>position){
35 ((RadioButton)rg_nav_content.getChildAt(position)).performClick();
36 }
37 }
38
39 @Override
40 public void onPageScrolled(int arg0, float arg1, int arg2) {
41
42 }
43
44 @Override
45 public void onPageScrollStateChanged(int arg0) {
46
47 }
48 });
49
50 rg_nav_content.setOnCheckedChangeListener(new OnCheckedChangeListener() {
51
52 @Override
53 public void onCheckedChanged(RadioGroup group, int checkedId) {
54
55 if(rg_nav_content.getChildAt(checkedId)!=null){
56
57 TranslateAnimation animation = new TranslateAnimation(
58 currentIndicatorLeft ,
59 ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft(), 0f, 0f);
60 animation.setInterpolator(new LinearInterpolator());
61 animation.setDuration(100);
62 animation.setFillAfter(true);
63
64 //执行位移动画
65 iv_nav_indicator.startAnimation(animation);
66
67 mViewPager.setCurrentItem(checkedId); //ViewPager 跟随一起 切换
68
69 //记录当前 下标的距最左侧的 距离
70 currentIndicatorLeft = ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft();
71
72 mHsv.smoothScrollTo(
73 (checkedId > 1 ? ((RadioButton) rg_nav_content.getChildAt(checkedId)).getLeft() : 0) - ((RadioButton) rg_nav_content.getChildAt(2)).getLeft(), 0);
74 }
75 }
76 });
77 }
78
79 private void initView() {
80
81 DisplayMetrics dm = new DisplayMetrics();
82 getWindowManager().getDefaultDisplay().getMetrics(dm);
83
84 indicatorWidth = dm.widthPixels / 4;
85
86 LayoutParams cursor_Params = iv_nav_indicator.getLayoutParams();
87 cursor_Params.width = indicatorWidth;// 初始化滑动下标的宽
88 iv_nav_indicator.setLayoutParams(cursor_Params);
89 mHsv.setSomeParam(rl_nav, iv_nav_left, iv_nav_right, this);
90
91 //获取布局填充器
92 mInflater = (LayoutInflater)this.getSystemService(LAYOUT_INFLATER_SERVICE);
93
94 //另一种方式获取
95 // LayoutInflater mInflater = LayoutInflater.from(this);
96
97 initNavigationHSV();
98
99 mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());
100 mViewPager.setAdapter(mAdapter);
101 }
102
103 private void initNavigationHSV() {
104
105 rg_nav_content.removeAllViews();
106
107 for(int i=0;i<tabTitle.length;i++){
108
109 RadioButton rb = (RadioButton) mInflater.inflate(R.layout.nav_radiogroup_item, null);
110 rb.setId(i);
111 rb.setText(tabTitle[i]);
112 rb.setLayoutParams(new LayoutParams(indicatorWidth,
113 LayoutParams.MATCH_PARENT));
114
115 rg_nav_content.addView(rb);
116 }
117
118 }
119
120 private void findViewById() {
121
122 rl_nav = (RelativeLayout) findViewById(R.id.rl_nav);
123
124 mHsv = (SyncHorizontalScrollView) findViewById(R.id.mHsv);
125
126 rg_nav_content = (RadioGroup) findViewById(R.id.rg_nav_content);
127
128 iv_nav_indicator = (ImageView) findViewById(R.id.iv_nav_indicator);
129 iv_nav_left = (ImageView) findViewById(R.id.iv_nav_left);
130 iv_nav_right = (ImageView) findViewById(R.id.iv_nav_right);
131
132 mViewPager = (ViewPager) findViewById(R.id.mViewPager);
133 }
134
135 @Override
136 public boolean onCreateOptionsMenu(Menu menu) {
137 getMenuInflater().inflate(R.menu.main, menu);
138 return true;
139 }
140
141 public static class TabFragmentPagerAdapter extends FragmentPagerAdapter{
142
143 public TabFragmentPagerAdapter(FragmentManager fm) {
144 super(fm);
145 }
146
147 @Override
148 public Fragment getItem(int arg0) {
149 Fragment ft = null;
150 switch (arg0) {
151 case 0:
152 ft = new LaunchUIFragment();
153 break;
154
155 default:
156 ft = new CommonUIFragment();
157
158 Bundle args = new Bundle();
159 args.putString(ARGUMENTS_NAME, tabTitle[arg0]);
160 ft.setArguments(args);
161
162 break;
163 }
164 return ft;
165 }
166
167 @Override
168 public int getCount() {
169
170 return tabTitle.length;
171 }
172
173 }
174
175 }
activity_main.xml
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 tools:context=".MainActivity" > 6 7 <RelativeLayout 8 android:id="@+id/rl_tab" 9 android:layout_width="fill_parent" 10 android:layout_height="wrap_content" 11 android:background="#F2F2F2" > 12 13 <com.example.playtabtest.view.SyncHorizontalScrollView 14 android:id="@+id/mHsv" 15 android:layout_width="fill_parent" 16 android:layout_height="40dip" 17 android:fadingEdge="none" 18 android:scrollbars="none" 19 > 20 21 <RelativeLayout 22 android:id="@+id/rl_nav" 23 android:layout_width="fill_parent" 24 android:layout_height="wrap_content" 25 android:layout_gravity="top" 26 android:background="#5AB0EB" > 27 28 <RadioGroup 29 android:id="@+id/rg_nav_content" 30 android:layout_width="fill_parent" 31 android:layout_height="38dip" 32 android:layout_alignParentTop="true" 33 android:background="#F2F2F2" 34 android:orientation="horizontal" > 35 </RadioGroup> 36 37 <ImageView 38 android:id="@+id/iv_nav_indicator" 39 android:layout_width="1dip" 40 android:layout_height="5dip" 41 android:layout_alignParentBottom="true" 42 android:background="#5AB0EB" 43 android:contentDescription="@string/nav_desc" 44 android:scaleType="matrix" /> 45 </RelativeLayout> 46 </com.example.playtabtest.view.SyncHorizontalScrollView> 47 48 <ImageView 49 android:id="@+id/iv_nav_left" 50 android:layout_width="wrap_content" 51 android:layout_height="wrap_content" 52 android:layout_alignParentLeft="true" 53 android:layout_centerVertical="true" 54 android:contentDescription="@string/nav_desc" 55 android:paddingBottom="1dip" 56 android:src="@drawable/iv_navagation_scroll_left" 57 android:visibility="gone" > 58 </ImageView> 59 60 <ImageView 61 android:id="@+id/iv_nav_right" 62 android:layout_width="wrap_content" 63 android:layout_height="wrap_content" 64 android:layout_alignParentRight="true" 65 android:layout_centerVertical="true" 66 android:contentDescription="@string/nav_desc" 67 android:paddingBottom="1dip" 68 android:src="@drawable/iv_navagation_scroll_right" 69 android:visibility="visible" > 70 </ImageView> 71 </RelativeLayout> 72 73 <android.support.v4.view.ViewPager 74 android:id="@+id/mViewPager" 75 android:layout_width="wrap_content" 76 android:layout_height="wrap_content" 77 android:layout_alignParentBottom="true" 78 android:layout_below="@id/rl_tab" 79 android:layout_gravity="center" 80 android:background="#ffffff" 81 android:flipInterval="30" 82 android:persistentDrawingCache="animation" /> 83 84 </RelativeLayout>
源码下载：下载
时间： 2024-10-12 21:00:18