ViewPager之indicator

zxc123e發表於2015-08-27
ViewpagerIndicator

第一種情況

為了更好的使用者體驗，許多應用中的引導在viewpager滑動的時候都做了指示當前頁的indicator，下面我簡單的實現一個viewpager的indicator。效果圖如下：
這裡寫圖片描述

主要程式碼：

public class ShowActivity extends Activity {

    private ArrayList<View> dots;
    private ViewPager mViewPager;
    private ViewPagerAdapter adapter;
    private View view1, view2, view3, view4;
    private int oldPosition = 0;// 記錄上一次點的位置
    private int currentItem; // 當前頁面
    private List<View> viewList = new ArrayList<View>();// 把需要滑動的頁卡新增到這個list中

    @Override
    public void onCreate(Bundle savedInstanceState) {
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show);
        // 新增當前Acitivity到ancivitylist裡面去，為了方便統一退出
        // 顯示的點
        dots = new ArrayList<View>();
//      dots.add(findViewById(R.id.dot_1));
//      dots.add(findViewById(R.id.dot_2));
//      dots.add(findViewById(R.id.dot_3));
//      dots.add(findViewById(R.id.dot_4));
        // 得到viewPager的佈局
        LayoutInflater lf = LayoutInflater.from(ShowActivity.this);
        view1 = lf.inflate(R.layout.viewpager_item1, null);
        view2 = lf.inflate(R.layout.viewpager_item2, null);
        view3 = lf.inflate(R.layout.viewpager_item3, null);
        view4 = lf.inflate(R.layout.viewpager_item2, null);
        viewList.add(view1);
        viewList.add(view2);
        viewList.add(view3);
        viewList.add(view4);
        dots.clear();
        LinearLayout ll = (LinearLayout)findViewById(R.id.container);
        for (int i = 0; i < viewList.size(); i++)
        {
            View view = new View(this);
            view.setBackgroundResource(R.drawable.dot_normal);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    20, 20);
            params.leftMargin = 10;
            params.rightMargin = 10;
            dots.add(view);
            ll.addView(view, params);
        }

        mViewPager = (ViewPager) findViewById(R.id.vp);

        adapter = new ViewPagerAdapter();
        mViewPager.setAdapter(adapter);
        dots.get(0).setBackgroundResource(R.drawable.dot_focused);
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // TODO Auto-generated method stub

                dots.get(oldPosition).setBackgroundResource(
                        R.drawable.dot_normal);
                dots.get(position).setBackgroundResource(R.drawable.dot_focused);

                oldPosition = position;
                currentItem = position;
            }
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });
    }

    private class ViewPagerAdapter extends PagerAdapter {

        public ViewPagerAdapter() {
            super();
            // TODO Auto-generated constructor stub
            // 得到viewpager切換的三個佈局，並把它們加入到viewList裡面,記得view用打氣筒生成，否則容易出現空指標異常

        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return viewList.size();
        }

        // 是否是同一張圖片
        @Override
        public boolean isViewFromObject(View view, Object object) {
            // TODO Auto-generated method stub
            return view == object;
        }

        @Override
        public void destroyItem(ViewGroup view, int position, Object object) {
            ((ViewPager) view).removeView(viewList.get(position));

        }

        @Override
        public Object instantiateItem(ViewGroup view, int position) {
            ((ViewPager) view).addView(viewList.get(position));
            return viewList.get(position);
        }
    }

    private int dp2px(Context context, int dpValue) {
        return (int) context.getResources().getDisplayMetrics().density * dpValue;
    }

    @Override
    protected void onStart() {
        // TODO Auto-generated method stub
        super.onStart();
    }

    @Override
    protected void onStop() {
        // TODO Auto-generated method stub
        super.onStop();
        finish();
    }
}

這樣一個簡單的indicator就實現了，我們還可以在此基礎上做一些修改，實現去網路非同步獲取圖片作展示。

佈局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="35dip"
            android:layout_gravity="bottom"
            android:gravity="center"
            android:layout_marginBottom="20dp"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="3dip"
                android:orientation="horizontal"
                android:id="@+id/container">
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

</RelativeLayout>

第二種情況

這裡寫圖片描述
主要程式碼：

public class OrderActivity extends Activity {

    private ImageView cursor;// 動畫圖片
    private TextView t1, t2, t3;// 頁卡頭標
    private int offset = 0;// 動畫圖片偏移量
    private int currentIndex = 0;// 當前頁卡編號
    private int bmpW;// 動畫圖片寬度
    private List<View> listViews; // Tab頁面列表
    private ViewPager viewPager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.order);

        viewPager = (ViewPager)findViewById(R.id.vPager);

        cursor = (ImageView) findViewById(R.id.cursor);
        bmpW = BitmapFactory.decodeResource(getResources(),
                R.drawable.tab_icon).getWidth();// 獲取圖片寬度
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int screenW = dm.widthPixels;// 獲取解析度寬度
        offset = (screenW/ 2 - bmpW) / 2;// 計算偏移量
        Matrix matrix = new Matrix();
        matrix.postTranslate(offset, 0);
        cursor.setImageMatrix(matrix);// 設定動畫初始位置


        t1 = (TextView)findViewById(R.id.text1);
        t2 = (TextView)findViewById(R.id.text2);
        t1.setOnClickListener(new MyOnClickListener(0));
        t2.setOnClickListener(new MyOnClickListener(1));


        listViews = new ArrayList<View>();
        LayoutInflater mInflater = getLayoutInflater();
        View payedView = mInflater.inflate(R.layout.order_payed, null);
        View payingView = mInflater.inflate(R.layout.order_paying, null);
        listViews.add(payedView);
        listViews.add(payingView);

        viewPager.setAdapter(new OrderPagerAdapter(listViews));
        viewPager.setCurrentItem(0);

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 偏移量
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int arg0) {
                Animation animation = new TranslateAnimation(one * currentIndex,
                        one * arg0, 0, 0);
                currentIndex = arg0;
                animation.setFillAfter(true);// true:圖片停留在動畫結束的位置
                animation.setDuration(300);
                cursor.startAnimation(animation);
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

    }
    public class MyOnClickListener implements View.OnClickListener {
        private int index = 0;

        public MyOnClickListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            viewPager.setCurrentItem(index);
        }
    }
}

佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
        android:background="#fff">
    <LinearLayout
            android:id="@+id/linearLayout1"
            android:layout_width="fill_parent"
            android:layout_height="60.0dip"
            android:background="#FFFFFF" >

        <TextView
                android:id="@+id/text1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="已支付"
                android:textColor="#717474"
                android:textSize="20.0dip" />
        <TextView android:layout_width="1dp"
                  android:layout_height="match_parent"
                  android:background="#717474"/>


        <TextView
                android:id="@+id/text2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_weight="1.0"
                android:gravity="center"
                android:text="未支付"
                android:textColor="#717474"
                android:textSize="20.0dip" />


    </LinearLayout>
    <TextView
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="#ffcacaca"/>
    <ImageView
            android:id="@+id/cursor"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="matrix"
            android:src="@drawable/tab_icon" />

    <android.support.v4.view.ViewPager
            android:id="@+id/vPager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1.0"
            android:background="#fff"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />
</LinearLayout>

相關文章