ViewPager的实现：通过HorizontalScrollView

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

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

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

activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<!-- android:scrollbars="none"去除滚动条 -->
<HorizontalScrollView
android:id="@+id/horizontalScrollView_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scrollbars="none" >

<LinearLayout
android:id="@+id/layout_container"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
</HorizontalScrollView>

<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#0373b4" />

<android.support.v4.view.ViewPager
android:id="@+id/viewPager_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

数组资源：

<?xml version="1.0" encoding="utf-8"?>
<resources>

<string-array name="arrTabTitles">
<item>要闻</item>
<item>视频</item>
<item>娱乐</item>
<item>体育</item>
<item>财经</item>
<item>科技</item>
<item>社会</item>
<item>军事</item>
<item>游戏</item>
</string-array>

</resources>

选择器selector：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/bg_tab" android:state_enabled="false"/>
<item android:drawable="@android:color/white" android:state_enabled="true"/>

<!--
android:state_pressed=""
android:state_enabled=""
android:state_checked=""
android:state_activated=""这个属性常常用于ListView的item的背景设置中。如果使用这个属性，那么ListView要设置选择模式
listView.setChoiceMode();

-->
</selector>

MainActivity：

package com.steven.fragmentviewpagerscrollview;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Gravity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;

public class MainActivity extends FragmentActivity {
private ViewPager viewPager_main;
private HorizontalScrollView horizontalScrollView_main;
private LinearLayout layout_container;
private String[] arrTitleNames = null;
private TextView[] arrTextView = null;
private List<Fragment> totalList = new ArrayList<Fragment>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化书签选项卡
initTabs();
// 初始化ViewPager
initViewPager();
}

/**
* 初始化标签
*/
private void initTabs() {
//获取HorizontalScrollView的id
horizontalScrollView_main = (HorizontalScrollView) findViewById(R.id.horizontalScrollView_main);
//获取LinearLayout的id
layout_container = (LinearLayout) findViewById(R.id.layout_container);
//获取定义的数组资源文件
arrTitleNames = getResources().getStringArray(R.array.arrTabTitles);
//通过定义的数组资源文件给TextView数组初始化长度
arrTextView = new TextView[arrTitleNames.length];
for (int i = 0; i < arrTextView.length; i++) {
// 创建TextView对象
TextView textView = new TextView(this);
// 把资源数组中的数据设置给TextView显示
textView.setText(arrTitleNames[i]);
// 设置TextView的宽度和高度，都是包裹内容
LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
// 把宽度和高度设置给TextView
textView.setLayoutParams(params);
// 设置TextView的位置
textView.setGravity(Gravity.CENTER);
// 设置TextView的内边距
textView.setPadding(10, 10, 10, 10);
// 给TextView设置选择器，实现TextView在选中和未选中时显示不同的图片资源
textView.setBackgroundResource(R.drawable.bg_textview);
// 让所有的书签都能被点击
textView.setEnabled(true);
// 设置字体大小
textView.setTextSize(16);
// 设置字体颜色
textView.setTextColor(Color.BLACK);
// 把TextView添加到LinearLayout容器中
layout_container.addView(textView);
// 把创建的TextView赋值给TextView数组并设置一个tag
arrTextView[i] = textView;
// 利用给控件增加标签，方便携带数据并添加点击事件然后切换对应的ViewPager
textView.setTag(i);
// 设置每一个TextView的点击事件
textView.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// 通过上面的tag设置ViewPager的改变
int position = (Integer) v.getTag();
viewPager_main.setCurrentItem(position);
}
});
}
// 让第一个书签不能被点击
arrTextView[0].setEnabled(false);
// 设置第一个标签的颜色为红色
arrTextView[0].setTextColor(Color.RED);
}

/**
* 初始化ViewPager
*/
private void initViewPager() {
viewPager_main = (ViewPager) findViewById(R.id.viewPager_main);

for (int i = 0; i < arrTextView.length; i++) {
DummyFragment fragment = DummyFragment.getInstance(i + 1);
totalList.add(fragment);
}
// 给ViewPager设置适配器
viewPager_main.setAdapter(new MyPagerAdapter(
getSupportFragmentManager(), totalList));
// 给ViewPager设置监听事件
viewPager_main.setOnPageChangeListener(new OnPageChangeListener() {

@Override
public void onPageSelected(int position) {
// 设置每个TextView的属性和horizontalScrollView的滚动长度
selectCurrenTab(position);

}

@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

}
});
}

/**
* 设置ViewPager改变时每个TextView的属性和HorizontalScrollView的偏移量
*
* @param position
*/
private void selectCurrenTab(int position) {
// 先把所有的TextView的背景颜色都设置成黑色，并设置为可点击
for (int i = 0; i < arrTitleNames.length; i++) {
arrTextView[i].setTextColor(Color.BLACK);
arrTextView[i].setEnabled(true);
}
// 设置当前position的TextView背景为红色，不可点击
arrTextView[position].setTextColor(Color.RED);
arrTextView[position].setEnabled(false);
/**
* 下面这些东西一时还没有搞懂，还需要进一步的理解
*/
// 计算屏幕的宽度
int screenWidth = getResources().getDisplayMetrics().widthPixels;
// 计算当前控件距离父容器的左侧的距离
int leftSpace = arrTextView[position].getLeft();

// 计算水平滚动视图应该偏移的数值
int offset = leftSpace
- (screenWidth - arrTextView[position].getWidth()) / 2;
// 让水平滚动视图按照偏移量进行移动
horizontalScrollView_main.smoothScrollTo(offset, 0);
}

/**
* 创建ViewPager的适配器
*
* @author Administrator
*
*/
class MyPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> list = null;

public MyPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}

@Override
public Fragment getItem(int position) {
return list.get(position);
}

@Override
public int getCount() {
return list.size();
}

}

}

继承于ListFragment的MyFragment：

package com.steven.fragmentviewpagerscrollview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

@SuppressLint("NewApi")
public class DummyFragment extends ListFragment {
private final static String KEY_NAME = "tabindex";
private int tabindex = 0;
private List<Map<String, Object>> totalList = new ArrayList<Map<String, Object>>();

/**
* 该静态方法用于在MainActivity中调用
*
* @param tabindex
* @return
*/
public static DummyFragment getInstance(int tabindex) {
DummyFragment fragment = new DummyFragment();
Bundle bundle = new Bundle();
bundle.putInt(KEY_NAME, tabindex);
fragment.setArguments(bundle);
return fragment;
}

/**
* 给List集合设置数据
*/
private void loadNetworkData() {
tabindex = getArguments().getInt(KEY_NAME);
for (int i = 0; i < 20; i++) {
Map<String, Object> map = new HashMap<String, Object>();
map.put("iconId", R.drawable.ic_180);
map.put("title", "title_" + tabindex + "_" + i);
map.put("summary", "summay_" + tabindex + "_" + i);
totalList.add(map);
}
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
// 数据初始化。一般来说数据都来自于网络，需要异步访问，json解析
loadNetworkData();
// 创建适配器
SimpleAdapter adapter = new SimpleAdapter(getActivity(), totalList,
R.layout.item_dummyframent, new String[] { "iconId", "title",
"summary" }, new int[] { R.id.imageView_item_icon,
R.id.textView_item_title, R.id.textView_item_summary });
// 设置适配器
setListAdapter(adapter);
}

}

运行结果：





下面是蓝色的下划线，是一个9片图：