Tổng hợp Giới thiệu ViewPager làm Slide trên ứng dụng android

Thảo luận trong 'Android cơ bản' bắt đầu bởi thanhlong90.it, 22/10/13.

  1. thanhlong90.it

    thanhlong90.it Admin Support

    Lượt xem: 25,268
    Trước nay, các giảng viên thường dùng máy tính có kết nối với máy in để thuyết giảng, giảng dạy một cái gì đó qua một slide trên máy tính. Nhưng ngày nay chúng ta không cần phải vất vả như vậy nữa, hãy thử tưởng tượng rằng, với một chiếc điện thoại or máy tính bản trên tay, các bạn có thể di chuyển mọi nơi trong căn phòng và điều khiển màn hình trình diễn qua thiết bị này. Đều này hoàn toàn có thế nếu như bạn kết nối bluetooth từ thiết bị tới máy chiếu, phần còn lại duy nhất chỉ là phần tạo 1 slide. Với ViewPager thì điều này hoàn toàn đơn giản. Không những thế, ViewPager còn có thể tạo ra các ứng dụng đẹp hơn, hoàn hảo hơn.

    1) Source code demo:
    - Click vào đây để download source code demo.
    - Ví dụ khác từ Android Develop: download tại đây.

    2) ViewPager là gì?
    - ViewPager là một đối tượng khá giống như Slide trình diễn của MS PowerPoint.
    - ViewPager có thể trượt chuyển đổi giữa các giao diện một cách nhẹ nhàng và khá mượt, thay ví chuyển đổi màn hình qua một sự kiến chớp đen như trên tivi. Màn hình hiển thị trước nó hoặc sau nó sẽ được hiển thị ra ngay tức thì liền với nó.
    - ViewPager hỗ trợ từ Android API 13 trở lên.

    3) Video hướng dẫn:


    4) Một vài chú ý:
    - Nguồn develop: http://developer.android.com/reference/android/support/v4/view/ViewPager.html
    - Một vài hướng dẫn khác: http://developer.android.com/training/animation/screen-slide.html

    5) Hướng dẫn code:
    - res/values/strings.xml
    PHP:
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
     
        <string name="parsed_data">http://android.vn\nHướng dẫn bởi thanhlong90.it</string>
        <string name="app_name">DemoViewPager</string>
        <string name="action_settings">Settings</string>
        <string name="hello_world">Hello world!</string>
        <string name="text">Về ảnh số 1</string>
     
    </resources>
    - activity_main.xml
    PHP:
    <?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" >
     
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="@string/parsed_data"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold" />
     
        <Button
            android:id="@+id/bt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/text" />
     
        <android.support.v4.view.ViewPager
            android:id="@+id/myfivepanelpager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
     
    </LinearLayout>
    - ViewPageAdapter.java
    PHP:
    package android.vn.demoviewpager;
     
    import android.content.Context;
    import android.os.Parcelable;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.View;
    import android.view.ViewGroup.LayoutParams;
    import android.widget.ImageView;
    import android.widget.ImageView.ScaleType;
     
    public class 
    ViewPagerAdapter extends PagerAdapter {
        
    Context context;
        
    int imageArray[];
     
        public 
    ViewPagerAdapter(Context contextint[] imgArra) {
            
    imageArray imgArra;
            
    this.context context;
        }
     
        public 
    int getCount() {
            return 
    imageArray.length;
        }
     
        public 
    Object instantiateItem(View collectionint position) {
            
    ImageView view = new ImageView(context);
            
    view.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENTLayoutParams.MATCH_PARENT));
            
    view.setScaleType(ScaleType.FIT_XY);
            
    view.setBackgroundResource(imageArray[position]);
            ((
    ViewPagercollection).addView(view0);
            return 
    view;
        }
     
        @
    Override
        
    public void destroyItem(View arg0int arg1Object arg2) {
            ((
    ViewPagerarg0).removeView((Viewarg2);
        }
     
        @
    Override
        
    public boolean isViewFromObject(View arg0Object arg1) {
            return 
    arg0 == ((Viewarg1);
        }
     
        @
    Override
        
    public Parcelable saveState() {
            return 
    null;
        }
    }
    - MainActivity.java
    PHP:
    package android.vn.demoviewpager;
     
    import android.os.Bundle;
    import android.app.Activity;
    import android.support.v4.view.ViewPager;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.widget.Button;
     
    public class 
    MainActivity extends Activity {
        
    ViewPager myPager;
     
        private 
    int imageArra[] = { R.drawable.antartica1R.drawable.antartica2,
                
    R.drawable.antartica3R.drawable.antartica4,
                
    R.drawable.antartica5R.drawable.antartica6,
                
    R.drawable.antartica7R.drawable.antartica8 };
     
        @
    Override
        
    public void onCreate(Bundle savedInstanceState) {
            
    super.onCreate(savedInstanceState);
            
    setContentView(R.layout.activity_main);
            
    ViewPagerAdapter adapter = new ViewPagerAdapter(thisimageArra);
            
    myPager = (ViewPagerfindViewById(R.id.myfivepanelpager);
            
    myPager.setAdapter(adapter);
            
    myPager.setCurrentItem(2);
         
            final 
    Button a = (ButtonfindViewById(R.id.bt);
            
    a.setOnClickListener(new OnClickListener() {         
                @
    Override
                
    public void onClick(View v) {
                    
    myPager.setCurrentItem(1);
                }
            });
        }
    }
    6) Hình ảnh kết quả demo:
    [​IMG]

    Bài viết đăng lên diễn đàn khác vui lòng ghi rõ nguồn: Android.vn
    Pass giải nén: http://android.vn
    Support:
    - Skype: thanhlong90.it.support
    - Gmail: thanhlong90.it@gmail.com
    Chúc các bạn thành công!

    Các file đính kèm:

    Slide, view, page, pager, viewpager, ví dụ, hướng dẫn, demo, thanhlong90.it, example
    gnolmon thích bài này.
  2. luong.it

    luong.it New Member

    a Long ơi liệu có phát triển lên ứng dụng có thể thông qua bluetooth mà điều khiển trình diễn slide được ko nhỉ? :)
  3. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    em thử tìm hiểu xem ko gì là không thể =))
  4. binhbui

    binhbui New Member

    hj đúng bài mình đang tìm hiểu !
  5. dannylee

    dannylee Member

    API 11 vẫn chạy ngon a nhé @@
  6. minoan

    minoan New Member

    mình muốn thêm chức năng zoom vào thì làm thế nào ợ :(
  7. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    Bạn viết 1 hoạt động khác, tìm sự kiện click vào cái này rồi sau đó truyền hình ảnh qua 1 activity khác, tiếp theo tạo 1 công việc zoom ảnh ở activity mới này!
  8. hdtoanpt

    hdtoanpt New Member

    thanhlong90.it ơi, bạn demo cho mình 1 project sử dụng PagerTabStrib và ViewPager được không?
    Đây là ảnh ví dụ:
    screen1 screen2 screen3
  9. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    Chào bạn hiện tại Long ko nhận cũng như ko gia công code cho bất cứ ai bạn thông cảm nhé!
  10. hdtoanpt

    hdtoanpt New Member

    Bạn hiểu nhầm ý mình rồi, mình đang học làm giao diện dùng PagerTabStrib và ViewPager chứ không phải gia công gì đâu! Giao diện nó gần giống hình trên thôi, tức là mình vuốt sang bên thì nó đổi layout và tittle của layout đó mà.
  11. thanhlong90.it

    thanhlong90.it Admin Support Staff Member

    Cái này đã có demo trên mạng rất nhiều, bạn google xem nhé!
  12. nqteo110

    nqteo110 Con cò

    MainAcitivity.class
    import android.support.v4.view.ViewPager;
    Lỗi ở dòng nay
  13. nqteo110

    nqteo110 Con cò

    Bác giúp em với
  14. lethucbg

    lethucbg New Member

    Bạn ơi cho mình hỏi?
    Mình có thể thêm điều kiện để vuốt sang trang khác được không.
    ví dụ : sau 10s mới có thể vuốt sang trang mới, còn trước 10s kể từ khi chọn trang không thể vuốt được sang trang mới.
    thanks for read ^^
    :D
  15. ledaitudk

    ledaitudk Android developer team... Umbalaaz.com

Chia sẻ trang này