实现滑动效果有很多种，这里介绍Fragment和ViewPager配合使用。ViewPager组件，在之前的文章里已经做过简单的介绍。有什么疑问可以去看看以前的文章。
Fragment这里作为填充的滑动页面，这也是它的基本用法之一。
先设计页面，首先需要一个标题栏，其次就是几个可供滑动的目标题目，下面是一条滑动的线条，占据屏幕的1/标题数，在下面就是几个页面了。
top.xml：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="40dp" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="37dp" android:gravity="center_vertical" android:background="#cccccc" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" > <TextView android:id="@+id/tv1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="聊天" android:textColor="#339900"/> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" > <TextView android:id="@+id/tv2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="发现" android:textColor="@android:color/black"/> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center" > <TextView android:id="@+id/tv3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="@android:color/black"/> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="3dp" > <ImageView android:id="@+id/tabline" android:layout_width="100dp" android:layout_height="match_parent" android:background="@drawable/line" /> </LinearLayout> </LinearLayout>设计完标题栏之后，就是整体布局了：
main.xml
<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" tools:context="com.example.weixin_test.MyWxTest" > <include layout="@layout/top" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" > </android.support.v4.view.ViewPager> </LinearLayout>
之后就是，几个Fragment碎片布局，大致差不多，这里只贴出来一个：<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="我是聊天页面" android:textSize="30dp" android:layout_centerInParent="true" /> </RelativeLayout>
布局文件准备完毕后，就开始动手写主代码了：
package com.example.day04_fragment_viewpage_01; 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.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.util.DisplayMetrics; import android.util.Log; import android.view.Display; import android.view.ViewGroup.LayoutParams; import android.view.Window; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class MainActivity extends FragmentActivity implements OnPageChangeListener{ private ViewPager viewPager;// 声明一个viewpager对象 private TextView tv1; private TextView tv2; private TextView tv3; private ImageView tabline; private List<Fragment> list;// 声明一个list集合存放Fragment（数据源） private int tabLineLength;// 1/3屏幕宽 private int currentPage = 0;// 初始化当前页为0（第一页） @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); // 初始化滑动条1/3 initTabLine(); // 初始化界面 initView(); } private void initTabLine() { // 获取显示屏信息 Display display = getWindow().getWindowManager().getDefaultDisplay(); // 得到显示屏宽度 DisplayMetrics metrics = new DisplayMetrics(); display.getMetrics(metrics); // 1/3屏幕宽度 tabLineLength = metrics.widthPixels / 3; // 获取控件实例 tabline = (ImageView) findViewById(R.id.tabline); // 控件参数 LayoutParams lp = tabline.getLayoutParams(); lp.width = tabLineLength; tabline.setLayoutParams(lp); } @SuppressWarnings("deprecation") private void initView() { // 实例化对象 viewPager = (ViewPager) findViewById(R.id.viewpager); tv1 = (TextView) findViewById(R.id.tv1); tv2 = (TextView) findViewById(R.id.tv2); tv3 = (TextView) findViewById(R.id.tv3); list = new ArrayList<Fragment>(); // 设置数据源 Fragment1 fragment1 = new Fragment1(); Fragment2 fragment2 = new Fragment2(); Fragment3 fragment3 = new Fragment3(); list.add(fragment1); list.add(fragment2); list.add(fragment3); // 设置适配器 FragmentPagerAdapter adapter = new FragmentPagerAdapter( getSupportFragmentManager()) { @Override public int getCount() { return list.size(); } @Override public Fragment getItem(int arg0) { return list.get(arg0); } }; // 绑定适配器 viewPager.setAdapter(adapter); // 设置滑动监听 viewPager.setOnPageChangeListener(this); } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } @Override public void onPageScrolled(final int arg0, final float arg1, final int arg2) { // Log.i("tuzi", arg0 + "," + arg1 + "," + arg2); // 取得该控件的实例 final LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) tabline .getLayoutParams(); if (currentPage == 0 && arg0 == 0) { // 0->1移动(第一页到第二页) ll.leftMargin = (int) (currentPage * tabLineLength + arg1 * tabLineLength); } else if (currentPage == 1 && arg0 == 1) { // 1->2移动（第二页到第三页） ll.leftMargin = (int) (currentPage * tabLineLength + arg1 * tabLineLength); } else if (currentPage == 1 && arg0 == 0) { // 1->0移动（第二页到第一页） ll.leftMargin = (int) (currentPage * tabLineLength - ((1 - arg1) * tabLineLength)); } else if (currentPage == 2 && arg0 == 1) { // 2->1移动（第三页到第二页） ll.leftMargin = (int) (currentPage * tabLineLength - (1 - arg1) * tabLineLength); } tabline.setLayoutParams(ll); } @Override public void onPageSelected(final int position) { // 当页面被选择时，先讲3个textview的字体颜色初始化成黑 tv1.setTextColor(Color.BLACK); tv2.setTextColor(Color.BLACK); tv3.setTextColor(Color.BLACK); // 再改变当前选择页（position）对应的textview颜色 switch (position) { case 0: tv1.setTextColor(Color.rgb(51, 153, 0)); break; case 1: tv2.setTextColor(Color.rgb(51, 153, 0)); break; case 2: tv3.setTextColor(Color.rgb(51, 153, 0)); break; } currentPage = position; } }
虽然，上面注释已经很清晰了，但是作为知识储备，很多碎片性的东西还是要单独挑出来记忆，基础是关键。获取屏幕宽度：
Display display = getWindow().getWindowManager().getDefaultDisplay();
// 得到显示屏宽度
DisplayMetrics metrics = new DisplayMetrics();
display.getMetrics(metrics);// 1/3屏幕宽度
tabLineLength = metrics.widthPixels / 3;感谢百度上各位大神的分享，以上均是来自网络整合。
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
