首页 > 其他 > 详细

实用的viewpager模板

时间:2014-07-23 16:28:21      阅读:479      评论:0      收藏:0      [点我收藏+]
 
这是一个简单的效果图:
bubuko.com,布布扣
 
 
 
主要布局文件有:
bubuko.com,布布扣
 

最主要的是:

/客户端/res/layout/activity_main.xml,其他的布局自己安排就可以了
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
 
    <RelativeLayout
        android:id="@+id/topBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bg_topbar" >
 
        <ImageButton
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:src="@drawable/back" />
 
        <ImageButton
            android:id="@+id/mark"
            android:layout_width="28dp"
            android:layout_height="28dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:background="@drawable/mark" />
 
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/app_name"
            android:textColor="#ffffffff"
            android:textSize="18sp" />
    </RelativeLayout>
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffeeeeee" >
 
        <TextView
            android:id="@+id/tvTag1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="首页"
            android:textColor="#ff000000"
            android:textSize="20sp" />
 
        <TextView
            android:id="@+id/tvTag2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="商品"
            android:textColor="#ff000000"
            android:textSize="20sp" />
 
        <TextView
            android:id="@+id/tvTag3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:text="评论"
            android:textColor="#ff000000"
            android:textSize="20sp" />
    </LinearLayout>
 
    <ImageView
        android:id="@+id/ivCursor"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="matrix"
        android:src="@drawable/cursor" />
 
    <android.support.v4.view.ViewPager
        android:id="@+id/vpViewPager1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
    </android.support.v4.view.ViewPager>
 
</LinearLayout> 

 

 
 public class MainActivity extends Activity implements OnClickListener {
 
    private ViewPager vpViewPager = null;
    private List<View> views = null;
 
    private int offset; // 间隔
    private int cursorWidth; // 游标的长度
    private int originalIndex = 0;
    private ImageView cursor = null;
    private ImageButton mark = null;
    private ImageButton back = null;
    private Animation animation = null;
    private boolean IsMark=false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
 
        ((ImageButton) findViewById(R.id.back)).setOnClickListener(this);
        ((ImageButton) findViewById(R.id.mark)).setOnClickListener(this);
 
        mark = (ImageButton) findViewById(R.id.mark);
        back = (ImageButton) findViewById(R.id.back);
 
        ((TextView) findViewById(R.id.tvTag1)).setOnClickListener(this);
        ((TextView) findViewById(R.id.tvTag2)).setOnClickListener(this);
        ((TextView) findViewById(R.id.tvTag3)).setOnClickListener(this);
 
        views = new ArrayList<View>();
        views.add(LayoutInflater.from(this).inflate(R.layout.index_fragment,
                null));
        views.add(LayoutInflater.from(this).inflate(R.layout.goods_fragment,
                null));
        views.add(LayoutInflater.from(this).inflate(R.layout.comment_fragment,
                null));
 
        vpViewPager = (ViewPager) findViewById(R.id.vpViewPager1);
 
        vpViewPager.setAdapter(new MyPagerAdapter(views));
        vpViewPager.setOnPageChangeListener(new MyOnPageChangeListener());
 
        initCursor(views.size());
 
        MyPagerAdapter myPagerAdapter = (MyPagerAdapter) vpViewPager
                .getAdapter();
        View v1 = myPagerAdapter.getItemAtPosition(0);
        View v2 = myPagerAdapter.getItemAtPosition(1);
        View v3 = myPagerAdapter.getItemAtPosition(2);
 
 
 
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
        case R.id.tvTag1:
            vpViewPager.setCurrentItem(0);
            break;
        case R.id.tvTag2:
            vpViewPager.setCurrentItem(1);
            break;
        case R.id.tvTag3:
            vpViewPager.setCurrentItem(2);
            break;
        case R.id.back:
            break;
 
        case R.id.mark:
            if(IsMark==false){
            mark.setImageResource(R.drawable.mark_success);
            Toast.makeText(this, "收藏成功", 0).show();
            IsMark=true;
            }
            break;
        }
    }
 
    /**
     * 根据tag的数量初始化游标的位置
     * 
     * @param tagNum
     */
    public void initCursor(int tagNum) {
        cursorWidth = BitmapFactory.decodeResource(getResources(),
                R.drawable.cursor).getWidth();
        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        offset = ((dm.widthPixels / tagNum) - cursorWidth) / 2;
 
        cursor = (ImageView) findViewById(R.id.ivCursor);
        Matrix matrix = new Matrix();
        matrix.setTranslate(offset, 0);
        cursor.setImageMatrix(matrix);
    }
 
    class MyOnPageChangeListener implements OnPageChangeListener {
        @Override
        public void onPageSelected(int arg0) {
            int one = 2 * offset + cursorWidth;
            int two = one * 2;
 
            switch (originalIndex) {
            case 0:
                if (arg0 == 1) {
                    animation = new TranslateAnimation(0, one, 0, 0);
                }
                if (arg0 == 2) {
                    animation = new TranslateAnimation(0, two, 0, 0);
                }
                break;
            case 1:
                if (arg0 == 0) {
                    animation = new TranslateAnimation(one, 0, 0, 0);
                }
                if (arg0 == 2) {
                    animation = new TranslateAnimation(one, two, 0, 0);
                }
                break;
            case 2:
                if (arg0 == 1) {
                    animation = new TranslateAnimation(two, one, 0, 0);
                }
                if (arg0 == 0) {
                    animation = new TranslateAnimation(two, 0, 0, 0);
                }
                break;
            }
            animation.setFillAfter(true);
            animation.setDuration(300);
            cursor.startAnimation(animation);
 
            originalIndex = arg0;
        }
 
        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
 
        }
 
        @Override
        public void onPageScrollStateChanged(int arg0) {
 
        }
 
    }
 
}

 

public class MyPagerAdapter extends PagerAdapter {
 
    private List<View> views;
 
    public MyPagerAdapter(List<View> views) {
        this.views = views;
    }
 
    @Override
    public int getCount() {
        return views.size();
    }
 
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }
 
    @Override
    public void destroyItem(View container, int position, Object object) {
        // 将指定的view从viewPager中移除
        ((ViewPager) container).removeView(views.get(position));
    }
 
    @Override
    public Object instantiateItem(View container, int position) {
        // 将view添加到viewPager中
        ((ViewPager) container).addView(views.get(position));
        return views.get(position);
    }
 
    public View getItemAtPosition(int position) {
        return views.get(position);
    }
 
}  

 

虽然是个小Demo,但是如果需要可以找我要全部源码。



 

实用的viewpager模板,布布扣,bubuko.com

实用的viewpager模板

原文:http://www.cnblogs.com/little-byte/p/2884e2e12c4f618eb917aac2c5b7e481.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!