• 【Android UI】案例03滑动切换效果的实现(ViewPager)


           本例使用ViewPager实现滑动切换的效果。本例涉及的ViewPager。为android.support.v4.view.ViewPager。所以须要在android项目中导入android-support-v4.jar。
           本例中ViewPager是实现滑动效果的核心部分。对其设置PageChangeListener监听事件,是实现滑动效果的核心思路。

    【转载使用,请注明出处:http://blog.csdn.net/mahoking
           首先是主界面layout.xml文件。activity_03_viewpager.xml。

    主界面的布局是顶部为页面标签,点击标签或滑动页面都能够实现切换页面的功能。

    <?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" >
        <LinearLayout android:layout_width="match_parent"
            android:layout_height="40dp"
            android:orientation="horizontal">
            <TextView android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="选项卡01"
                android:id="@+id/activity_03_viewpager_textview_01"/>
            <TextView android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:text="选项卡02"
                android:gravity="center"
                android:id="@+id/activity_03_viewpager_textview_02"/>
            <TextView android:layout_height="match_parent"
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:text="选项卡03"
                android:id="@+id/activity_03_viewpager_textview_03"/>
        </LinearLayout>
    	<ImageView
    	        android:id="@+id/cursor"
    	        android:layout_width="match_parent"
    	        android:layout_height="wrap_content"
    	        android:scaleType="matrix"
    	        android:src="@drawable/example03_cursor" />
    	
    	<android.support.v4.view.ViewPager
            android:id="@+id/activity_03_viewpager_vPager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1.0"
            android:background="#000000"
            android:flipInterval="30"
            android:persistentDrawingCache="animation" />
    </LinearLayout>

           以上须要一个ImageView组件,该组件实现一种动态移动标签的效果,读者能够自行选择喜欢的标签下的底部长方形图片。可參考效果截图。


          主Activity(ViewPagerActivity)的编写。

    首先是全局变量的定义:

    private ViewPager mPager;// 页卡内容
    private List<View> listViews; // Tab页面列表
    private ImageView cursor;// 动绘图片
    private TextView t1, t2, t3;// 页卡头标
    private int offset = 0;// 动绘图片偏移量
    private int currIndex = 0;// 当前页卡编号
    private int bmpW;// 动绘图片宽度

             本例提供了三个初始化布局空间的方法,分别为:initTextViews()、initImageView()、initViewPager()。

    initTextViews()

    private void initTextViews() {
    		t1 = (TextView) findViewById(R.id.activity_03_viewpager_textview_01);
    		t2 = (TextView) findViewById(R.id.activity_03_viewpager_textview_02);
    		t3 = (TextView) findViewById(R.id.activity_03_viewpager_textview_03);
    
    		t1.setOnClickListener(new MyOnClickListener(0));
    		t2.setOnClickListener(new MyOnClickListener(1));
    		t3.setOnClickListener(new MyOnClickListener(2));
    	}


    initImageView()

    private void initViewPager() {
    
    		mPager = (ViewPager) findViewById(R.id.activity_03_viewpager_vPager);
    		listViews = new ArrayList<View>();
    		LayoutInflater mInflater = getLayoutInflater();
    		listViews.add(mInflater.inflate(R.layout.layout_03_layout01, null));
    		listViews.add(mInflater.inflate(R.layout.layout_03_layout02, null));
    		listViews.add(mInflater.inflate(R.layout.layout_03_layout03, null));
    		mPager.setAdapter(new ViewPagerAdapter(listViews));
    		mPager.setCurrentItem(0);
    		mPager.setOnPageChangeListener(new MyOnPageChangeListener());
    	}

    initViewPager()

    /**
    	 * 初始化动画
    	 */
    	private void initImageView() {
    		cursor = (ImageView) findViewById(R.id.cursor);
    		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.example03_cursor)
    				.getWidth();// 获取图片宽度
    		DisplayMetrics dm = new DisplayMetrics();
    		getWindowManager().getDefaultDisplay().getMetrics(dm);
    		int screenW = dm.widthPixels;// 获取分辨率宽度
    		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
    		Matrix matrix = new Matrix();
    		matrix.postTranslate(offset, 0);
    		cursor.setImageMatrix(matrix);// 设置动画初始位置
    	}


            有上述方法可见,本例须要两内部类MyOnClickListener、MyOnPageChangeListener,去处理监听事件。


    MyOnClickListener

    /**
    	 * 点击监听事件
    	 *
    	 */
    	public class MyOnClickListener implements View.OnClickListener {
    		private int index = 0;
    
    		public MyOnClickListener(int i) {
    			index = i;
    		}
    
    		@Override
    		public void onClick(View v) {
    			mPager.setCurrentItem(index);
    		}
    	};

    MyOnPageChangeListener

    /**
    	 * 
    	 *页卡切换监听
    	 */
    	public class MyOnPageChangeListener implements OnPageChangeListener{
    		 int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
    		       int two = one * 2;// 页卡1 -> 页卡3 偏移量
    		
    		        @Override
    	         public void onPageSelected(int arg0) {
    	             Animation animation = null;
    		             switch (arg0) {
    	            case 0:
    		                if (currIndex == 1) {
    		                    animation = new TranslateAnimation(one, 0, 0, 0);
    		                 } else if (currIndex == 2) {
    		                    animation = new TranslateAnimation(two, 0, 0, 0);
    		                 }
    		                 break;
    		            case 1:
    		                 if (currIndex == 0) {
    		                    animation = new TranslateAnimation(offset, one, 0, 0);
    	                 } else if (currIndex == 2) {
    	                     animation = new TranslateAnimation(two, one, 0, 0);
    		                 }
    	                break;
    		            case 2:
    		                if (currIndex == 0) {
    		                    animation = new TranslateAnimation(offset, two, 0, 0);
    		                } else if (currIndex == 1) {
    	                    animation = new TranslateAnimation(one, two, 0, 0);
    		                 }
    	                 break;
    		            }
    		             currIndex = arg0;
    		             animation.setFillAfter(true);// True:图片停在动画结束位置
    		            animation.setDuration(300);
    		             cursor.startAnimation(animation);
    		         }
    
    	         @Override
    	        public void onPageScrolled(int arg0, float arg1, int arg2) {
    		         }
    	 
    		         @Override
    		        public void onPageScrollStateChanged(int arg0) {
    		        }
    	}


             在此补充一下。本例须要展示三个页卡,所以还须要三个页卡内容的界面设计。在这里我们仅仅设置了背景颜色,仅仅为起到差别作用。

    layout_03_layout01.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        android:background="#FF6666">
        
    </LinearLayout>


    效果截图:

     

    【转载使用。请注明出处:http://blog.csdn.net/mahoking

  • 相关阅读:
    SqQueue(环状队列(顺序表结构))
    LinkQueue(链队列)
    CharMatch(括号匹配)
    LinkStack
    x-boot
    安装npm及cnpm(Windows)
    sourcetree跳过注册的方法
    Mysql 5.7 CentOS 7 安装MHA
    ORA-12519 ORA-12516
    lisp : set 与setq 函数
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/5058998.html
Copyright © 2020-2023  润新知