生活随笔
收集整理的這篇文章主要介紹了
Android ViewPager和Fragment实现顶部导航界面滑动效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
在項目中，我們常常需要實現界面滑動切換的效果。例如，微信界面的左右滑動切換效果。那這種效果是怎么實現的？今天我就帶大家簡單了解ViewPager，并通過實例來實現該效果。
一. ViewPager 官方API
首先我們來看一下ViewPager官方給出的解釋，如圖：
具體意思如下：
Layout?管理器允許用戶可以在頁面上，左右滑動來翻動頁面。你可以考慮實現PagerAdapter接口來顯示該效果。
ViewPager很多時候會結合Fragment一塊使用，這種方法使得管理每個頁面的生命周期變得很方便。其中，有一些adapter的具體實現，可以適合于這種ViewPager結合Fragment使用的情況。這些adapter包括：FragmentPagerAdapter,和?FragmentStatePagerAdapter。
而本文就是通過ViewPager結合Fragment利用FragmentpagerAdapter適配器來實現左右滑動的效果。
二.效果如下：
三.代碼實現：
1.xml布局文件
1>主布局activity_main.xml
<span?style="font-family:Microsoft?YaHei;font-size:18px;"><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:orientation="vertical"?>?? ?? ????<include?layout="@layout/activity_main_top_tab"?/>?? ?? ????<android.support.v4.view.ViewPager?? ????????android:id="@+id/id_page_vp"?? ????????android:layout_width="match_parent"?? ????????android:layout_height="0dp"?? ????????android:layout_weight="1"?>?? ????</android.support.v4.view.ViewPager>?? ?? </LinearLayout></span>??
注意：布局中加載android.support.v4.view.ViewPager,所有需要引入android-support-v4.jar(正常情況系統會自動引入)
2>頂部導航activity_main_top_tab.xml
<span?style="font-family:Microsoft?YaHei;font-size:18px;"><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="wrap_content"?? ????android:orientation="vertical"?>?? ?? ????<LinearLayout?? ????????android:id="@+id/id_switch_tab_ll"?? ????????android:layout_width="match_parent"?? ????????android:layout_height="wrap_content"?? ????????android:orientation="horizontal"??? ????????android:baselineAligned="false"?? ????????>?? ?? ????????<LinearLayout?? ????????????android:id="@+id/id_tab_chat_ll"?? ????????????android:layout_width="match_parent"?? ????????????android:layout_height="wrap_content"?? ????????????android:layout_weight="1"?? ????????????android:background="@drawable/guide_round_selector"?? ????????????android:gravity="center"?? ????????????android:orientation="horizontal"?? ????????????android:padding="10dip"?>?? ?? ????????????<TextView?? ????????????????android:id="@+id/id_chat_tv"?? ????????????????android:layout_width="wrap_content"?? ????????????????android:layout_height="wrap_content"?? ????????????????android:gravity="center"?? ????????????????android:text="聊天"?? ????????????????android:textColor="#0000FF"?? ????????????????android:textSize="15dip"?/>?? ????????</LinearLayout>?? ?? ????????<LinearLayout?? ????????????android:id="@+id/id_tab_friend_ll"?? ????????????android:layout_width="match_parent"?? ????????????android:layout_height="wrap_content"?? ????????????android:layout_weight="1"?? ????????????android:background="@drawable/guide_round_selector"?? ????????????android:clickable="true"?? ????????????android:gravity="center"?? ????????????android:orientation="horizontal"?? ????????????android:padding="10dip"?? ????????????android:saveEnabled="false"?>?? ?? ????????????<TextView?? ????????????????android:id="@+id/id_friend_tv"?? ????????????????android:layout_width="wrap_content"?? ????????????????android:layout_height="wrap_content"?? ????????????????android:gravity="center"?? ????????????????android:text="好友"?? ????????????????android:textColor="#000000"?? ????????????????android:textSize="15dip"?/>?? ????????</LinearLayout>?? ?? ????????<LinearLayout?? ????????????android:id="@+id/id_tab_contacts_ll"?? ????????????android:layout_width="match_parent"?? ????????????android:layout_height="wrap_content"?? ????????????android:layout_weight="1"?? ????????????android:background="@drawable/guide_round_selector"?? ????????????android:focusable="false"?? ????????????android:gravity="center"?? ????????????android:orientation="horizontal"?? ????????????android:padding="10dip"?>?? ?? ????????????<TextView?? ????????????????android:id="@+id/id_contacts_tv"?? ????????????????android:layout_width="wrap_content"?? ????????????????android:layout_height="wrap_content"?? ????????????????android:gravity="center"?? ????????????????android:text="通訊錄"?? ????????????????android:textColor="#000000"?? ????????????????android:textSize="15dip"?/>?? ????????</LinearLayout>?? ????</LinearLayout>?? ?? ????<ImageView?? ????????android:id="@+id/id_tab_line_iv"?? ????????android:layout_width="200dp"?? ????????android:layout_height="wrap_content"?? ????????android:contentDescription="tab"?? ????????android:background="@drawable/tab_selected_pressed_holo"?>?? ????</ImageView>?? ?? ????<View?? ????????android:layout_width="match_parent"?? ????????android:layout_height="1dp"?? ????????android:background="#000000"?/>?? ?? </LinearLayout></span>??
3>Fragment顯示布局activity_tab_chat.xml，activity_tab_contacts.xml，activity_tab_friend.xml(只給出一個，其他類似)
<span?style="font-family:Microsoft?YaHei;font-size:18px;"><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:orientation="vertical"?>?? ?? ????<TextView?? ????????android:layout_width="match_parent"?? ????????android:layout_height="match_parent"?? ????????android:text="聊天界面"?? ????????android:textColor="#FF0000"?? ????????android:textSize="20sp"?? ????????android:gravity="center"?? ????????></TextView>?? ?? </LinearLayout></span>??
4>主函數MainActivity.java
<span?style="font-family:Microsoft?YaHei;font-size:18px;">package?com.example.viewpagerdemo;?? ?? import?java.util.ArrayList;?? import?java.util.List;?? ?? import?android.graphics.Color;?? import?android.os.Bundle;?? import?android.support.v4.app.Fragment;?? import?android.support.v4.app.FragmentActivity;?? import?android.support.v4.view.ViewPager;?? import?android.support.v4.view.ViewPager.OnPageChangeListener;?? import?android.util.DisplayMetrics;?? import?android.util.Log;?? import?android.widget.ImageView;?? import?android.widget.LinearLayout;?? import?android.widget.TextView;?? ?? public?class?MainActivity?extends?FragmentActivity?{?? ?? ????private?List<Fragment>?mFragmentList?=?new?ArrayList<Fragment>();?? ????private?FragmentAdapter?mFragmentAdapter;?? ?????? ????private?ViewPager?mPageVp;?? ????? ? ?? ????private?TextView?mTabChatTv,?mTabContactsTv,?mTabFriendTv;?? ????? ? ?? ????private?ImageView?mTabLineIv;?? ????? ? ?? ????private?ChatFragment?mChatFg;?? ????private?FriendFragment?mFriendFg;?? ????private?ContactsFragment?mContactsFg;?? ????? ? ?? ????private?int?currentIndex;?? ????? ? ?? ????private?int?screenWidth;?? ?? ????@Override?? ????protected?void?onCreate(Bundle?savedInstanceState)?{?? ????????super.onCreate(savedInstanceState);?? ????????setContentView(R.layout.activity_main);?? ????????findById();?? ????????init();?? ????????initTabLineWidth();?? ?? ????}?? ?? ????private?void?findById()?{?? ????????mTabContactsTv?=?(TextView)?this.findViewById(R.id.id_contacts_tv);?? ????????mTabChatTv?=?(TextView)?this.findViewById(R.id.id_chat_tv);?? ????????mTabFriendTv?=?(TextView)?this.findViewById(R.id.id_friend_tv);?? ?? ????????mTabLineIv?=?(ImageView)?this.findViewById(R.id.id_tab_line_iv);?? ?? ????????mPageVp?=?(ViewPager)?this.findViewById(R.id.id_page_vp);?? ????}?? ?? ????private?void?init()?{?? ????????mFriendFg?=?new?FriendFragment();?? ????????mContactsFg?=?new?ContactsFragment();?? ????????mChatFg?=?new?ChatFragment();?? ????????mFragmentList.add(mChatFg);?? ????????mFragmentList.add(mFriendFg);?? ????????mFragmentList.add(mContactsFg);?? ?? ????????mFragmentAdapter?=?new?FragmentAdapter(?? ????????????????this.getSupportFragmentManager(),?mFragmentList);?? ????????mPageVp.setAdapter(mFragmentAdapter);?? ????????mPageVp.setCurrentItem(0);?? ?? ????????mPageVp.setOnPageChangeListener(new?OnPageChangeListener()?{?? ?? ????????????? ? ?? ????????????@Override?? ????????????public?void?onPageScrollStateChanged(int?state)?{?? ?? ????????????}?? ?? ????????????? ? ? ?? ????????????@Override?? ????????????public?void?onPageScrolled(int?position,?float?offset,?? ????????????????????int?offsetPixels)?{?? ????????????????LinearLayout.LayoutParams?lp?=?(LinearLayout.LayoutParams)?mTabLineIv?? ????????????????????????.getLayoutParams();?? ?? ????????????????Log.e("offset:",?offset?+?"");?? ????????????????? ? ? ? ? ? ?? ?? ????????????????if?(currentIndex?==?0?&&?position?==?0)?? ????????????????{?? ????????????????????lp.leftMargin?=?(int)?(offset?*?(screenWidth?*?1.0?/?3)?+?currentIndex?? ????????????????????????????*?(screenWidth?/?3));?? ?? ????????????????}?else?if?(currentIndex?==?1?&&?position?==?0)??? ????????????????{?? ????????????????????lp.leftMargin?=?(int)?(-(1?-?offset)?? ????????????????????????????*?(screenWidth?*?1.0?/?3)?+?currentIndex?? ????????????????????????????*?(screenWidth?/?3));?? ?? ????????????????}?else?if?(currentIndex?==?1?&&?position?==?1)??? ????????????????{?? ????????????????????lp.leftMargin?=?(int)?(offset?*?(screenWidth?*?1.0?/?3)?+?currentIndex?? ????????????????????????????*?(screenWidth?/?3));?? ????????????????}?else?if?(currentIndex?==?2?&&?position?==?1)??? ????????????????{?? ????????????????????lp.leftMargin?=?(int)?(-(1?-?offset)?? ????????????????????????????*?(screenWidth?*?1.0?/?3)?+?currentIndex?? ????????????????????????????*?(screenWidth?/?3));?? ????????????????}?? ????????????????mTabLineIv.setLayoutParams(lp);?? ????????????}?? ?? ????????????@Override?? ????????????public?void?onPageSelected(int?position)?{?? ????????????????resetTextView();?? ????????????????switch?(position)?{?? ????????????????case?0:?? ????????????????????mTabChatTv.setTextColor(Color.BLUE);?? ????????????????????break;?? ????????????????case?1:?? ????????????????????mTabFriendTv.setTextColor(Color.BLUE);?? ????????????????????break;?? ????????????????case?2:?? ????????????????????mTabContactsTv.setTextColor(Color.BLUE);?? ????????????????????break;?? ????????????????}?? ????????????????currentIndex?=?position;?? ????????????}?? ????????});?? ?? ????}?? ?? ????? ? ?? ????private?void?initTabLineWidth()?{?? ????????DisplayMetrics?dpMetrics?=?new?DisplayMetrics();?? ????????getWindow().getWindowManager().getDefaultDisplay()?? ????????????????.getMetrics(dpMetrics);?? ????????screenWidth?=?dpMetrics.widthPixels;?? ????????LinearLayout.LayoutParams?lp?=?(LinearLayout.LayoutParams)?mTabLineIv?? ????????????????.getLayoutParams();?? ????????lp.width?=?screenWidth?/?3;?? ????????mTabLineIv.setLayoutParams(lp);?? ????}?? ?? ????? ? ?? ????private?void?resetTextView()?{?? ????????mTabChatTv.setTextColor(Color.BLACK);?? ????????mTabFriendTv.setTextColor(Color.BLACK);?? ????????mTabContactsTv.setTextColor(Color.BLACK);?? ????}?? ?? }?? </span>??
注意：
1.MainActivity繼承于FragmentActivity;
2.初始化導航條的寬度：initTabLineWidth()，由于本例給出的是3個界面切換，固長度為整個屏幕寬度的1/3;
3.監聽事件OnPageChangeListener的onPageScrolled方法主要捕捉滑動事件;
其中給出了3個參數所表示的意義。根據滑動的4中變化(左-中-右-中-左)，給出導航條距離左邊的邊距，顯示導航條滑動的效果。
5>Fragment適配器FragmentAdapter，繼承于FragmentPagerAdapter
<span?style="font-family:Microsoft?YaHei;font-size:18px;">package?com.example.viewpagerdemo;?? ?? import?java.util.ArrayList;?? import?java.util.List;?? ?? import?android.support.v4.app.Fragment;?? import?android.support.v4.app.FragmentManager;?? import?android.support.v4.app.FragmentPagerAdapter;?? ?? public?class?FragmentAdapter?extends?FragmentPagerAdapter?{?? ?? ????List<Fragment>?fragmentList?=?new?ArrayList<Fragment>();?? ????public?FragmentAdapter(FragmentManager?fm,List<Fragment>?fragmentList)?{?? ????????super(fm);?? ????????this.fragmentList?=?fragmentList;?? ????}?? ?? ????@Override?? ????public?Fragment?getItem(int?position)?{?? ????????return?fragmentList.get(position);?? ????}?? ?? ????@Override?? ????public?int?getCount()?{?? ????????return?fragmentList.size();?? ????}?? ?? }?? </span>??
6>Fragment顯示函數ChatFragment.java,ContactsFragment.java,FriendFragment.java(只給出一個，其他類似)
<span?style="font-family:Microsoft?YaHei;font-size:18px;">package?com.example.viewpagerdemo;?? ?? import?android.os.Bundle;?? import?android.support.v4.app.Fragment;?? import?android.view.LayoutInflater;?? import?android.view.View;?? import?android.view.ViewGroup;?? ?? public?class?ChatFragment?extends?Fragment?{?? ????@Override?? ????public?View?onCreateView(LayoutInflater?inflater,ViewGroup?container,Bundle?savedInstanceState){?? ????????super.onCreateView(inflater,?container,?savedInstanceState);?? ????????View?chatView?=?inflater.inflate(R.layout.activity_tab_chat,?container,false);?? ????????return?chatView;?????? ????}?? ????@Override?? ????public?void?onActivityCreated(Bundle?savedInstanceState){?? ????????super.onActivityCreated(savedInstanceState);?? ????}?? }?? </span>??
上面就是本文的所有內容。
總結
以上是生活随笔為你收集整理的Android ViewPager和Fragment实现顶部导航界面滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
