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 ...
随机推荐
- vs2010 中无法打开 源文件 "stdafx.h" 未定义标识符 “xxx”
解决方案: 项目属性->配置属性->C/C++->常规->附加包含目录->$(ProjectDir)
- 详细介绍如何在win7下首次实现通过Git bash向Github提交项目
详细介绍如何在win7下首次实现通过Git bash向Github提交项目 引自:http://jingpin.jikexueyuan.com/article/35944.html 作者: wddoe ...
- glusterFS的常用命令 （转）
1. 启动/关闭/查看glusterd服务 # /etc/init.d/glusterd start # /etc/init.d/glusterd stop # /etc/init.d/g ...
- Hadoop！ | 大数据百科 | 数据观 | 中国大数据产业观察_大数据门户
你正在使用过时的浏览器,Amaze UI 暂不支持. 请 升级浏览器 以获得更好的体验! 深度好文丨读完此文,就知道Hadoop了! 来源:BiThink 时间:2016-04-12 15:1 ...
- Markdown 學習
Markdown 格式由John Gruber 創建,是一種便於閱讀,非常簡潔直觀的純文本文件格式,可以方便地轉為html等其他格式,很適合與寫作,不需要關注排版問題 常用學習資源有: ###標題用 ...
- oracle数据库表空间扩容方法
1. 先查询表空间在物理磁盘上存放的位置,注意使用sysdba的账号登陆. SELECT tablespace_name, file_id, file_name, ), ) total_space F ...
- PHP 如何显示大数字，防止显示为 科学计数法 形式
PHP 数字超过一定长度时,会自动转换为 科学计数法 的形式,如 1.2345678912346E+16: 如何 避免转换,让它原样展示呢? 不过,可以用PHP函数 number_format() 来 ...
- 汉字转拼音（pinyin4j）
1.引入依赖 <dependency> <groupId>pinyin4j.sourceforge.net</groupId> <artifactId> ...
- FineUI第十八天---表格之事件的处理
表格之事件的处理: 1.事件参数: GridPageEventArgs:表格分页事件参数,对应onPageIndexChange事件. NewPageIndex:新页面的索引 GridSortEven ...
- ProgressDialog使用总结
以前对ProgressDialog不太熟练,特地看到的这个文章 ProgressDialog的使用 ProgressDialog 继承自AlertDialog,AlertDialog继承自Dialo ...