底部标签页+ViewPager+Fragment

实现的效果如下，点击GridView标签页中每一项，都可以切换轮播图，也可以通过手指左右滑动屏幕切换轮播图，并且在切换ViewPager时候，底部的标签页也在发生变化

实现思路：

底部标签页是通过GridView来实现的，标签页是一个ViewPager,通过ViewPager来做碎片的切换

具体做法如下：

入口Activity:

public class MainActivity extends FragmentActivity {private GridView grid;private ArrayList<Fragment> tt;ViewPager lunbo;private View[] vs=new View[5];private ImageView[] imgs = new ImageView[5];private TextView[] tvs = new TextView[5];private String[] str = {"案例","模型","进度","资料","我的"};private int[] resOff={R.drawable.icon_anli_off,R.drawable.icon_moxing_off,R.drawable.icon_jindu_off,R.drawable.icon_ziliao_off,R.drawable.icon_my_off};private int[] resOn={R.drawable.icon_anli_on,R.drawable.icon_moxing_on,R.drawable.icon_jindu_on,R.drawable.icon_ziliao_on,R.drawable.icon_my_on};void fragementInit(){tt=new ArrayList<Fragment>();tt.add(frag01.instance("xuguozhu"));tt.add(frag01.instance("xuguofu"));tt.add(frag01.instance("xuguoming"));tt.add(frag01.instance("zhouwa"));tt.add(frag01.instance("wangwa"));}@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);fragementInit();//---ViewPager部分lunbo=(ViewPager) findViewById(R.id.lunbo);pageee kk=new pageee(getSupportFragmentManager(),tt);lunbo.setAdapter(kk); lunbo.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubupdateView(arg0);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});// GridView部分for (int i = 0; i < vs.length; i++) {vs[i] = getLayoutInflater().inflate(R.layout.act_grid_item,null);imgs[i] = (ImageView) vs[i].findViewById(R.id.item_img);tvs[i]=(TextView) vs[i].findViewById(R.id.item_tv);imgs[i].setImageResource(resOff[i]);tvs[i].setText(str[i]);}imgs[0].setImageResource(resOn[0]);tvs[0].setTextColor(Color.parseColor("#0099cc"));grid = (GridView) findViewById(R.id.grid);grid.setAdapter(new MyAdapter());grid.setOnItemClickListener(new OnItemClickListener() {@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {                  lunbo.setCurrentItem(position);   //切换ViewPager             for (int i = 0; i < 5; i++) {     //更新底部标签页if(i==position){imgs[i].setImageResource(resOn[i]);tvs[i].setTextColor(Color.parseColor("#0099cc"));}else{imgs[i].setImageResource(resOff[i]);tvs[i].setTextColor(Color.parseColor("#000000"));}}}}); }void updateView(int position){for (int i = 0; i < 5; i++) {if(i==position){imgs[i].setImageResource(resOn[i]);tvs[i].setTextColor(Color.parseColor("#0099cc"));}else{imgs[i].setImageResource(resOff[i]);tvs[i].setTextColor(Color.parseColor("#000000"));}}}class MyAdapter extends BaseAdapter{@Overridepublic int getCount() {// TODO Auto-generated method stubreturn vs.length;}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn vs[position];}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {// TODO Auto-generated method stubreturn vs[position];}}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}}

ViewPager的PageAdapter:

public class pageee extends FragmentStatePagerAdapter {private ArrayList<Fragment> tt;public pageee(FragmentManager fm,ArrayList<Fragment> nn) {super(fm);tt=nn;}@Overridepublic Fragment getItem(int arg0) {return tt.get(arg0);}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn tt.size();}}

Fragment：(碎片将被交给ViewPager来管理)

public class frag01 extends android.support.v4.app.Fragment {private String path;public static frag01  instance (String ss){frag01 mmFrag01=new frag01();Bundle bb=new Bundle();bb.putString("ww", ss);mmFrag01.setArguments(bb);return mmFrag01;
}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);path = getArguments().getString("ww");}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View vv = inflater.inflate(R.layout.shuipian, container,false);TextView    tv = (TextView) vv.findViewById(R.id.wenzi);tv.setText(path);return vv;}@Overridepublic void onActivityCreated(Bundle savedInstanceState) {// TODO Auto-generated method stubsuper.onActivityCreated(savedInstanceState);}
}

act_grid_item.xml 标签页GridView布局文件

<?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:gravity="center"android:orientation="vertical"android:background="#ffffff"android:padding="5dp" ><ImageView
        android:id="@+id/item_img"android:layout_width="30dp"android:layout_height="30dp"android:src="@drawable/icon_anli_off" /><TextView
        android:id="@+id/item_tv"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="案例"android:textColor="#000"android:textSize="16sp" /></LinearLayout>

activity_main.xml 主Activity的布局文件

<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"tools:context=".MainActivity"android:orientation="vertical" ><android.support.v4.view.ViewPager
        android:id="@+id/lunbo"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1"/><GridView
        android:id="@+id/grid"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="#ffffff"android:numColumns="5" /></LinearLayout>

shuipian.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="horizontal"android:background="#FCE6C9"><TextView android:id="@+id/wenzi"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="30sp"/>
</LinearLayout>

FR:海涛高软（徐海涛）

底部标签页+ViewPager+Fragment相关推荐

如何获取FragmentTabHost中指定标签页的Fragment
使用FragmentTabHost构建了包含几个标签页的界面,如何获取指定标签页的Fragment? How to get Fragment in FragmentTabHost? TabHost中F ...
ViewPager + Fragment实现滑动标签页
ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页,每个标签页可以有独立的布局及响应. activity_main.xml [html] view plainco ...
ViewPager和Fragment实现滑动标签页步骤以及方法总结
要实现左右滑动的标签页其实有很多种办法,比如最外层一个FrameLayout,里面重叠几个View监听滑动事件来控制具体的展示效果以及相应的处理,还有其他很多种方式,但是呢各个方法的运行效率以及编码速 ...
TabLayout+ViewPager+Fragment实现切页展示
写在前面目前大多数的APP都采用的是几个Tab标签以及多个界面滑动的形式来提供多层次的交互体验,最为常用的做法就是采用TabLayout+ViewPager+Fragment的方式,最近在公司项目中 ...
安卓开发之使用viewpager+fragment实现滚动tab页
闲着.用viewpager+fragment实现了个滚动tab..轻拍,以后会陆续发先小东西出来..爱分享,才快乐.demo见附件.. Java代码 package com.example.dem ...
BottomNavigationView+ViewPager+Fragment仿微信底部导航栏
目标: 要实现的界面如下: 此时,我们需要采用BottomNavigationView+ViewPager+Fragment,一点点的说起.首先要在app/build.gradle里添加: imple ...
Android studio实现底部导航,Android 开发之BottomBar+ViewPager+Fragment实现炫酷的底部导航效果...
BottomBar BottomBar是Github上的一个开源框架,因为从1.3.3开始不支持fragments了,要自己配置,弄了很久,不管是app的fragment还是V4 的程序总是总是闪退. ...
Fragment标签页+OKHttp网络请求数据+MVP模式
分包方式需要的第三方依赖 Fragment 新建两个fragment MainActivity 主页面布局设置Fragment+tablayout的适配器 Fragment标签页结束 OKHttp ...
Android viewpager+fragment实现无限滚动，左右有前/后一页的部分，并fragment显示的内容是activity传过去的数据
背景:最近在做app的时候碰到一个这样的需求.1,将从网络上获取的json数组数据显示出来,每页显示一个数据源,并且可以左右翻页查看:2,中间显示一个完整页,两边分别还有上下一页的一点,:3,可无限循 ...
使用TabLayout+ViewPager+Fragment实现切页展示
使用TabLayout+ViewPager+Fragment是比较常见的实现切页展示的方式,本例是在fragment中实现主要代码步骤: 1,定义TabLayout和ViewPager的布局 2,实 ...

底部标签页+ViewPager+Fragment

底部标签页+ViewPager+Fragment相关推荐

最新文章

热门文章