【Android UI】Fragment+ViewPage实现滑动

来源：互联网发布：域名添加白名单编辑：程序博客网时间：2024/06/06 13:04

实现滑动效果有很多种，这里介绍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);    }@Overridepublic 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;

感谢百度上各位大神的分享，以上均是来自网络整合。

0 0