Android利用ViewPager仿微信主介面-android學習之旅(78)，viewpager-android

Android利用ViewPager仿主介面-android學習之旅(78)，viewpager-android
首先是介紹ViewPager這個控制項 ,這個控制項需要pagerAdapter作為容器來提供資料,同時pagerAdapter的資料來源是View數組如下

部分代碼如下,實現如下的方法

mPagerAdapter = new PagerAdapter(){            @Override            public int getCount() {                return mViews.size();            }            @Override            public boolean isViewFromObject(View view, Object o) {                return view == o;            }            @Override            public Object instantiateItem(ViewGroup container, int position) {                View view = mViews.get(position);                container.addView(view);                return view;            }            @Override            public void destroyItem(ViewGroup container, int position, Object object) {                container.removeView(mViews.get(position));            }        };

View數組就是幾個LinearLayout,代碼如下

 private List<View> mViews = new ArrayList<View>(); View tab01 = inflater.inflate(R.layout.tab01,null);        View tab02 = inflater.inflate(R.layout.tab02,null);        View tab03 = inflater.inflate(R.layout.tab03,null);        View tab04 = inflater.inflate(R.layout.tab04,null);        mViews.add(tab01);        mViews.add(tab02);        mViews.add(tab03);        mViews.add(tab04);

ViewPager的滑動點擊事件

viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int i, float v, int i2) {            }            @Override            public void onPageSelected(int i) {                int currentItem = viewPager.getCurrentItem();                resetImg();                switch(currentItem){                    case 0:                        btnWeixin.setImageResource(R.drawable.tab_weixin_pressed);                        break;                    case 1:                        btnFriend.setImageResource(R.drawable.tab_find_frd_pressed);                        break;                    case 2:                        btnAddress.setImageResource(R.drawable.tab_address_pressed);                        break;                    case 3:                        btnSetting.setImageResource(R.drawable.tab_settings_pressed);                        break;                    default:                        break;                }            }            @Override            public void onPageScrollStateChanged(int i) {            }        });

仿首頁面,實現的效果是滑動ViewPager的各個頁面之後,下面的表徵圖也是隨著相應的介面變亮,然後點擊底部,相應的頁面也會跳轉點擊底部跳轉的邏輯在於代碼,ViewPager對各個頁面是從0開始編號的

 viewPager.setCurrentItem(1);

布局主要代碼

<?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="45dp"    android:gravity="center"    android:background="@drawable/title_bar">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text=""        android:textColor="#ffffff"        android:textSize="20sp"        android:layout_gravity="center"        android:textStyle="bold"/></LinearLayout>

<?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="55dp"    android:gravity="center"    android:background="@drawable/bottom_bar"    ><LinearLayout    android:id="@+id/tab_weixin"    android:layout_width="0dp"    android:layout_height="wrap_content"    android:layout_weight="1"    android:gravity="center"    android:orientation="vertical"    >    <ImageButton        android:id="@+id/tab_weixin_img"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/tab_weixin_pressed"        android:background="#00000000"        android:clickable="false"        />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text=""        android:textColor="#ffffffff"/>    </LinearLayout>    <LinearLayout        android:id="@+id/tab_friend"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        >        <ImageButton            android:id="@+id/tab_friend_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_find_frd_normal"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="朋友"            android:textColor="#ffffffff"/>    </LinearLayout>    <LinearLayout        android:id="@+id/tab_address"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        >        <ImageButton            android:id="@+id/tab_address_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_address_normal"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="通訊錄"            android:textColor="#ffffffff"/>    </LinearLayout>    <LinearLayout        android:id="@+id/tab_setting"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical"        >        <ImageButton            android:id="@+id/tab_setting_img"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/tab_settings_normal"            android:background="#00000000"            android:clickable="false"            />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="設定"            android:textColor="#ffffffff"/>    </LinearLayout></LinearLayout>

<LinearLayout 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:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:paddingBottom="@dimen/activity_vertical_margin"    android:orientation="vertical"    >   <include layout="@layout/top"/>    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="fill_parent"        android:layout_height="0dp"        android:layout_weight="1">    </android.support.v4.view.ViewPager> <include layout="@layout/bottom"/></LinearLayout>

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!項目源碼代碼地址是https://github.com/fengsehng/WeixinTest

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。