【练习】ViewPager标签滑动
效果图：
布局：
<?xml version="1.0" encoding="utf-8"?>
<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.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTabStrip
android:id="@+id/pagerTab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fragment_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
java代码
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private PagerTabStrip pagerTab;
private List<String> titles; //标签
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化页面
initView();
//初始化标题数组
initTitle();
//初始化fragments
initFragment();
FragmentAdapter adapter = new FragmentAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
}
private void initView() {
viewPager = (ViewPager) findViewById(R.id.viewpager);
pagerTab = (PagerTabStrip) findViewById(R.id.pagerTab);
pagerTab.setBackgroundColor(Color.GREEN);
pagerTab.setTabIndicatorColor(Color.RED);
pagerTab.setDrawFullUnderline(true);
}
private void initTitle() {
titles = new ArrayList<String>();
for(int i = 0;i<10;i++){
titles.add("第"+i+"个标签");
}
}
private void initFragment() {
fragments = new ArrayList<Fragment>();
for(int i = 0;i<titles.size();i++){
MyFragment myFragment = new MyFragment();
Bundle bundle = new Bundle();
bundle.putString("content","第"+i+"个fragment");
myFragment.setArguments(bundle);
fragments.add(myFragment);
}
}
class FragmentAdapter extends FragmentPagerAdapter{
public FragmentAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
}
}
}
public class MyFragment extends Fragment {
private String content;
private TextView fragment_textview;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
content = bundle.getString("content","没有内容");
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.myfragment,container,false);
fragment_textview = (TextView) view.findViewById(R.id.fragment_textview);
return view;
}
@Override
public void onActivityCreated( Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
fragment_textview.setText(content);
}
}
*接下来不用PagerTabStrip实现
第一步：实现基本的上下布局
<?xml version="1.0" encoding="utf-8"?>
<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">
<HorizontalScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#3edccf"
android:scrollbars="none">
<LinearLayout
android:id="@+id/layout_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/layout_tab"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:orientation="horizontal">
<TextView
android:id="@+id/tab1"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签1"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签2"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签3"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab4"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签4"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab5"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签5"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab6"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签6"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab7"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签7"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
<TextView
android:id="@+id/tab8"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="标签8"
android:textSize="30dp"
android:paddingRight="10dp"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/layout_scroll"
android:layout_width="wrap_content"
android:layout_height="10dp"
android:orientation="horizontal">
<TextView
android:id="@+id/scroll_line"
android:layout_width="100dp"
android:layout_height="10dp"
android:background="#bf24c4"/>
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/scrollView"/>
</RelativeLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fragment_content"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
public class MainActivity extends AppCompatActivity {
private HorizontalScrollView scrollView;
private LinearLayout layout_top,layout_tab,layout_scroll;
private TextView scroll_line;
private ViewPager viewPager;
private List<Fragment> fragments;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化页面
initView();
//初始化fragments
initFragments();
MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
}
private void initView() {
scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
layout_top = (LinearLayout) findViewById(R.id.layout_top);
layout_tab = (LinearLayout) findViewById(R.id.layout_tab);
layout_scroll = (LinearLayout) findViewById(R.id.layout_scroll);
scroll_line = (TextView) findViewById(R.id.scroll_line);
viewPager = (ViewPager) findViewById(R.id.viewpager);
}
private void initFragments() {
fragments = new ArrayList<Fragment>();
for(int i = 0;i<layout_tab.getChildCount();i++){
MyFrgment fragment = new MyFrgment();
Bundle bundle = new Bundle();
bundle.putString("content","第"+(i+1)+"个fragment");
fragment.setArguments(bundle);
fragments.add(fragment);
}
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
}
public class MyFrgment extends Fragment {
private TextView fragment_textview;
private String content;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Bundle bundle = getArguments();
content = bundle.getString("content","没有内容");
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.myfragment,container,false);
fragment_textview = (TextView) view.findViewById(R.id.fragment_content);
return view;
}
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
fragment_textview.setText(content);
}
}
第二步：实现滑动下面控制上面
优化MainActivity类
public class MainActivity extends AppCompatActivity {
private HorizontalScrollView scrollView;
private LinearLayout layout_top,layout_tab,layout_scroll;
private TextView scroll_line;
private ViewPager viewPager;
private List<Fragment> fragments;
private int scroll_line_width;
private LinearLayout.LayoutParams params;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化页面
initView();
//初始化fragments
initFragments();
MyAdapter adapter = new MyAdapter(getSupportFragmentManager());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int left = (int) (scroll_line_width*(position+positionOffset));
params.leftMargin = left;
scroll_line.setLayoutParams(params);
}
@Override
public void onPageSelected(int position) {
int out_left = position*scroll_line_width +scroll_line_width/2 - getResources().getDisplayMetrics().widthPixels/2;
scrollView.smoothScrollTo(out_left,0);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
private void initView() {
scrollView = (HorizontalScrollView) findViewById(R.id.scrollView);
layout_top = (LinearLayout) findViewById(R.id.layout_top);
layout_tab = (LinearLayout) findViewById(R.id.layout_tab);
layout_scroll = (LinearLayout) findViewById(R.id.layout_scroll);
scroll_line = (TextView) findViewById(R.id.scroll_line);
viewPager = (ViewPager) findViewById(R.id.viewpager);
params = (LinearLayout.LayoutParams) scroll_line.getLayoutParams();
scroll_line_width = params.width;
}
private void initFragments() {
fragments = new ArrayList<Fragment>();
for(int i = 0;i<layout_tab.getChildCount();i++){
MyFrgment fragment = new MyFrgment();
Bundle bundle = new Bundle();
bundle.putString("content","第"+(i+1)+"个fragment");
fragment.setArguments(bundle);
fragments.add(fragment);
}
}
class MyAdapter extends FragmentPagerAdapter{
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
}
第三步：增加标签点击监听控制页面滑动
在MainActivity类中增加方法initTabControl()
private void initTabControl() {
for(int i = 0;i<layout_tab.getChildCount();i++){
TextView tab = (TextView) layout_tab.getChildAt(i);
tab.setTag(i);
tab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewPager.setCurrentItem((Integer) v.getTag(),true);
}
});
}
}
【练习】ViewPager标签滑动的更多相关文章
- TabLayoutViewPagerDemo【TabLayout+ViewPager可滑动】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 使用TabLayout搭配ViewPager实现可滑动的顶部选项卡效果. 效果图 代码分析 1.演示常规的设置. 2.通过自定义Vi ...
- 去掉SrollView、GrdiView、ListView、ViewPager等滑动到边缘的光晕效果
当我们使用SrollView.GrdiView.ListView.ViewPager带有滑动功能的组件时,滑动到边缘时总会出现类光晕效果.这是用于提示用户已经滑动到了组件的边缘,不能再滑动了,但有时候 ...
- ViewPager相互嵌套，导致子ViewPager无法滑动，且子ViewPager中的view无法被点击
场景:当使用ViewPager进行嵌套的时候,子viewPager是无法进行嵌套的,因此我们要重写ViewPager类,并重写里层viewPager类中的onTouchEvent方法,调用其父 ...
- ViewPager禁止滑动以及它与内层滑动控件水平方向上事件冲突的解决方法
一.上图 二.场景描写叙述 最近在做项目的时候.遇到一个怪异的需求,描写叙述例如以下: 1.ViewPager中嵌套3个View,当从View1滑动到View2时禁止ViewPager的滑动事件. 2 ...
- viewpager处理（一）：让viewpager不能滑动
1.实现原理: 自定义viewpager,重写onTouchEvent方法,什么触摸事件都不响应即可让viewpager不能滑动. 2.代码如下 public class NoScrollViewPa ...
- ViewPager实现滑动翻页效果
实现ViewPager的滑动翻页效果可以使用ViewPager的setPageTransformer方法,如下: import android.content.Context; import andr ...
- ViewPager无限滑动
2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...
- Android中ViewPager实现滑动条及与Fragment结合的实例教程
ViewPager类主要被用来实现可滑动的视图功能,这里我们就来共同学习Android中ViewPager实现滑动条及与Fragment结合的实例教程,需要的朋友可以参考下 自主实现滑动指示条先上一个 ...
- Android解决下拉刷新控件SwipeRefreshLayout和ViewPager的滑动冲突
直接说明下我自己项目中的情况,如图: 外部嵌套任何一种refresh下拉控件之后,上方的viewpager左右滑动事件都受到影响,滑动不流畅,稍微有点向下的趋势就会触发刷新. 起初以为可能跟不同下拉控 ...
随机推荐
- 物理学家的LOGO
原文选自Inside the Perimeter 阿那克西曼德(c. 610-546 BCE) 古希腊人,被认为是史上第一位物理学家,是有记录的认为世界按一定规律运行的第一人,做科学实验第一人,发明了 ...
- 微信和WeChat的合并月活跃账户达6.97亿
腾讯最新财报显示,微信和WeChat的合并月活跃账户于2015年底达6.97亿,同比增长39%.2016年初春节假期期间,通过微信支付收发的红包数量仅在6天内就超过320亿,同比增长9倍. 腾讯网络广 ...
- quick cocos 的scheduler 定时器
cocos2dx原生lua对于定时器的写法: 1.每帧调用: void scheduleUpdateWithPriority(int priority) void scheduleUpdateWith ...
- [转]uses-permission权限列表
android.permission.ACCESS_CHECKIN_PROPERTIES允许读写访问”properties”表在checkin数据库中,改值可以修改上传 android.permiss ...
- XSS跨站脚本攻击实例讲解，新浪微博XSS漏洞过程分析
2011年6月28日晚,新浪微博遭遇到XSS蠕虫攻击侵袭,在不到一个小时的时间,超过3万微博用户受到该XSS蠕虫的攻击.此事件给严重依赖社交网络的网友们敲响了警钟.在此之前,国内多家著名的SNS网站和 ...
- [转]结合轮廓显示，实现完整的框选目标(附Demo代码)
原地址:http://www.cnblogs.com/88999660/articles/2887078.html 几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学的视 ...
- MotionEvent常见值
常见的动作常量: public static final int ACTION_DOWN = 0;单点触摸动作 public static final int ACTION_UP ...
- OpenStack 的Nova组件详解
Open Stack Compute Infrastructure (Nova) Nova是OpenStack云中的计算组织控制器.支持OpenStack云中实例(instances)生命周期的所有活 ...
- Linux的Cgroup<实例详解>
为什么要有cgroup Linux系统中经常有个需求就是希望能限制某个或者某些进程的分配资源.也就是能完成一组容器的概念,在这个容器中,有分配好的特定比例的cpu时间,IO时间,可用内存大小等.于是就 ...
- python遍历数组的两种方法
第一种,最常用的,通过for in遍历数组 1 2 3 4 5 6 7 8 colours = ["red","green","blue"] ...