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 ...
随机推荐
- 使用SandCastle创建.Net帮助文档
使用SandCastle创建.Net帮助文档 引用自:http://www.cnblogs.com/DotNetNuke/archive/2009/04/23/1441899.html Sandcas ...
- 清北暑假模拟day1 爱
/* 水题 */ #include<iostream> #include<cstdio> #include<string> #include<cstring& ...
- Java项目相关监控与调优
Linux JVM Tomcat =========Linux =============== 监控 nmon 命令:nmon -s 10 -c 60 -f -m /home -s 10 每10s ...
- leofs存储总结
1.leofs角色 Account(账户).Bucket(对象桶).Object(对象), gateway.manager0.manager1.storage Account 一个account可以创 ...
- CMake Error: your CXX compiler: "" was not found
[root@amax src]# cmake . -- The CXX compiler identification is unknown CMake Error at /usr/local/sha ...
- DEV控件Grid显示行号
DEV控件Grid的显示行号需要通过一个事件来设置,具体设置代码为: private void gridView1_CustomDrawRowIndicator(object sender, DevE ...
- Java多线程文件下载
一. 多线程下载文件考虑处理步骤: 1. 如何获取文件的长度 2. 合理的创建线程数量,并计算每一个线程下载的长度 3. 如何将多个线程下载的字节写入到文件中 二. 代码实现如下: package c ...
- Codeforces 271 Div 2 A Keyboard
题目链接:http://codeforces.com/contest/474/problem/A 解题报告:一个矩形的键盘,上面只有规定的字符,现在按的时候总是会向某个方向按偏,也就是输入一串字符后, ...
- NOIP2016题目整合
今天终于拿到官方数据,兴致勃勃地全 A 了. Day 1 T1 toy 处理一下正负号加加减减取模乱搞就好了. #include <iostream> #include <cstdi ...
- c语言随机函数&&时间函数
c语言中的随机函数为rand(),但是rand生成的值得大小主要相对一个变量才产生的一定有含义的数,这个相对的变量我们可以再srand()函数中进行设置,srand函数是void类型,内部含一个无符号 ...