前面我们用ViewFilpper实现的时候,发现与我们想要效果有些背道而驰,所以接下来我们用ViewPager来实现,其实ViewPager一般
用作菜单导航和图片公告比较多,实现我们今天说的效果可以采用Fragment或者重写一些控件来实现,但是我们今天会用更简单的实
现方式,而且看起来代码也少,很清晰,很容易看懂,我用到了一个List、以及一个数组,分别来对组件进行处理,List<View>里放置
了3个自己写得布局文件,ImageView[]用来加载 List<View>对象,在主布局用一个线性布局来显示当前划屏完毕的view(布局文
件),需要通过实现onPageChangeListerer接口,调用onPageSelectde()函数来完成
主要代码:
package com.example.engineerjspnavigation;
/**
* Engineer-Jsp.Animation
* @author Engineer-Jsp
* @date 2014.11.28
* ViewPager use
* */
import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.app.Activity;
public class MainActivity extends Activity {
private ViewPager viewpager = null;
private List<View> list = null;
private ImageView[] img = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
viewpager = (ViewPager) findViewById(R.id.viewpager);
list = new ArrayList<View>();
list.add(getLayoutInflater().inflate(R.layout.navigation_one, null));
list.add(getLayoutInflater().inflate(R.layout.navigation_two, null));
list.add(getLayoutInflater().inflate(R.layout.navigation_three, null));
img = new ImageView[list.size()];
// 切换屏幕时,下面的进度触点替换
LinearLayout layout = (LinearLayout) findViewById(R.id.viewGroup);
for (int i = 0; i < list.size(); i++) {
img[i] = new ImageView(MainActivity.this);
// 第一个view为默认选中
if (0 == i) {
img[i].setBackgroundResource(R.drawable.selected);
} else {
img[i].setBackgroundResource(R.drawable.normal);
}
img[i].setPadding(0, 0, 20, 0);
// 显示划动到当前活动的view
layout.addView(img[i]);
}
viewpager.setAdapter(new ViewPagerAdapter(list));
viewpager.setOnPageChangeListener(new ViewPagerPageChangeListener());
}
class ViewPagerAdapter extends PagerAdapter {
private List<View> list = null;
public ViewPagerAdapter(List<View> list) {
this.list = list;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(list.get(position));
return list.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(list.get(position));
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
}
// 内部类
class ViewPagerPageChangeListener implements OnPageChangeListener {
/*
*/
@Override
public void onPageScrollStateChanged(int state) {
}
/*
*/
@Override
public void onPageScrolled(int page, float positionOffset,
int positionOffsetPixels) {
}
@Override
public void onPageSelected(int page) {
//更新图标
for (int i = 0; i < list.size(); i++) {
if (page == i) {
img[i].setBackgroundResource(R.drawable.selected);
} else {
img[i].setBackgroundResource(R.drawable.normal);
}
}
}
}
}
主布局:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity" >
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white" >
</android.support.v4.view.ViewPager>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<LinearLayout
android:id="@+id/viewGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="50.0dp"
android:gravity="center"
android:orientation="horizontal" >
</LinearLayout>
</RelativeLayout>
</FrameLayout>
加载的3个布局文件,代码都一致
我就贴一个就是了,你们在复制2个测试就OK了
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="@+id/navigation_1"
android:background="@drawable/icon_one">
</LinearLayout>
其中涉及到的素材我会等会上传,并且把地址贴出来,素材都是我PS的,自己亲手做的,等会儿贴地址上来,就几个图片,和加工的3张背景图片,进度触点素材等,不大,压缩之后744kb
PS纯手工制作素材,下载地址:http://download.csdn.net/detail/jspping/8210539
由于CSDN不能上传视频,演示效果只能以图片形势取代了。。。
第一个布局:
第二个布局:
第三个布局:
OK,素材地址和代码都已经奉献完毕,这篇博客就讲完了,谢谢~