Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView

XML中的布局

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal"
  >
  <android.support.design.widget.TabLayout
   android:id="@+id/homefragment_tablelayouts"
   android:layout_width="0dp"
   android:layout_height="30dp"
   app:tabIndicatorHeight="2dp"
   android:layout_weight="1"
   app:tabIndicatorColor="@color/colorred"
   app:tabSelectedTextColor="#000000"
   app:tabMode="scrollable"
   >
  </android.support.design.widget.TabLayout>
  <ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/add_channel_titlbar_new"
   />
 </LinearLayout>
 <android.support.v4.view.ViewPager
  android:layout_weight="1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:id="@+id/homefragment_vp"
  ></android.support.v4.view.ViewPager>

以下是代码的实现

//定义一个方法
 public void getVpTitleData() {
 // 找到 TabLayou 控件
  TabLayout mTabLayout= (TabLayout) getView().findViewById(R.id.homefragment_tablelayouts);
  // 找到 ViewPager 控件
  ViewPager mViewPager= (ViewPager) getView().findViewById(R.id.homefragment_vp);
  //定义 title 集合 来存储 解析的data数据
  listtitle = new ArrayList<>();
  listtitle .add("头条");
  listtitle .add("社会");
  listtitle .add("国内");
  listtitle .add("国际");
  listtitle .add("明星");
  listtitle .add("娱乐");
  listtitle .add("军事");
  listtitle .add("财经");
  listtitle .add("时尚");
  listtitle .add("八卦");
  //遍历 listtitle 集合 将title 添加经 TabLayou z中
  for (int i = 0; i <listtitle.size() ; i++) {
   mTabLayout.addTab(mTabLayout.newTab().setText(listtitle.get(i)));
  }
  //创建集合 循环添加创建的Fragment
  listfragment = new ArrayList<>();
  for (int i = 0; i <date.size() ; i++) {
   BeiJingFragment mjingFragment = new BeiJingFragment();
   listfragment.add(mjingFragment);
  }
  HomeFragmentVPFragmentAdapter mAdapter = new HomeFragmentVPFragmentAdapter(getFragmentManager(),listfragment,listtitle);
  //给ViewPager设置适配器
  mViewPager.setAdapter(mAdapter);
  //将TabLayout和ViewPager关联起来。
  mTabLayout.setupWithViewPager(mViewPager);
  //给TabLayout设置适配器
  mTabLayout.setTabsFromPagerAdapter(mAdapter);
 }

ViewPafer与Fragment的适配器

public class HomeFragmentVPFragmentAdapter extends FragmentStatePagerAdapter {
 List<Fragment> listfragment;
 List<String> listtitle;
 public HomeFragmentVPFragmentAdapter(FragmentManager fm, List<Fragment> listfragment, List<String> listtitle) {
  super(fm);
  this.listfragment = listfragment;
  this.listtitle = listtitle;
 }
 @Override
 public CharSequence getPageTitle(int position) {
  return listtitle.get(position);
 }
 @Override
 public Fragment getItem(int position) {
  return listfragment.get(position);
 }
 @Override
 public int getCount() {
  return listfragment.size();
 }
}

以上所述是小编给大家介绍的Android使用TabLayou+fragment+viewpager实现滑动切换页面效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • android 中viewpager+fragment仿微信底部TAG完美渐变

    viewpager+fragment仿微信底部TAG完美渐变,在图片渐变的同时字的颜色也在变,注意,是渐变哦! 效果图: activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:zhy="http://schemas.android.com/apk/res/com.Sing.weixin" xmlns:tools="

  • Android开发中如何解决Fragment +Viewpager滑动页面重复加载的问题

    前言 之前在做一个Viewpager上面加载多个Fragment时总会实例化已经创建好的Fragmnet对象类似 viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { switch(position){ case 0: fragments=new Fragmnet01(); break; case

  • Android使用TabLayout+Fragment实现顶部选项卡

    先看效果图: 使用Tablayout,首先需要在项目中加入Design包 dependencies { compile 'com.android.support:design:24.1.1' } 在activity_main.xml布局文件中 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/

  • Android中Fragment相互切换间不被回收的实现方法

    前言 Android运行在各种各样的设备中,有小屏幕的手机,超大屏的平板甚至电视.针对屏幕尺寸的差距,很多情况下,都是先针对手机开发一套App,然后拷贝一份,修改布局以适应平板神马超级大屏的.难道无法做到一个App可以同时适应手机和平板么,当然了,必须有啊.Fragment的出现就是为了解决这样的问题. 如今市面上的应用基本上都是单Activity+多Fragment实现的了,而这类APP都有在相互切换时不被回收,即切换回原来的Fragment时还是原先的状态,这就是这里要实现的了. 这里使用F

  • Android 中ActionBar+fragment实现页面导航的实例

    Android 中ActionBar+fragment实现页面导航的实例 为保证android2.0以上均能运行,使用support.v7库下的actionbar及fragment 继承自AppCompatActivity(ActionBarActivity已过时)使用getSupportActionBar()得到ActionBar, ActionBar.Tab,这里Tab必须设置监听,在监听中实现Fragment的切换. 这里重点提一下,Theme主题一定要适配,因为我使用的是AppCompa

  • Android中Activity和Fragment传递数据的两种方式

    1.第一种方式,也是最常用的方式,就是使用Bundle来传递参数 MyFragment myFragment = new MyFragment(); Bundle bundle = new Bundle(); bundle.putString("DATA",values);//这里的values就是我们要传的值 myFragment.setArguments(bundle); 然后在Fragment中的onCreatView方法中,通过getArgments()方法,获取到bundle

  • Android使用TabLayou+fragment+viewpager实现滑动切换页面效果

    TabLayou 主要实现的是标题头的 滑动 这个 控件 类似于 ScrollView XML中的布局 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <android.support.design.widget.TabLayout a

  • Android中的ViewPager视图滑动切换类的入门实例教程

    ViewPager引入示例 首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能. 效果图: 实现了三个view间的相互滑动. 第一个VIEW向第二个VIEW滑动.第二个VIEW向第三个VIEW滑动 一.新建项目,引入ViewPager控件 ViewPager.它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换. 1.在主布局文件里加入 <RelativeLayout xmlns:android="http://schemas

  • android ViewPager实现滑动翻页效果实例代码

    实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.View; public class ReadViewPager extends ViewPager { public ReadV

  • Android编程实现的首页左右滑动切换功能示例

    本文实例讲述了Android编程实现的首页左右滑动切换功能.分享给大家供大家参考,具体如下: 很多软件会选择左右滑动的主界面,实现方式也很多,这里的仅供参考,勿喷. 不多说什么了,相信大家看看代码就明白,自己也不善言辞,望大家谅解. 自定义接口,监听滑动翻页事件: /** 滑动后翻页事件 */ public interface OnViewChangedListener { public void OnViewChanged(int viewId); } 滑动翻页view(滑动翻页不是很灵敏):

  • Android 中 TabHost与ViewPager结合实现首页导航效果

    今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就不过多解释了,说几点需要注意的问题 1:TabHost .TabWidget.FrameLayout一定添加id这个属性,否则会报错 android:id="@android:id/tabhost" android:id="@android:id/tabcontent"

  • jquery仿百度经验滑动切换浏览效果

    jquery仿百度经验滑动切换浏览效果 $(function() { wordStrong(); $("#content ul").width($("#content ul li:first").width()*$("#content ul li").length); $("#header .top_right .vote").hover(function() { $(this).children(".hover-t

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • 微信小程序 监听手势滑动切换页面实例详解

    微信小程序 监听手势滑动切换页面实例详解 1.对应的xml里写上手势开始.滑动.结束的监听: <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> 2.js: var touchDot = 0;//触摸时的原点 var time = 0;// 时

  • iOS Objective-c实现左右滑动切换页面

    本文实例为大家分享了iOS Objective-c实现左右滑动切换页面的具体代码,供大家参考,具体内容如下 ScrollView + n个view 1.storyboard布局一个ScrollView 2.拖出两个输出口,定义三个属性 @property (weak, nonatomic) IBOutlet UIScrollView *XMScrollView; @property (weak, nonatomic) IBOutlet UIView *scrollContentView; ///

  • js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)

    本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type=

随机推荐