我们可以发现,在一些新闻客户端的标题栏中,它们会有很多标题,而这些标题都是可以滑动的,这种效果的实现使用
的就是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. }
运行结果:
下面是蓝色的下划线,是一个9片图: