安卓开发复习笔记——Fragment+ViewPager组件(高仿微信界面)

什么是ViewPager?

  关于ViewPager的介绍和使用,在之前我写过一篇相关的文章《安卓开发复习笔记——ViewPager组件(仿微信引导界面)》,不清楚的朋友可以看看,这里就不再重复。

什么是Fragment?

Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Activity中,我们可以合并多个Fragment在一个单独的activity中建立多个UI面板,或者重用Fragment在多个activity中。

关于Fragment的生命周期,由于Fragment需要依赖Activity,也就是说当一个Activity的生命周期结束之后,那么Fragment的生命周期也自然结束。如果把一个Activiy比作一座大宅子的话,那么Fragment就可以比作大宅子里的房间,大宅子里的房间其中一间倒塌了,并不会引起整个大宅子的倒塌,但如果大宅子倒塌了,那么大宅里的房间也就都倒塌了。

为了更好的理解Fragment,我找了下面的一张图:

  看左边这张图,它是我们传统的手机界面,假设它现在呈现的是一个新闻列表页,那么当我们点击列表项中,我们将会跳转到新闻详细页中,上面是标题,下面是正文,这里是2个Activity。

  再看看右边的图,左边是新闻列表页,右边是新闻详细页,我们可以动态的点击左边的列表项,使得右边的新闻详细页动态变化,这里只有1个Activity里面嵌套了2个Fragment,左边一个,右边一个。

好了,做了简单的介绍后,先来看看今天我们要实现的效果图:(高仿微信主界面)

这里我画了张界面分析图,画图永远的痛,凑合着看哈

这里的XML布局文件,我把每一部分都分开写了:

top1.xml

 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="50dp"
 5     android:background="@drawable/bg"
 6     android:paddingLeft="12dp"
 7     android:paddingRight="12dp" >
 8
 9     <LinearLayout
10         android:layout_width="wrap_content"
11         android:layout_height="wrap_content"
12         android:layout_centerVertical="true"
13         android:gravity="center"
14         android:orientation="horizontal" >
15
16         <ImageView
17             android:layout_width="30dp"
18             android:layout_height="30dp"
19             android:src="@drawable/weixin" />
20
21         <TextView
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:layout_marginLeft="12dp"
25             android:text="微信"
26             android:textColor="@android:color/white"
27             android:textSize="18dp" />
28     </LinearLayout>
29
30     <LinearLayout
31         android:layout_width="wrap_content"
32         android:layout_height="wrap_content"
33         android:layout_alignParentRight="true"
34         android:layout_centerVertical="true"
35         android:gravity="center"
36         android:orientation="horizontal" >
37
38         <ImageView
39             android:layout_width="30dp"
40             android:layout_height="30dp"
41             android:src="@drawable/search" />
42
43         <ImageView
44             android:layout_width="30dp"
45             android:layout_height="30dp"
46             android:src="@drawable/add" />
47
48         <ImageView
49             android:layout_width="30dp"
50             android:layout_height="30dp"
51             android:src="@drawable/more" />
52     </LinearLayout>
53
54 </RelativeLayout>

top2.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
 3     android:layout_height="40dp"
 4     android:orientation="vertical" >
 5
 6     <LinearLayout
 7         android:layout_width="match_parent"
 8         android:layout_height="37dp"
 9         android:gravity="center_vertical"
10         android:background="#cccccc"
11         >
12
13         <LinearLayout
14             android:layout_width="wrap_content"
15             android:layout_height="wrap_content"
16             android:layout_weight="1"
17             android:gravity="center" >
18
19             <TextView
20                 android:id="@+id/tv1"
21                 android:layout_width="wrap_content"
22                 android:layout_height="wrap_content"
23                 android:text="聊天"
24                 android:textColor="#339900"/>
25         </LinearLayout>
26
27         <LinearLayout
28             android:layout_width="wrap_content"
29             android:layout_height="wrap_content"
30             android:layout_weight="1"
31             android:gravity="center" >
32
33             <TextView
34                  android:id="@+id/tv2"
35                 android:layout_width="wrap_content"
36                 android:layout_height="wrap_content"
37                 android:text="发现"
38                 android:textColor="@android:color/black"/>
39         </LinearLayout>
40
41         <LinearLayout
42             android:layout_width="wrap_content"
43             android:layout_height="wrap_content"
44             android:layout_weight="1"
45             android:gravity="center" >
46
47             <TextView
48                  android:id="@+id/tv3"
49                 android:layout_width="wrap_content"
50                 android:layout_height="wrap_content"
51                 android:text="通讯录"
52                 android:textColor="@android:color/black"/>
53         </LinearLayout>
54     </LinearLayout>
55
56     <LinearLayout
57         android:layout_width="match_parent"
58         android:layout_height="3dp" >
59
60         <ImageView
61             android:id="@+id/tabline"
62             android:layout_width="100dp"
63             android:layout_height="match_parent"
64             android:background="@drawable/tabline" />
65     </LinearLayout>
66
67 </LinearLayout>

mywx.xml(用include包含前2个布局文件,并设置垂直排列)

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6     tools:context="com.example.weixin_test.MyWxTest" >
 7
 8     <include layout="@layout/top1" />
 9
10     <include layout="@layout/top2" />
11
12
13  <android.support.v4.view.ViewPager
14      android:id="@+id/viewpager"
15      android:layout_width="match_parent"
16      android:layout_height="wrap_content"
17      android:layout_weight="1"
18      >
19
20
21  </android.support.v4.view.ViewPager>
22 </LinearLayout>

 Fragment1.xml(由于Flagment的布局文件只是简单采用字符标示,布局都一样,这里只给出第一个Fragment布局文件)

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     >
 6
 7     <TextView
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:text="我是第一个界面"
11         android:textSize="30dp"
12         android:layout_centerInParent="true"
13
14         />
15
16
17 </RelativeLayout>

接下来是JAVA代码了,注释很全(其实用法还是之前的ViewPager,只不过之前的ViewPager的数据源里存放的是view对象,而这里是Fragment)

注意:

1、这里的动态下划线,其实实现方法有2种,原理是一样的,可以使用ViewPager的两个子类ViewFlipper和ViewSwitche来实现更为简单

这里我没用现成的方法,我觉得授人予鱼还不如授人予渔,也没有太复杂,说白了就是控制左外边距的长度,大家自己看下代码应该会可以。

2、由于这里使用到了Fragment,这里就不再和以往一样继承Activity,这里需要继承Activity的子类FragmentActivity。

  1 package com.example.weixin_test;
  2
  3 import java.util.ArrayList;
  4 import java.util.List;
  5
  6 import android.graphics.Color;
  7 import android.os.Bundle;
  8 import android.support.v4.app.Fragment;
  9 import android.support.v4.app.FragmentActivity;
 10 import android.support.v4.app.FragmentPagerAdapter;
 11 import android.support.v4.view.ViewPager;
 12 import android.support.v4.view.ViewPager.OnPageChangeListener;
 13 import android.util.DisplayMetrics;
 14 import android.util.Log;
 15 import android.view.Display;
 16 import android.view.ViewGroup.LayoutParams;
 17 import android.view.Window;
 18 import android.widget.ImageView;
 19 import android.widget.LinearLayout;
 20 import android.widget.TextView;
 21
 22 public class MyWxTest extends FragmentActivity {
 23
 24     private ViewPager viewPager;// 声明一个viewpager对象
 25     private TextView tv1;
 26     private TextView tv2;
 27     private TextView tv3;
 28     private ImageView tabline;
 29     private List<Fragment> list;// 声明一个list集合存放Fragment(数据源)
 30
 31     private int tabLineLength;// 1/3屏幕宽
 32     private int currentPage = 0;// 初始化当前页为0(第一页)
 33
 34     @Override
 35     protected void onCreate(Bundle savedInstanceState) {
 36         super.onCreate(savedInstanceState);
 37         requestWindowFeature(Window.FEATURE_NO_TITLE);
 38         setContentView(R.layout.mywx);
 39         // 初始化滑动条1/3
 40         initTabLine();
 41
 42         // 初始化界面
 43         initView();
 44     }
 45
 46     private void initTabLine() {
 47         // 获取显示屏信息
 48         Display display = getWindow().getWindowManager().getDefaultDisplay();
 49         // 得到显示屏宽度
 50         DisplayMetrics metrics = new DisplayMetrics();
 51         display.getMetrics(metrics);
 52         // 1/3屏幕宽度
 53         tabLineLength = metrics.widthPixels / 3;
 54         // 获取控件实例
 55         tabline = (ImageView) findViewById(R.id.tabline);
 56         // 控件参数
 57         LayoutParams lp = tabline.getLayoutParams();
 58         lp.width = tabLineLength;
 59         tabline.setLayoutParams(lp);
 60     }
 61
 62     private void initView() {
 63         // 实例化对象
 64         viewPager = (ViewPager) findViewById(R.id.viewpager);
 65         tv1 = (TextView) findViewById(R.id.tv1);
 66         tv2 = (TextView) findViewById(R.id.tv2);
 67         tv3 = (TextView) findViewById(R.id.tv3);
 68         list = new ArrayList<Fragment>();
 69
 70         // 设置数据源
 71         Fragment1 fragment1 = new Fragment1();
 72         Fragment2 fragment2 = new Fragment2();
 73         Fragment3 fragment3 = new Fragment3();
 74
 75         list.add(fragment1);
 76         list.add(fragment2);
 77         list.add(fragment3);
 78
 79         // 设置适配器
 80         FragmentPagerAdapter adapter = new FragmentPagerAdapter(
 81                 getSupportFragmentManager()) {
 82
 83             @Override
 84             public int getCount() {
 85                 return list.size();
 86             }
 87
 88             @Override
 89             public Fragment getItem(int arg0) {
 90                 return list.get(arg0);
 91             }
 92         };
 93
 94         // 绑定适配器
 95         viewPager.setAdapter(adapter);
 96
 97         // 设置滑动监听
 98         viewPager.setOnPageChangeListener(new OnPageChangeListener() {
 99
100             @Override
101             public void onPageSelected(int position) {
102                 // 当页面被选择时,先讲3个textview的字体颜色初始化成黑
103                 tv1.setTextColor(Color.BLACK);
104                 tv2.setTextColor(Color.BLACK);
105                 tv3.setTextColor(Color.BLACK);
106
107                 // 再改变当前选择页(position)对应的textview颜色
108                 switch (position) {
109                 case 0:
110                     tv1.setTextColor(Color.rgb(51, 153, 0));
111                     break;
112                 case 1:
113                     tv2.setTextColor(Color.rgb(51, 153, 0));
114                     break;
115                 case 2:
116                     tv3.setTextColor(Color.rgb(51, 153, 0));
117                     break;
118                 }
119
120                 currentPage = position;
121
122             }
123
124             @Override
125             public void onPageScrolled(int arg0, float arg1, int arg2) {
126                 Log.i("tuzi", arg0 + "," + arg1 + "," + arg2);
127
128                 // 取得该控件的实例
129                 LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) tabline
130                         .getLayoutParams();
131
132                 if (currentPage == 0 && arg0 == 0) { // 0->1移动(第一页到第二页)
133                     ll.leftMargin = (int) (currentPage * tabLineLength + arg1
134                             * tabLineLength);
135                 } else if (currentPage == 1 && arg0 == 1) { // 1->2移动(第二页到第三页)
136                     ll.leftMargin = (int) (currentPage * tabLineLength + arg1
137                             * tabLineLength);
138                 } else if (currentPage == 1 && arg0 == 0) { // 1->0移动(第二页到第一页)
139                     ll.leftMargin = (int) (currentPage * tabLineLength - ((1 - arg1) * tabLineLength));
140                 } else if (currentPage == 2 && arg0 == 1) { // 2->1移动(第三页到第二页)
141                     ll.leftMargin = (int) (currentPage * tabLineLength - (1 - arg1)
142                             * tabLineLength);
143                 }
144
145                 tabline.setLayoutParams(ll);
146
147             }
148
149             @Override
150             public void onPageScrollStateChanged(int arg0) {
151                 // TODO Auto-generated method stub
152
153             }
154         });
155
156     }
157
158 }

由于3个Fragment的代码几乎一致,所以这里只给出Fragment1.java

 1 package com.example.weixin_test;
 2
 3 import android.os.Bundle;
 4 import android.support.annotation.Nullable;
 5 import android.support.v4.app.Fragment;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9
10 public class Fragment1 extends Fragment {
11     @Override
12     public View onCreateView(LayoutInflater inflater,
13             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
14         return inflater.inflate(R.layout.fragment1, container, false);
15     }
16
17 }
时间: 09-19

安卓开发复习笔记——Fragment+ViewPager组件(高仿微信界面)的相关文章

转-Fragment+ViewPager组件(高仿微信界面)

http://www.cnblogs.com/lichenwei/p/3982302.html 什么是ViewPager? 关于ViewPager的介绍和使用,在之前我写过一篇相关的文章<安卓开发复习笔记——ViewPager组件(仿微信引导界面)>,不清楚的朋友可以看看,这里就不再重复. 什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Act

安卓开发复习笔记——Fragment+FragmentTabHost组件(实现新浪微博底部菜单)

记得之前写过2篇关于底部菜单的实现,由于使用的是过时的TabHost类,虽然一样可以实现我们想要的效果,但作为学习,还是需要来了解下这个新引入类FragmentTabHost 之前2篇文章的链接: 安卓开发复习笔记——TabHost组件(一)(实现底部菜单导航) 安卓开发复习笔记——TabHost组件(二)(实现底部菜单导航) 关于Fragment类在之前的安卓开发复习笔记——Fragment+ViewPager组件(高仿微信界面)也介绍过,这里就不再重复阐述了. 国际惯例,先来张效果图: 下面

安卓开发复习笔记——Menu菜单组件(选项菜单,上下文菜单,子菜单)

菜单是用户界面中最常见的元素之一,使用非常频繁,在Android中,菜单被分为如下三种,选项菜单(OptionsMenu).上下文菜单(ContextMenu)和子菜单(SubMenu). 菜单的实现方式有2种:一种是通过布局文件xml生成菜单,另一种是通过代码生成. 三种菜单内容有点多,不过大体相似,一次性讲完吧,本人偏好代码动态生成,下面就以代码为例. 1.选项菜单(OptionsMenu) 先来看下选项菜单的效果图:   在一个Activity界面中点击手机Menu键,在屏幕下方弹出的菜单

安卓开发复习笔记——TabHost组件(实现底部菜单导航)

安卓开发复习笔记——TabHost组件(实现底部菜单导航) 4 来源:cnblog    阅读:1048   时间:2014-09-16 什么是TabHost? TabHost组件的主要功能是可以进行应用程序分类管理,例如:在用户使用windows操作系统的时候,经常见到如图所示的图形界面. TabHost选项卡,说到这个组件,不得不先说一件事情,翻翻谷歌提供给我们的API,我们可以发现这样的一段话: 它告诉我们,这个组件在安卓4.0之后已经被废弃了,建议我们新的程序应该使用Fragment组件

Android控件-Fragment+ViewPager(高仿微信界面)

什么是Fragment? Fragment是Android3.0后新增的概念,Fragment名为碎片,不过却和Activity十分相似,具有自己的生命周期,它是用来描述一些行为或一部分用户界面在一个Activity中,我们可以合并多个Fragment在一个单独的activity中建立多个UI面板,或者重用Fragment在多个activity中. 关于Fragment的生命周期,由于Fragment需要依赖Activity,也就是说当一个Activity的生命周期结束之后,那么Fragment

安卓开发复习笔记——ViewPager组件(仿微信引导界面&gt;)

这2天事情比较多,都没时间更新博客,趁周末,继续继续~ 今天来讲个比较新潮的组件——ViewPager 什么是ViewPager? ViewPager是安卓3.0之后提供的新特性,继承自ViewGroup,专门用以实现左右滑动切换View的效果. 如果想向下兼容就必须要android-support-v4.jar这个包的支持,这是一个来自google提供的一个附加包. 通俗点来讲,就是现在市面上大多数app,安装完第一次打开软件会出现的一个左右滑动的引导界面. 先来看下效果图:     这是一个

安卓开发复习笔记——WebView组件

我们专业方向本是JAVA Web,这学期突然来了个手机App开发的课设,对于安卓这块,之前自学过一段时间,有些东西太久没用已经淡忘了 准备随笔记录些复习笔记,也当做温故知新吧~ 1.什么是WebView? WebView(网络视图)能加载显示网页,可以将其视为一个浏览器,它使用了WebKit渲染引擎加载显示网页. 废话不多说,直接上代码 1.需要在xml布局文件中声明WebView组件 1 <WebView 2 android:id="@+id/webview" 3 androi

安卓开发复习笔记——GridView组件

1.什么是GridView? GridView(网格视图)是按照行列的方式来显示内容的,一般用于显示图片,图片等内容,比如实现九宫格图,用GridView是首选,也是最简单的. 2.正文 GridView的用法很多,网上介绍最多的方法就是自己实现一个ImageAdapter继承BaseAdapter,再供GridView使用,太多的东西我就不再重复去写,这次记录点不一样的用法. 先看下效果图:(点击应用图标以Toast的方式显示信息) 首先先说下GridView常用的XML属性: 属性名称 描述

安卓开发复习笔记——Gallery组件+ImageSwitcher组件

什么是Gallery? Gallery是一个水平的列表选择框,它允许用户通过拖动来查看上一个.下一个列表选项. 下图是今天要实现的最终效果: 利用Gallery组件实现的一个横向显示图像列表,可以通过左.右滑动屏幕来切换图像,并加上ImageSwitcher实现一个大图片预览功能. 1.一步一步来吧,首先先解决下上半部分(图像导航) 先来看下效果图,下图是利用Gallery组件实现的一个横向显示图像列表,可以通过左.右滑动屏幕来切换图像.   直接上代码,注释很全. MainActivity.j