前面我们用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>
我就贴一个就是了,你们在复制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纯手工制作素材,下载地址:http://download.csdn.net/detail/jspping/8210539
由于CSDN不能上传视频,演示效果只能以图片形势取代了。。。
第一个布局:
第二个布局:
第三个布局:
OK,素材地址和代码都已经奉献完毕,这篇博客就讲完了,谢谢~