本文实例为大家分享了Android仿微信左右滑动点击切换页面和图标的具体代码，供大家参考，具体内容如下
目标效果：
使用鼠标滑动屏幕或者点击下边的小图标，可以更改页面和图标，因为没有那么多素材所以只用了两张图片区分。
1.layout文件夹下新建top.xml页面，作为顶部标题。
top.xml页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<?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="45dp" android:gravity="center" android:background="#000000" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffff" android:textSize="20sp" android:layout_gravity="center" android:textStyle="bold" /> </LinearLayout> |
2.新建bottom.xml页面，作为底部导航。
bottom.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
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
|
<?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="55dp" android:background="#000000" android:orientation="horizontal" > <!-- ImageButton没加android:clickable="false"时，点击下方的ImageBuutton不会改变页面，点击TextView才会改变页面，这是因为每个tab是一个LinearLayout，每个LinearLayout都有一个ImageButton，当点击ImageButton位置时，点击事件首先会到LinearLayout上，LinearLayout会去判断，发现内部有一个ImageButton可以解决点击事件，所以就把点击事件交给ImageButton，而ImageButton又没有写点击事件，所以点击事件就失效了。--> <LinearLayout android:id="@+id/tab_weixin" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_weixin_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#000000" android:clickable="false" android:src="@drawable/search" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/tab_friend" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_friend_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#000000" android:clickable="false" android:src="@drawable/study" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/tab_tongxunlu" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_tongxunlu_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#000000" android:clickable="false" android:src="@drawable/study" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/tab_set" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_set_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#000000" android:clickable="false" android:src="@drawable/study" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#ffffff" /> </LinearLayout> </LinearLayout> |
这里注意ImageButton的clickable属性，如果不设置false，那么鼠标点击不起作用，只有点击下边的TextView才会跳转页面。
3.新建tab01.xml页面，复制三个，只更改显示文本，作为切换页面。
tab01.xml页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<?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" > <TextView android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="Weixin Tab" android:textSize="30sp" android:textStyle="bold" android:gravity="center"/></LinearLayout> |
4.activity_main.xml页面导入顶部和底部xml文件，并放置ViewPager。
activity_main.xml页面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<LinearLayout 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" android:orientation="vertical"> <include layout="@layout/top"/> <android.support.v4.view.ViewPager android:id="@+id/id_viewpager" android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="0dp"> </android.support.v4.view.ViewPager> <include layout="@layout/bottom"/></LinearLayout> |
5.因为ViewPager是在jar包里，添加该控件需要写出路径，当记不住的时候，按下Ctrl+Shift+t，弹出框里输入“ViewPager”并选择，显示的页面中就包含该控件的路径。
6.新建pageAdapter.java，继承PageAdapter，实现四个方法。
pageAdapter.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
|
package com.example.adapter; import java.util.List; import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup; public class pageAdapter extends PagerAdapter { private List<View> mViews; public pageAdapter(List<View> mViews) { this.mViews = mViews; } /** * 重写四个方法 boolean isViewFromObject(View arg0, Object arg1) int getCount() * void destroyItem(ViewGroup container, int position,Object object) Object * instantiateItem(ViewGroup container, int position) */ // 从当前container中删除指定位置的view @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mViews.get(position)); } // 初始化view @Override public Object instantiateItem(ViewGroup container, int position) { View view = mViews.get(position); container.addView(view); return view; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } // 返回要滑动的view个数 @Override public int getCount() { return mViews.size(); } } |
7.MainActivity.java页面编写点击和滑动事件。
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
|
package com.example.studytab; import java.util.ArrayList;import java.util.List; import com.example.adapter.pageAdapter; import android.os.Bundle;import android.app.Activity;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.view.Window;import android.widget.ImageButton;import android.widget.LinearLayout; public class MainActivity extends Activity implements OnClickListener { private ViewPager mViewPager; private List<View> mViews = new ArrayList<View>(); private pageAdapter mAdapter = new pageAdapter(mViews); // Tab private LinearLayout mTabWeixin, mTabFriend, mTabTongxunlu, mTabSet; private ImageButton mWeixinImg, mFriendImg, mTongxunluImg, mSetImg; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题 setContentView(R.layout.activity_main); initView(); initEvents(); } //View的滑动事件 private void initEvents() { mTabWeixin.setOnClickListener(this); mTabFriend.setOnClickListener(this); mTabTongxunlu.setOnClickListener(this); mTabSet.setOnClickListener(this); //滑动切换页面 mViewPager.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { resetImg(); //将图片全部默认为不选中 int currentItem = mViewPager.getCurrentItem(); switch (currentItem) { case 0: mWeixinImg.setImageResource(R.drawable.search); break; case 1: mFriendImg.setImageResource(R.drawable.search); break; case 2: mTongxunluImg.setImageResource(R.drawable.search); break; case 3: mSetImg.setImageResource(R.drawable.search); break; default: break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } //实例化控件 private void initView() { mViewPager = (ViewPager) findViewById(R.id.id_viewpager); // Tab mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin); mTabFriend = (LinearLayout) findViewById(R.id.tab_friend); mTabTongxunlu = (LinearLayout) findViewById(R.id.tab_tongxunlu); mTabSet = (LinearLayout) findViewById(R.id.tab_set); // img mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img); mFriendImg = (ImageButton) findViewById(R.id.tab_friend_img); mTongxunluImg = (ImageButton) findViewById(R.id.tab_tongxunlu_img); mSetImg = (ImageButton) findViewById(R.id.tab_set_img); LayoutInflater mInflater = LayoutInflater.from(this); View tab01 = mInflater.inflate(R.layout.tab01, null); View tab02 = mInflater.inflate(R.layout.tab02, null); View tab03 = mInflater.inflate(R.layout.tab03, null); View tab04 = mInflater.inflate(R.layout.tab04, null); mViews.add(tab01); mViews.add(tab02); mViews.add(tab03); mViews.add(tab04); mViewPager.setAdapter(mAdapter); } //ImageButton的点击事件 @Override public void onClick(View view) { resetImg(); switch (view.getId()) { case R.id.tab_weixin: mViewPager.setCurrentItem(0);// 跳到第一个页面 mWeixinImg.setImageResource(R.drawable.search); // 图片变为选中 break; case R.id.tab_friend: mViewPager.setCurrentItem(1); mFriendImg.setImageResource(R.drawable.search); break; case R.id.tab_tongxunlu: mViewPager.setCurrentItem(2); mTongxunluImg.setImageResource(R.drawable.search); break; case R.id.tab_set: mViewPager.setCurrentItem(3); mSetImg.setImageResource(R.drawable.search); break; default: break; } } // 将所有的图片切换为未选中 private void resetImg() { mWeixinImg.setImageResource(R.drawable.study); mFriendImg.setImageResource(R.drawable.study); mTongxunluImg.setImageResource(R.drawable.study); mSetImg.setImageResource(R.drawable.study); } } |
8.运行就可以显示目标效果了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/hester_hester/article/details/51587907
