viewpager与导航条的滑动效果设置基于5.0以前版本

来源：互联网发布：nginx并发数设置编辑：程序博客网时间：2024/06/05 11:24

三.代码实现：

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;  /**   * Tab显示内容TextView   */  private TextView mTabChatTv, mTabContactsTv, mTabFriendTv;  /**   * Tab的那个引导线   */  private ImageView mTabLineIv;  /**   * Fragment   */  private ChatFragment mChatFg;  private FriendFragment mFriendFg;  private ContactsFragment mContactsFg;  /**   * ViewPager的当前选中页   */  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() {      /**       * state滑动中的状态 有三种状态（0，1，2） 1：正在滑动 2：滑动完毕 0：什么都没做。       */      @Override      public void onPageScrollStateChanged(int state) {      }      /**       * position :当前页面，及你点击滑动的页面 offset:当前页面偏移的百分比       * offsetPixels:当前页面偏移的像素位置       */      @Override      public void onPageScrolled(int position, float offset,          int offsetPixels) {        LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) mTabLineIv            .getLayoutParams();        Log.e("offset:", offset + "");        /**         * 利用currentIndex(当前所在页面)和position(下一个页面)以及offset来         * 设置mTabLineIv的左边距 滑动场景：         * 记3个页面,         * 从左到右分别为0,1,2          * 0->1; 1->2; 2->1; 1->0         */        if (currentIndex == 0 && position == 0)// 0->1        {          lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex              * (screenWidth / 3));        } else if (currentIndex == 1 && position == 0) // 1->0        {          lp.leftMargin = (int) (-(1 - offset)              * (screenWidth * 1.0 / 3) + currentIndex              * (screenWidth / 3));        } else if (currentIndex == 1 && position == 1) // 1->2        {          lp.leftMargin = (int) (offset * (screenWidth * 1.0 / 3) + currentIndex              * (screenWidth / 3));        } else if (currentIndex == 2 && position == 1) // 2->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;      }    });  }  /**   * 设置滑动条的宽度为屏幕的1/3(根据Tab的个数而定)   */  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>

转自http://www.tuicool.com/articles/E7n6vu

0 0