Android捕获View焦点事件，LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动

《Android捕获View焦点事件，LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动。》

如图：

package zhangphil.tabs;import java.util.ArrayList;import android.support.v4.app.Fragment;
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.support.v7.app.ActionBarActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnFocusChangeListener;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.graphics.Color;
import android.os.Bundle;/**
*
* Android捕获View焦点事件，LinearLayout结合HorizontalScrollView实现ViewPgaer和选项卡Tabs联动。*
* 思路：实现方案非常多。本例是把一个水平的LinearLayout在外层用HorizontalScrollView包裹起来（之所以使用HorizontalScrollView再包裹一层，是考虑到选项卡条目可能非常多的情况下，让用户能够像ListView一样滑动选择。否则，单纯的使用LinearLayout加入有限条目超过边界后多的元素不可见）。然后在LinearLayout里面加入若干子元素（简单期间，就比方TextView），做成一个横向可滑动且响应触发点击事件的"ListView"。该“ListView”响应点击事件，触发ViewPager页面的切换。* 实现目的：tab栏中的选项和ViewPager中的Fragment实时联动。比方。当ViewPager滑动到第10的位置时候，对应的位于顶部（或者底部）的tab也要切换到第十的位置。反之亦然。
* 这样的控件效果使用极为广泛。尤其是在一些新闻client中常见，比方新浪新闻、腾讯新闻新闻client的头部标签导航选项卡。
*
*
* 附參考文章： 怎样让一个View的焦点改变时同一时候改变其附属元素。可參考我的还有一篇文章：
* 《Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果 》
* 链接地址：http://blog.csdn.net/zhangphil/article/details/46547561
*
*
* */public class MainActivity extends ActionBarActivity {private ArrayList<Fragment> fragments;// 測试的Fragment数量，也即是选项卡片的数量。private final int SIZE = 15;@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);fragments = new ArrayList<Fragment>();
for (int i = 0; i < SIZE; i++) {
Fragment f = TestFragment.newInstance(i);
fragments.add(f);
}// 将在tabs_LinearLayout里面加入须要的若干选项卡片。
final LinearLayout tabs_LinearLayout = (LinearLayout) findViewById(R.id.tabs_LinearLayout);final ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);for (int i = 0; i < SIZE; i++) {
View v = LayoutInflater.from(this).inflate(R.layout.view, null);
TextView tv = (TextView) v;
tv.setText("tab" + i);v.setOnFocusChangeListener(new OnFocusChangeListener() {@Override
public void onFocusChange(View v, boolean hasFocus) {// 当用户选择了tab选项卡上面的子元素时候，对应的把ViewPager显示的页面调整到对应位置。int count = tabs_LinearLayout.getChildCount();
for (int i = 0; i < count; i++) {
View cv = tabs_LinearLayout.getChildAt(i);
if (v == cv) {
if (hasFocus) {
mViewPager.setCurrentItem(i);
break;
}
}
}
}
});tabs_LinearLayout.addView(v, i);
}mViewPager.setAdapter(new MyFragmentPagerAdapter(this
.getSupportFragmentManager()));
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Override
public void onPageScrollStateChanged(int arg0) {}@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}@Override
public void onPageSelected(int pos) {
// 在这里，当用户翻动ViewPager页面时候，对应的把选项卡显示对应的位置。
// 最轻巧的实现就是让tab选项卡栏中的子元素获得焦点就可以。
View v = tabs_LinearLayout.getChildAt(pos);
v.requestFocus();
}
});
}// ViewPager的适配器。
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {public MyFragmentPagerAdapter(FragmentManager fm) {
super(fm);
}@Override
public Fragment getItem(int pos) {
return fragments.get(pos);
}@Override
public int getCount() {
return fragments.size();
}
}// 只用于測试的Fragment。public static class TestFragment extends Fragment {// 用一个id标明。否则难以识别效果。
private static final String ID = "id";public static Fragment newInstance(int id) {
Fragment f = new TestFragment();
Bundle b = new Bundle();
b.putInt(ID, id);
f.setArguments(b);
return f;
}@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {Bundle bundle = this.getArguments();
int id = (Integer) bundle.get(ID);TextView tv = new TextView(this.getActivity());
tv.setGravity(Gravity.CENTER);
tv.setText("Fragment:" + id);
tv.setTextSize(50.0f);
tv.setTextColor(Color.LTGRAY);return tv;
}
}
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <HorizontalScrollView
android:id="@+id/tabs_HorizontalScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none" > <LinearLayout
android:id="@+id/tabs_LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1" > </LinearLayout> </HorizontalScrollView> <View
android:layout_width="match_parent"
android:layout_height="5dip"
android:background="@android:color/black" /> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="9" /></LinearLayout>

view.xml:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/selector"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:padding="5dip" ></TextView>

selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/red" android:state_focused="true"/>
<item android:drawable="@drawable/orange" android:state_pressed="true"/>
<item android:drawable="@drawable/green"/></selector>

剩余的是在drawable文件夹下的一些基础的图片资源。能够依据自己须要加入。