使用ViewPager来实现Tab的效果
16lz
2021-01-26
程序运行之后将要实现的效果如下图所示：
下边就详细的说明一下实现代码：
1、布局实现
1）上边的布局很简单，命名为top.xml，代码如下：
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="fill_parent" 3 android:layout_height="45dp" 4 android:background="#000000" 5 android:gravity="center" 6 android:orientation="vertical" > 7 8 <TextView 9 android:layout_width="wrap_content"10 android:layout_height="45dp"11 android:layout_gravity="center"12 android:text="微信"13 android:textColor="#FFFFFF"14 android:textSize="30sp"15 android:textStyle="bold" />16 17 </LinearLayout>
2）下边的布局，分别由4个垂直分布的LinearLayout构成，每个LinearLayout由ImageButton和TextView构成，,命名为bottom.xml，代码如下：(中间的代码有省略)
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 android:layout_width="fill_parent" 3 android:layout_height="wrap_content" 4 android:background="#FFFFFF" 5 android:gravity="center" 6 android:orientation="horizontal" > 7 8 <LinearLayout 9 android:id="@+id/tab_weixin"10 android:layout_width="0dp"11 android:layout_height="wrap_content"12 android:layout_weight="1"13 android:gravity="center"14 android:orientation="vertical" >15 16 <ImageButton17 android:id="@+id/weixin_img"18 android:layout_width="wrap_content"19 android:layout_height="wrap_content"20 android:clickable="false"21 android:src="@drawable/yesb" />22 23 <TextView24 android:layout_width="wrap_content"25 android:layout_height="wrap_content"26 android:text="微信"27 android:textColor="#000000" />28 </LinearLayout>29 .30 .31 .32 <LinearLayout33 android:id="@+id/tab_setting"34 android:layout_width="0dp"35 android:layout_height="wrap_content"36 android:layout_weight="1"37 android:gravity="center"38 android:orientation="vertical" >39 40 <ImageButton41 android:id="@+id/setting_img"42 android:layout_width="wrap_content"43 android:layout_height="wrap_content"44 android:clickable="false"45 android:src="@drawable/jibla" />46 47 <TextView48 android:layout_width="wrap_content"49 android:layout_height="wrap_content"50 android:text="设置"51 android:textColor="#000000" />52 </LinearLayout>53 54 </LinearLayout>View Code
3）实现整体布局：
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:id="@+id/container" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:orientation="vertical" > 7 8 <include layout="@layout/top" /> 9 10 <android.support.v4.view.ViewPager11 android:id="@+id/viewpager"12 android:layout_width="wrap_content"13 android:layout_height="0dp"14 android:layout_weight="1" >15 </android.support.v4.view.ViewPager>16 17 <include layout="@layout/bottom" />18 19 </LinearLayout>View Code
2、使用Viewpager来实现Tab类似的效果：
1 @Override 2 protected void onCreate(Bundle savedInstanceState) { 3 super.onCreate(savedInstanceState); 4 requestWindowFeature(Window.FEATURE_NO_TITLE);// 必须在setContentView之前 5 setContentView(R.layout.activity_main); 6 initView(); 7 ininEvents(); 8 } 9 10 private void ininEvents() { 11 // TODO Auto-generated method stub 12 tab_weixin.setOnClickListener(this); 13 tab_friend.setOnClickListener(this); 14 tab_contact.setOnClickListener(this); 15 tab_setting.setOnClickListener(this); 16 // 给viewpager添加监听，使得华东viewpager的同时，下边的随之改变按钮的按下状态 17 viewpager.setOnPageChangeListener(new OnPageChangeListener() { 18 19 @Override 20 public void onPageSelected(int arg0) { 21 // TODO Auto-generated method stub 22 int currentItem = viewpager.getCurrentItem(); 23 resetImg(); 24 switch (currentItem) { 25 case 0: 26 weixin.setImageResource(R.drawable.yesr); 27 break; 28 case 1: 29 friend.setImageResource(R.drawable.jib); 30 break; 31 32 case 2: 33 contact.setImageResource(R.drawable.yesr); 34 break; 35 36 case 3: 37 setting.setImageResource(R.drawable.jib); 38 break; 39 40 default: 41 break; 42 } 43 } 44 45 @Override 46 public void onPageScrolled(int arg0, float arg1, int arg2) { 47 // TODO Auto-generated method stub 48 49 } 50 51 @Override 52 public void onPageScrollStateChanged(int arg0) { 53 // TODO Auto-generated method stub 54 55 } 56 }); 57 } 58 59 private void initView() { 60 // TODO Auto-generated method stub 61 viewpager = (ViewPager) findViewById(R.id.viewpager); 62 weixin = (ImageButton) findViewById(R.id.weixin_img); 63 friend = (ImageButton) findViewById(R.id.friend_img); 64 contact = (ImageButton) findViewById(R.id.contact_img); 65 setting = (ImageButton) findViewById(R.id.setting_img); 66 67 tab_weixin = (LinearLayout) findViewById(R.id.tab_weixin); 68 tab_friend = (LinearLayout) findViewById(R.id.tab_friend); 69 tab_contact = (LinearLayout) findViewById(R.id.tab_contact); 70 tab_setting = (LinearLayout) findViewById(R.id.tab_setting); 71 72 // 将布局转化为View 73 LayoutInflater inflater = LayoutInflater.from(this); 74 View view1 = inflater.inflate(R.layout.tab_01, null); 75 View view2 = inflater.inflate(R.layout.tab_02, null); 76 View view3 = inflater.inflate(R.layout.tab_03, null); 77 View view4 = inflater.inflate(R.layout.tab_04, null); 78 mViews.add(view1); 79 mViews.add(view2); 80 mViews.add(view3); 81 mViews.add(view4); 82 83 // 实例化PagerAdapter 84 adapter = new PagerAdapter() { 85 86 // 使用PagerAdapter一般还栩需要实现下面两个方法 87 @Override 88 public void destroyItem(ViewGroup container, int position, 89 Object object) { 90 // TODO Auto-generated method stub 91 container.removeView(mViews.get(position)); 92 } 93 94 // 初始化Item 95 @Override 96 public Object instantiateItem(ViewGroup container, int position) { 97 // TODO Auto-generated method stub 98 View view = mViews.get(position); 99 container.addView(view);100 return view;101 }102 103 // 使用PagerAdapter必须实现的两个方法104 @Override105 public int getCount() {106 // TODO Auto-generated method stub107 return mViews.size();108 }109 110 @Override111 public boolean isViewFromObject(View arg0, Object arg1) {112 // TODO Auto-generated method stub113 return arg0 == arg1;114 }115 116 };117 viewpager.setAdapter(adapter);118 }119 120 @Override121 public void onClick(View arg0) {122 // TODO Auto-generated method stub123 resetImg();124 switch (arg0.getId()) {125 case R.id.tab_weixin:126 weixin.setImageResource(R.drawable.yesr);127 viewpager.setCurrentItem(0);128 break;129 case R.id.tab_friend:130 friend.setImageResource(R.drawable.jib);131 viewpager.setCurrentItem(1);132 break;133 case R.id.tab_contact:134 contact.setImageResource(R.drawable.yesr);135 viewpager.setCurrentItem(2);136 break;137 case R.id.tab_setting:138 setting.setImageResource(R.drawable.jib);139 viewpager.setCurrentItem(3);140 break;141 142 default:143 break;144 }145 }146 147 /**148 * 将所有的图片切换为暗色149 */150 private void resetImg() {151 // TODO Auto-generated method stub152 weixin.setImageResource(R.drawable.yesb);153 friend.setImageResource(R.drawable.jibla);154 contact.setImageResource(R.drawable.yesb);155 setting.setImageResource(R.drawable.jibla);156 157 }158 }View Code
不积跬步，无以至千里，不积小流，无以成江海
更多相关文章
- 【Android(安卓)开发教程】LinearLayout线性布局
- Android绘制进阶之四：在位图上绘制文本并旋转
- android AlertDialog布局 ——2
- Android侧拉框Demo
- Android(安卓)4.1/4.1.1 TextView.setText for Html 引发ArrayIn
- H5 调用android原生相机代码分析
- android 逆向工程-工具篇 jadx（九）
- 菜鸟Android(1)
- 浅入浅出Android（007）：看看你的手机上有哪些传感器