0
点赞
收藏
分享

微信扫一扫

ViewPager的实现:通过HorizontalScrollView


我们可以发现,在一些新闻客户端的标题栏中,它们会有很多标题,而这些标题都是可以滑动的,这种效果的实现使用

的就是HorizontalScrollView,我们通过向HorizontalScrollView包含的LinearLayout中动态添加标题,这样无论我们添加

多少标题,它都是可以滑动的。

activity_main.xml:


1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2. android:layout_width="match_parent"  
3. android:layout_height="match_parent"  
4. android:orientation="vertical" >  
5.   
6. <!-- android:scrollbars="none"去除滚动条 -->  
7. <HorizontalScrollView  
8. android:id="@+id/horizontalScrollView_main"  
9. android:layout_width="wrap_content"  
10. android:layout_height="wrap_content"  
11. android:scrollbars="none" >  
12.   
13. <LinearLayout  
14. android:id="@+id/layout_container"  
15. android:layout_width="wrap_content"  
16. android:layout_height="match_parent"  
17. android:orientation="horizontal" >  
18. </LinearLayout>  
19. </HorizontalScrollView>  
20.   
21. <TextView  
22. android:id="@+id/textView1"  
23. android:layout_width="match_parent"  
24. android:layout_height="1dp"  
25. android:background="#0373b4" />  
26.   
27. <android.support.v4.view.ViewPager  
28. android:id="@+id/viewPager_main"  
29. android:layout_width="match_parent"  
30. android:layout_height="match_parent" />  
31.   
32. </LinearLayout>


数组资源:


1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3.   
4. <string-array name="arrTabTitles">  
5. <item>要闻</item>  
6. <item>视频</item>  
7. <item>娱乐</item>  
8. <item>体育</item>  
9. <item>财经</item>  
10. <item>科技</item>  
11. <item>社会</item>  
12. <item>军事</item>  
13. <item>游戏</item>  
14. </string-array>  
15.   
16. </resources>



选择器selector:



1. <?xml version="1.0" encoding="utf-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.   
4. <item android:drawable="@drawable/bg_tab" android:state_enabled="false"/>  
5. <item android:drawable="@android:color/white" android:state_enabled="true"/>  
6.   
7.     <!--  
8. android:state_pressed=""  
9. android:state_enabled=""  
10. android:state_checked=""  
11. android:state_activated=""这个属性常常用于ListView的item的背景设置中。如果使用这个属性,那么ListView要设置选择模式  
12.     listView.setChoiceMode();  
13.   
14. >  
15. </selector>


MainActivity:


1. package com.steven.fragmentviewpagerscrollview;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.graphics.Color;  
7. import android.os.Bundle;  
8. import android.support.v4.app.Fragment;  
9. import android.support.v4.app.FragmentActivity;  
10. import android.support.v4.app.FragmentManager;  
11. import android.support.v4.app.FragmentPagerAdapter;  
12. import android.support.v4.view.ViewPager;  
13. import android.support.v4.view.ViewPager.OnPageChangeListener;  
14. import android.view.Gravity;  
15. import android.view.View;  
16. import android.view.View.OnClickListener;  
17. import android.widget.HorizontalScrollView;  
18. import android.widget.LinearLayout;  
19. import android.widget.LinearLayout.LayoutParams;  
20. import android.widget.TextView;  
21.   
22. public class MainActivity extends FragmentActivity {  
23. private ViewPager viewPager_main;  
24. private HorizontalScrollView horizontalScrollView_main;  
25. private LinearLayout layout_container;  
26. private String[] arrTitleNames = null;  
27. private TextView[] arrTextView = null;  
28. private List<Fragment> totalList = new ArrayList<Fragment>();  
29.   
30. @Override  
31. protected void onCreate(Bundle savedInstanceState) {  
32. super.onCreate(savedInstanceState);  
33.         setContentView(R.layout.activity_main);  
34. // 初始化书签选项卡  
35.         initTabs();  
36. // 初始化ViewPager  
37.         initViewPager();  
38.     }  
39.   
40. /**
41.      * 初始化标签
42.      */  
43. private void initTabs() {  
44. //获取HorizontalScrollView的id  
45.         horizontalScrollView_main = (HorizontalScrollView) findViewById(R.id.horizontalScrollView_main);  
46. //获取LinearLayout的id  
47.         layout_container = (LinearLayout) findViewById(R.id.layout_container);  
48. //获取定义的数组资源文件  
49.         arrTitleNames = getResources().getStringArray(R.array.arrTabTitles);  
50. //通过定义的数组资源文件给TextView数组初始化长度  
51. new TextView[arrTitleNames.length];  
52. for (int i = 0; i < arrTextView.length; i++) {  
53. // 创建TextView对象  
54. new TextView(this);  
55. // 把资源数组中的数据设置给TextView显示  
56.             textView.setText(arrTitleNames[i]);  
57. // 设置TextView的宽度和高度,都是包裹内容  
58. new LayoutParams(LayoutParams.WRAP_CONTENT,  
59.                     LayoutParams.WRAP_CONTENT);  
60. // 把宽度和高度设置给TextView  
61.             textView.setLayoutParams(params);  
62. // 设置TextView的位置  
63.             textView.setGravity(Gravity.CENTER);  
64. // 设置TextView的内边距  
65. 10, 10, 10, 10);  
66. // 给TextView设置选择器,实现TextView在选中和未选中时显示不同的图片资源  
67.             textView.setBackgroundResource(R.drawable.bg_textview);  
68. // 让所有的书签都能被点击  
69. true);  
70. // 设置字体大小  
71. 16);  
72. // 设置字体颜色  
73.             textView.setTextColor(Color.BLACK);  
74. // 把TextView添加到LinearLayout容器中  
75.             layout_container.addView(textView);  
76. // 把创建的TextView赋值给TextView数组并设置一个tag  
77.             arrTextView[i] = textView;  
78. // 利用给控件增加标签,方便携带数据并添加点击事件然后切换对应的ViewPager  
79.             textView.setTag(i);  
80. // 设置每一个TextView的点击事件  
81. new OnClickListener() {  
82. @Override  
83. public void onClick(View v) {  
84. // 通过上面的tag设置ViewPager的改变  
85. int position = (Integer) v.getTag();  
86.                     viewPager_main.setCurrentItem(position);  
87.                 }  
88.             });  
89.         }  
90. // 让第一个书签不能被点击  
91. 0].setEnabled(false);  
92. // 设置第一个标签的颜色为红色  
93. 0].setTextColor(Color.RED);  
94.     }  
95.   
96. /**
97.      * 初始化ViewPager
98.      */  
99. private void initViewPager() {  
100.         viewPager_main = (ViewPager) findViewById(R.id.viewPager_main);  
101.   
102. for (int i = 0; i < arrTextView.length; i++) {  
103. 1);  
104.             totalList.add(fragment);  
105.         }  
106. // 给ViewPager设置适配器  
107. new MyPagerAdapter(  
108.                 getSupportFragmentManager(), totalList));  
109. // 给ViewPager设置监听事件  
110. new OnPageChangeListener() {  
111.   
112. @Override  
113. public void onPageSelected(int position) {  
114. // 设置每个TextView的属性和horizontalScrollView的滚动长度  
115.                 selectCurrenTab(position);  
116.   
117.             }  
118.   
119. @Override  
120. public void onPageScrolled(int arg0, float arg1, int arg2) {  
121. // TODO Auto-generated method stub  
122.   
123.             }  
124.   
125. @Override  
126. public void onPageScrollStateChanged(int arg0) {  
127. // TODO Auto-generated method stub  
128.   
129.             }  
130.         });  
131.     }  
132.   
133. /**
134.      * 设置ViewPager改变时每个TextView的属性和HorizontalScrollView的偏移量
135.      * 
136.      * @param position
137.      */  
138. private void selectCurrenTab(int position) {  
139. // 先把所有的TextView的背景颜色都设置成黑色,并设置为可点击  
140. for (int i = 0; i < arrTitleNames.length; i++) {  
141.             arrTextView[i].setTextColor(Color.BLACK);  
142. true);  
143.         }  
144. // 设置当前position的TextView背景为红色,不可点击  
145.         arrTextView[position].setTextColor(Color.RED);  
146. false);  
147. /**
148.          * 下面这些东西一时还没有搞懂,还需要进一步的理解
149.          */  
150. // 计算屏幕的宽度  
151. int screenWidth = getResources().getDisplayMetrics().widthPixels;  
152. // 计算当前控件距离父容器的左侧的距离  
153. int leftSpace = arrTextView[position].getLeft();  
154.   
155. // 计算水平滚动视图应该偏移的数值  
156. int offset = leftSpace  
157. 2;  
158. // 让水平滚动视图按照偏移量进行移动  
159. 0);  
160.     }  
161.   
162. /**
163.      * 创建ViewPager的适配器
164.      * 
165.      * @author Administrator
166.      * 
167.      */  
168. class MyPagerAdapter extends FragmentPagerAdapter {  
169. private List<Fragment> list = null;  
170.   
171. public MyPagerAdapter(FragmentManager fm, List<Fragment> list) {  
172. super(fm);  
173. this.list = list;  
174.         }  
175.   
176. @Override  
177. public Fragment getItem(int position) {  
178. return list.get(position);  
179.         }  
180.   
181. @Override  
182. public int getCount() {  
183. return list.size();  
184.         }  
185.   
186.     }  
187.   
188. }

继承于ListFragment的MyFragment:


1. package com.steven.fragmentviewpagerscrollview;  
2.   
3. import java.util.ArrayList;  
4. import java.util.HashMap;  
5. import java.util.List;  
6. import java.util.Map;  
7.   
8. import android.annotation.SuppressLint;  
9. import android.app.Activity;  
10. import android.os.Bundle;  
11. import android.support.v4.app.ListFragment;  
12. import android.util.Log;  
13. import android.view.LayoutInflater;  
14. import android.view.View;  
15. import android.view.ViewGroup;  
16. import android.widget.ListView;  
17. import android.widget.SimpleAdapter;  
18. import android.widget.TextView;  
19. import android.widget.Toast;  
20.   
21. @SuppressLint("NewApi")  
22. public class DummyFragment extends ListFragment {  
23. private final static String KEY_NAME = "tabindex";  
24. private int tabindex = 0;  
25. private List<Map<String, Object>> totalList = new ArrayList<Map<String, Object>>();  
26.   
27. /**
28.      * 该静态方法用于在MainActivity中调用
29.      * 
30.      * @param tabindex
31.      * @return
32.      */  
33. public static DummyFragment getInstance(int tabindex) {  
34. new DummyFragment();  
35. new Bundle();  
36.         bundle.putInt(KEY_NAME, tabindex);  
37.         fragment.setArguments(bundle);  
38. return fragment;  
39.     }  
40.   
41. /**
42.      * 给List集合设置数据
43.      */  
44. private void loadNetworkData() {  
45.         tabindex = getArguments().getInt(KEY_NAME);  
46. for (int i = 0; i < 20; i++) {  
47. new HashMap<String, Object>();  
48. "iconId", R.drawable.ic_180);  
49. "title", "title_" + tabindex + "_" + i);  
50. "summary", "summay_" + tabindex + "_" + i);  
51.             totalList.add(map);  
52.         }  
53.     }  
54.   
55. @Override  
56. public void onActivityCreated(Bundle savedInstanceState) {  
57. super.onActivityCreated(savedInstanceState);  
58. // 数据初始化。一般来说数据都来自于网络,需要异步访问,json解析  
59.         loadNetworkData();  
60. // 创建适配器  
61. new SimpleAdapter(getActivity(), totalList,  
62. new String[] { "iconId", "title",  
63. "summary" }, new int[] { R.id.imageView_item_icon,  
64.                         R.id.textView_item_title, R.id.textView_item_summary });  
65. // 设置适配器  
66.         setListAdapter(adapter);  
67.     }  
68.   
69. }


运行结果:


ViewPager的实现:通过HorizontalScrollView_ide

ViewPager的实现:通过HorizontalScrollView_HorizontalScrollView_02

下面是蓝色的下划线,是一个9片图:


ViewPager的实现:通过HorizontalScrollView_HorizontalScrollView_03

举报

相关推荐

0 条评论