Viewpager结合fragment实现底部导航

具体实现如下：

FindFragment.java

package fbtt.com.fbtt.fragment;

import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import fbtt.com.fbtt.R;

/**

 * Created by Administrator on 2016/5/23.

 */

public class FindFragment extends Fragment {

    @Nullable

    @Override

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

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

    }

}

R.layout.tab_find_fragment：

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

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="find"

        android:textSize="40sp"/>

</LinearLayout>

其余对应的MainFragment，MyFragment两个都是相同的。

TabFragmentPagerAdapter类：

package fbtt.com.fbtt.adapter;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**

 * Created by Administrator on 2016/5/23.

 */

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

    }

}

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>

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:layout_marginTop="@dimen/image_magin_size_10dp"

        android:layout_marginBottom="@dimen/image_magin_size_5dp"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/ib_tab_main_icon_grey"

            android:layout_width="@dimen/image_size_27dp"

            android:layout_height="@dimen/image_size_27dp"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:id="@+id/tv_tab_main_icon_grey"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="@dimen/image_magin_size_5dp"

            android:text="首頁"

            android:textColor="@color/shouye_tab_grep" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/id_tab_find"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:layout_marginTop="@dimen/image_magin_size_10dp"

        android:layout_marginBottom="@dimen/image_magin_size_5dp"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/ib_tab_find_icon_grey"

            android:layout_width="@dimen/image_size_26dp"

            android:layout_height="@dimen/image_size_26dp"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:id="@+id/tv_tab_find_icon_grey"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginTop="@dimen/image_magin_size_5dp"

            android:text="發現"

            android:textColor="@color/shouye_tab_grep" />

    </LinearLayout>

    <LinearLayout

        android:layout_marginTop="@dimen/image_magin_size_10dp"

        android:layout_marginBottom="@dimen/image_magin_size_5dp"

        android:id="@+id/id_tab_my"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical">

        <ImageButton

            android:id="@+id/ib_tab_my_icon_grey"

            android:layout_width="@dimen/image_size_25dp"

            android:layout_height="@dimen/image_size_25dp"

            android:background="#00000000"

            android:clickable="false"

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

        <TextView

            android:id="@+id/tv_tab_my_icon_grey"

            android:layout_marginTop="@dimen/image_magin_size_5dp"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="我的"

            android:textSize="15sp"

            android:textColor="@color/shouye_tab_grep" />

    </LinearLayout>

</LinearLayout>

MainActivity.java为主要的实现：

package fbtt.com.fbtt.activity;

import android.app.Activity;

import android.content.SharedPreferences;

import android.content.res.Configuration;

import android.os.Bundle;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentActivity;

import android.support.v4.view.ViewPager;

import android.view.View;

import android.widget.ImageButton;

import android.widget.LinearLayout;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

import java.util.Locale;

import fbtt.com.fbtt.R;

import fbtt.com.fbtt.fragment.FindFragment;

import fbtt.com.fbtt.fragment.MainFragment;

import fbtt.com.fbtt.fragment.MyFragment;

import fbtt.com.fbtt.adapter.TabFragmentPagerAdapter;

public class MainActivity extends FragmentActivity implements View.OnClickListener{

    private Locale myLocale;

    private LinearLayout id_tab_main;

    private LinearLayout id_tab_find;

    private LinearLayout id_tab_my;

    private ImageButton ib_tab_main_icon_grey;

    private ImageButton ib_tab_find_icon_grey;

    private ImageButton ib_tab_my_icon_grey;

    private TextView tv_tab_main_icon_grey;

    private TextView tv_tab_find_icon_grey;

    private TextView tv_tab_my_icon_grey;

    private ViewPager mViewPager;

    private List<Fragment> mFragments;

    private TabFragmentPagerAdapter mAdapter;

    int shouyeRed=0;

    int shouyeGrep=0;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.tab_main_viewpager);

        shouyeRed=getResources().getColor(R.color.shouye_tab_red);

        shouyeGrep=getResources().getColor(R.color.shouye_tab_grep);

        initView();

        initClickListener();

        setSelect(0);

    }

    private void initClickListener() {

        id_tab_main.setOnClickListener(this);

        id_tab_find.setOnClickListener(this);

        id_tab_my.setOnClickListener(this);

    }

    private void initView() {

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

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

        id_tab_find= (LinearLayout) findViewById(R.id.id_tab_find);

        id_tab_my= (LinearLayout) findViewById(R.id.id_tab_my);

        ib_tab_main_icon_grey= (ImageButton) findViewById(R.id.ib_tab_main_icon_grey);

        ib_tab_find_icon_grey= (ImageButton) findViewById(R.id.ib_tab_find_icon_grey);

        ib_tab_my_icon_grey= (ImageButton) findViewById(R.id.ib_tab_my_icon_grey);

        tv_tab_main_icon_grey= (TextView) findViewById(R.id.tv_tab_main_icon_grey);

        tv_tab_find_icon_grey=(TextView) findViewById(R.id.tv_tab_find_icon_grey);

        tv_tab_my_icon_grey=(TextView) findViewById(R.id.tv_tab_my_icon_grey);

        mFragments = new ArrayList<Fragment>();

        Fragment mTab_01 = new MainFragment();

        Fragment mTab_02 = new FindFragment();

        Fragment mTab_03 = new MyFragment();

        mFragments.add(mTab_01);

        mFragments.add(mTab_02);

        mFragments.add(mTab_03);

        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:

                        ib_tab_main_icon_grey.setImageResource(R.drawable.tab_main_icon_red);

                        tv_tab_main_icon_grey.setTextColor(shouyeRed);

                        break;

                    case 1:

                        ib_tab_find_icon_grey.setImageResource(R.drawable.tab_find_icon_red);

                        tv_tab_find_icon_grey.setTextColor(shouyeRed);

                        break;

                    case 2:

                        ib_tab_my_icon_grey.setImageResource(R.drawable.tab_my_icon_red);

                        tv_tab_my_icon_grey.setTextColor(shouyeRed);

                        break;

                }

            }

            @Override

            public void onPageScrollStateChanged(int state) {

            }

        });

    }

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

    private void initTabImage() {

        ib_tab_main_icon_grey.setImageResource(R.drawable.tab_main_icon_grey);

        tv_tab_main_icon_grey.setTextColor(shouyeGrep);

        ib_tab_find_icon_grey.setImageResource(R.drawable.tab_find_icon_grey);

        tv_tab_find_icon_grey.setTextColor(shouyeGrep);

        ib_tab_my_icon_grey.setImageResource(R.drawable.tab_my_icon_grey);

        tv_tab_my_icon_grey.setTextColor(shouyeGrep);

    }

    public void changeLang(String lang){

        if (lang.equalsIgnoreCase("")){

            return;

        }

        myLocale = new Locale(lang);

        saveLocale(lang);

        Locale.setDefault(myLocale);

        Configuration config=new Configuration();

        config.locale=myLocale;

        getBaseContext().getResources().updateConfiguration(config, getBaseContext().getResources().getDisplayMetrics());

        updateTexts();

    }

    public void saveLocale(String lang) {

        String langPref = "Language";

        SharedPreferences prefs = getSharedPreferences("CommonPrefs", Activity.MODE_PRIVATE);

        SharedPreferences.Editor editor = prefs.edit();

        editor.putString(langPref, lang);

        editor.commit();

    }

    private void updateTexts() {

    }

    @Override

    public void onClick(View v) {

        switch (v.getId()) {

            case R.id.id_tab_main:

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

                setSelect(0);

                break;

            case R.id.id_tab_find:

                setSelect(1);

                break;

            case R.id.id_tab_my:

                setSelect(2);

                break;

        }

    }

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

    private void setSelect(int i) {

        initTabImage();

        switch (i) {

            case 0:

                ib_tab_main_icon_grey.setImageResource(R.drawable.tab_main_icon_red);

                tv_tab_main_icon_grey.setTextColor(shouyeRed);

                break;

            case 1:

                ib_tab_find_icon_grey.setImageResource(R.drawable.tab_find_icon_red);

                tv_tab_find_icon_grey.setTextColor(shouyeRed);

                break;

            case 2:

                ib_tab_my_icon_grey.setImageResource(R.drawable.tab_my_icon_red);

                tv_tab_my_icon_grey.setTextColor(shouyeRed);

                break;

            default:

                break;

        }

        mViewPager.setCurrentItem(i);

    }

}

效果截图：

Viewpager结合fragment实现底部导航的更多相关文章

[置顶] xamarin android Fragment实现底部导航栏
前段时间写了篇关于Fragment的文章,介绍了基础的概念,用静态和动态的方式加载Fragment Xamarin Android Fragment的两种加载方式.下面的这个例子介绍xamarin ...
TextView+Fragment实现底部导航栏
前言:项目第二版刚上线没多久,产品又对需求进行了大改动,以前用的是左滑菜单,现在又要换成底部导航栏,于是今天又苦逼加班了.花了几个小时实现了一个底部导航栏的demo,然后总结一下.写一篇博客.供自己以 ...
Android学习笔记- Fragment实例底部导航栏的实现
1.要实现的效果图以及工程目录结构: 先看看效果图吧: 接着看看我们的工程的目录结构: 2.实现流程: Step 1:写下底部选项的一些资源文件我们从图上可以看到,我们底部的每一项点击的时候都有不同 ...
使用BottomNavigationView+ViewPager+Fragment的底部导航栏
2019独角兽企业重金招聘Python工程师标准>>> 使用BottomNavigationView做底部工具栏,使用ViewPager做页面切换,使用Fragment完成每个页面的 ...
使用ViewPager和Fragment实现滑动导航
ViewPage是android-support-v4.jar包提供的用于页面滑动的库,android-support-v4.jar是google推荐使用的一个类库,在项目中使用之前,你必须其添加到项 ...
使用fragment添加底部导航栏
切记:fragment一定要放在framlayout中,不然不会被替换完全(就是切换之后原来的fagment可能还会存在) main.xml <LinearLayout xmlns:androi ...
Android底部导航栏创建——ViewPager + RadioGroup
原创文章,引用请注明出处:http://www.cnblogs.com/baipengzhan/p/6270201.html Android底部导航栏有多种实现方式,本文详解其中的ViewPager ...
Android之RadioGroup+ViewPager制作的底部导航栏
在日常开发中我们常常会用到类似微信或者QQ的底部导航.实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法. 首先创建activity_main.xml布局文件,里面主要由 ...
Android_ViewPager+Fragment实现页面滑动和底部导航栏
1.Xml中底部导航栏由一个RadioGroup组成,其上是ViewPager. <?xml version="1.0" encoding="utf-8" ...

随机推荐

javaScript绑定事件委托 demo
事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用处理时间占用内存, 而且不是每个事件都会被点击执行. 由此事件委托可以优化事件绑定行为.. 事件逐层冒泡 ...
jquery拖拽插件 tableDnD
http://www.jb51.net/article/39481.htm http://www.poluoluo.com/jzxy/201307/232615.html
CSS3 Columns:比table更好用的分列式布局方法
CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦.当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局.幸运的是,CSS3里提供了一批新 ...
css3特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
English Learn
English Learn 一直决定好好学习英语.越来越觉得英语的重要性,解决日常问题.学习新东西.使用google时都经常碰到英文.所以觉得在blog上记录些学习英语的文章,也算是对自己的一种监督. ...
Linux之yum
yum相当于是linux的本地的软件资源库,每个一段时间必须手动更新yum update
Diary of Codeforces Round #402 (Div. 2)
这一场的表现可以用"全程智障"4个字,生动传神地描述出来. About 写题: A. 写了一堆if比较大小, 这很勤勉.(绝对值君对自己の存在感为0表示很难过.) B. 题,直接读 ...
vagrant up 失败解决办法
前几天在自己电脑搭建vagrant环境报错:"There was an error while executing `VBoxManage`, a CLI used by Vagrant f ...
display与visibility的使用(区别)
display:none;隐藏元素,且此元素无物理位置: visibility:hidden;隐藏元素,但元素的物理位置依然存在: 因为display:none导致页面上无此元素的空间,js就获取不到 ...
Wpf学习之路……
Wpf学习之路-- Wpf是 .net中一门做winform的技术,和传统的winform的区别在于: 1. 原来的winform就是拖控件,而wpf的控件都死自己拿标记语言(xaml ...

Viewpager结合fragment实现底部导航

Viewpager结合fragment实现底部导航的更多相关文章

随机推荐

热门专题