高級控件之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));//刪除圖片

    }
}