首页 > 代码库 > tab界面实现方式之viewpager+view
tab界面实现方式之viewpager+view
这里，我将说下使用viewpager加上view来实现tab界面。其实这个并不陌生，这个就是我们在学习最初的viewpager的时候，viewpager的使用方式。
基本思想就是：将多个xml布局文件转换为view对象，再加到Adapter上去。
其中实现xml文件往view对象的转换的两种方式：
1.LayoutInflate Lf = getLayoutInflate.from(this)
View view = Lf.inflate(resource, root)
2.View view = View.inflate(Context, resource, root)
在我这个事例中有一个小问题要注意的是：我在这里设置的是LineaLayout的监听事件，同时给ImageButton加一个属性：android:onclickable = "false"。这样能保证当用户点击textview或者imagebutton（凡是点击在LinearLayout上，都可以执行）。话不多说，直接贴代码
MainActivity的布局文件代码
xml代码
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 tools:context="com.example.android_tab1.MainActivity" > 7 8 <LinearLayout 9 android:layout_width="match_parent"10 android:layout_height="wrap_content" >11 12 <include layout="@layout/top" />13 </LinearLayout>14 15 <LinearLayout16 android:layout_weight="1"17 android:layout_width="match_parent"18 android:layout_height="0dp" >19 20 <android.support.v4.view.ViewPager21 android:id="@+id/viewpager"22 android:layout_width="match_parent"23 android:layout_height="match_parent" />24 </LinearLayout>25 26 <LinearLayout27 android:layout_width="match_parent"28 android:layout_height="wrap_content" >29 30 <include layout="@layout/bottom" />31 </LinearLayout>32 33 </LinearLayout>
top文件代码
xml代码
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="30dp" 5 android:background="@drawable/title_bar" 6 android:orientation="vertical" > 7 <TextView 8 android:gravity="center" 9 android:id="@+id/textview_top"10 android:layout_width="match_parent"11 android:layout_height="match_parent"12 android:text="@string/textview_top_string"13 android:textColor="#ffffff"14 />15 16 </LinearLayout>
buttom文件代码
xml代码
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="55dp" 5 android:background="@drawable/bottom_bar" 6 android:orientation="horizontal" > 7 8 <LinearLayout 9 android:id="@+id/linear_weixin" 10 android:layout_width="0dp" 11 android:layout_height="match_parent" 12 android:layout_weight="1" 13 android:gravity="center" 14 android:orientation="vertical" > 15 16 <ImageButton 17 android:id="@+id/imagebutton_weixin" 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:background="#00000000" 21 android:clickable="false" 22 android:src="@drawable/tab_weixin_pressed" /> 23 24 <TextView 25 android:layout_width="wrap_content" 26 android:layout_height="wrap_content" 27 android:text="微信" 28 android:clickable="false" 29 android:textColor="#ffffff" /> 30 </LinearLayout> 31 32 <LinearLayout 33 android:layout_width="0dp" 34 android:layout_height="match_parent" 35 android:layout_weight="1" 36 android:id="@+id/linear_friend" 37 android:gravity="center" 38 android:orientation="vertical" > 39 40 <ImageButton 41 android:id="@+id/imagebutton_friend" 42 android:layout_width="wrap_content" 43 android:layout_height="wrap_content" 44 android:background="#00000000" 45 android:clickable="false" 46 android:src="@drawable/tab_find_frd_normal" /> 47 48 <TextView 49 android:layout_width="wrap_content" 50 android:layout_height="wrap_content" 51 android:text="朋友" 52 android:textColor="#ffffff" /> 53 </LinearLayout> 54 55 <LinearLayout 56 android:id="@+id/linear_address" 57 android:layout_width="0dp" 58 android:layout_height="match_parent" 59 android:layout_weight="1" 60 android:gravity="center" 61 android:orientation="vertical" > 62 63 <ImageButton 64 android:id="@+id/imagebutton_address" 65 android:layout_width="wrap_content" 66 android:layout_height="wrap_content" 67 android:background="#00000000" 68 android:clickable="false" 69 android:src="@drawable/tab_address_normal" /> 70 71 <TextView 72 android:layout_width="wrap_content" 73 android:layout_height="wrap_content" 74 android:text="通讯录" 75 android:textColor="#ffffff" /> 76 </LinearLayout> 77 78 <LinearLayout 79 android:id="@+id/linear_setting" 80 android:layout_width="0dp" 81 android:layout_height="match_parent" 82 android:layout_weight="1" 83 android:gravity="center" 84 android:orientation="vertical" > 85 86 <ImageButton 87 android:id="@+id/imagebutton_setting" 88 android:layout_width="wrap_content" 89 android:layout_height="wrap_content" 90 android:background="#00000000" 91 android:clickable="false" 92 android:src="@drawable/tab_settings_normal" /> 93 94 <TextView 95 android:layout_width="wrap_content" 96 android:layout_height="wrap_content" 97 android:text="设置" 98 android:textColor="#ffffff" /> 99 </LinearLayout>100 101 </LinearLayout>
view1文件代码
xml代码
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 <TextView 7 android:layout_width="match_parent" 8 android:layout_height="match_parent" 9 android:text="this is first tab"10 android:gravity="center"11 />12 13 </LinearLayout>
至于view2，view3，view4代码与view1差不多，只是在text上的内容改变了。
MainActivity代码
JAVA代码
1 package com.example.android_tab1; 2 import java.util.ArrayList; 3 import java.util.List; 4 5 /* 6 * 既能滑动又能点击 7 */ 8 import android.app.Activity; 9 import android.os.Bundle; 10 import android.support.v4.view.ViewPager; 11 import android.support.v4.view.ViewPager.OnPageChangeListener; 12 import android.util.Log; 13 import android.view.LayoutInflater; 14 import android.view.View; 15 import android.view.View.OnClickListener; 16 import android.view.Window; 17 import android.widget.ImageButton; 18 import android.widget.LinearLayout; 19 20 public class MainActivity extends Activity implements OnClickListener{ 21 private ViewPager viewpager = null; 22 private List<View> list = null; 23 private ImageButton imagebutton_weixin = null; 24 private ImageButton imagebutton_friend = null; 25 private ImageButton imagebutton_address = null; 26 private ImageButton imagebutton_setting = null; 27 28 private LinearLayout linear_weixin = null; 29 private LinearLayout linear_friend = null; 30 private LinearLayout linear_address = null; 31 private LinearLayout linear_setting = null; 32 protected void onCreate(Bundle savedInstanceState) { 33 super.onCreate(savedInstanceState); 34 requestWindowFeature(Window.FEATURE_NO_TITLE); 35 setContentView(R.layout.activity_main); 36 initview(); 37 } 38 private void initview() 39 { 40 viewpager = (ViewPager) findViewById(R.id.viewpager); 41 42 imagebutton_weixin = (ImageButton) findViewById(R.id.imagebutton_weixin); 43 imagebutton_friend = (ImageButton) findViewById(R.id.imagebutton_friend); 44 imagebutton_address = (ImageButton) findViewById(R.id.imagebutton_address); 45 imagebutton_setting = (ImageButton) findViewById(R.id.imagebutton_setting); 46 47 linear_weixin = (LinearLayout) findViewById(R.id.linear_weixin); 48 linear_friend = (LinearLayout) findViewById(R.id.linear_friend); 49 linear_address = (LinearLayout) findViewById(R.id.linear_address); 50 linear_setting = (LinearLayout) findViewById(R.id.linear_setting); 51 list = new ArrayList<View>(); 52 LayoutInflater lf = LayoutInflater.from(this); 53 View view1 = lf.inflate(R.layout.view1, null); 54 View view2 = lf.inflate(R.layout.view2, null); 55 View view3 = lf.inflate(R.layout.view3, null); 56 View view4 = lf.inflate(R.layout.view4, null); 57 list.add(view1); 58 list.add(view2); 59 list.add(view3); 60 list.add(view4); 61 Myadapter myadapter = new Myadapter(list); 62 viewpager.setAdapter(myadapter); 63 viewpager.setOnPageChangeListener(new OnPageChangeListener() { 64 public void onPageSelected(int arg0) { 65 resetimage(); 66 switch(arg0) 67 { 68 case 0: 69 { 70 imagebutton_weixin.setImageResource(R.drawable.tab_weixin_pressed); 71 break; 72 } 73 case 1: 74 { 75 imagebutton_friend.setImageResource(R.drawable.tab_find_frd_pressed); 76 break; 77 } 78 case 2: 79 { 80 imagebutton_address.setImageResource(R.drawable.tab_address_pressed); 81 break; 82 } 83 case 3: 84 { 85 imagebutton_setting.setImageResource(R.drawable.tab_settings_pressed); 86 break; 87 } 88 89 } 90 } 91 92 @Override 93 public void onPageScrolled(int arg0, float arg1, int arg2) { 94 95 } 96 97 @Override 98 public void onPageScrollStateChanged(int arg0) { 99 100 }101 });102 Log.i("main", "1");103 linear_weixin.setOnClickListener(this);104 Log.i("main", "2");105 linear_friend.setOnClickListener(this);106 linear_address.setOnClickListener(this);107 linear_setting.setOnClickListener(this);108 }109 public void onClick(View v) {110 resetimage();111 switch(v.getId())112 {113 114 case R.id.linear_weixin:115 {116 Log.i("main", "3");117 viewpager.setCurrentItem(0);118 Log.i("main", "4");119 imagebutton_weixin.setImageResource(R.drawable.tab_weixin_pressed);120 break;121 }122 case R.id.linear_friend:123 {124 viewpager.setCurrentItem(1);125 imagebutton_friend.setImageResource(R.drawable.tab_find_frd_pressed);126 break;127 }128 case R.id.linear_address:129 {130 viewpager.setCurrentItem(2);131 imagebutton_address.setImageResource(R.drawable.tab_address_pressed);132 break;133 }134 case R.id.linear_setting:135 {136 viewpager.setCurrentItem(3);137 imagebutton_setting.setImageResource(R.drawable.tab_settings_pressed);138 break;139 }140 }141 }142 private void resetimage()143 {144 imagebutton_weixin.setImageResource(R.drawable.tab_weixin_normal);145 imagebutton_friend.setImageResource(R.drawable.tab_find_frd_normal);146 imagebutton_address.setImageResource(R.drawable.tab_address_normal);147 imagebutton_setting.setImageResource(R.drawable.tab_settings_normal);148 }149 }
tab界面实现方式之viewpager+view
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。