tab界面实现方式之viewpager+view

时间：2016-10-02 19:29:49 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：

这里，我将说下使用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     <LinearLayout
16         android:layout_weight="1"
17         android:layout_width="match_parent"
18         android:layout_height="0dp" >
19 
20         <android.support.v4.view.ViewPager
21             android:id="@+id/viewpager"
22             android:layout_width="match_parent"
23             android:layout_height="match_parent" />
24     </LinearLayout>
25 
26     <LinearLayout
27         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

标签：

原文地址：http://www.cnblogs.com/Stay-Hungry-Stay-Foolish/p/5927790.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行