[Android development] How to use View Pager


This example shows how you can create an image pager in android.
Algorithm:
1.) Create a new project by File-> New -> Android Project name it ViewPagerExample.
2.) Write following into main.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />
</LinearLayout>
3.) Create and write following into res/layout/details.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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" >
    <TextView
        android:id="@+id/detailsText"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:layout_marginTop="20dip"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />
</LinearLayout>
4.) Create and write following into res/layout/details.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
<?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:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />
</LinearLayout>
5.) Create and Write following into src/DetailFragment.java:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
package com.example.viewpagerexample;
import com.example.viewpagerexample.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class DetailFragment extends Fragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.e("Test", "hello");
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.details, container, false);
        TextView textView = (TextView) view.findViewById(R.id.detailsText);
        textView.setText("Testing");
        return view;
    }
}
6.) Create and Write following into src/ImageFragment.java:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
package com.example.viewpagerexample;
import com.example.viewpagerexample.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
public class ImageFragment extends Fragment {
    private final int imageResourceId;
    public ImageFragment(int imageResourceId) {
        this.imageResourceId = imageResourceId;
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.e("Test", "hello");
    }
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.image_layout, container, false);
        ImageView imageView = (ImageView) view.findViewById(R.id.imageView1);
        imageView.setImageResource(imageResourceId);
        return view;
    }
}
7.) Run for output.
Steps:
1.) Create a project named ViewPagerExample and set the information as stated in the image.
Build Target: Android 4.0
Application Name: ViewPagerExample
Package Name: com. example. ViewPagerExample
Activity Name: ViewPagerExample
Min SDK Version: 8
2.) Open ViewPagerExample.java file and write following code there:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
package com.example.viewpagerexample;
import com.example.viewpagerexample.R;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
public class ViewPagerExample extends FragmentActivity {
    private MyAdapter mAdapter;
    private ViewPager mPager;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mAdapter = new MyAdapter(getSupportFragmentManager());
        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);
    }
    public static class MyAdapter extends FragmentPagerAdapter {
        public MyAdapter(FragmentManager fm) {
            super(fm);
        }
        @Override
        public int getCount() {
            return 3;
        }
        @Override
        public Fragment getItem(int position) {
            switch (position) {
            case 0:
                return new DetailFragment();
            case 1:
                return new ImageFragment(R.drawable.ic_launcher);
            case 2:
                return new ImageFragment(R.drawable.thumb);
            default:
                return null;
            }
        }
    }
}
3.) Compile and build the project.



Source from: http://www.edumobile.org/android/android-beginner-tutorials/view-pager-example-in-android-development/

留言

張貼留言

這個網誌中的熱門文章

html viewport meta

html viewport meta 淺見及說明 web mobile 化已經是一個全球的局面，好像網站如果沒有做個 media query，都會羞的不敢見人。 神奇的地方是很多人都會在html head 處加上 viewport 這個 meta data，為了釐清實際的效用以及屬性，接下來將大略介紹 viewport-meta 說明屬性與應用。 屬性說明 W3C 協會定義  viewport meta  目前還屬於草案，意思就是有可能隨時修改，特別註記一下，此文於西元2012年3月28日撰寫，以下描述如有出入，以W3C 標準為主。 viewport 可以設定的屬性分別如下， width：可設定數值，或者指定為 device-width height：可設定數值，或者指定為 device-height initial-scale：第一次進入頁面的初始比例 minimum-scale：允許縮小最小比例 maximum-scale：允許放大最大比例 user-scalable：允許使用者縮放，1 or 0 (yes or no) 最初執行viewport meta加入如下 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 編譯過程會轉化成如下的語意， @viewport { width: device-width; initial-scale: 1.0 } 基本說明 width=device-width 先提一下幾個注意的地方，首先在 viewport 裡面的 width 通常會看到設定為device-width ，主要是為了讓整個頁面寬度與手機可視寬度相同，如此就可以簡單相容於不同機型螢幕大小，如果這邊width 沒有設定的話，就會依照 html css 給予的 width 當作預設值。 因為解析度不同，device-width 有時候不一定是 view width ，所以在類似 iphone 4 高解析度機器上，device-width=320 ，可是實際解析度為 480，這時候就需要利用javascript 針對UA 下去做動態調整。 user-scalable 從屬性名稱來看就是...
閱讀完整內容