【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是如何导出方法和属性的. 还是前面的代码,第二篇中已经提供 ...

随机推荐

eShopOnWeb
eShopOnWeb https://www.cnblogs.com/sheng-jie/p/9616675.html 构建现代Web应用 1.引言 eShopOnWeb是基于ASP.NET Core ...
docker下安装 Oracle11gR2
这是第二次安装,在第一次安装过程部分内容参考自如下: http://blog.sina.com.cn/s/blog_d840ff330102v4j0.html docker下oracle11g安装 h ...
phpstorm win/mac git配置破解
http://blog.csdn.net/fenglailea/article/details/53350080 phpstorm中git配置教程: http://blog.csdn.net/knig ...
Java 字符串和时间互相转化 +时间戳
一:字符串转换成date String datatime="2015-09-22 15:16:48"; SimpleDateFormat form = new SimpleDate ...
Web中的安全性问题
根据2010年OWASP发布的Web应用程序安全风险主要是SQL注入攻击.跨网站脚本.伪造客户端请求.Cookie盗取,传输层保护不足. 1 SQL注入攻击随着B/S框架结构在系统开发中的广泛应用 ...
[转] 张凌 ARM体系架构
很多时候我们都会对M0,M0+,M3,M4,M7,arm7,arm9,CORTEX-A系列,或者说AVR,51,PIC等,一头雾水,只知道是架构,不知道具体是什么,有哪些不同?今天查了些资料,来解解惑 ...
ThreadPoolExecutor的corePoolSize和maximumPoolSize
按照JDK文档的描述, 如果池中的实际线程数小于corePoolSize,无论是否其中有空闲的线程,都会给新的任务产生新的线程如果池中的线程数>corePoolSize and <max ...
leetcode Single Number II - 位运算处理数组中的数
题目描述: 给定一个包含n个整数的数组,除了一个数出现一次外所有的整数均出现三次,找出这个只出现一次的整数. 题目来源: http://oj.leetcode.com/problems/single- ...
问题：PLS-00204: 函数或伪列 'EXISTS' 只能在 SQL 语句中使用；结果：PL/SQL中不能用exists函数？
怎么写了一个语句带出这样的结果. 语句: if exists (select * from sysdatabases where name='omni') then 结果: ERROR 位于第 4 行 ...
FMX 模态窗体
FMX 模态窗体 dlg := TForm2.Create(nil); dlg.ShowModal(procedure(ModalResult: TModalResult) begin ...

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

1.ViewPager实现Tab

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

随机推荐

热门专题