找了许多实现该功能的例子,但效果都不很理想,于是自己结合网上的资源及自己的总结,整理了一下,发出来,供大家参考。这个是自己做的,仿优酷客户端的。
优酷首页
个人中心
频道列表
****************************************************************************
贴代码吧:
1.创建项目
2.设置界面layout
主界面:activity_main.xml
3.设置各标签所对应的界面
频道列表:channel_layout.xml
优酷首页:home_layout.xml
个人中心:personal_layout.xml
这两个页面跟频道列表一样,还张图片即可
3.界面做好之后,就是主程序了
MainActivity.java
其中的图片大家可以自行下载,实现效果就行,还有看到很多同学再问如何给viewpaper中的每个view设置监听,在这里告诉大家一下,设置监听需要在listViews.add()之前获得控件并监听,之后再添加,否则不起作用,如本程序中隐去的btn监听
![](http://img.bbs.csdn.net/upload/201311/29/1385702188_24967.png)
优酷首页
![](http://img.bbs.csdn.net/upload/201311/29/1385702228_42494.png)
个人中心
![](http://img.bbs.csdn.net/upload/201311/29/1385702255_520895.png)
频道列表
****************************************************************************
贴代码吧:
1.创建项目
2.设置界面layout
主界面:activity_main.xml
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
|
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
LinearLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
xmlns:umadsdk
=
"http://schemas.android.com/apk/res/com.LoveBus"
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:orientation
=
"vertical"
>
<
ImageView
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:src
=
"@drawable/title"
/>
<
RelativeLayout
android:id
=
"@+id/linearLayout1"
android:layout_width
=
"fill_parent"
android:layout_height
=
"40dip"
android:background
=
"#FFFFFF"
android:orientation
=
"vertical"
>
<
LinearLayout
android:id
=
"@+id/tabText"
android:layout_marginTop
=
"10dp"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:orientation
=
"horizontal"
>
<
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
=
"#000000"
android:textSize
=
"14sp"
/>
<
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
=
"#000000"
android:textSize
=
"14sp"
/>
<
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
=
"#000000"
android:textSize
=
"14sp"
/>
</
LinearLayout
>
<
ImageView
android:id
=
"@+id/cursor"
android:layout_width
=
"fill_parent"
android:layout_height
=
"wrap_content"
android:scaleType
=
"matrix"
android:layout_alignParentBottom
=
"true"
android:src
=
"@drawable/slide"
/>
</
RelativeLayout
>
<
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
=
"#000000"
android:flipInterval
=
"30"
android:persistentDrawingCache
=
"animation"
/>
</
LinearLayout
>
|
3.设置各标签所对应的界面
频道列表:channel_layout.xml
1
2
3
4
5
6
7
8
9
10
11
12
|
<?
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"
>
<
ImageView
android:layout_width
=
"fill_parent"
android:layout_height
=
"fill_parent"
android:src
=
"@drawable/lay3"
/>
</
LinearLayout
>
|
优酷首页:home_layout.xml
个人中心:personal_layout.xml
这两个页面跟频道列表一样,还张图片即可
3.界面做好之后,就是主程序了
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
|
package
com.example.viewpaper1;
import
java.util.ArrayList;
import
java.util.List;
import
android.os.Bundle;
import
android.os.Parcelable;
import
android.app.Activity;
import
android.app.AlertDialog;
import
android.graphics.BitmapFactory;
import
android.graphics.Matrix;
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.view.LayoutInflater;
import
android.view.Menu;
import
android.view.View;
import
android.view.Window;
import
android.view.View.OnClickListener;
import
android.view.ViewGroup;
import
android.view.animation.Animation;
import
android.view.animation.TranslateAnimation;
import
android.widget.Button;
import
android.widget.ImageView;
import
android.widget.TextView;
public
class
MainActivity
extends
Activity {
private
ViewPager mPager;
//页面内容
private
List<View> listViews;
// Tab页面列表
private
TextView t1, t2, t3;
// 页卡头标
private
int
screenW ;
private
int
currIndex =
1
;
// 当前页卡编号
private
int
ivCursorWidth;
// 动画图片宽度
private
int
tabWidth;
// 每个tab头的宽度
private
int
fromX;
// 滑块儿的初始位置(距屏幕边缘的距离)
private
ImageView slideImage;
//下划线图片
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super
.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
// 设置无标题模式
setContentView(R.layout.activity_main);
InitTextView();
InitViewPager();
InitImageView();
}
/**
* 初始化头标
*/
private
void
InitTextView() {
t1 = (TextView) findViewById(R.id.text1);
t2 = (TextView) findViewById(R.id.text2);
t3 = (TextView) findViewById(R.id.text3);
t1.setOnClickListener(
new
MyOnClickListener(
0
));
t2.setOnClickListener(
new
MyOnClickListener(
1
));
t3.setOnClickListener(
new
MyOnClickListener(
2
));
}
/**
* 头标点击监听
*/
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);
}
};
/**
* 初始化ViewPager
*/
private
void
InitViewPager() {
mPager = (ViewPager) findViewById(R.id.vPager);
listViews =
new
ArrayList<View>();
LayoutInflater mInflater = getLayoutInflater();
View v = (View)mInflater.inflate(R.layout.personal_layout,
null
);
// Button btn=(Button)v.findViewById(R.id.btn);
// btn.setOnClickListener(new OnClickListener() {
// @Override
// public void onClick(View arg0) {
// showDialog("提示", "btn");
// }
// });
listViews.add(v);
listViews.add(mInflater.inflate(R.layout.home_layout,
null
));
listViews.add(mInflater.inflate(R.layout.channel_layout,
null
));
mPager.setAdapter(
new
MyPagerAdapter(listViews));
//设置进入系统后默认显示的页面
mPager.setCurrentItem(
1
);
mPager.setOnPageChangeListener(
new
MyOnPageChangeListener());
}
/**
* 适配器
* @author baiyuliang
*/
class
MyPagerAdapter
extends
PagerAdapter {
public
List<View> mListViews;
public
MyPagerAdapter(List<View> mListViews) {
this
.mListViews = mListViews;
}
@Override
public
void
destroyItem(View arg0,
int
arg1, Object arg2) {
((ViewPager) arg0).removeView(mListViews.get(arg1));
}
@Override
public
void
finishUpdate(View arg0) {
}
@Override
public
int
getCount() {
return
mListViews.size();
}
@Override
public
Object instantiateItem(View arg0,
int
arg1) {
((ViewPager) arg0).addView(mListViews.get(arg1),
0
);
return
mListViews.get(arg1);
}
@Override
public
boolean
isViewFromObject(View arg0, Object arg1) {
return
arg0 == (arg1);
}
@Override
public
void
restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public
Parcelable saveState() {
return
null
;
}
@Override
public
void
startUpdate(View arg0) {
}
}
/**
* 初始化动画
*/
private
void
InitImageView() {
//获取滑块儿控件
slideImage=(ImageView) findViewById(R.id.cursor);
DisplayMetrics dm = getResources().getDisplayMetrics();
screenW = dm.widthPixels;
// 获取分辨率宽度(屏幕宽度)
ivCursorWidth = BitmapFactory.decodeResource(getResources(),R.drawable.slide).getWidth();
// 获取滑块儿图片宽度
//每个tab宽度为屏幕宽度/tab数量
tabWidth = screenW / listViews.size();
//如果滑块儿图片宽度超过每个tab的宽度时,将滑块儿宽度设置为与tab宽度相同
if
(ivCursorWidth >= tabWidth) {
slideImage.getLayoutParams().width = tabWidth;
ivCursorWidth = tabWidth;
fromX=
0
;
}
else
{
fromX = (tabWidth - ivCursorWidth) /
2
;
}
// 设置动画初始位置
Matrix matrix =
new
Matrix();
matrix.postTranslate( fromX+tabWidth,
0
);
slideImage.setImageMatrix(matrix);
}
/**
* 页面切换监听
*/
public
class
MyOnPageChangeListener
implements
OnPageChangeListener {
@Override
public
void
onPageSelected(
int
arg0) {
//设置页面切换时动画偏移量
Animation animation =
new
TranslateAnimation(tabWidth * currIndex-tabWidth, tabWidth * arg0-tabWidth,
0
,
0
);
currIndex = arg0;
animation.setFillAfter(
true
);
//图片停在动画结束位置
animation.setDuration(
0
);
//设置动画移动毫秒数
slideImage.startAnimation(animation);
}
@Override
public
void
onPageScrolled(
int
arg0,
float
arg1,
int
arg2) {
}
@Override
public
void
onPageScrollStateChanged(
int
arg0) {
}
}
private
void
showDialog(String title,String msg){
AlertDialog.Builder builder =
new
AlertDialog.Builder(
this
);
builder.setIcon(android.R.drawable.ic_dialog_info);
builder.setTitle(title);
builder.setMessage(msg);
builder.setPositiveButton(
"确定"
,
null
);
builder.create().show();
}
}
|
其中的图片大家可以自行下载,实现效果就行,还有看到很多同学再问如何给viewpaper中的每个view设置监听,在这里告诉大家一下,设置监听需要在listViews.add()之前获得控件并监听,之后再添加,否则不起作用,如本程序中隐去的btn监听