ViewPager实现Tab/模仿微信界面

转载请注明出处：http://blog.csdn.net/mr_leixiansheng/article/details/68488617

推荐关联文章： Fragment实现Tab/模仿微信界面

推荐关联文章： ViewPager+FragmentPagerAdapter实现Tab/模仿微信界面（推荐使用）



步骤：

1、添加数据源  List<View> viewList

2、设置适配器  继承 PagerAdapter

3、添加添加适配器

代码如下：

1、布局

（4个View相似，只贴出一个）

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<TextView
android:text="第一页"
android:textSize="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

引入菜单

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#000000">

<LinearLayout
android:gravity="center"
android:layout_margin="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/icon"
android:src="@drawable/actionbar_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
<TextView
android:id="@+id/title"
android:text="微信"
android:textSize="20dp"
android:textColor="#ffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<ImageView
android:src="@drawable/actionbar_search_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="@drawable/actionbar_add_icon"
android:layout_width="40dp"
android:layout_height="40dp" />
<ImageView
android:src="@drawable/actionbar_more_icon"
android:layout_width="40dp"
android:layout_height="40dp" />

</LinearLayout>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="center"
android:background="#000000">

<LinearLayout
android:id="@+id/mes"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/mes_imag"
android:src="@drawable/tab_weixin_pressed"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="#ffffffff"
android:text="消息"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:id="@+id/friend"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/friend_imag"
android:src="@drawable/tab_find_frd_normal"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:textColor="#ffffffff"
android:text="朋友"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:id="@+id/address"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/address_imag"
android:src="@drawable/tab_address_normal"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="联系人"
android:textColor="#ffffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

<LinearLayout
android:id="@+id/setting"
android:orientation="vertical"
android:gravity="center"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/setting_imag"
android:src="@drawable/tab_settings_normal"
android:layout_width="30dp"
android:layout_height="30dp" />
<TextView
android:text="设置"
android:textColor="#ffffffff"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

</LinearLayout>

主页面

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.leixiansheng.weixin.MainActivity">

<include layout="@layout/top"/>

<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp">
</android.support.v4.view.ViewPager>

<include layout="@layout/bottom"/>

</LinearLayout>

2、设置适配器（继承PagerAdapter）

package com.example.leixiansheng.weixin;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
* Created by Leixiansheng on 2017/3/29.
*/

public class MyPagerAdapter extends PagerAdapter {

List<View> viewList;

public MyPagerAdapter(List<View> viewList) {
this.viewList = viewList;
}

@Override
public int getCount() {
return viewList.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view ==object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(viewList.get(position));
return viewList.get(position);
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(viewList.get(position));
}

}

3、添加适配器、实现功能

package com.example.leixiansheng.weixin;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;

/**
* ViewPager 实现 Tab （一般使用Fragment,不推荐单独使用ViewPager）
*/

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private int[] layoutIds = {R.layout.view_1, R.layout.view_2, R.layout.view_3, R.layout.view_4};

private List<View> viewList;
private ViewPager viewPager;
private View view;
private MyPagerAdapter adapter;

private LinearLayout mes;
private LinearLayout friend;
private LinearLayout address;
private LinearLayout setting;

private ImageView mesImag;
private ImageView friendImag;
private ImageView addressImag;
private ImageView settingImag;

@Override

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);

init();
initClick();

}

//初始化元素
private void init() {

mes = (LinearLayout) findViewById(R.id.mes);
friend = (LinearLayout) findViewById(R.id.friend);
address = (LinearLayout) findViewById(R.id.address);
setting = (LinearLayout) findViewById(R.id.setting);

mesImag = (ImageView) findViewById(R.id.mes_imag);
friendImag = (ImageView) findViewById(R.id.friend_imag);
addressImag = (ImageView) findViewById(R.id.address_imag);
settingImag = (ImageView) findViewById(R.id.setting_imag);

viewPager = (ViewPager) findViewById(R.id.view_pager);

viewList = new ArrayList<>();

LayoutInflater i
c8c8
nflater = LayoutInflater.from(this);
for (int i = 0; i < layoutIds.length; i++) {
view = inflater.inflate(layoutIds[i], null);
//也可通过下面方式添加资源
//          view = View.inflate(this, layoutIds[i], null);
viewList.add(view);
}
adapter = new MyPagerAdapter(viewList);
viewPager.setAdapter(adapter);
}

//初始化监听
private void initClick() {
mes.setOnClickListener(this);
friend.setOnClickListener(this);
address.setOnClickListener(this);
setting.setOnClickListener(this);

//滑动监听
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
int currentItem = viewPager.getCurrentItem();
resetImages();
switch (currentItem) {
case 0:
setSelect(0);
break;
case 1:
setSelect(1);
break;
case 2:
setSelect(2);
break;
case 3:
setSelect(3);
break;
}
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}

/**
*  取消动画效果，消除跨页动画（比如0到3会经过1，2页面） viewPager.setCurrentItem(index,false);
*  具备动画效果  viewPager.setCurrentItem(index);
* @param view
*/

@Override
public void onClick(View view) {
resetImages();
switch (view.getId()) {
case R.id.mes:
//              viewPager.setCurrentItem(0);
viewPager.setCurrentItem(0,false);
setSelect(0);
break;
case R.id.friend:
viewPager.setCurrentItem(1,false);
setSelect(1);
break;
case R.id.address:
viewPager.setCurrentItem(2,false);
setSelect(2);
break;
case R.id.setting:
viewPager.setCurrentItem(3,false);
setSelect(3);
break;

}

}

//全部图片设为暗色
private void resetImages() {
mesImag.setImageResource(R.drawable.tab_weixin_normal);
friendImag.setImageResource(R.drawable.tab_find_frd_normal);
addressImag.setImageResource(R.drawable.tab_address_normal);
settingImag.setImageResource(R.drawable.tab_settings_normal);
}

//点亮选中图片
private void setSelect(int i) {
switch (i) {
case 0:
mesImag.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
friendImag.setImageResource(R.drawable.tab_find_frd_pressed);
break;
case 2:
addressImag.setImageResource(R.drawable.tab_address_pressed);
break;
case 3:
settingImag.setImageResource(R.drawable.tab_settings_pressed);
break;
}
}
}