我试图创造一个开放的教程，它由四个窗格我的应用程序，但因为我是新来的Andr​​oid，我要确保我在考虑我所有的选择标志着这项任务的完成之前。我所知道的三种方式，我真的只能做到的。有没有要求本教程中，但一些通缉​​功能将是一个滑动的动作，以每个窗格将是很好的，以及图像和底部（导航圆圈）不动，并在上面不动的称号。

I'm trying to create an opening tutorial that consists of four panes for my application, but since I'm new to Android, I want to make sure I'm considering all of my options before marking this task as "complete". I know of three ways, I can only really accomplish one. There are no requirements for this tutorial, but some "wanted features" would be a sliding action to each pane would be nice as well as the image and the bottom (navigation circles) not moving and the title on top not moving.

4个独立的活动和4个独立的布局

红色圆圈项目 textViews 被水平居中并被推离顶部。

The red circled items are textViews that are centered horizontally and pushed off the top.

白色盘旋项目 imageViews 的水平，垂直居中。

The white circled items are imageViews that are centered horizontally and vertically.

紫色圆圈是 imageViews 被水平居中并推断底。

The purple circled are imageViews that are centered horizontally and pushed off the bottom.

4片段在一个活动

片段难学，但我越了解他们/看他们的教程，他们似乎才真正被用于平板电脑。难道是做到这一点的一种有效方式？

Fragments were difficult to learn, but the more I read about them/see tutorials on them, they seem to only really be used for tablets. Would it be a valid way to accomplish this?

ViewPager？

http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html

我从来没有使用过，但我知道这是一个选项。

I've never used this before, but I know it's an option.

哪种方式更常用/什么是实现这个正确的方法是什么？有没有什么办法只有中间部分（图）滑动，但标题（顶部）和导航图像（下）刚换一次图像幻灯片？

Which way is used more often/what's the proper way to implement this? Is there any way to only have the middle part (the image) slide in, but the title (top) and the navigation images (bottom) just change once the image slides in?

推荐答案

下面是一些code做了ViewPager方式（这为u究竟是如何做到这一点）

Here's some code to do it the ViewPager way (which is exactly how u do it)

package com.test.viewpager;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

public class WalkthroughActivity extends Activity {

    private static final int MAX_VIEWS = 5;

    ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.walkthrough_activity);
        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new WalkthroughPagerAdapter());
        mViewPager.setOnPageChangeListener(new WalkthroughPageChangeListener());
    }


    class WalkthroughPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return MAX_VIEWS;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == (View) object;
        }

        @Override
        public Object instantiateItem(View container, int position) {
            Log.e("walkthrough", "instantiateItem(" + position + ");");
            LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View imageViewContainer = inflater.inflate(R.layout.walkthrough_single_view, null);
            ImageView imageView = (ImageView) imageViewContainer.findViewById(R.id.image_view);

            switch(position) {
            case 0:
                imageView.setImageResource(R.drawable.image1);
                break;

            case 1:
                imageView.setImageResource(R.drawable.image2);
                break;

            case 2:
                imageView.setImageResource(R.drawable.image3);
                break;

            case 3:
                imageView.setImageResource(R.drawable.image4);
                break;

            case 4:
                imageView.setImageResource(R.drawable.image5);
                break;
            }

            ((ViewPager) container).addView(imageViewContainer, 0);
            return imageViewContainer;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ((ViewPager)container).removeView((View)object);
        }
    }


    class WalkthroughPageChangeListener implements ViewPager.OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageSelected(int position) {
            // Here is where you should show change the view of page indicator
            switch(position) {

            case MAX_VIEWS - 1:
                break;

            default:

            }

        }

    }
}

这是我的 walkthrough_activity.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/screen_navigation_button" />

    <!--  This TextView will not swipe when you swipe in the ViewPager -->

    <TextView
        android:id="@id/screen_navigation_button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:padding="10dip"
        android:text="Hello, Walkthrough!"
        android:textSize="18sp" />

</RelativeLayout>

和 walkthrough_single_view.xml 很简单，因为这 -

And walkthrough_single_view.xml is as simple as this -

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

希望帮助:)

Hope that helps :)