【练习】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左右滑动事件都受到影响,滑动不流畅,稍微有点向下的趋势就会触发刷新. 起初以为可能跟不同下拉控 ...
随机推荐
- 转:Java NIO系列教程(八) DatagramChannel
Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 打开 DatagramChann ...
- 标准库errno.h 查看错误代码编号，errno：4 与error：2
log 里报错,errno:4 与errno:2 查了一下 errno.h --------下文来自百度百科 errno 编辑 errno 是记录系统的最后一次错误代码.代码是一个int型的值 ...
- logback logback.xml常用配置详解（三）
logback logback.xml常用配置详解 <filter> <filter>: 过滤器,执行一个过滤器会有返回个枚举值,即DENY,NEUTRAL,ACCEPT其中之 ...
- python闭包小例子
------------------ 首先根据实例, 体会一下闭包的效果 ------------------ 定义闭包: def foo(x): a = [0] def bar(y): a[0] = ...
- 字符串模拟赛T1
// source code from laekov for c0x17 #define PRID "bxjl" #include <cstdio> #include ...
- Maven 安装以及一些开发技巧
解压 apache-maven-3.2.5 在conf ->sites中配置repository 的路径. Eclipse 配置 maven 2. 3. 一些小BUG 或开发技巧 eclipse ...
- Sixth scrum meeting - 2015/10/31
概述 今天是周末,我们小组由于之前拖延的比较久,所以今天仍然在努力的开发…… 目前开发已经到了中期阶段,今天遇到了一个问题就是,由于小组的某些同学对git的使用不太熟悉,导致在git push的时候遇 ...
- svn安装【转载】
SVN简介 SVN全名Subversion,即版本控制系统.SVN与CVS一样,是一个跨平台的软件,支持大多数常见的操作系统.作为一个开源的版本控制系统,Subversion管理着随时间 ...
- squid日志配置与轮询
squid日志分类及参数 SQUID默认的log文件非常多,其中最重要的LOG日志有三个,分别为access.log.store.log.cache.log.三个日志的记录的内容如下: access. ...
- Unique Binary Search Trees I & II
Given n, how many structurally unique BSTs (binary search trees) that store values 1...n? Example Gi ...