ViewPager+HorizontalScrollView简单使用

一、ScrollView，HorizontalScrollView的区别:

Android当中比较常用的两个布局容器：ScrollView和HorizontalScrollView，从字面意义上来看也是非常的简单的，ScrollView就是一个可以滚动的View，这个滚动的方向是垂直方向的，而HorizontalScrollView则是一个水平方向的可以滚动的View。

二、效果图演示:

ViewPager+HorizontalScrollView

三、代码部分:

布局部分,HorizontalScrollView只能有一个子控件,这里我们就放的LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">

    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/hsv"
        android:background="#AAAAAA">

        <LinearLayout
            android:orientation="horizontal"
            android:id="@+id/Liner"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            >


        </LinearLayout>


    </HorizontalScrollView>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/pager">

    </android.support.v4.view.ViewPager>

</LinearLayout>

Activity部分

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private LinearLayout liner;
    private HorizontalScrollView hsv;
    //创建标题
    String[] title = {"影视","音乐","体育","新闻","幼教","记录","生活","养生","自然","社交","军事"};
    private TextView textView;
    private List<TextView> list;
    private ViewPager pager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //加载组件
        liner = findViewById(R.id.Liner);
        hsv = findViewById(R.id.hsv);
        pager = findViewById(R.id.pager);

        //配置标题栏
        configTitle();
        //适配器
        pager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager()));
        //viewpager滑动监听
        addPagerListener();

    }
    
    //viewpager滑动监听
    private void addPagerListener() {

        pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                
                for (int i = 0; i < list.size(); i++) {
                    if(i==position){ //判断i是否等于当前轮播界面
                        TextView textView = list.get(i);
                        textView.setTextColor(Color.RED); //字体变红
                    }else{  //不是当前轮播界面的标题,为黑色
                        TextView textView = list.get(i);
                        textView.setTextColor(Color.BLACK);//字体变黑
                    }
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
    
    //初始化标题
    private void configTitle() {

        list = new ArrayList<TextView>();
        for (int i = 0; i <title.length; i++) {
            //设置标题
            TextView textView =  new TextView(MainActivity.this);
            textView.setText(title[i]);
            textView.setTextSize(25);
            //第一个文字项,为红色
            if(i==0)
                textView.setTextColor(Color.RED);
            //设置点击事件
            textView.setOnClickListener(this);
            //给每一个标题控件设置id,id和数组下标一致,以便找到每一个指定的标题
            textView.setId(i);
            //定位参数,设置间距
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            params.setMargins(10,20,10,20);
            //添加到布局中
            liner.addView(textView,params);
            //添加到集合
            list.add(textView);

        }
    }

    //适配器
    class MyFragmentPagerAdapter extends FragmentPagerAdapter{

        public MyFragmentPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return BaseFragment.getValues(title[position]);
        }

        @Override
        public int getCount() {
            return title.length;
        }
    }


    //点击标题文字
    @Override
    public void onClick(View view) {
        //得到控件id
        int id = view.getId();
        //轮播到当前点击的textView对应的pager界面
        pager.setCurrentItem(id);

    }
    
}

fragment实例部分,使用的简单方法(避免创建多次Fragment)

public class BaseFragment extends Fragment {


    //写一个静态方法,让外部可以调用,拿到参数
    public static Fragment getValues(String title){
        //创建自己的实例
        BaseFragment baseFragment = new BaseFragment();
        Bundle bundle = new Bundle();
        bundle.putString("title",title);
        //传值
        baseFragment.setArguments(bundle);
        //返回一个Fragment实例
        return baseFragment;

    }
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        
        Bundle bundle = getArguments();
        TextView textView = new TextView(getActivity());
        //获取值
        textView.setText(bundle.getString("title"));
        textView.setTextSize(60);
        return textView;

    }

}