Android控件-Fragment+ViewPager(高仿微信界面)
什么是Fragment?
Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Activity中,我们可以合并多个Fragment在一个单独的activity中建立多个UI面板,或者重用Fragment在多个activity中。
关于Fragment的生命周期,由于Fragment需要依赖Activity,也就是说当一个Activity的生命周期结束之后,那么Fragment的生命周期也自然结束。如果把一个Activiy比作一座大宅子的话,那么Fragment就可以比作大宅子里的房间,大宅子里的房间其中一间倒塌了,并不会引起整个大宅子的倒塌,但如果大宅子倒塌了,那么大宅里的房间也就都倒塌了。
下面来看下Fragment的生命周期: Activity和Fragment生命周期对比(相似):
为了更好的理解Fragment,我找了下面的一张图:
看左边这张图,它是我们传统的手机界面,假设它现在呈现的是一个新闻列表页,那么当我们点击列表项中,我们将会跳转到新闻详细页中,上面是标题,下面是正文,这里是2个Activity。
再看看右边的图,左边是新闻列表页,右边是新闻详细页,我们可以动态的点击左边的列表项,使得右边的新闻详细页动态变化,这里只有1个Activity里面嵌套了2个Fragment,左边一个,右边一个。
好了,做了简单的介绍后,先来看看今天我们要实现的效果图:(高仿微信主界面)
这里我画了张界面分析图,画图永远的痛,凑合着看哈
这里的XML布局文件,我把每一部分都分开写了:
top1.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="50dp" android:background="@drawable/bg" android:paddingLeft="12dp" android:paddingRight="12dp" > <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:gravity="center" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/weixin" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="12dp" android:text="微信" android:textColor="@android:color/white" android:textSize="18dp" /> </LinearLayout> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:gravity="center" android:orientation="horizontal" > <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/search" /> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/add" /> <ImageView android:layout_width="30dp" android:layout_height="30dp" android:src="@drawable/more" /> </LinearLayout> </RelativeLayout>
top2.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/tabline" /> </LinearLayout> </LinearLayout>
mywx.xml(用include包含前2个布局文件,并设置垂直排列)
<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/top1" /> <include layout="@layout/top2" /> <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>
Fragment1.xml(由于Flagment的布局文件只是简单采用字符标示,布局都一样,这里只给出第一个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>
接下来是JAVA代码了,注释很全(其实用法还是之前的ViewPager,只不过之前的ViewPager的数据源里存放的是view对象,而这里是Fragment)
package com.example.weixin_test; 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 MyWxTest extends FragmentActivity { 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.mywx); // 初始化滑动条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); } 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(new OnPageChangeListener() { @Override public void onPageSelected(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; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { Log.i("tuzi", arg0 + "," + arg1 + "," + arg2); // 取得该控件的实例 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 onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } }); } }
对这个类做下说明:
1、这里的滑动屏幕下划线动态跟随的效果,其实实现方法有2种,原理是一样的
(1)可以使用ViewPager的两个子类ViewFlipper和ViewSwitche,这种方法比较简单,直接用就行。
(2)用原生代码实现,也就是动态的去控制下划线的左外边距。
这里我采用的是第2种方法,我觉得授人予鱼还不如授人予渔,其实也并不复杂,细节去理下细节就懂了。
这里需要注意一个地方,我们在给ViewPager设置监听器时,这边会复写一个onPageScrolled方法,里面有3个参数,我用Log打印出它们在页面滑动时的数据变化
这是页面一向页面二滑动时候的数据记录:
我们可以发现第一个参数值直接从0->1,第二个参数值从0.0依次增加到0.9xx无限靠近1,然后页面到达第二页它又恢复成了0,第三个参数从1开始累积到300+(这个我们不去关注)
这是页面二向页面三滑动时候的数据记录:
我们可以发现第一个参数值直接从1->2,第二个参数值从0.0依次增加到0.9xx无限靠近1,然后页面到达第二页它又恢复成了0,第三个参数从1开始累积到300+(这个我们不去关注)
因此我们可以发现一个规律:
当ViewPager页面值为0(第一页)且当参数一为0时,页面的状态时从 第一页到第二页
当ViewPager页面值为1(第二页)且当参数一为1时,页面的状态时从 第一页到第二页
以此类推,大家可以自己打印出来看看,对这些数据比较有感觉,由于文章篇幅问题,这里就不再贴图了。
我们可以利用第二个参数从0.0推荐递增到1,这个数据来控制左外边距(在第一页时左外边距为0,第二页时左外边距为1/3屏幕宽,第三页时左外边距为2/3屏幕宽)
由此推导出的公式为:
向左滑时:当前页数*屏幕1/3宽+onPageScrolled方法第二个参数*屏幕1/3宽
向右滑时:当前页数*屏幕1/3宽-(1-onPageScrolled方法第二个参数)*屏幕1/3宽
2、由于这里使用到了Fragment,这里就不再和以往一样继承Activity,这里需要继承Activity的子类FragmentActivity。
package com.example.weixin_test; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.fragment1, container, false); } }
来讲一下关于这个类的说明:
1、Fragment一般是作为Activity界面的一部分,它把Layout对象嵌入到了Activity之中,若要对一个Fragment提供Layout对象必须去调用一个onCreateView()方法,它的返回值是一个View对象,这个方法为我们提供了一个LayoutInflater便于我们把XML布局文件转换成View对象。
2、onCreateView()方法中:
container参数是用来存放Fragment的layout。
saveInstanceState参数是一个Bundle,跟Activity的onCreate()中Bundle差不多,用于状态恢复。
3、inflate()方法中有三个参数:
1:layout的资源id。
2:存放fragment的layout的ViewGroup。
3:这个布尔值是代表是否在创建Fragment的layout期间,把layout附加到container上,由于系统已经把layout对象存放在了ViewGroup中,所以这里为false。
由于3个Fragment的代码几乎一致,所以这里只给出Fragment1.java