理工女孩

上面這張圖片就是利用ViewPager來呈現的

透過一個activity裡面利用ViewPager和LinearLayout來完成

activity_main.xml

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout android:orientation="vertical"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 切換卡 -->
    <android.support.v4.view.ViewPager
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/viewPager"></android.support.v4.view.ViewPager>
    <!-- 點點 -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:id="@+id/viewGroup"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:layout_marginBottom="40dp"></LinearLayout>
</RelativeLayout>

然後每個呈現的頁面都需要再製作一個xml檔

page1.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"
    >
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@mipmap/view1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select"
        android:layout_gravity="center"
        android:id="@+id/select"/>
</LinearLayout>

其實三個頁面的layout都大同小異，只需要更改圖片來源即可

MainActivity.java

public class MainActivity extends Activity {

    private ViewPager viewPager;
    private PagerAdapter adapter;
    private List<View> viewPages = new ArrayList<>();
    //包覆下面點點的的LinearLayout
    private ViewGroup group;
    private ImageView imageView;
    //存放生成的小點
    private ImageView[] imageViews;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        initPageAdapter();
        initPointer();
        initEvent();
        initButton();
    }

    private void initEvent() {
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new GuidePageChangeListener());
    }

    private void initPageAdapter() {
        /**
         * 對於這幾個想要動態載入的PAGE頁面，使用LayoutInflater.inflate()來找到相對應的LAYOUT，並添加到viewpage
         */
        LayoutInflater inflater = LayoutInflater.from(this);
        View page1 = inflater.inflate(R.layout.page1, null);
        View page2 = inflater.inflate(R.layout.page2, null);
        View page3 = inflater.inflate(R.layout.page3, null);
        //添加到集合中
        viewPages.add(page1);
        viewPages.add(page2);
        viewPages.add(page3);
        adapter = new PagerAdapter() {
            @Override
            public int getCount() {
                return viewPages.size();
            }
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(viewPages.get(position));
            }
            //PagerAdapter選擇了哪個對象放在相對應的ViewPager中
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                View view = viewPages.get(position);
                container.addView(view);
                return view;
            }
        };
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.viewPager);
        group = (ViewGroup) findViewById(R.id.viewGroup);
    }

    private void initPointer() {
        //看有幾個頁面
        imageViews = new ImageView[viewPages.size()];
        for (int i = 0; i < imageViews.length; i++) {
            imageView = new ImageView(this);
            //設置控件的寬高
            imageView.setLayoutParams(new ViewGroup.LayoutParams(25, 25));
            //設置控件padding的屬性
            imageView.setPadding(20, 0, 20, 0);
            imageViews[i] = imageView;
            //初始第一張圖片的原點要為選中狀態
            if (i == 0) {
                //當前圖片
                imageViews[i].setBackgroundResource(R.mipmap.page_focused);
                //動態生成的imageview要用setBackgroundResource用setImagesource無效
            } else {
                imageViews[i].setBackgroundResource(R.mipmap.page_unfocused);
            }
            group.addView(imageViews[i]);
        }
    }
    public void initButton(){
        for (int i=0;i<viewPages.size();i++){
            View view1 = viewPages.get(i);
            final int a = i;
            Button btn1 = (Button) view1.findViewById(R.id.select);
            btn1.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(getApplicationContext(), "Select "+a, Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
    //ViewPager的監聽事件
    public class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }
        //页面滑动完成后执行
        @Override
        public void onPageSelected(int position) {
            //判斷當下是哪個PAGE，把對應下的原點設置為選重的狀態
            for (int i = 0; i < imageViews.length; i++) {
                imageViews[position].setBackgroundResource(R.mipmap.page_focused);
                if (position != i) {
                    imageViews[i].setBackgroundResource(R.mipmap.page_unfocused);
                }
            }
        }
        //監聽頁面狀態，0--静止 1--滑動  2--滑動完成
        @Override
        public void onPageScrollStateChanged(int state) {
        }
    }
}