1.ViewPager实现Tab

首先实现底部和底部布局

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

底部布局

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

注意这里将LinearLayout中的子View  ImageButton 的clickable设置为false,这样才能使得整个LiearLayout 响应点击事件

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>

每一个tab页面,这里只列举一个,其他的都相似

<?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="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:text="This is Weixin Tab"
android:textSize="30sp"
android:textStyle="bold" /> </LinearLayout>

MainActivity类

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>();
//用来保存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);
} }

这样就实现了即可以滑动也可以点击tab实现页面的转换

下载:链接:http://pan.baidu.com/s/1c098WLU 密码:5zou

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(一)的更多相关文章

  1. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(四)

    ViewPagerIndicator+ViewPager 要想使用ViewPagerIndicator,要使用到viewPagerlibrary开源库 top.xml <?xml version ...

  2. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(三)

    FragmentPagerAdapter+ViewPager 与之前直接用ViewPager不同的是,数组里面放的不再是View,而是Fraagment; 使用FragmentPagerAdapter ...

  3. 【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)

    Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 <FrameLayout android:id="@+id ...

  4. 66、多种多样的App主界面Tab(1)------ ViewPager实现Tab

    <?xml version="1.0" encoding="utf-8"?> <!-- bottom.xml --> <Linea ...

  5. App主界面Tab实现方法

    ViewPager + FragmentPagerAdapter 这里模仿下微信APP界面的实现 国际惯例,先看下效果图:   activity_main.xml 布局文件: <?xml ver ...

  6. Android学习系列(23)--App主界面实现

    在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...

  7. 安卓开发_慕课网_Fragment实现Tab(App主界面)

    学习内容来自“慕课网” 这里用Fragment来实现APP主界面 思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...

  8. Android:日常学习笔记(8)———开发微信聊天界面

    Android:日常学习笔记(8)———开发微信聊天界面 只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片,能够指定哪些区域可以被拉升,哪些区域不可以.

  9. C#可扩展编程之MEF学习笔记(三):导出类的方法和属性

    前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...

随机推荐

  1. C++对C语言的拓展(5)—— 函数重载和函数指针结合

    1.函数指针的介绍 函数指针指向某种特定类型,函数的类型由其参数及返回类型共同决定,与函数名无关.举例如下: int add(int nLeft,int nRight);//函数定义 该函数类型为in ...

  2. 仿百度下拉关键词,和关键词的小demo

    自己做项目时用到的仿百度下拉关键词 代码: $(function(){ var oTxt = document.getElementById('search_text'); oTxt.onkeyup ...

  3. CountDownLatch和cyclicbarrier的使用

    CountDownLatch: 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数初始化 CountDownLatch.由于调用了 countDown ...

  4. 设置android的versionCode

    在config.xml里面设置 android-versionCode="1" AndroidManifest.xml 将会修改 android:versionCode=" ...

  5. Git学习笔记(四)标签和搭建Git服务

    一.标签是什么 发布一个版本时,我们通常先在版本库中打一个标签,这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一 ...

  6. web基础 (三) CSS

    css 层叠样式表 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector { property: value; property: value; ... property: ...

  7. 空中楼阁 ( House )最短路

    题目描述: 话说Z4阴差阳错地来到了神秘岛.不久,他们发现,这是一个由n个小岛和一个中心岛组成的群岛,群岛之间有m座桥.令他们感到惊讶的是,这些桥并不是固定不变的,经较长时间的观察,发现它们会随时间作 ...

  8. import javax.servlet 出错(真的很管用)

    Error: The import javax.servlet cannot be resolved The import javax.servlet.http.HttpServletRequest ...

  9. js正则基础总结和工作中常用验证规则

    知识是需要系统的.就像js正则用了那么多次,却还是浑浑噩噩,迫切需要来一次整理,那么来吧! 基本知识 元字符 \d 匹配数字等于[0-9] \w 匹配字母.数字.下划线.中文 \s 匹配任意空白字符 ...

  10. 配置mysql 问题解决

    问题 [Warning] '--skip-locking' is deprecated and will be removed in a future release. Please use '--s ...