我的Android 之旅（五）==高级控件ViewPage



一：高级控件的分类

（1）GridView:网格视图
（2）ScrollView：滚动视图

可以有效的安排这些组件，浏览时可以进行滚屏的操作
垂直滚动——ScrollView
水平滚动——HorizontalScrollView
常用属性：

android:scrollbars=“none”//禁止出现滚动条
取值：none、 horizontal、 vertical

（3）ScrollView是单一容器，只能包含一个组件

若想放多个布局，则将各个布局放在一个LinearLayout等布局中
（4）ViewPager：左右滑动

横向滑动的分页组件,应用十分广泛的组件之一，如实现不同频道的左右滑动显示. 同ListView一样属于适配器控件，ViewPager专属适配器PagerAdapter

实现步骤：
布局文件——加入ViewPager
编写适配器——扩展PagerAdaper

构造(Context context,List<ListView> list)//传入要分页显示的View集合
public abstract int getCount();//取界面个数
public  boolean isViewFromObject(View view, Object  obj);//用于判断对象是否是用于呈现在ViewPager的View组件
public Object instantiateItem(View container, int position);// 返回放置到ViewPager中组件对象
public void destroyItem(ViewGroup container, int position, Object object);//从ViewGroup中移出当前View

加载适配器——setAdapter()--非常重要，不要忘记！！！
下面就是一个简单的例子：

水平滑动  ---对应图片

在Layout中写布局文件

HorizontalScrollView：水平滑动

：<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.jerehedu.jreduch04.ScrollViewActivity">
<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:scrollbars="none"
    android:id="@+id/hs">
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/rg"
        android:orientation="horizontal">
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="推荐"
            android:button="@null"
            android:id="@+id/rb1"
            android:textSize="20sp"
            android:gravity="center"
            android:textColor="@color/rdbt_text"
            />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="视屏"
            android:id="@+id/rb2"
            android:textSize="20sp"
            android:gravity="center"
            android:button="@null"
            android:textColor="@color/rdbt_text"
        />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="烟台"
            android:textSize="20sp"
            android:id="@+id/rb3"
           android:gravity="center"
            android:button="@null"
            android:textColor="@color/rdbt_text"
        />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="上海"
            android:textSize="20sp"
            android:id="@+id/rb4"
            android:gravity="center"
            android:button="@null"
            android:textColor="@color/rdbt_text"
        />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="山东"
            android:textSize="20sp"
           android:gravity="center"
            android:id="@+id/rb5"
            android:button="@null"
            android:textColor="@color/rdbt_text"
            />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="娱乐"
            android:textSize="20sp"
            android:id="@+id/rb6"
          android:gravity="center"
            android:button="@null"
            android:textColor="@color/rdbt_text"
            />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="深圳"
            android:textSize="20sp"
            android:gravity="center"
            android:id="@+id/rb7"
            android:button="@null"
            android:textColor="@color/rdbt_text"
            />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="北京"
            android:textSize="20sp"
            android:gravity="center"
            android:id="@+id/rb8"
            android:button="@null"
            android:textColor="@color/rdbt_text"
            />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="财经"
            android:textSize="20sp"
            android:gravity="center"
            android:id="@+id/rb9"
            android:button="@null"
            android:textColor="@color/rdbt_text"
        />
        <RadioButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:text="要闻"
            android:textSize="20sp"
            android:gravity="center"
            android:textColor="@color/rdbt_text"
            android:id="@+id/rb10"
            android:button="@null"
            />
    </RadioGroup>
</HorizontalScrollView>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/vp"
        android:layout_below="@+id/hs"
        android:background="#a90ad1"
        >
    </android.support.v4.view.ViewPager>
</RelativeLayout>

注意：这里的RadioButton 一定要与RadioGroup结合起来使用。

并且这里的HorizontalScrollView是单一容器，只能放一个直接的控件。

main 函数中代码：

main 函数中创建List时,要注意泛型需为ImageView

使用ViewPage必须加载适配器。

监听的方法也要注意，这里的set已经过时了，大家让跟上时代的脚步呀！这里我们的监听方法换成了addOnPageChangeListent

还需要注意图片与标题之间的联系

package com.jerehedu.jreduch04;

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.widget.HorizontalScrollView;
import android.widget.ImageView;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.jerehedu.jreduch04.adapter.MyViewPagerAdapter;

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

public class ScrollViewActivity extends AppCompatActivity {
 private  RadioGroup rg;
    private RadioButton rb1;
    private RadioButton rb2;
    private RadioButton rb3;
    private RadioButton rb4;
    private RadioButton rb5;
    private RadioButton rb6;
    private RadioButton rb7;
    private RadioButton rb8;
    private RadioButton rb9;
    private RadioButton rb10;
    private ViewPager vp;
    private List<ImageView> imgList;
    private MyViewPagerAdapter mp;
    private HorizontalScrollView hs;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_scroll_view);
        rg= (RadioGroup) findViewById(R.id.rg);
        rb1= (RadioButton) findViewById(R.id.rb1);
        rb2= (RadioButton) findViewById(R.id.rb2);
        rb3= (RadioButton) findViewById(R.id.rb3);
        rb4= (RadioButton) findViewById(R.id.rb4);
        rb5= (RadioButton) findViewById(R.id.rb5);
        rb6= (RadioButton) findViewById(R.id.rb6);
        rb7= (RadioButton) findViewById(R.id.rb7);
        rb8= (RadioButton) findViewById(R.id.rb8);
        rb9= (RadioButton) findViewById(R.id.rb9);
        rb10= (RadioButton) findViewById(R.id.rb10);
        vp= (ViewPager) findViewById(R.id.vp);
        hs= (HorizontalScrollView) findViewById(R.id.hs);
        vpInit();
        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int  i) {
                switch (i)
                {
                    case R.id.rb1:
                        vp.setCurrentItem(0);
                        //实现文字与图片的关联
                        Toast.makeText(getBaseContext(),rb1.getText().toString(),Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.rb2:
                       Toast.makeText(getBaseContext(),rb2.getText().toString(),Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(1);
                        break;
                    case R.id.rb3:
                        Toast.makeText(getBaseContext(),rb3.getText().toString(),Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(2);
                        break;
                    case R.id.rb4:
                        Toast.makeText(getBaseContext(),rb4.getText().toString(),Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(3);
                        break;
                    case R.id.rb5:
                        Toast.makeText(getBaseContext(),rb5.getText().toString(),Toast.LENGTH_SHORT).show();

                        vp.setCurrentItem(4);
                        break;
                    case R.id.rb6:
                        Toast.makeText(getBaseContext(),rb6.getText().toString(),Toast.LENGTH_SHORT).show();

                        vp.setCurrentItem(5);
                        break;
                    case R.id.rb7:
                        Toast.makeText(getBaseContext(),rb7.getText().toString(),Toast.LENGTH_SHORT).show();

                        vp.setCurrentItem(6);
                        break;
                    case R.id.rb8:
                        Toast.makeText(getBaseContext(),rb8.getText().toString(),Toast.LENGTH_SHORT).show();

                        vp.setCurrentItem(7);
                        break;
                    case R.id.rb9:
                       Toast.makeText(getBaseContext(),rb9.getText().toString(),Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(8);
                        break;
                    case R.id.rb10:
                       Toast.makeText(getBaseContext(),rb10.getText().toString(),Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(9);
                        break;

                }

            }
        });
    }
    public void vpInit(){
        imgList=new ArrayList<>();
        ImageView iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t1);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t2);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t3);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t4);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t5);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t6);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t1);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t2);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t3);
        imgList.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.t4);
        imgList.add(iv);
       mp=new MyViewPagerAdapter(imgList);
        vp.setAdapter(mp);
        vp.setCurrentItem(0);
        //当前项选中
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
            RadioButton rb= (RadioButton) rg.getChildAt(position);
            rb.setChecked(true);
            }
            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

可水平滑动，将文字与图片相互对应。

结果如下