【练习】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左右滑动事件都受到影响,滑动不流畅,稍微有点向下的趋势就会触发刷新. 起初以为可能跟不同下拉控 ...
随机推荐
- 把Linux安装到移动硬盘上
把Linux安装到移动硬盘上 转载于:http://mrkh.me/install-linux-on-a-portable-hard-drive.html 这一篇文章讲一下,怎么把linux安装到移动 ...
- JS代码的加载
HTML页面中JS的加载原理:在加载HTML页面的时候,当浏览器遇到内嵌的JS代码时会停止处理页面,先执行JS代码,然后再继续解析和渲染页面.同样的情况也发生在外链的JS文件中,浏览器必须先花时间下载 ...
- javascript判断上传文件大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- acdream.郭式树(数学推导）
郭式树 Time Limit:2000MS Memory Limit:128000KB 64bit IO Format:%lld & %llu Submit Status Pr ...
- cocos2d回忆
凭借自己的回忆想想看自己都学到了那些知识,这是小学的时候当初中老师的外公给我说的,现在想想,CCDirector,CCNode,CCScene,CCSprite这几个类,然后是坐标,锚点,CCNode ...
- DButils实现查询和新增
public static Adttendance DBSql(String data) throws SQLException { String url = "j ...
- 菜鸟带你飞______DP基础26道水题
DP 158:11:22 1205:00:00 Overview Problem Status Rank (56) Discuss Current Time: 2015-11-26 19:11:2 ...
- C语言中%d,%o,%f,%e,%x的意义
printf(格式控制,输出列表) 格式控制包括格式说明和格式字符. 格式说明由“%”和格式字符组成,如%d%f等.它的作用是将输出的数据转换为指定的格式输出.格式说明总是由“%”字符开始的.不同类型 ...
- 【Linux】为啥查某个进程的线程，查出来的所有线程的pid不一样啊
楼上说的linux线程和进程是一样的,这个说法是错误的. 看了楼主的问题,感觉楼主是被PID给弄混了,线程进程都会有自己的ID,这个ID就叫做PID,PID是不特指进程ID,线程ID也可以叫做PID. ...
- outlook.office365.com传参
string m_html = string.Empty; m_html += "<script>"; m_html += string.Format("wi ...