高级控件之Scrollview （ 滑动屏幕 ） 与 Imageview （滑动屏幕 切换图片）

ScrollView  的xml布局

<?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"
     tools:context="com.example.bobo.gaojikongjianapplication.MainActivity">
//ScorllView  竖屏滑动
   //  <!---水平滚动--> 
<HorizontalScrollView 
//scorllciew 中只能嵌套一个布局方式，但是其嵌套的布局方式可以嵌套多种布局方式
    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="match_parent"
         android:id="@+id/rg1"
         android:orientation="horizontal"> //按钮横屏显示
        <RadioButton
             android:layout_width="50dp"
             android:layout_height="wrap_content"
             android:text="烟台"
             android:button="@null" //不显示按钮周边  只显示文字
            android:gravity="center" 
            android:checked="true"  
           android:id="@+id/rb1" 
            android:textColor="@color/rdutton"/>
         <RadioButton 
            android:layout_width="50dp" 
            android:layout_height="wrap_content"  
           android:text="烟台"  
           android:button="@null" 
            android:gravity="center" 
            android:id="@+id/rb2"
             android:textColor="@color/rdutton"/> 
        <RadioButton  
           android:layout_width="50dp" 
            android:layout_height="wrap_content"
             android:text="烟台" 
            android:button="@null" 
            android:gravity="center" 
            android:id="@+id/rb3" 
            android:textColor="@color/rdutton"/> 
        <RadioButton 
            android:layout_width="50dp" 
            android:layout_height="wrap_content"
             android:text="烟台"  
           android:button="@null" 
            android:gravity="center" 
            android:id="@+id/rb4"
             android:textColor="@color/rdutton"/>
         <RadioButton 
            android:layout_width="50dp" 
            android:layout_height="wrap_content" 
            android:text="烟台" 
            android:button="@null"
             android:gravity="center" 
            android:id="@+id/rb5" 
            android:textColor="@color/rdutton"/> 
        <RadioButton  
           android:layout_width="50dp" 
            android:layout_height="wrap_content" 
            android:text="烟台"  
           android:button="@null" 
            android:gravity="center" 
            android:id="@+id/rb6" 
            android:textColor="@color/rdutton"/>
         <RadioButton 
            android:layout_width="50dp"  
           android:layout_height="wrap_content" 
            android:text="烟台" 
            android:button="@null"  
           android:gravity="center" 
            android:id="@+id/rb7" 
            android:textColor="@color/rdutton"/> 
        <RadioButton
             android:layout_width="50dp"  
           android:layout_height="wrap_content"
             android:text="烟台" 
            android:button="@null"
             android:gravity="center" 
            android:id="@+id/rb8"
             android:textColor="@color/rdutton"/>  
       <RadioButton  
           android:layout_width="50dp"
             android:layout_height="wrap_content" 
            android:text="烟台"  
           android:button="@null" 
            android:gravity="center" 
            android:id="@+id/rb9"   
          android:textColor="@color/rdutton"/>
     </RadioGroup>
</HorizontalScrollView> 
//Imageview  xml布局方式
    <android.support.v4.view.ViewPager
         android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:id="@+id/vp1"  
       android:background="#14d0da"//设置背景 让图片与背景对比更明显 
        android:layout_below="@+id/hs"> 
    </android.support.v4.view.ViewPager>
 </RelativeLayout>
布局界面如下

Activity 书写

public class MainActivity extends AppCompatActivity {
    private RadioGroup rg;
    private ViewPager vp;
    private List<ImageView> m;
    private MyViewPagerAdapter mp;
    private HorizontalScrollView hs;
    private RadioButton rb1,rb2,rb3,rb4,rb5,rb6,rb7,rb8,rb9;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        rg=(RadioGroup)findViewById(R.id.rg1);
        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);
        vp=(ViewPager)findViewById(R.id.vp1);
        //hs=(HorizontalScrollView)findViewById(R.id.hs);

        rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rb1:
                        Toast.makeText(getBaseContext(), rb1.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(0);//当点击了按钮rb1时切换到第一张图片
                        break;
                    case R.id.rb2:
                        Toast.makeText(getBaseContext(), rb2.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(1);
                        break;
                    case R.id.rb3:
                        Toast.makeText(getBaseContext(), rb3.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(2);
                        break;
                    case R.id.rb4:
                        Toast.makeText(getBaseContext(), rb4.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(3);
                        break;
                    case R.id.rb5:
                        Toast.makeText(getBaseContext(), rb5.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(4);break;
                    case R.id.rb6:
                        Toast.makeText(getBaseContext(), rb6.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(5);
                        break;
                    case R.id.rb7:
                        Toast.makeText(getBaseContext(), rb7.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(6);
                        break;
                    case R.id.rb8:
                        Toast.makeText(getBaseContext(), rb8.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(7);break;
                    case R.id.rb9:
                        Toast.makeText(getBaseContext(), rb9.getText(), Toast.LENGTH_SHORT).show();
                        vp.setCurrentItem(8);break;
                }
            }
        });
        vpInit();
    }
    public void vpInit(){
//往viepager中存放图片
        m=new ArrayList<>();
        ImageView iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        iv=new ImageView(this);
        iv.setImageResource(R.mipmap.ic_launcher);
        m.add(iv);
        //mp=new MyViewPagerAdapter(m);
        vp.setAdapter(new MyViewPagerAdapter(m));//适配器与图片关联起来
        vp.setCurrentItem(0);//默认选中0
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
        //该类方法实现当切换图片时，按钮同时切换
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
               RadioButton radioButton= (RadioButton) rg.getChildAt(position);
                radioButton.setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}
viewpager适配器的书写代码

public class MyViewPagerAdapter extends PagerAdapter {

    private List<ImageView> imageViewList;//建一个imageview类型的list链表

    public MyViewPagerAdapter(List<ImageView> imageViewList) {
        this.imageViewList = imageViewList;
    }
    @Override
    public int getCount() {
        return imageViewList.size();//返回图片数量
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;//返回这是一个view值
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(imageViewList.get(position));
        return imageViewList.get(position);//增加图片，position图片数量

    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(imageViewList.get(position));//删除图片

    }
}