【练习】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左右滑动事件都受到影响,滑动不流畅,稍微有点向下的趋势就会触发刷新. 起初以为可能跟不同下拉控 ...
随机推荐
- 项目中用到的window.showModalDialog（来自网络）
window.showModalDialog相关: showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.showMo ...
- Eclipse的模板设置代码
Eclipse Java注释模板设置详解 设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后 ...
- Dynamo和Bigtable对比
数据结构化问题 首先要提到的是两者存储数据属性上的区别,虽然两者都是以key/value形式进行存储,但Dynamo偏向存储原数据,因为其所存储的数据是非结构化数据,对value的解析完 ...
- Bmob用户管理操作
注册用户 BmobUser bu = new BmobUser(); bu.setUsername("sendi"); bu.setPassword("123456&qu ...
- Android 云服务器的搭建和友盟APP自动更新功能的实现
setContentView(R.layout.activity_splash); //Bmob SDK初始化--只需要这一段代码即可完成初始化 //请到Bmob官网(http://www.bmob. ...
- 使用git如何批量对文件进行rm操作
git add -A 它会把我们未通过 git rm 删除的文件全部stage 转自: http://segmentfault.com/q/1010000000095373
- 【Spring】Spring系列7之Spring整合MVC框架
7.Spring整合MVC框架 7.1.web环境中使用Spring 7.2.整合MVC框架 目标:使用Spring管理MVC的Action.Controller 最佳实践参考:http://www. ...
- Couchbase 介绍 - 更好的 Cache 系统
在移动互联网时代,我们面对的是更多的客户端,更低的请求延迟,这当然需要对数据做大量的 Cache 以提高读写速度. 术语 节点:指集群里的一台服务器. 现有 Cache 系统的特点 目前业界使用得最多 ...
- javascript onload队列
2014年10月29日 10:40:14 function addLoadEvent(func){ var oldonload = window.onload; if (typeof window.o ...
- iOS国际化(Xcode5)
如何将你的app内的语言可以根据系统语言切换而切换呢?这是本篇所要解决的问题.废话先不说,上软硬件环境: 硬件:Macbook Pro 软件:Xcode 5.1 代码:https://github.c ...