6

アプリケーションの 4 つのペインで構成されるオープニング チュートリアルを作成しようとしていますが、Android は初めてなので、このタスクを「完了」とマークする前に、すべてのオプションを検討する必要があります。私は 3 つの方法を知っていますが、実際に達成できるのは 1 つだけです。このチュートリアルの要件はありませんが、いくつかの「必要な機能」は、各ペインへのスライド アクションであり、画像と下部 (ナビゲーション サークル) が移動せず、上部のタイトルが移動しないのと同様に優れています。

一方通行

4 つの個別のアクティビティと 4 つの個別のレイアウト

最初の試み

赤い丸で囲まれた項目はtextViews、水平方向に中央に配置され、上から押し出されたものです。

白い丸で囲まれたアイテムはimageViews、水平方向と垂直方向の中央に配置されています。

紫色の丸で囲まれたものimageViewsは、水平方向に中央に配置され、下から押し出されています。

第二の道

1 つのアクティビティで 4 つのフラグメント

フラグメントは習得が困難でしたが、フラグメントについて読んだり、チュートリアルを参照したりすると、実際にはタブレットでのみ使用されているようです。これを達成するための有効な方法でしょうか?

第三の道

ViewPager?

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 に答える