1. 四个类似的Frament布局

tab_main_fragment.xml

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

        android:layout_height="wrap_content"

        android:text="main"

        android:textSize="40sp"/>

</LinearLayout>

2.四个类似的Frament类

MainFragment

package com.example.zps.xuxian2.tab;

import android.support.v4.app.Fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import com.example.zps.xuxian2.R;

/**

 * Created by zps on 2015/9/8.

 */

public class MainFragment extends Fragment{

//注意 Fragment 包是V4包
    @Nullable

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        return inflater.inflate(R.layout.tab_main_fragment,container,false);

    }

}

3. viewpager 整体界面布局

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

    <android.support.v4.view.ViewPager

        android:id="@+id/tab_main_viewpager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1" />

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

</LinearLayout>

4. 底部的标签兰布局   (插入到3的布局中)

tab_buttom.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="wrap_content"

    android:orientation="horizontal">

    <LinearLayout

        android:id="@+id/id_tab_main"

        android:layout_width="0dp"

        android:layout_height="match_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/tab_main_icon_grey"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="主页"

            android:textColor="#000000" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_community"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/tab_community_icon_grey"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="附近"

            android:textColor="#000000" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_shopping"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/tab_shopping_cart_icon_grey"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="购物"

            android:textColor="#000000" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_me"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/tab_me_icon_grey"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="个人"

            android:textColor="#000000" />

    </LinearLayout>

</LinearLayout>

5 . 适配器FragmentPagerAdapter(用于2的适配器)

package com.example.zps.xuxian2.tab;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**

 * Created by zps on 2015/9/8.

 */

public class TabFragmentPagerAdapter extends FragmentPagerAdapter{

  //继承FragmentPagerAdapter类 ,并自定义的构造器

  private List<Fragment> fragments;

    public TabFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragments) {

        super(fm);

        this.fragments =fragments;

    }

    @Override

    public Fragment getItem(int position) {

        return fragments.get(position);

    }

    @Override

    public int getCount() {

        return fragments.size();

    }

}

6.总的活动类,实现滑动界面和点击Tab图标改变界面

TabMainActivity

package com.example.zps.xuxian2.tab;

import android.app.Activity;

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.util.Log;

import android.view.View;

import android.view.Window;

import android.widget.ImageButton;

import android.widget.ImageView;

import android.widget.LinearLayout;

import com.example.zps.xuxian2.R;

import java.nio.IntBuffer;

import java.util.ArrayList;

import java.util.List;

/**

 * Created by zps on 2015/9/8.

 */

public class TabMainActivity extends FragmentActivity implements View.OnClickListener {//注意是继承FragmentActivity!!我找了半天的错误

    private LinearLayout mTabMain;

    private LinearLayout mTabCommunity;

    private LinearLayout mTabShopping;

    private LinearLayout mTabMe;

    private ImageButton mImageTabMain;

    private ImageButton mImageTabCommunity;

    private ImageButton mImageTabShopping;

    private ImageButton mImageTabMe;

    private ViewPager mViewPager;

    private TabFragmentPagerAdapter mAdapter;

    private List<Fragment> mFragments;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.tab_main_viewpager);

        initView();

        initClickListener();

    }

    private void initView() {

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

        mTabMain = (LinearLayout) findViewById(R.id.id_tab_main);

        mTabCommunity = (LinearLayout) findViewById(R.id.id_tab_community);

        mTabShopping = (LinearLayout) findViewById(R.id.id_tab_shopping);

        mTabMe = (LinearLayout) findViewById(R.id.id_tab_me);

        mImageTabMain = (ImageButton) findViewById(R.id.tab_main_icon_grey);

        mImageTabCommunity = (ImageButton) findViewById(R.id.tab_community_icon_grey);

        mImageTabShopping = (ImageButton) findViewById(R.id.tab_shopping_cart_icon_grey);

        mImageTabMe = (ImageButton) findViewById(R.id.tab_me_icon_grey);

        mFragments = new ArrayList<Fragment>();

        Fragment mTab_01 = new MainFragment();

        Fragment mTab_02 = new CommunityFragment();

        Fragment mTab_03 = new ShoppingFragment();

        Fragment mTab_04 = new MeFragment();

        mFragments.add(mTab_01);

        mFragments.add(mTab_02);

        mFragments.add(mTab_03);

        mFragments.add(mTab_04);

        mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager(), mFragments);

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

                initTabImage();

                switch (currentItem) {

                    case 0:

                        mImageTabMain.setImageResource(R.drawable.tab_main_icon_green);

                        break;

                    case 1:

                        mImageTabCommunity.setImageResource(R.drawable.tab_community_icon_green);

                        break;

                    case 2:

                        mImageTabShopping.setImageResource(R.drawable.tab_shopping_cart_icon_green);

                        break;

                    case 3:

                        mImageTabMe.setImageResource(R.drawable.tab_me_icon_green);

                        break;

                }

            }

            @Override

            public void onPageScrollStateChanged(int state) {

            }

        });

    }

//初始的图标状态(滑动和点击事件改变的时候都要初始化)

    private void initTabImage() {

        mImageTabMain.setImageResource(R.drawable.tab_main_icon_grey);

        mImageTabCommunity.setImageResource(R.drawable.tab_community_icon_grey);

        mImageTabShopping.setImageResource(R.drawable.tab_shopping_cart_icon_grey);

        mImageTabMe.setImageResource(R.drawable.tab_me_icon_grey);

    }

//设置图标点击监听器

    private void initClickListener() {

        mTabMain.setOnClickListener(this);

        mTabCommunity.setOnClickListener(this);

        mTabShopping.setOnClickListener(this);

        mTabMe.setOnClickListener(this);

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.id_tab_main:

                // initTabImage();

                //mImageTabMain.setImageResource(R.drawable.tab_main_icon_green);

                //注意上面修改的只是图标的状态,还要修改相对应的fragment;

                setSelect(0);

                break;

            case R.id.id_tab_community:

                setSelect(1);

                break;

            case R.id.id_tab_shopping:

                setSelect(2);

                break;

            case R.id.id_tab_me:

                setSelect(3);

                break;

        }

    }

//设置将点击的那个图标为亮色,切换内容区域

    private void setSelect(int i) {

        initTabImage();

        switch (i) {

            case 0:

                mImageTabMain.setImageResource(R.drawable.tab_main_icon_green);

                break;

            case 1:

                mImageTabCommunity.setImageResource(R.drawable.tab_community_icon_green);

                break;

            case 2:

                mImageTabShopping.setImageResource(R.drawable.tab_shopping_cart_icon_green);

                break;

            case 3:

                mImageTabMe.setImageResource(R.drawable.tab_me_icon_green);

                break;

            default:

                break;

        }

        mViewPager.setCurrentItem(i);

    }

}

ViewPager + Fragment 实现主界面底部导航栏的更多相关文章

  1. Android商城开发系列（三）——使用Fragment+RadioButton实现商城底部导航栏

    在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示:   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...

  2. Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面

    说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页 ...

  3. [置顶] xamarin android Fragment实现底部导航栏

    前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment  Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...

  4. Android UI-仿微信底部导航栏布局

    现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢.我们开发的主要的还是讲的是如何如 ...

  5. TextView+Fragment实现底部导航栏

    前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...

  6. Android底部导航栏创建——ViewPager + RadioGroup

    原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...

  7. AndroidStudio制作底部导航栏以及用Fragment实现切换功能

    前言 大家好,给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述,希望你们喜欢 学习目标 AndroidStudio制作底部导航栏以及用Fragment实现切换 ...

  8. Android_ViewPager+Fragment实现页面滑动和底部导航栏

    1.Xml中底部导航栏由一个RadioGroup组成,其上是ViewPager. <?xml version="1.0" encoding="utf-8" ...

  9. 二、Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...

随机推荐

  1. Python开发【Tornado】：异步Web服务（一）

    异步Web服务 前言: 到目前为止,我们已经看到了许多使Tornado成为一个Web应用强有力框架的功能.它的简单性.易用性和便捷性使其有足够的理由成为许多Web项目的不错的选择.然而,Tornado ...

  2. 如何通过iframe调用其他页面的内容

    我们在建站的时候经常会在页面出现同样的内容,比如公司简介之类的,这些东西很长,会减低网页的原创程度,相似度太高,对SE不是很友好.这时我们可以考虑把这部分内容写成一个单独的简单页面,然后通过ifram ...

  3. MySQL 的mysqldump备份

    MySQL 的mysqldump备份 来自<mysql技术内幕 innodb存储引擎> --single-transaction:只对innodb表有效 --lock-tables:对My ...

  4. altium designer生成gerber步骤

    什么是gerber文件             Gerber文件是所有电路设计软件都可以产生的文件,在电子组装行业又称为模版文件(stencil data),在PCB制造业又称为光绘文件.可以说Ger ...

  5. 正则表达式，以python为例

    转载需注明原文地址和作者两项内容. 正则表达式目的是能够快速处理字符串内容,主要用于找出指定的字符串,配合其他操作完成任务.使用正则表达式时要了解自己语言的特性,python中的正则表达式默认情况是贪 ...

  6. [ABP项目实战]-后台管理系统-目录

    学习ABP也有一段时间了,但是总是学习了后面的忘记了前面的,为了巩固所学到的知识以及记录所学到的东西,因此有了本系列的诞生. ABP ASP.NET Boilerplate Project(ABP.N ...

  7. java多线程（四）

    使用synchronized锁实现线程同步 为什么要用线程同步 我们先来看下这段代码的运行结果: Java学习交流群:495273252 在多线程上篇博客已经介绍过了,JVM采用的是抢占式调度模型,当 ...

  8. docker——Etcd高可用键值对数据库

    一.简介 Etcd按照官方介绍: Etcd is a distributed, consistent key-value store for shared configuration and serv ...

  9. Spring—切点表达式

    摘要: Spring中的AspectJ切点表达式函数 切点表达式函数就像我们的GPS导航软件.通过切点表达式函数,再配合通配符和逻辑运算符的灵活运用,我们能很好定位到我们需要织入增强的连接点上.经过上 ...

  10. Codeforces Round #532 (Div. 2) Solution

    A. Roman and Browser 签到. #include <bits/stdc++.h> using namespace std; ]; int get(int b) { ]; ...