App主界面Tab实现方法
ViewPager + FragmentPagerAdapter
这里模仿下微信APP界面的实现
国际惯例，先看下效果图：
activity_main.xml 布局文件：
<?xml version="1.0" encoding="utf-8"?>
<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.kevin.viewpager_fragment.MainActivity"> <include layout="@layout/top" /> <android.support.v4.view.ViewPager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" /> <include layout="@layout/bottom" /> </LinearLayout>
top.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@mipmap/title_bar"
android:gravity="center"
android:orientation="vertical"> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="微信"
android:textColor="#ffffff"
android:textSize="20sp"
android:textStyle="bold" /> </LinearLayout>
bottom.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="@mipmap/bottom_bar"
android:orientation="horizontal"> <LinearLayout
android:id="@+id/id_tab_weixin"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"> <ImageButton
android:id="@+id/id_tab_weixin_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/tab_weixin_pressed" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="微信"
android:textColor="#ffffff" /> </LinearLayout> <LinearLayout
android:id="@+id/id_tab_frd"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"> <ImageButton
android:id="@+id/id_tab_frd_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/tab_find_frd_normal" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="朋友"
android:textColor="#ffffff" /> </LinearLayout> <LinearLayout
android:id="@+id/id_tab_address"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"> <ImageButton
android:id="@+id/id_tab_address_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/tab_address_normal" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="通讯录"
android:textColor="#ffffff" /> </LinearLayout> <LinearLayout
android:id="@+id/id_tab_setting"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"> <ImageButton
android:id="@+id/id_tab_setting_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@mipmap/tab_settings_normal" /> <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="设置"
android:textColor="#ffffff" /> </LinearLayout> </LinearLayout>
tap01.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="微信"
android:textSize="30sp"
android:textStyle="bold" /> </LinearLayout>
tap02.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="微信2"
android:textSize="30sp"
android:textStyle="bold" /> </LinearLayout>
tap03.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="微信3"
android:textSize="30sp"
android:textStyle="bold" /> </LinearLayout>
tap04.xml 布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"> <TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="微信4"
android:textSize="30sp"
android:textStyle="bold" /> </LinearLayout>
MainActivity.class 主类。 使用的是FragmentPagerAdapter，这个承载的是一个个Fragment，需要注意的是，这里需要继承自 FragmentActivity 。 上源码吧，看了就知道是多么简单了。
package com.kevin.viewpager_fragment; 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.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout; import java.util.ArrayList;
import java.util.List; import fragment.AddressFragment;
import fragment.FrdFragment;
import fragment.SettingFragment;
import fragment.WeiXinFragment; public class MainActivity extends FragmentActivity implements View.OnClickListener { private ViewPager mViewPager;
private FragmentPagerAdapter mAdapter;
private List<Fragment> mFragments; private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting; private ImageButton mImgWeixin;
private ImageButton mImgFrd;
private ImageButton mImgAddress;
private ImageButton mImgSetting; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); initView();
initEvent();
} private void initEvent() {
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
} private void initView() {
mViewPager = (ViewPager) findViewById(R.id.id_viewpager); mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img); mFragments = new ArrayList<>();
Fragment mTab01 = new WeiXinFragment();
Fragment mTab02 = new FrdFragment();
Fragment mTab03 = new AddressFragment();
Fragment mTab04 = new SettingFragment();
mFragments.add(mTab01);
mFragments.add(mTab02);
mFragments.add(mTab03);
mFragments.add(mTab04); mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
} @Override
public int getCount() {
return mFragments.size();
}
}; mViewPager.setAdapter(mAdapter); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override
public void onPageSelected(int position) {
int currentItem = mViewPager.getCurrentItem();//拿到当前显示的那一个item页面
setTab(currentItem);
} @Override
public void onPageScrollStateChanged(int state) { }
});
} @Override
public void onClick(View v) { switch (v.getId()) {
case R.id.id_tab_weixin:
setSelect(0);
break;
case R.id.id_tab_frd:
setSelect(1);
break;
case R.id.id_tab_address:
setSelect(2);
break;
case R.id.id_tab_setting:
setSelect(3);
break;
default:
break;
}
} /*
* 切换所有图片为暗色
* */
private void resetImgs() {
mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal);
mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal);
mImgAddress.setImageResource(R.mipmap.tab_address_normal);
mImgSetting.setImageResource(R.mipmap.tab_settings_normal);
} private void setSelect(int i) { setTab(i); mViewPager.setCurrentItem(i); } private void setTab(int i) { resetImgs();//调用这个方法，设置所有的tab图片为暗色 // 设置图片为亮色
//切换内容区域
switch (i) {
case 0:
mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed);
break;
case 1:
mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed);
break;
case 2:
mImgAddress.setImageResource(R.mipmap.tab_address_pressed);
break;
case 3:
mImgSetting.setImageResource(R.mipmap.tab_settings_pressed);
break;
}
}
}
除了主类，接下来是4个Fragment页面。这里没什么内容，只是加载一个布局。
WeiXinFragment.class :
package fragment; 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; import com.kevin.viewpager_fragment.R; /**
* Created by ${火龙裸先生} on 2016/11/4.
* 邮箱：791335000@qq.com
*/
public class WeiXinFragment extends Fragment { @Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.tab01, container, false); return view;
}
}
FrdFragment.class :
package fragment; 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; import com.kevin.viewpager_fragment.R; /**
* Created by ${火龙裸先生} on 2016/11/4.
* 邮箱：791335000@qq.com
*/
public class FrdFragment extends Fragment { @Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab02, container, false); return view;
}
}
AddressFragment.class :
package fragment; 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; import com.kevin.viewpager_fragment.R; /**
* Created by ${火龙裸先生} on 2016/11/4.
* 邮箱：791335000@qq.com
*/
public class AddressFragment extends Fragment { @Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab03, container, false); return view;
}
}
SettingFragment.class :
package fragment; 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; import com.kevin.viewpager_fragment.R; /**
* Created by ${火龙裸先生} on 2016/11/4.
* 邮箱：791335000@qq.com
*/
public class SettingFragment extends Fragment { @Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.tab04, container, false); return view;
}
}
就是这些代码了。
总结一下：实现这样功能的实现，不止这一种方法，但是，采用ViewPager + FragmentPagerAdapter， 这里的内容区域是Fragment，所以优势就出来了，Fragment管理自己的布局内部所有控件的事件等各种东西，不需要把代码都冗余在MainActivity.class中， 我们的MainActivity只作为一个调度器，调度显示不同的Fragment、隐藏不同的Fragment。 这样的话，便于后期的复用，也便于后期的维护。 然后，我们用的ViewPager，肯定有ViewPager的优势，如果大家希望能够左右拖动，大家就选择 “ViewPager + FragmentPagerAdapter”作为实现，如果大家不需要左右去拖动，比如QQ，一个页面有LitView或者RecyclerView，并且Item需要“侧滑删除”的一个效果，所以这个时候可能就不需要ViewPager的这样一个效果，这就可以选择直接使用Fragment去实现。也建议尽量去使用Fragment。
App主界面Tab实现方法的更多相关文章
- 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(四)
ViewPagerIndicator+ViewPager 要想使用ViewPagerIndicator,要使用到viewPagerlibrary开源库 top.xml <?xml version ...
- 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)
Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 <FrameLayout android:id="@+id ...
- 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)
1.ViewPager实现Tab 首先实现底部和底部布局 <?xml version="1.0" encoding="utf-8"?> <Li ...
- 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(三)
FragmentPagerAdapter+ViewPager 与之前直接用ViewPager不同的是,数组里面放的不再是View,而是Fraagment; 使用FragmentPagerAdapter ...
- 66、多种多样的App主界面Tab（1）------ ViewPager实现Tab
<?xml version="1.0" encoding="utf-8"?> <!-- bottom.xml --> <Linea ...
- 安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
- Android学习系列(23)--App主界面实现
在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...
- 安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)
学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来.效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragme ...
- 安卓开发_慕课网_ViewPager实现Tab(App主界面)
学习内容来自“慕课网” 网站上一共有4种方法来实现APP主界面的TAB方法 这里学习第一种 ViewPager实现Tab 布局文件有7个, 主界面acitivity.layout <Linear ...
随机推荐
- JavaScript日期集合（今日，昨日，本周一，周末 ，月初，月末）
闲聊:新年第一天上班,看着自己15年年底写的代码,真心觉得很烂,因为年底没时间去写,一想着做后台管理需要获取一周的开始和结束日期,就慌了,项目赶着测试呢,还有好多事情未做,就直接抄袭了网上的一段错误代 ...
- ionic导航之后返回功能的说明
当我导航view之后,再使用$location.path("/path/origin")方法重新定位到初始页面,在深入进入其他的view之后使用这个方法就遇到了问题. 假设这个设置 ...
- Ali相关面试题
接到的电话面试,人比较随和,当时IOS有一段时间没怎么碰了,因为近期一直在用C++,QT做IM.很多回答我都扯到了C++上,所以可能没戏- -! 回想一下,大概有如下几个问题:(都是很常见的问题) 1 ...
- Swift2.1 语法指南——高级操作符
原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...
- Codeforce 287 div2 C题
题目链接:http://codeforces.com/contest/507/problem/C 解题报告:现在有一个满二叉树型的迷宫,入口在根结点,出口在第n个叶节点,有一串命令,LRLRLRLRL ...
- iOS开发——UI基础-UIScrollView
一.UIScrollView使用的步骤 1.创建UIScrollView 2.将需要展示的内容添加到UIScrollView中 3.设置UIScrollView的滚动范围 (contentSize) ...
- [POJ2892]Tunnel Warfare
[POJ2892]Tunnel Warfare 试题描述 During the War of Resistance Against Japan, tunnel warfare was carried ...
- (转)listview中常见难题总结
原文地址:http://blog.csdn.net/cherry609195946/article/details/8844224 1. PopWindow中listview的item获取不到点击事件 ...
- am335x 虚拟机环境变量的设置及注释
我用的还是老的Linux3.2.0的内核,只是借用了TI am335x SDK 3.0里面的工具. 首先下载TI官方的SDK,上一章已经安装了一个Ubuntu14.04的虚拟机. TI 最新的SDK下 ...
- vmware vcenter orchestrator configuration提示“用户名密码错误或登录失败超过次数被锁定”
首次登录,使用默认用户密码登录vmware/vmware vmware vcenter orchestrator configuration提示"用户名密码错误或登录失败超过次数被锁定&qu ...