ViewPager+View实现Tab

时间：2022-10-29 22:21:15

注：源码来自慕课网。

ViewPager+View实现Tab

使用ViewPager+View实现Tab底部导航：

主要思想：顶部top.xml，中间ViewPager，底部线性布局Tab导航。

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="@drawable/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>

底部导航的实现：1个线性布局里面包含4个线性布局，作为4个Tab。

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="@drawable/bottom_bar"

android:orientation="horizontal" >

<LinearLayout

android:id="@+id/id_tab_weixin"

android:layout_width="0dp"

android:layout_height="fill_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="@drawable/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="fill_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="@drawable/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="fill_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="@drawable/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_settings"

android:layout_width="0dp"

android:layout_height="fill_parent"

android:layout_weight="1"

android:gravity="center"

android:orientation="vertical" >

<ImageButton

android:id="@+id/id_tab_settings_img"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#00000000"

android:clickable="false"

android:src="@drawable/tab_settings_normal" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="设置"

android:textColor="#ffffff" />

</LinearLayout>

</LinearLayout>

省略4个Tab的布局文件。

activity_main.xml实现方法：一个线性布局，包含top.xml和bottom.xml，中间用ViewPager，注意这里为了使ViewPager充满屏幕，同时不遮住底部导航，

这里必须设置ViewPager的高度：android:layout_height="0dp";android:layout_weight="1".

activity_main.xml具体实现：

<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" >

<include layout="@layout/top" />

<android.support.v4.view.ViewPager

android:id="@+id/id_viewpager"

android:layout_width="fill_parent"

android:layout_height="0dp"

android:layout_weight="1" >

</android.support.v4.view.ViewPager>

<include layout="@layout/bottom" />

</LinearLayout>

到这里布局文件准备好了。接下来开始写MainActivity.java。比较简单，代码如下：

Activity.java具体实现：

package com.imooc.tab01;

import java.util.ArrayList;

import java.util.List;

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v4.view.ViewPager.OnPageChangeListener;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.view.Window;

import android.widget.ImageButton;

import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener

{

private ViewPager mViewPager;

private PagerAdapter mAdapter;

private List<View> mViews = new ArrayList<View>();

// TAB

private LinearLayout mTabWeixin;

private LinearLayout mTabFrd;

private LinearLayout mTabAddress;

private LinearLayout mTabSetting;

private ImageButton mWeixinImg;

private ImageButton mFrdImg;

private ImageButton mAddressImg;

private ImageButton mSettingImg;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

initView();

initEvents();

}

private void initEvents()

{

mTabWeixin.setOnClickListener(this);

mTabFrd.setOnClickListener(this);

mTabAddress.setOnClickListener(this);

mTabSetting.setOnClickListener(this);

mViewPager.setOnPageChangeListener(new OnPageChangeListener()

{

@Override

public void onPageSelected(int arg0)

{

int currentItem = mViewPager.getCurrentItem();

resetImg();

switch (currentItem)

{

case 0:

mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);

break;

case 1:

mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case 2:

mAddressImg

.setImageResource(R.drawable.tab_address_pressed);

break;

case 3:

mSettingImg

.setImageResource(R.drawable.tab_settings_pressed);

break;

}

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2)

{

}

@Override

public void onPageScrollStateChanged(int arg0)

{

}

});

}

private void initView()

{

mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

// tabs

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_settings);

// ImageButton

mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img);

mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img);

mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img);

mSettingImg = (ImageButton) findViewById(R.id.id_tab_settings_img);

LayoutInflater mInflater = LayoutInflater.from(this);

View tab01 = mInflater.inflate(R.layout.tab01, null);

View tab02 = mInflater.inflate(R.layout.tab02, null);

View tab03 = mInflater.inflate(R.layout.tab03, null);

View tab04 = mInflater.inflate(R.layout.tab04, null);

mViews.add(tab01);

mViews.add(tab02);

mViews.add(tab03);

mViews.add(tab04);

mAdapter = new PagerAdapter()

{

@Override

public void destroyItem(ViewGroup container, int position,

Object object)

{

container.removeView(mViews.get(position));

}

@Override

public Object instantiateItem(ViewGroup container, int position)

{

View view = mViews.get(position);

container.addView(view);

return view;

}

@Override

public boolean isViewFromObject(View arg0, Object arg1)

{

return arg0 == arg1;

}

@Override

public int getCount()

{

return mViews.size();

}

};

mViewPager.setAdapter(mAdapter);

}

@Override

public void onClick(View v)

{

resetImg();

switch (v.getId())

{

case R.id.id_tab_weixin:

mViewPager.setCurrentItem(0);

mWeixinImg.setImageResource(R.drawable.tab_weixin_pressed);

break;

case R.id.id_tab_frd:

mViewPager.setCurrentItem(1);

mFrdImg.setImageResource(R.drawable.tab_find_frd_pressed);

break;

case R.id.id_tab_address:

mViewPager.setCurrentItem(2);

mAddressImg.setImageResource(R.drawable.tab_address_pressed);

break;

case R.id.id_tab_settings:

mViewPager.setCurrentItem(3);

mSettingImg.setImageResource(R.drawable.tab_settings_pressed);

break;

default:

break;

}

}

/**

* 将所有的图片切换为暗色的

*/

private void resetImg()

{

mWeixinImg.setImageResource(R.drawable.tab_weixin_normal);

mFrdImg.setImageResource(R.drawable.tab_find_frd_normal);

mAddressImg.setImageResource(R.drawable.tab_address_normal);

mSettingImg.setImageResource(R.drawable.tab_settings_normal);

}

}

ViewPager+View实现Tab的更多相关文章

  1. TabLayout&plus;Fragment&plus;ViewPager&plus;FragmentStatePagerAdapter实现Tab标签

    首先来看下实现的效果吧: 最近在项目中实现这个效果的时候.尽管自己磕磕绊绊的实现了,可是知识确实模模糊糊的,今天天气异常的冷,在加上这个知识不太熟练,实在是没有心情进行接下来的计划,干脆借着这个时间, ...

  2. Android两种为ViewPager&plus;Fragment添加Tab的方式

    在Android开发中ViewPager的使用是非常广泛的,而它不仅仅能够实现简单的开始引导页,还可以结合Fragment并添加Tab作为选项卡或为显示大批量页面实现强大的顺畅滑动 下面介绍两种为Vi ...

  3. TabLayout与ViewPager同步后Tab的标题不显示

    一.概述 1.1 问题描述 TabLayout+ViewPager后,TabLayout的TabItem不显示的问题: 1.2 截图 二.结论 mTabs.setupWithViewPager(mVi ...

  4. &lbrack;转&rsqb;ionic tab view hide tab bar

    http://*.com/questions/23991852/how-do-i-hide-the-tabs-in-ionic-framework ////// tabs.ht ...

  5. 使用FragmentTabHost&plus;TabLayout&plus;ViewPager实现双层嵌套Tab

    大多数应用程序都会在底部使用3~5个Tab对应用程序的主要功能进行划分,对于一些信息量非常大的应用程序,还需要在每个Tab下继续划分子Tab对信息进行分类显示. 本文实现采用FragmentTabHo ...

  6. 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 （转）

    原博客地址  :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

  7. 无需SherlockActionbar的SlidingMenu使用详解（二）——向Fragment中添加ViewPager和Tab

    之前我们对大体框架有了一定的认识,现在我们来做Fragment界面,其实这里面和这个框架的关系就不大了,但因为有些同学对于在SlidingMenu中切换fragment还是有问题,所以我就在本篇进行详 ...

  8. 低版本系统兼容的ActionBar（六）用Fragment&plus;ViewPager&plus;Tab实现快速导航

    Tab经常和Fragment结合使用,这一讲我们用3种方式来实现这种快捷导航. 0.重要的两个监听器 MyTabListener,这个我们之前已经接触过了 package com.kale.actio ...

  9. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...

随机推荐

  1. keras安装

    找对工具真的很重要,周末和学霸折腾了一天才装了几个包,问了同事找了一个方便的包,装起来不要太快啊.二十分钟全部搞定. 一.Anaconda 真是大杀器,牛到飞起来,一键部署,所有常用的机器学习包全部包 ...

  2. Git删除错误提交的commit

    git reset --hard <commit_id> git push origin HEAD --force

  3. C&num;EXCEL 操作类--C&num;DataToExcel帮助类

    using System; using System.Diagnostics; //using Excel; namespace DotNet.Utilities {     /// <summ ...

  4. 阿里云产品介绍（一）：云服务器ECS

    最近天南海北的跑客户,在沟通过程中,发现很多客户对于阿里云众多的产品颇有种挑花了眼不知如何入手的感觉,就想写一个系列来简单的介绍下. 云计算的概念刚出来的时候,吹的牛皮是可以将成千上万台物理服务器连接 ...

  5. &commat;Inject&period;&commat;Resource&period;&commat;Autowired 的区别

    @Inject:Struts2的注解, @Resource : J2EE提供,用于注入,( j2ee提供的 ) 默认按名称装配,@Resource(name="beanName") ...

  6. &lbrack;转&rsqb;MyEclipse for Spring2014破解

    转至:http://blog.my-eclipse.cn/myeclipse-2014-crack.html 一.安装完成MyEclipse2014(适用于2013等版本)后,不要打开软件,下载破解附 ...

  7. mvn命令

    打包:mvn package 编译:mvn compile 编译测试程序:mvn test-compile 清空:mvn clean 运行测试:mvn test 生成站点目录: mvn site 生成 ...

  8. 相对于父元素的fixed定位的实现

    问题描述 之前在项目中,遇到了一个场景,需要实现相对于父元素的fixed定位:在父元素内拖动滚动条时,"fixed"定位的元素不能滑动,在外层拖动滚动条时,父元素及父元素内的所有元 ...

  9. DevExpress v18&period;1新版亮点——Reporting篇（一）

    用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress Reporting v18.1 的新功能,快来下载试用新版本 ...

  10. java基础篇---内存分析

    Java的并发采用的是共享内存模型(而非消息传递模型),线程之间共享程序的公共状态,线程之间通过写-读内存中的公共状态来隐式进行通信.多个线程之间是不能直接传递数据交互的,它们之间的交互只能通过共享变 ...

相关文章