android开发之viewpager and Fragment

Android ViewPager和Fragment实现顶部导航界面滑动效果

Layout 管理器允许用户可以在页面上，左右滑动来翻动页面。你可以考虑实现PagerAdapter接口来显示

该效果。ViewPager很多时候会结合Fragment一块使用，这种方法使得管理每个页面的生命周期变得很方便。

些adapter的具体实现，可以适合于这种ViewPager结合Fragment使用的情况。这些adapter包括：

其中，有一FragmentPagerAdapter,和 FragmentStatePagerAdapter。

而本文就是通过ViewPager结合Fragment利用FragmentpagerAdapter适配器来实现左右滑动的效果。

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>

activity_main_top_tab.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="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>

Fragment显示布局layout1

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"  android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    android:weightSum="1">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="1"
        android:id="@+id/linearLayout"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@+id/editText">

        <TextView
            android:id="@+id/atext"
            android:text="上午"
            android:gravity="center"
            android:layout_width="54dp"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="20dp" />

        <TextView
            android:id="@+id/text1"
            android:text="8"
            android:gravity="center"
            android:layout_width="44dp"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="50dp" />

        <TextView
            android:text=":"
            android:gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="50dp" />

        <TextView
            android:id="@+id/text00"
            android:text="00"
            android:gravity="center"
            android:layout_width="70dp"
            android:layout_height="wrap_content"
            android:theme="@style/AlertDialog.AppCompat"
            android:textSize="50dp" />

        <Switch
            android:id="@+id/aswitch"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_above="@+id/btn"
        android:layout_marginBottom="319dp"
        android:layout_alignParentTop="true"
        android:layout_marginTop="176dp" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:src="@android:drawable/ic_dialog_email"
        android:layout_marginLeft="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="14dp" />

</RelativeLayout  >

主函数MainActivity.java

package asfas.myclock;

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.text.Layout;
import android.util.DisplayMetrics;
import android.util.Log;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

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 Layout
    /**
     * 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 ViewPager.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);
    }

}

Fragment适配器

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();
    }  

}

Fragment显示函数

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);
    }
}

这是大概  明天修改。

时间： 2024-12-24 10:46:11

android开发之viewpager and Fragment的相关文章

Android开发之ViewPager实现轮播图（轮播广告）效果的自定义View

最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面布局实现如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android&

Android开发之ViewPager

什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v4.jar这个包的支持,这是一个来自google提供的一个附加包. 通俗点来讲,就是现在市面上大多数app,安装完第一次打开软件会出现的一个左右滑动的引导界面. 布局代码: 要点1.页面的小圆点的控制,当在当前页时小圆点不可点. 所以有多少个页面就需要添加多少的圆点图片. 1 <RelativeLa

Android开发之ViewPager的简单使用

ViewPager是V4包中的,如果你的编译器敲不出ViewPager,那么你就需要添加,看下面: 第一步:点击+号 第二步:选择第一个Library 第三步:添加这个包: 然后点击ok-->ok就搞定了,编译器会从新进行预编译. 下面就是重点了,我们先看布局文件: 1 <android.support.v4.view.ViewPager 2 android:id="@+id/ViewPager" 3 android:layout_width="match_par

Android开发之ViewPager及PagerAdapter

ViewPager,官网链接--http://developer.android.com/reference/android/support/v4/view/ViewPager.html ViewPager,位于android.support.v4.view.ViewPager. 1.继承自ViewGroups,继承关系请看官网截图 2.主要使用在 a.app的引导页面的展示   b.可左右滑动的框架 ViewPager特点: 1)ViewPager类直接继承了ViewGroup类,所有它是一个

Android开发之Activity和Fragment生命周期对比图

一.Activity 生命周期 二.Fragment 生命周期 三.对比图 四.测试代码 [java] view plaincopy package com.goso.testapp; import android.app.Activity; import android.app.ListFragment; import android.os.Bundle; import android.util.Log; import android.view.LayoutInflater; import a

Android开发之Fragment详解

Android开发之Fragment学习 1.简介: Fragment是Android 3.0引入的新API. Fragment代表了 Activity的子模块,因此可以把Fragment理解成Activity片段.Fragment用于自己的生命周期,也可以接受它自己的输入事件. Fragment必须被"嵌入" Activity中使用,因此虽然Fragment也拥有自己的生命周期,但Fragment的生命周期会受它所在的Activity的生命周期的控制.例如,当Activity暂停时,

android开发之Fragment加载到一个Activity中

Fragments 是android3.0以后添加的.主要是为了方便android平板端的开发.方便适应不同大小的屏幕.此代码是为了最简单的Fragment的使用,往一个Activity中添加Fragment,主要涉及的知识点有:1.Fragment类的创建,2.Fragment的添加3.无UI的 Fragment的添加,根据Tag找回Fragment Fragment对应的Xml布局文件, <LinearLayout xmlns:android="http://schemas.andro

Android开发之Navigationdrawer导航抽屉功能的实现（源代码分享）

导航抽屉(navigationdrawer)是一个从屏幕左边滑入的面板,用于显示应用的主要导航项目.用户可以通过在屏幕左边缘滑入或者触摸操作栏的应用图标打开导航抽屉.导航抽屉覆盖在内容之上,但不覆盖操作栏.当导航抽屉完全打开后,操作栏的标题需要更换为应用的名称,而不是显示当前视图的名称,并且关闭所有和当前视图相关的操作按钮.操作栏的"更多操作"菜单按钮不需要关闭,以保证用户可以随时访问"设置"和"帮助".下面我们就来实现导航抽屉的功能. Layo

Android开发之Tween(补间动画)完全解析(下)

欢迎转载,转载请注明出处:http://blog.csdn.net/dmk877/article/details/51980734 在上一篇文章中,我们详细讨论了Tween动画的xml的实现以及interpolator的使用,相信通过上篇文章大家对Tween动画的xml属性的配置会有一个详细的理解,当然这篇文章也是承接上篇文章,所以强烈建议先阅读上篇文章:Android开发之Tween(补间动画)完全解析(上),这篇文章将从代码的角度实现上篇文章的效果.如有疑问请留言,如有谬误欢迎批评指正. T