6

我正在尝试为我的应用程序创建一个包含四个窗格的开放教程,但由于我是 Android 新手,因此我想确保在将此任务标记为“完成”之前考虑所有选项。我知道三种方法,我只能真正做到一种。本教程没有任何要求,但一些“想要的功能”将是每个窗格的滑动动作,图像和底部(导航圈)不动,顶部的标题不动。

单程

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

第一次尝试

红色圆圈的项目是textViews水平居中并从顶部推开的项目。

白色圆圈的项目是imageViews水平和垂直居中的项目。

紫色圆圈是imageViews水平居中并从底部推开的。

第二种方式

一项活动中的 4 个片段

片段很难学习,但我对它们的了解越多/查看它们的教程,它们似乎只真正用于平板电脑。这会是实现这一目标的有效方法吗?

第三条路

浏览器?

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

我以前从未使用过它,但我知道这是一种选择。

最后的问题

哪种方式更常用/什么是正确的实现方式?有没有办法只让中间部分(图像)滑入,但是一旦图像滑入,标题(顶部)和导航图像(底部)就会改变?

4

2 回答 2

9

这是一些以 ViewPager 方式执行的代码(这正是您的操作方式)

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简单——

<?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" />

希望有帮助:)

于 2012-07-01T03:53:09.423 回答
3

ViewPagerIndicator

我建议你使用 ViewPager 方式,试试 Jake Wharton 开发的 ViewPagerIndicator 库,因为它还提供了几种不同的选项卡类型供你选择,而且非常容易设置样式。

https://github.com/JakeWharton/Android-ViewPagerIndicator

ViewPagerIndicator 应用程序的示例代码也在这里

与 Android 支持库中的 ViewPager 兼容的分页指示器小部件,以提高内容的可发现性。

在Google Play上试用示例应用程序。

于 2012-07-01T03:10:28.470 回答