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" ...
随机推荐
- 关于连接数据库的T-SQL语句中的一种小技巧
(编程生活中,我们经常会用到数据库.然后在通过T-SQL语句来对数据库进行操作的时候,遇到很多麻烦.话说昨天我就被困扰了一天.明明这个T-sql插数据的语句放在数据库运行的时候没有问题,到了java代 ...
- 樱花的季节，教大家用canvas画出飞舞的樱花树
又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...
- React-Native 开发（二） 在react-native 中 运用 redux
前提: 一个小web前端,完全不会android 跟iOS 的开发,首次接触,有很多不懂的问题.请见谅. 环境: win7 上一篇 : React-Native 开发(一) Android环境部署,H ...
- Jmeter添加监控指标
需要监控的机器上安装Server-Agency(需要java环境支持)把ServerAgent-2.2.1.zip拷到需要监控的机器上,解压Linux启动如下2. Jmeter上添加监控最终有如下指标 ...
- java 接口默认修饰符问题
package test; public interface InterfaceTest { void todo();} /** * 以下是反编译的内容,接口里的方法默认都是public的.abstr ...
- css3动画知识点
杨龙飞 杨龙飞 杨龙飞 杨龙飞 杨龙飞 杨龙飞 <!DOCTYPE html><html><head><style> div{width:100px;h ...
- 【机器学习】代价函数（cost function）
注:代价函数(有的地方也叫损失函数,Loss Function)在机器学习中的每一种算法中都很重要,因为训练模型的过程就是优化代价函数的过程,代价函数对每个参数的偏导数就是梯度下降中提到的梯度,防止过 ...
- js实现文本框溢出文字用省略号（...）表示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Oracle的基本学习(一)—安装Oracle
一.Oracle环境搭建 1.安装Oracle 10g 我们把Orcale安装到虚拟机上,远程连接. (1)解压文件10201_database_win32.zip,并双击解压目录下的set ...
- MySQL学习笔记(二)—查询
一.多表连接查询 新建两张表t_user.t_order. 1.内连接 返回满足条件的所有记录. (1)显式内连接 使用inner join关键字,在on ...