本文介绍了一种不使用Fragment的ViewPager实现方式，通过LayoutInflater加载不同的布局文件到ViewPager中，并通过底部按钮切换页面。
简单地ViewPager(没有用Fragment)
今天实现了简单地ViewPager的滑动效果，类似微信底部滑动栏，不过由于是刚刚才学习Android，所以对碎片(Fragment)和ViewFlipper不是很了解，所以没有用，只是简单地利用了普通布局来实现，在实现的过程中也出现了些许小bug(=_=!!)，比如实例化控件的时候给一个控件实例化了两次--，结果导致滑动的时候页面顺序总是不对，而且还报异常--下次还是要更加的细心才好。下面进入正题。（本项目实在Android Studio2.2下完成）
本文章参考到了优快云中一位博主的博客，又结合了老师留的作业，完成了此次项目，原文地址：[Android仿微信底部菜单栏+顶部菜单栏](http://blog.youkuaiyun.com/wk843620202/article/details/44280653#t0)
1. 界面部分
界面部分准备了一个主界面，用于实现ViewPager的滑动和显示Title，Bottom。四个layout布局，作为滑动各个要显示的ViewPager界面，一个xml布局作为Title，一个xml布局作为Bottom底部布局。布局代码如下：
Title：顶部布局，上面的两个按钮使用了selector选择器来实现点击动画
<?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="wrap_content"
android:orientation="horizontal"
android:background="#FF6EB4">
<Button
android:id="@+id/btn_back"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="@drawable/more_selector"
android:layout_marginRight="20dp"
android:text="资讯"
/>
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:text="潮百搭"
android:gravity="center"
android:textStyle="bold|italic"
android:textSize="25dp"
android:layout_gravity="center"/>
<Button
android:id="@+id/btn_more"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/more_selector"
android:layout_weight="1"
android:layout_marginLeft="20dp"
android:text="分享"/>
</LinearLayout>
底部布局：有四个按钮，类似微信，由于每个按钮部分都是由图片和汉字组成，所以将其套在一个LinearLayout中。为了防止ImageButton将点击事件截取，所以屏蔽了它的点击事件，设置其父布局LinearLayout的点击事件。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/title_bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:divider="@color/blue"
android:showDividers="beginning"
android:background="#FFFFFF"
android:orientation="horizontal">
<LinearLayout
android:id="@+id/ly_gj"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent"
android:orientation="vertical">
<!--为了防止ImageButton截取了点击事件，所以把他的点击事件给他的上一级LinearLayout-->
<ImageButton
android:id="@+id/ib_gj"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@mipmap/tab_guangjie_press"
android:background="@null"/>
<!--设置@null属性是为了去除掉灰色的背景，当然也可以给其一个16进制的透明色来设置-->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="逛街" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly_md"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageButton
android:id="@+id/ib_md"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@mipmap/tab_meida"
android:background="@null"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="美搭" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly_tm"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageButton
android:id="@+id/ib_tm"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@mipmap/tab_temai"
android:background="@null"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="特卖" />
</LinearLayout>
<LinearLayout
android:id="@+id/ly_me"
android:layout_width="0dp"
android:layout_weight="1"
android:gravity="center"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageButton
android:id="@+id/ib_me"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:src="@mipmap/tab_me"
android:background="@null"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的" />
</LinearLayout>
</LinearLayout>
下面是主页面，页面上面引入了Title，中间是一个ViewPager，下面是一个底部布局：
<?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">
<include layout="@layout/title2" />
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#FFFFFF">
</android.support.v4.view.ViewPager>
<include layout="@layout/bottom" />
</LinearLayout>
各个不同的page：
tab01：
<?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:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="我爱逛街"
android:textSize="40sp"
android:textStyle="bold" />
</LinearLayout>
其他三个于此基本相同，不在描述。
界面截图如下：
2. 代码部分
package com.example.homework;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
/**
* Created by Lx on 2016/8/3.
*/
public class HomeWork3Activity extends Activity implements View.OnClickListener {
private ImageButton ib_gj, ib_md, ib_tm, ib_me; //四个按钮
private LinearLayout ly_gj, ly_md, ly_tm, ly_me; //四个LinearLayout
private ViewPager viewPager; //定义ViewPager
private PagerAdapter pagerAdapter; //初始化View适配器
private List<View> listView = new ArrayList<View>(); //用来存放tabs
private static final String TAG = "TEST-->";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.layout2);
initView();
initViewPager();
initEvent();
}
/**
* 初始化事件
*/
private void initEvent() {
ly_md.setOnClickListener(this);
ly_me.setOnClickListener(this);
ly_gj.setOnClickListener(this);
ly_tm.setOnClickListener(this);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
/***
* 页面滑动完之后执行这个
* @param position (跳转完成后页面的编号)页面当前的索引
*/
@Override
public void onPageSelected(int position) {
Log.d(TAG, "onPageSelected-->" + position);
<!--返回当前page的索引号-->
int current = viewPager.getCurrentItem();
switch (current) {
case 0:
resetImg();
ib_gj.setImageResource(R.mipmap.tab_guangjie_press);
break;
case 1:
resetImg();
ib_md.setImageResource(R.mipmap.tab_meida_press);
break;
case 2:
resetImg();
ib_tm.setImageResource(R.mipmap.tab_temai_press);
break;
case 3:
resetImg();
ib_me.setImageResource(R.mipmap.tab_me_press);
break;
default:
break;
}
}
/***
* 在页面滑动的时候会调用这个方法，在滑动被停止之前此方法会一直被调用
* @param position 当前页面，即你点击滑动的页面
* @param positionOffset 当前页面偏移的百分比
* @param positionOffsetPixels 当前页面偏移的像素位置
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
//Log.d(TAG, "onPageScrolled-->" + position + "-->" + positionOffset + "-->" + positionOffsetPixels);
}
//页面的状态发生改变的时候回执行这个代码(例如页面静止的时候，开始滑动的时候，手指从屏幕上面拿开的时候)
/**
* 页面静止的时候 state=0 开始滑动的时候state=1 手指从上面拿开的时候为2(滑动完成，不论此时是否跳到了另一个页面)
* @param state
*/
@Override
public void onPageScrollStateChanged(int state) {
//Log.d(TAG, "onPageScrollStateChanged-->" + state);
}
});
}
/**
* 初始化ViewPager
*/
private void initViewPager() {
//初始化四个布局
LayoutInflater inflate = LayoutInflater.from(this);
View tab01 = inflate.inflate(R.layout.tab01, null);
View tab02 = inflate.inflate(R.layout.tab02, null);
View tab03 = inflate.inflate(R.layout.tab03, null);
View tab04 = inflate.inflate(R.layout.tab04, null);
listView.add(tab01);
listView.add(tab02);
listView.add(tab03);
listView.add(tab04);
pagerAdapter = new PagerAdapter() {
<!--得到page的个数-->
@Override
public int getCount() {
return listView.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
<!--移除指定位置的page-->
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(listView.get(position));
}
<!--在指定的容器中初始化指定位置的page-->
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = listView.get(position);
container.addView(view);
return view;
}
};
//设置适配器
viewPager.setAdapter(pagerAdapter);
}
//初始化控件
private void initView() {
//初始化ViewPager
viewPager = (ViewPager) findViewById(R.id.vp);
//初始化按钮
ib_gj = (ImageButton) findViewById(R.id.ib_gj);
ib_md = (ImageButton) findViewById(R.id.ib_md);
ib_tm = (ImageButton) findViewById(R.id.ib_tm);
ib_me = (ImageButton) findViewById(R.id.ib_me);
//初始化LinearLayout
ly_gj = (LinearLayout) findViewById(R.id.ly_gj);
ly_md = (LinearLayout) findViewById(R.id.ly_md);
ly_tm = (LinearLayout) findViewById(R.id.ly_tm);
ly_me = (LinearLayout) findViewById(R.id.ly_me);
}
//监听按钮点击事件，使点击按钮的时候也可以完成页面的跳转
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.ly_gj:
viewPager.setCurrentItem(0, true);
resetImg(); ib_gj.setImageResource(R.mipmap.tab_guangjie_press);
break;
case R.id.ly_md:
viewPager.setCurrentItem(1, true);
resetImg(); ib_md.setImageResource(R.mipmap.tab_meida_press);
break;
case R.id.ly_tm:
viewPager.setCurrentItem(2, true);
resetImg();
ib_tm.setImageResource(R.mipmap.tab_temai_press);
break;
case R.id.ly_me:
viewPager.setCurrentItem(3, true);
resetImg();
ib_me.setImageResource(R.mipmap.tab_me_press);
break;
default:
break;
}
}
//重置按钮的src图片
public void resetImg() {
ib_gj.setImageResource(R.mipmap.tab_guangjie);
ib_md.setImageResource(R.mipmap.tab_meida);
ib_tm.setImageResource(R.mipmap.tab_temai);
ib_me.setImageResource(R.mipmap.tab_me);
}
}
这里需要注意的是，ViewPager的setOnPageChangeListener()方法已经过时了，这里使用addOnPageChangeListener()方法代替，方法改变后目前还没有发现有什么不同。
3. 思路
1.因为是要完成一个ViewPager的滑动切换page效果，所以要在页面布局中给一个ViewPager。
2.在MainActivity中声明ViewPager和一个页面适配器PagerAdapter来填充ViewPager中的各个page，还要声明一个ArrayList来存放各个page，各个page要使用LayoutInflater布局填充器来填充之后再添加进ArrayList中。
3.实例化完成各个控件之后，实例化ViewPager，并new一个PageAdapter，重写其中的几个重要方法，最后不要忘了为ViewPager设置setAdapter。
4.最后定义一个事件处理方法，在其中完成按钮点击事件的注册，ViewPager的addOnPageChangeListener()方法。
需要注意的是，ViewPager的page的页面索引是从0开始的，0，1，2，3…这样的。
扫一扫
3979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
