实现滑动Tab页面

原创 2015年07月06日 18:08:13


主Activity:

import java.util.ArrayList;
import java.util.List;


import com.example.fragment.Fragment01;
import com.example.fragment.Fragment02;
import com.example.fragment.Fragment03;
import com.example.fragment.Fragment04;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TabWidget;


public class MainActivity extends FragmentActivity {
private ViewPager vp;
private TabWidget tab;
private List<Fragment> list = new ArrayList<Fragment>();


@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
initTab();
}


private void init() {

vp = (ViewPager) findViewById(R.id.vp);

//添加自定义frament

list.add(new Fragment01());
list.add(new Fragment02());
list.add(new Fragment03());
list.add(new Fragment04());
MyAdapter adapter = new MyAdapter(getSupportFragmentManager(), list);
vp.setAdapter(adapter);
vp.setOnPageChangeListener(onPageChangeListener);
}


private void initTab() {
tab = (TabWidget) findViewById(R.id.tab);
tab.setCurrentTab(0);
findViewById(R.id.button1).setOnClickListener(onClickListener);
findViewById(R.id.button2).setOnClickListener(onClickListener);
findViewById(R.id.button3).setOnClickListener(onClickListener);
findViewById(R.id.button4).setOnClickListener(onClickListener);
}


private class MyAdapter extends FragmentStatePagerAdapter {
List<Fragment> list;


public MyAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}


@Override
public Fragment getItem(int position) {
return list.get(position);
}


@Override
public int getCount() {
return list.size();
}


}


private OnPageChangeListener onPageChangeListener = new OnPageChangeListener() {


@Override
public void onPageSelected(int index) {
tab.setCurrentTab(index);
}


@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {


}


@Override
public void onPageScrollStateChanged(int arg0) {


}
};


private OnClickListener onClickListener = new OnClickListener() {


@Override
public void onClick(View v) {
System.out.println(v.getId());
switch (v.getId()) {
case R.id.button1:
vp.setCurrentItem(0);
break;
case R.id.button2:
vp.setCurrentItem(1);
break;
case R.id.button3:
vp.setCurrentItem(2);
break;
case R.id.button4:
vp.setCurrentItem(3);
break;
}
}
};

}


页面布局文件:

<RelativeLayout 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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >


    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>


    <TabWidget
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >


        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/transparent"
            android:text="first"
            android:textColor="@drawable/button_text_color" />


        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/transparent"
            android:text="second"
            android:textColor="@drawable/button_text_color" />


        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/transparent"
            android:text="third"
            android:textColor="@drawable/button_text_color" />
        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/transparent"
            android:text="four"
            android:textColor="@drawable/button_text_color" />
    </TabWidget>


</RelativeLayout>

Android ViewPager实现滑动切换页面+底部tab点击切换页面(类微信首页)

目录: 1.实现功能概述 2.代码实现 1.实现功能概述 实现了滑动更换页面同时切换底部Tab的图标、文字的颜色,同时也支持点击底部Tab达到切换页面的效果,有点类似微信首页布局 外带实现tool...
  • qq_28057577
  • qq_28057577
  • 2016年09月20日 19:00
  • 1170

Android Tab页面手势滑动切换以及动画效果

一、首先,我们来看一下效果图,这是新浪微博的Tab滑动效果。我们可以手势滑动,也可以点击上面的头标进行切换。与此同方式, 白色横条会移动到相应的页卡头标下。这是一个动画效果,白条是缓慢滑动过去的...
  • fancylovejava
  • fancylovejava
  • 2014年03月18日 10:40
  • 20574

h5移动开发,ionic实现滑动切换

1.node.j、ionic、cordova、ant、安装见官网http://www.ionic.wang/start-index.html 2.效果图 3.建一个空白模板: $ ionic ...
  • u013087907
  • u013087907
  • 2016年12月22日 15:15
  • 1603

Android滑动切换页面Tab文字颜色发生渐变效果

  • 2016年04月19日 13:22
  • 23.29MB
  • 下载

手机端仿照淘抢购倒计时时间滑动tab页面

  • 2016年06月29日 18:31
  • 282KB
  • 下载

html5 滑动页面切换tab

  • 2016年02月18日 16:32
  • 547KB
  • 下载

Android TabLayout、ViewPager实现顶部和底部Tab导航 点击滑动切换Tab页面

Android TabLayout、ViewPager实现顶部和底部Tab导航android design library提供的TabLayoutandroid studio 依赖 compile ...
  • RichieZhu
  • RichieZhu
  • 2016年03月23日 21:13
  • 4073

Android 利用TabLayout快速打造滑动Tab页面

在项目中我们经常用到Viewpage与Fragemt来实现页面,可以使用三方开源的PagerSlidingTabStrip去实现,或者viewpagerindicator。当然也可以用TabLayou...
  • Gary__123456
  • Gary__123456
  • 2017年07月23日 23:35
  • 153

Android滑动切换页面Tab文字颜色发生渐变效果

Android项目中用到Tab作为导航条切换页面的效果,我相信大家都用到过吧,但是在切换的时候,Tab下划线跟着手指滑动的比例而滑动,相关的两个Tab的文字的颜色根据手指的滑动,而发生颜色渐变的改变。...
  • u014544193
  • u014544193
  • 2016年04月19日 11:32
  • 1902

【FastDev4Android框架开发】HorizontalScrollView,Fragment,FragmentStatePagerAdapter打造网易新闻Tab及滑动页面效果(三十六)

(一).前言:             仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现。要实现的...
  • jiangqq781931404
  • jiangqq781931404
  • 2015年12月02日 13:09
  • 6215
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现滑动Tab页面
举报原因:
原因补充:

(最多只允许输入30个字)