左右滑动的Tab

[文件] activity_main.ml 

?
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<? 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 = "wrap_content"
         android:gravity = "center"
         android:orientation = "horizontal"
         android:padding = "5dp" >
 
         < 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 = "#000"
             android:textSize = "15dp" />
 
         < 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 = "#000"
             android:textSize = "15dp" />
 
         < TextView
             android:id = "@+id/text3"
             android:layout_width = "fill_parent"
             android:layout_height = "fill_parent"
             android:layout_weight = "1.0"
             android:gravity = "center"
             android:text = "新闻资讯"
             android:textColor = "#000"
             android:textSize = "15dp" />
 
         < TextView
             android:id = "@+id/text4"
             android:layout_width = "fill_parent"
             android:layout_height = "fill_parent"
             android:layout_weight = "1.0"
             android:gravity = "center"
             android:text = "专题活动"
             android:textColor = "#000"
             android:textSize = "15dp" />
     </ LinearLayout >
 
     < ImageView
         android:id = "@+id/cursor"
         android:layout_width = "fill_parent"
         android:layout_height = "wrap_content"
         android:scaleType = "matrix"
         android:src = "@drawable/ic_xian_red" />
 
     < android.support.v4.view.ViewPager
         android:id = "@+id/tabpager"
         android:layout_width = "match_parent"
         android:layout_height = "0dp"
         android:layout_gravity = "center"
         android:layout_weight = "1" >
     </ android.support.v4.view.ViewPager >
 
</ LinearLayout >

2. [文件] MainActivity.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
package com.example.demo;
 
import java.util.ArrayList;
import java.util.List;
 
import android.app.Activity;
import android.app.LocalActivityManager;
import android.content.Intent;
import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView;
 
public class MainActivity extends Activity {
     
     private ViewPager mViewPager; // 页卡内容
     private ImageView mImageView; // 动画图片
     private TextView tv1, tv2, tv3, tv4;
     private int offset = 0 ; // 动画图片偏移量
     private int currIndex = 0 ; // 当前页卡编号
     private int bmpWidth; // 动画图片宽度
     private View view1, view2, view3, view4; // 各个页卡
     LocalActivityManager mLocalActivityManager = null ;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         mLocalActivityManager = new LocalActivityManager( this , true );
         mLocalActivityManager.dispatchCreate(savedInstanceState);
         initImageView();
         initTextView();
         initViewPager();
     }
 
     private void initViewPager() {
         mViewPager = (ViewPager) findViewById(R.id.tabpager);
         List<View> views = new ArrayList<View>(); // Tab页面列表
         Intent intentA = new Intent(MainActivity. this , JDActivity. class );
         views.add(getView( "A" , intentA));
         Intent intentB = new Intent(MainActivity. this , JRActivity. class );
         views.add(getView( "B" , intentB));
         Intent intentC = new Intent(MainActivity. this , XWActivity. class );
         views.add(getView( "C" , intentC));
         Intent intentD = new Intent(MainActivity. this , ZTActivity. class );
         views.add(getView( "D" , intentD));
         mViewPager.setAdapter( new TabViewPagerAdapter(views));
         mViewPager.setCurrentItem( 0 );
         mViewPager.setOnPageChangeListener( new MyOnPageChangeListener());
     }
 
     /**
      * 通过activity获取视图
      *
      */
     private View getView(String id, Intent intent) {
         return mLocalActivityManager.startActivity(id, intent).getDecorView();
     }
 
     /**
      * 初始化头标
      */
 
     private void initTextView() {
         tv1 = (TextView) findViewById(R.id.text1);
         tv2 = (TextView) findViewById(R.id.text2);
         tv3 = (TextView) findViewById(R.id.text3);
         tv4 = (TextView) findViewById(R.id.text4);
         tv1.setOnClickListener( new TabOnClickListener( 0 ));
         tv2.setOnClickListener( new TabOnClickListener( 1 ));
         tv3.setOnClickListener( new TabOnClickListener( 2 ));
         tv4.setOnClickListener( new TabOnClickListener( 3 ));
     }
 
     /**
      * 初始化动画
      */
 
     private void initImageView() {
         mImageView = (ImageView) findViewById(R.id.cursor);
         bmpWidth = BitmapFactory.decodeResource(getResources(),
                 R.drawable.ic_xian_red).getWidth(); // 获取图片宽度
         DisplayMetrics dm = new DisplayMetrics();
         getWindowManager().getDefaultDisplay().getMetrics(dm);
         int screenW = dm.widthPixels; // 获取分辨率宽度
         offset = (screenW / 4 - bmpWidth) / 2 ; // 计算偏移量
         Matrix matrix = new Matrix();
         matrix.postTranslate(offset, 0 );
         mImageView.setImageMatrix(matrix); // 设置动画初始位置
     }
 
     /**
      *
      * 头标点击监听
      */
     private class TabOnClickListener implements OnClickListener {
         private int index = 0 ;
 
         public TabOnClickListener( int i) {
             index = i;
         }
 
         public void onClick(View v) {
             mViewPager.setCurrentItem(index);
         }
 
     }
 
     public class TabViewPagerAdapter extends PagerAdapter {
         private List<View> mListViews;
 
         public TabViewPagerAdapter(List<View> mListViews) {
             this .mListViews = mListViews;
         }
 
         @Override
         public void destroyItem(ViewGroup container, int position, Object object) {
             container.removeView(mListViews.get(position));
         }
 
         @Override
         public Object instantiateItem(ViewGroup container, int position) {
             container.addView(mListViews.get(position), 0 );
             return mListViews.get(position);
         }
 
         @Override
         public int getCount() {
             return mListViews.size();
         }
 
         @Override
         public boolean isViewFromObject(View arg0, Object arg1) {
             return arg0 == arg1;
         }
     }
 
     public class MyOnPageChangeListener implements OnPageChangeListener {
 
         int one = offset * 2 + bmpWidth; // 页卡1 -> 页卡2 偏移量
         int two = one * 2 ; // 页卡1 -> 页卡3 偏移量
 
         public void onPageScrollStateChanged( int arg0) {
 
         }
 
         public void onPageScrolled( int arg0, float arg1, int arg2) {
 
         }
 
         public void onPageSelected( int arg0) {
             Animation animation = null ;
             switch (arg0) {
             case 0 :
                 Log.d( "TAG" , "0" );
                 tv1.setTextColor(Color.RED);
                 tv2.setTextColor(Color.BLACK);
                 tv3.setTextColor(Color.BLACK);
                 tv4.setTextColor(Color.BLACK);
                 break ;
             case 1 :
                 Log.d( "TAG" , "1" );
                 tv1.setTextColor(Color.BLACK);
                 tv2.setTextColor(Color.RED);
                 tv3.setTextColor(Color.BLACK);
                 tv4.setTextColor(Color.BLACK);
                 break ;
             case 2 :
                 Log.d( "TAG" , "2" );
                 tv1.setTextColor(Color.BLACK);
                 tv2.setTextColor(Color.BLACK);
                 tv3.setTextColor(Color.RED);
                 tv4.setTextColor(Color.BLACK);
                 break ;
             case 3 :
                 Log.d( "TAG" , "3" );
                 tv1.setTextColor(Color.BLACK);
                 tv2.setTextColor(Color.BLACK);
                 tv3.setTextColor(Color.BLACK);
                 tv4.setTextColor(Color.RED);
                 break ;
             }
             animation = new TranslateAnimation(one * currIndex, one * arg0, 0 ,
                     0 );
             currIndex = arg0;
             animation.setFillAfter( true ); // True:图片停在动画结束位置
             animation.setDuration( 100 );
             mImageView.startAnimation(animation);
             Log.d( "ReDianActivity:" , "您选择了" + mViewPager.getCurrentItem()
                     + "页卡" );
         }
     }
}

[removed] $(function() { function setCurrentSlide(ele, index) { $(".swiper1 .swiper-slide").removeClass("selected"); ele.addClass("selected"); //swiper1.initialSlide=index; } var swiper1 = new Swiper('.swiper1', { // 设置slider容器能够同时显示的slides数量(carousel模式)。 // 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。 // loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。 slidesPerView: 5.5, paginationClickable: true,//此参数设置为true时,点击分页器的指示点分页器会控制Swiper切换。 spaceBetween: 10,//slide之间的距离(单位px)。 freeMode: true,//默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动且不会贴合。 loop: false,//是否可循环 onTab: function(swiper) { var n = swiper1.clickedIndex; } }); swiper1.slides.each(function(index, val) { var ele = $(this); ele.on("click", function() { setCurrentSlide(ele, index); swiper2.slideTo(index, 500, false); //mySwiper.initialSlide=index; }); }); var swiper2 = new Swiper('.swiper2', { //freeModeSticky 设置为true 滑动会自动贴合 direction: 'horizontal',//Slides的滑动方向,可设置水平(horizontal)或垂直(vertical)。 loop: false, // effect : 'fade',//淡入 //effect : 'cube',//方块 //effect : 'coverflow',//3D流 // effect : 'flip',//3D翻转 autoHeight: true,//自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。 onSlideChangeEnd: function(swiper) { //回调函数,swiper从一个slide过渡到另一个slide结束时执行。 var n = swiper.activeIndex; setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n); swiper1.slideTo(n, 500, false); } }); }); [removed]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值