计算机编程

比如网页新闻,一个 Tab 就是一个栏目,可以左右滑动。我们就可以用 Fragment 实现类似的效果。

 闲着。用viewpager+fragment实现了个滚动tab。。轻拍,以后会陆续发先小东西出来。。爱分享,才快乐。demo见附件。。

实现

 

Android Studio 中有这样的模板,创建 Activity 时选择最后一个 Tabbed Activity 即是。

Java代码 

选择 Navigation Style 可以确定几种切换样式。

 巴黎人游戏官网 1

巴黎人游戏官网 2

  1. package com.example.demo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentActivity;  
  9. import android.support.v4.app.FragmentManager;  
  10. import android.support.v4.app.FragmentPagerAdapter;  
  11. import android.support.v4.view.ViewPager;  
  12. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  13. import android.view.View;  
  14. import android.view.View.OnClickListener;  
  15. import android.widget.TextView;  
  16.   
  17. public class MainActivity extends FragmentActivity {  
  18.   
  19. private TextView chatView, address, findView;  
  20. private ViewPager mViewPager;  
  21. private TextView mBottomLine;  
  22. private int screenWidth = 0;  
  23.   
  24. private int currentIndex = 0;  
  25.   
  26. private MyPagerAdapter myPagerAdapter;  
  27. private List<Fragment> mFragmentList = new ArrayList<Fragment>();  
  28. private List<String> mTitleList = new ArrayList<String>();  
  29. MyFragment chatFragment;  
  30. MyFragment findFragment;  
  31. MyFragment addressFragment;  
  32.   
  33. @Override  
  34. protected void onCreate(Bundle savedInstanceState) {  
  35. super.onCreate(savedInstanceState);  
  36. setContentView(R.layout.activity_main);  
  37.   
  38. initComponents();  
  39. }  
  40.   
  41. private void initComponents() {  
  42.   
  43. this.mBottomLine = (TextView) findViewById(R.id.bottom_line);  
  44. this.screenWidth = getWindowManager().getDefaultDisplay().getWidth();  
  45. this.chatView = (TextView) findViewById(R.id.chat_top_info);  
  46. this.findView = (TextView) findViewById(R.id.find_top_info);  
  47. this.address = (TextView) findViewById(R.id.address_top_info);  
  48. TopTabClickListener clickListener = new TopTabClickListener();  
  49. this.chatView.setOnClickListener(clickListener);  
  50. this.findView.setOnClickListener(clickListener);  
  51. this.address.setOnClickListener(clickListener);  
  52.   
  53. this.mViewPager = (ViewPager)findViewById(R.id.viewPager);  
  54. chatFragment = new MyFragment();  
  55. Bundle b = new Bundle();  
  56. b.putInt("index", 0);  
  57. chatFragment.setArguments(b);  
  58.         mFragmentList.add(chatFragment);  
  59.         findFragment = new MyFragment();  
  60.         b = new Bundle();  
  61.         b.putInt("index", 1);  
  62.         findFragment.setArguments(b);  
  63.         mFragmentList.add(findFragment);  
  64.         addressFragment = new MyFragment();  
  65.         b = new Bundle();  
  66.         b.putInt("index", 2);  
  67.         addressFragment.setArguments(b);  
  68.         mFragmentList.add(addressFragment);  
  69.         myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), mFragmentList, mTitleList);  
  70.         mViewPager.setAdapter(myPagerAdapter);  
  71.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  72.   
  73. @Override  
  74. public void onPageSelected(int index) {}  
  75.   
  76. @Override  
  77. public void onPageScrolled(int index, float arg1, int pixes) {  
  78. if(pixes != 0){  
  79. mBottomLine.layout((int) ((index + arg1) * screenWidth / 3), 0, (int) ((index + 1 + arg1) * screenWidth / 3), mBottomLine.getWidth());  
  80. }  
  81. if (pixes == 0) {  
  82. currentIndex = index;  
  83. changeIndex(currentIndex);  
  84. }  
  85. System.out.println("the state is : " + arg1 + "   and index is " + index);  
  86. }  
  87.   
  88. @Override  
  89. public void onPageScrollStateChanged(int state) {}  
  90. });  
  91. }  
  92.   
  93. public void onLeftBtnClick(View view){  
  94. this.finish();  
  95. }  
  96.   
  97. private class TopTabClickListener implements OnClickListener{  
  98.   
  99. @Override  
  100. public void onClick(View view) {  
  101. if (view.getId() == chatView.getId()) {  
  102. mViewPager.setCurrentItem(0);  
  103. }else if(view.getId() == findView.getId()){  
  104. mViewPager.setCurrentItem(1);  
  105. }else{  
  106. mViewPager.setCurrentItem(2);  
  107. }  
  108. changeIndex(mViewPager.getCurrentItem());  
  109. }  
  110.   
  111. }  
  112.   
  113. private void changeIndex(int index){  
  114. if(index == 0){  
  115. chatView.setTextColor(getResources().getColor(R.color.green));  
  116. findView.setTextColor(getResources().getColor(R.color.black));  
  117. address.setTextColor(getResources().getColor(R.color.black));  
  118. }else if(index == 1){  
  119. findView.setTextColor(getResources().getColor(R.color.green));  
  120. chatView.setTextColor(getResources().getColor(R.color.black));  
  121. address.setTextColor(getResources().getColor(R.color.black));  
  122. }else {  
  123. address.setTextColor(getResources().getColor(R.color.green));  
  124. findView.setTextColor(getResources().getColor(R.color.black));  
  125. chatView.setTextColor(getResources().getColor(R.color.black));  
  126. }  
  127. mBottomLine.layout((int) (index * screenWidth / 3), 0, (int) ((index + 1) * screenWidth / 3), mBottomLine.getWidth());  
  128. }  
  129.   
  130. private class MyPagerAdapter extends FragmentPagerAdapter {  
  131.   
  132. private List<Fragment> fragmentList;  
  133. private List<String> titleList;  
  134.   
  135. public MyPagerAdapter(FragmentManager fm, List<Fragment> fragmentList,  
  136. List<String> titleList) {  
  137. super(fm);  
  138. this.fragmentList = fragmentList;  
  139. this.titleList = titleList;  
  140. }  
  141.   
  142. /** 
  143. * 得到每个页面 
  144. */  
  145. @Override  
  146. public Fragment getItem(int arg0) {  
  147. return (fragmentList == null || fragmentList.size() == 0) ? null  
  148. : fragmentList.get(arg0);  
  149. }  
  150.   
  151. /** 
  152. * 每个页面的title 
  153. */  
  154. @Override  
  155. public CharSequence getPageTitle(int position) {  
  156. return (titleList.size() > position) ? titleList.get(position) : "";  
  157. }  
  158.   
  159. @Override  
  160. public int getCount() {  
  161. return fragmentList == null ? 0 : fragmentList.size();  
  162. }  
  163. }  
  164. }  
  165.   
  166.   
  167. package com.example.demo;  
  168.   
  169. import android.os.Bundle;  
  170. import android.support.v4.app.Fragment;  
  171. import android.view.LayoutInflater;  
  172. import android.view.View;  
  173. import android.view.ViewGroup;  
  174. import android.widget.TextView;  
  175.   
  176. public class MyFragment extends Fragment {  
  177.   
  178. private int index = 0;  
  179. private LayoutInflater mInflater;  
  180.   
  181. @Override  
  182. public void onCreate(Bundle savedInstanceState) {  
  183. super.onCreate(savedInstanceState);  
  184. index = getArguments().getInt("index", 0);  
  185. }  
  186.   
  187. @Override  
  188. public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  189. Bundle savedInstanceState) {  
  190. mInflater = inflater;  
  191. TextView v = (TextView) mInflater.inflate(R.layout.fragment, null);  
  192. v.setText("第" + index);  
  193. return v;  
  194. }  
  195. }  

原理

 

  • 由 Fragment 决定每一个 Tab 对应的布局文件,以及其代码。
  • 由 FragmentPagerAdapter 作适配。
  • 控件 ViewPager 通过 setAdapter() 与 FragmentPagerAdapter 关联。
  • 控件 TabLayout 通过 setupWithViewPager() 与 ViewPager 关联。

demo.zip (1.4 MB)

代码

代码基本是由创建的代码形成,我作了删减、改名,便于理解。

其中 onCreateView 我改为读取不同的布局文件,并且我们可以对不同的布局文件写不同的程序逻辑代码,如果逻辑代码太长,可参考:将 Activity 拆分为多个类。

问:每次滑动都会调用 onCreateView 吗?

其他新闻
  • Android 日期时间-new Date() 及其格式化、System.currentTimeMillis() Android 日期时间-new Date()的坑 Android 日期时间-Calendar 代替 new Date()仍有坑 Android日期时间-日期与字符串相互转换的坑 一、...
    2020-01-17
  • 程序在手机上调试运行成功,签名生成APK 也成功,但是在手机上安装居然失败。 android studio 升级2.3之后,签名打包需要选择Signature versions,如下图 原来签名时,Signature Versions 不能只...
    2020-01-17
  • 比如网页新闻,一个 Tab 就是一个栏目,可以左右滑动。我们就可以用Fragment 实现类似的效果。  闲着。用viewpager+fragment实现了个滚动tab。。轻拍,以后会陆续发先小东西出来。。爱分...
    2020-01-17
友情链接

公司名称巴黎人电玩
版权所有:Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有

友情链接

Copyright © 2015-2019 http://www.zhongqiangjy.com. 巴黎人电玩有限公司 版权所有
公司地址http://www.zhongqiangjy.com