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

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实现方法(一)的更多相关文章

【IMOOC学习笔记】多种多样的App主界面Tab实现方法(四)
ViewPagerIndicator+ViewPager 要想使用ViewPagerIndicator,要使用到viewPagerlibrary开源库 top.xml <?xml version ...
【IMOOC学习笔记】多种多样的App主界面Tab实现方法(三)
FragmentPagerAdapter+ViewPager 与之前直接用ViewPager不同的是,数组里面放的不再是View,而是Fraagment; 使用FragmentPagerAdapter ...
【IMOOC学习笔记】多种多样的App主界面Tab实现方法(二)
Fragment实现Tab 首先把activity_main.xml 文件中的ViewPager标签改成Fragment标签 <FrameLayout android:id="@+id ...
66、多种多样的App主界面Tab（1）------ ViewPager实现Tab
<?xml version="1.0" encoding="utf-8"?>  <Linea ...
App主界面Tab实现方法
ViewPager + FragmentPagerAdapter 这里模仿下微信APP界面的实现国际惯例,先看下效果图: activity_main.xml 布局文件: <?xml ver ...
Android学习系列(23)--App主界面实现
在上篇文章<Android学习系列(22)--App主界面比较>中我们浅略的分析了几个主界面布局,选了一个最大众化的经典布局.今天我们就这个经典布局,用代码具体的实现它. 1.预览图先看下 ...
安卓开发_慕课网_Fragment实现Tab(App主界面)
学习内容来自“慕课网” 这里用Fragment来实现APP主界面思路: 底部横向排列4个LinearLayout,每个LinearLayout包含一个图片按钮和一个文字 1.默认显示第一个功能(微信 ...
Android:日常学习笔记(8)———开发微信聊天界面
Android:日常学习笔记(8)———开发微信聊天界面只做Nine-Patch图片 Nine-Patch是一种被特殊处理过的PNG图片,能够指定哪些区域可以被拉升,哪些区域不可以.
C#可扩展编程之MEF学习笔记（三）：导出类的方法和属性
前面说完了导入和导出的几种方法,如果大家细心的话会注意到前面我们导出的都是类,那么方法和属性能不能导出呢???答案是肯定的,下面就来说下MEF是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...

随机推荐

LeetCode Max Consecutive Ones II
原题链接在这里:https://leetcode.com/problems/max-consecutive-ones-ii/ 题目: Given a binary array, find the ma ...
洛谷 3803 【模板】多项式乘法（FFT）
题目:https://www.luogu.org/problemnew/show/P3803 第一道FFT! https://www.cnblogs.com/zwfymqz/p/8244902.htm ...
es6字符串的扩展学习笔记
1. 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参数字符串. st ...
MyBatis 批量插入数据对插入记录数的限制
<基于 MyBatis 框架的批量数据插入的性能问题的探讨>(作者:魏静敏刘欢杰来源:<计算机光盘软件与应用> 2013 年第 19 期)中提到批量插入的记录数不能超过10 ...
MySQL/InnoDB tips & tricks
本文讨论的是 MySQL 5.7. 1.混用 * 和列名会产生解析错误,要避免这个错误,要使用 tbl_name.* 的格式. 2.where 子句中不能使用 select 中定义的别名,因为 SQL ...
AngularJS：SQL
ylbtech-AngularJS:SQL 1.返回顶部 1. AngularJS SQL 在前面章节中的代码也可以用于读取数据库中的数据. 使用 PHP 从 MySQL 中获取数据 AngularJ ...
CRC 简介
CRC wiki,历史发展,各个版本的用途等 https://en.wikipedia.org/wiki/Cyclic_redundancy_check (apple)crc32.c /* * Th ...
[置顶] 自己写一个简单通用的Makefile
转自:http://blog.csdn.net/u011913612/article/details/52102241 一.makefile的作用 Makefile是用于自动编译和链接的,一个工程有很 ...
Java 的编译和运行机制
创建一个名为 test.java 的 Java 源文件源代码: class Hello{ public static void main(String[] args) { System.out.p ...
Windows下.svn文件夹的最简易删除方法(附linux)
如果想删除Windows下的.svn文件夹,通过手动删除的渠道是最麻烦的,因为每个文件夹下面都存在这样的文件.下面是一个好办法:建立一个文本文件,取名为kill-svn-folders.reg(扩展名 ...

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

1.ViewPager实现Tab

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

随机推荐

热门专题