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 ...
随机推荐
- [译]ES6箭头函数和它的作用域
原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值 ...
- [转载]JavaScript内存分析
https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...
- UI第一节—— UILable
1.首先说说怎么创建UI程序,打开xcode,选择Create a new Xcode project.看如下截图 2,接下来就蹦出一个和写OC应用差不多的界面,不多解释了 3.我给工程取得名字就叫 ...
- MySql的count统计结果
起因:最近在学习mysql的数据库,发现在innodb表中大数据量下count(*)的统计结果实在是太慢,所以想找个办法替代这种查询,下面分享一下我查找的过程. 实践:在给出具体的结论之前,我们先看看 ...
- An error I have completed recently
在上学期开发javaweb的项目中,遇见一个字符串池的问题. 大致如下: 在上传一篇文章的时候,通过字符串的截取获取该篇文章的后缀名,如doc.pdf.txt....然后规定只能上传pdf和doc格式 ...
- iOS开发——网络篇——UIWebview基本使用，NSInvocation(封装类)，NSMethodSignature（签名），JavaScript，抛异常，消除警告
一.UIWebView简介 1.UIWebView什么是UIWebViewUIWebView是iOS内置的浏览器控件系统自带的Safari浏览器就是通过UIWebView实现的 UIWebView不但 ...
- Vim编辑器运用的五个技巧
导读 如今 Vim 是每个人最喜欢的 Linux 文本编辑器,也是开发者和系统管理者最喜爱的开源工具.大多数人只是熟悉Vim的最最基本的操作,只能在终端使用 Vim 修改文本,但是它并没有任何一个我想 ...
- 5-python学习——条件语句
5-python学习——条件语句 5-python学习——条件语句 条件语句if else形式 if else条件语句说明 测试一下 编程语言一般都由这么几个部分组成 变量 条件分支语句 循环语句 函 ...
- 32 GroupSock(AddressPortLookupTable)——live555源码阅读(四)网络
32 GroupSock(AddressPortLookupTable)——live555源码阅读(四)网络 32 GroupSock(AddressPortLookupTable)——live555 ...
- 装b指南
提溜一个糖水黄桃罐头瓶,放在桌边,坐下以后,脖子略微后仰,翘着二郎腿,低头盯着屏幕看需求. 最好点一根烟,牌子无所谓,能冒烟就行.要得就是云山雾绕的感觉,从烟雾中眯着眼睛看出去,一副胸有成竹的样. 一 ...