Android之fragment点击切换和滑动切换结合

最新推荐文章于 2017-10-20 11:18:36 发布
最新推荐文章于 2017-10-20 11:18:36 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Android

  • 注：微信4.2导航栏切换效果

    http://blog.fangjie.info/%E4%BB%BF%E5%BE%AE%E4%BF%A14-2%E5%AF%BC%E8%88%AA%E6%A0%8F%E6%95%88%E6%9E%9C/

  • https://github.com/JayFang1993/android-demos/tree/master/WechatTab



  • 学了一小段时间的Android,主要接触的是UI设计，打交道最多莫过于fragment了吧。在Android3.0引入了fragment的概念后，几乎在所以的Android的应用中都可以看见其身影，已经有很多前辈高人都已经详细介绍过fragmrnt，我这里就不多说什么了。

    \

    这里本来是想模仿一下微信的切换效果，怎奈水平不足，这里就献丑贴出半成品的代码，希望有大神能指点一下。废话不多说，上代码。先从简单的开始吧，这里是我一共用了3个fragment，这里就只贴出第一个的fragment的布局，别的两个基本一样,比较简朴。

    view source print ?
    01. <?xml version='1.0' encoding='UTF-8'?>
    02. <LinearLayout
    03. android:layout_width='fill_parent'
    04. android:layout_height='fill_parent'
    05. android:orientation='vertical'
    06. android:gravity='center_horizontal|center_vertical'
    07. xmlns:android='http://schemas.android.com/apk/res/android'>
    08. <TextView
    09. android:layout_width='wrap_content'
    10. android:layout_height='wrap_content'
    11. android:text='This the first fragment'
    12. />
    13. </LinearLayout>

    接下来的是使用fragment片段，这里也只贴出第一个的。

    view source print ?
    01. package com.example.fragments;
    02.  
    03. import com.example.viewfragtext.R;
    04.  
    05. import android.os.Bundle;
    06. import android.support.v4.app.Fragment;
    07. import android.view.LayoutInflater;
    08. import android.view.View;
    09. import android.view.ViewGroup;
    10.  
    11. public class Fragmentone extends Fragment
    12. {
    13. @Override
    14. public View onCreateView(LayoutInflater inflater, ViewGroup container,
    15. Bundle savedInstanceState) {
    16. // TODO Auto-generated method stub
    17. return inflater.inflate(R.layout.fragment1, container, false);
    18. }
    19. }

    接下来便要开始实现切换的功能，这里是底部切换组件(tabfoot)的布局。

    view source print ?
    01. <?xml version='1.0' encoding='UTF-8'?>
    02. <LinearLayout
    03. android:layout_width='fill_parent'
    04. android:layout_height='44dp'
    05. android:orientation='horizontal'
    06. android:background='@drawable/tabfootbg'
    07. xmlns:android='http://schemas.android.com/apk/res/android'>
    08. <LinearLayout
    09. android:id='@+id/lay1'
    10. android:layout_width='match_parent'
    11. android:layout_height='match_parent'
    12. android:layout_weight='1'
    13. style='@style/Linearlayout_Style'
    14. >
    15. <TextView
    16. android:layout_width='wrap_content'
    17. android:layout_height='wrap_content'
    18. android:id='@+id/fratext1'
    19. android:text='@string/chat'
    20. android:textColor='@color/black'
    21. />
    22. </LinearLayout>
    23. <LinearLayout
    24. android:id='@+id/lay2'
    25. android:layout_width='match_parent'
    26. android:layout_height='match_parent'
    27. android:layout_weight='1'
    28. style='@style/Linearlayout_Style'>
    29. <TextView
    30. android:layout_width='wrap_content'
    31. android:layout_height='wrap_content'
    32. android:id='@+id/fratext2'
    33. android:text='@string/find'
    34. android:textColor='@color/black'/>
    35. </LinearLayout>
    36. <LinearLayout
    37. android:id='@+id/lay3'
    38. android:layout_width='match_parent'
    39. android:layout_height='match_parent'
    40. android:layout_weight='1'
    41. style='@style/Linearlayout_Style'>
    42. <TextView
    43. android:layout_width='wrap_content'
    44. android:layout_height='wrap_content'
    45. android:id='@+id/fratext3'
    46. android:text='@string/tongxunlu'
    47. android:textColor='@color/black'/>
    48. </LinearLayout>
    49. </LinearLayout>

    这里分别是自定义的style和color的代码。

    view source print ?
    01. <style name='Linearlayout_Style'>
    02. <item name='android:orientation'>vertical</item>      
    03. <item name='android:gravity'>center</item>
    04. <item name='android:clickable'>true</item>
    05. <item name='android:onClick'>LayoutOnclick</item>
    06. </style>
    07.  
    08.  
    09. <?xml version='1.0' encoding='UTF-8'?>
    10. <resources >
    11. <color name='lightseagreen'>#20b2aa</color><!--亮海蓝色 -->
    12. <color name='black'>#000000</color><!-- 黑色 -->
    13.  
    14. </resources>

    别的设计都完成了，马上对应的是MainActivity的设计，这是其布局

    view source print ?
    01. <LinearLayout
    02. android:layout_width='fill_parent'
    03. android:layout_height='fill_parent'
    04. android:orientation='vertical'
    05. xmlns:android='http://schemas.android.com/apk/res/android'>
    06.  
    07.  
    08.  
    09. <fragment
    10. android:name='com.example.fragments.Fragmentone'
    11. android:id='@+id/fragment1'
    12. android:layout_height='0dp'
    13. android:layout_weight='1.0'
    14. android:layout_width='fill_parent'
    15. />
    16. <fragment
    17. android:name='com.example.fragments.Fragmenttwo'
    18. android:id='@+id/fragment2'
    19. android:layout_height='0dp'
    20. android:layout_weight='1.0'
    21. android:layout_width='fill_parent'
    22. />
    23. <fragment
    24. android:name='com.example.fragments.Fragmentthree'
    25. android:id='@+id/fragment3'
    26. android:layout_height='0dp'
    27. android:layout_weight='1.0'
    28. android:layout_width='fill_parent'
    29.  
    30. />
    31.  
    32. <include layout='@layout/tabfoot'/>
    33.  
    34. </LinearLayout>

    最后遍是实现在主活动中实现点击底部切换和滑动的换的功能。这里滑动功能我是采用手势（Gesture）实现的。

     

     

    view source print ?
    001. 1 package com.example.viewfragtext;
    002. 2
    003. 3 import android.os.Bundle;
    004. 4 import android.support.v4.app.Fragment;
    005. 5 import android.support.v4.app.FragmentActivity;
    006. 6 import android.view.GestureDetector;
    007. 7 import android.view.GestureDetector.OnGestureListener;
    008. 8 import android.view.Menu;
    009. 9 import android.view.MotionEvent;
    010. 10 import android.view.View;
    011. 11 import android.widget.LinearLayout;
    012. 12 import android.widget.TextView;
    013. 13
    014. 14 public class MainActivity extends FragmentActivity implements OnGestureListener
    015. 15 {
    016. 16     public static Fragment[] fragments;
    017. 17     public static LinearLayout[] linearLayouts;
    018. 18     public static TextView[] textViews;
    019. 19     /**定义手势检测实例*/
    020. 20     public static GestureDetector detector;
    021. 21     /**做标签，记录当前是哪个fragment*/
    022. 22     public int MARK=0;
    023. 23     /**定义手势两点之间的最小距离*/
    024. 24     final int DISTANT=50;
    025. 25          
    026. 26    
    027. 27     @Override
    028. 28     protected void onCreate(Bundle savedInstanceState) {
    029. 29         super.onCreate(savedInstanceState);
    030. 30         setContentView(R.layout.activity_main);
    031. 31         //分别实例化和初始化fragement、lineatlayout、textview
    032. 32         setfragment();
    033. 33         setlinearLayouts();
    034. 34         settextview();
    035. 35         //创建手势检测器
    036. 36         detector=new GestureDetector(this);
    037. 37        
    038. 38     }
    039. 39
    040. 40     @Override
    041. 41     public boolean onCreateOptionsMenu(Menu menu) {
    042. 42         // Inflate the menu; this adds items to the action bar if it is present.
    043. 43         getMenuInflater().inflate(R.menu.main, menu);
    044. 44         return true;
    045. 45     }
    046. 46     /**初始化fragment*/
    047. 47     public void setfragment()
    048. 48     {
    049. 49         fragments=new Fragment[3];
    050. 50         fragments[0]=getSupportFragmentManager().findFragmentById(R.id.fragment1);
    051. 51         fragments[1]=getSupportFragmentManager().findFragmentById(R.id.fragment2);
    052. 52         fragments[2]=getSupportFragmentManager().findFragmentById(R.id.fragment3);
    053. 53         getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    054. 54         .show(fragments[0]).commit();
    055. 55        
    056. 56     }
    057. 57      /**初始化linerlayout*/
    058. 58     public void setlinearLayouts()
    059. 59     {
    060. 60         linearLayouts=new LinearLayout[3];
    061. 61         linearLayouts[0]=(LinearLayout)findViewById(R.id.lay1);
    062. 62         linearLayouts[1]=(LinearLayout)findViewById(R.id.lay2);
    063. 63         linearLayouts[2]=(LinearLayout)findViewById(R.id.lay3);
    064. 64         linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
    065. 65     }
    066. 66      /**初始化textview*/
    067. 67     public void settextview()
    068. 68     {
    069. 69         textViews=new TextView[3];
    070. 70         textViews[0]=(TextView)findViewById(R.id.fratext1);
    071. 71         textViews[1]=(TextView)findViewById(R.id.fratext2);
    072. 72         textViews[2]=(TextView)findViewById(R.id.fratext3);
    073. 73         textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
    074. 74     }
    075. 75     /**点击底部linerlayout实现切换fragment的效果*/
    076. 76     public void LayoutOnclick(View v)
    077. 77     {
    078. 78         resetlaybg();//每次点击都重置linearLayouts的背景、textViews字体颜色
    079. 79         switch (v.getId()) {
    080. 80         case R.id.lay1:
    081. 81              getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    082. 82                 .show(fragments[0]).commit();
    083. 83             linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
    084. 84             textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
    085. 85             MARK=0;
    086. 86             break;
    087. 87
    088. 88         case R.id.lay2:
    089. 89             getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    090. 90             .show(fragments[1]).commit();
    091. 91             linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
    092. 92             textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
    093. 93             MARK=1;
    094. 94             break;
    095. 95         case R.id.lay3:
    096. 96             getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    097. 97             .show(fragments[2]).commit();
    098. 98             linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
    099. 99             textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen));
    100. 100             MARK=2;
    101. 101         break;
    102. 102         default:
    103. 103             break;
    104. 104         }
    105. 105     }
    106. 106     /**重置linearLayouts、textViews*/
    107. 107     public void resetlaybg()
    108. 108     {
    109. 109         for(int i=0;i<3;i++)
    110. 110         {
    111. 111             linearLayouts[i].setBackgroundResource(R.drawable.tabfootbg);
    112. 112             textViews[i].setTextColor(getResources().getColor(R.color.black));
    113. 113         }
    114. 114    
    115. 115     }
    116. 116
    117. 117     @Override
    118. 118     public boolean onTouchEvent(MotionEvent event) {
    119. 119         // TODO Auto-generated method stub
    120. 120         //将该Activity上触碰事件交给GestureDetector处理
    121. 121         return detector.onTouchEvent(event);
    122. 122     }
    123. 123     @Override
    124. 124     public boolean onDown(MotionEvent arg0) {
    125. 125         // TODO Auto-generated method stub
    126. 126         return false;
    127. 127     }
    128. 128
    129. 129     /**滑动切换效果的实现*/
    130. 130     @Override
    131. 131     public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
    132. 132             float arg3) {
    133. 133         // TODO Auto-generated method stub
    134. 134         resetlaybg();
    135. 135         //当是Fragment0的时候
    136. 136         if(MARK==0)
    137. 137         {
    138. 138             if(arg1.getX()>arg0.getX()+DISTANT)
    139. 139             {
    140. 140                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    141. 141                 .show(fragments[1]).commit();    
    142. 142                 linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
    143. 143                 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
    144. 144                 MARK=1;
    145. 145             }
    146. 146             else
    147. 147             {
    148. 148                 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
    149. 149                 textViews[0].setTextColor(getResources().getColor(R.color.black));
    150. 150             }
    151. 151            
    152. 152         }
    153. 153         //当是Fragment1的时候
    154. 154         else if (MARK==1)
    155. 155         {
    156. 156             if(arg1.getX()>arg0.getX()+DISTANT)
    157. 157             {
    158. 158                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    159. 159                 .show(fragments[2]).commit();
    160. 160                 linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
    161. 161                 textViews[2].setTextColor(getResources().getColor(R.color.lightseagreen));
    162. 162                 MARK=2;
    163. 163             }
    164. 164             else if(arg0.getX()>arg1.getX()+DISTANT)
    165. 165             {
    166. 166                 getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    167. 167                 .show(fragments[0]).commit();
    168. 168                 linearLayouts[0].setBackgroundResource(R.drawable.lay_select_bg);
    169. 169                 textViews[0].setTextColor(getResources().getColor(R.color.lightseagreen));
    170. 170                 MARK=0;
    171. 171             }
    172. 172             else
    173. 173             {
    174. 174               linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
    175. 175                 textViews[1].setTextColor(getResources().getColor(R.color.black));
    176. 176             }
    177. 177         }
    178. 178         //当是Fragment2的时候
    179. 179         else if(MARK==2)
    180. 180         {
    181. 181             if(arg0.getX()>arg1.getX()+DISTANT)
    182. 182             {
    183. 183              getSupportFragmentManager().beginTransaction().hide(fragments[0]).hide(fragments[1]).hide(fragments[2])
    184. 184              .show(fragments[1]).commit();
    185. 185              linearLayouts[1].setBackgroundResource(R.drawable.lay_select_bg);
    186. 186                 textViews[1].setTextColor(getResources().getColor(R.color.lightseagreen));
    187. 187              MARK=1;
    188. 188             }
    189. 189             else
    190. 190             {
    191. 191              linearLayouts[2].setBackgroundResource(R.drawable.lay_select_bg);
    192. 192                 textViews[2].setTextColor(getResources().getColor(R.color.black));
    193. 193             }
    194. 194         }
    195. 195         return false;
    196. 196     }
    197. 197
    198. 198     @Override
    199. 199     public void onLongPress(MotionEvent arg0) {
    200. 200         // TODO Auto-generated method stub
    201. 201        
    202. 202     }
    203. 203
    204. 204     @Override
    205. 205     public boolean onScroll(MotionEvent arg0, MotionEvent arg1, float arg2,
    206. 206             float arg3) {
    207. 207         // TODO Auto-generated method stub
    208. 208         return false;
    209. 209     }
    210. 210
    211. 211     @Override
    212. 212     public void onShowPress(MotionEvent arg0) {
    213. 213         // TODO Auto-generated method stub
    214. 214        
    215. 215     }
    216. 216
    217. 217     @Override
    218. 218     public boolean onSingleTapUp(MotionEvent arg0) {
    219. 219         // TODO Auto-generated method stub
    220. 220         return false;
    221. 221     }
    222. 222    
    223. 223 }

    最后的效果图

     \\\

    出处：http://www.cnblogs.com/zhrxidian/p/3801545.html 

共勉
关注
专栏目录
【notepad附加功能】Android使用fragment实现滑动切换界面，重要概念一网打尽
m0_64604636的博客
12-06 496
Fragment的创建过程非常简单，只需在程序包名处单击鼠标右键，选择[ New ]→[ Fragment ]→[ Fragment(Blank)],进入Customize the Activity界面，在该界面指定Fragment名称，以及Fragment对应的布局名称，如下图1.1所示。 ![1.1](https://img-blog.csdnimg.cn/20200612015701517.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpd
Android Fragment结合ViewPager设置滑动和点击切换
weixin_45500338的博客
12-06 371
今天我要记录一下我认为的关于Fragment和ViewPager最简单结合使用，既可以实现滑动，又可以实现点击切换，相关的知识点包括ViewPager的监听事件（以前的那个setOnPageChangeListener不推荐使用了，但是还是能够用），还有用于管理Fragment的FragmentPagerAdapter，这两个的结合可以实现简单的滑动切换和点击切换 没有GIF图，先看看图片效果，具...
Fragment点击和滑动切换页面.
09-01
安卓界面用fragment实现点击和滑动左右切换。
Android Fragment滑动切换
热门推荐
breakloop
10-20 1万+
Fragment左右滑动切换，是APP中常用的功能效果。其实现依附于控件viewPager，而该控件隶属于android.support.v4.view。在Android Studio的UI Desgin界面中，并没有直接提供该控件，因此需要切换至代码界面进行手动添加。除了创建切换所需的Fragment外，唯一需要做的就是实现并设置viewPager的FragmentPagerAdapter。我们先
Android UI-实现底部切换标签（fragment)
modabobo
03-12 328
Android UI-实现底部切换标签（fragment) 前言 本篇博客要分享的一个UI效果——实现底部切换标签，想必大家在一些应用上面遇到过这种效果了，最典型的就是微信了，可以左右滑动切换页面，也可以点击标签页滑动页面，它们是如何实现的呢，本篇博客为了简单只介绍如何实现点击底部切换标签页。 先来看看我们想实现的效果图： 这样的页面实现起来其实很简单的，首先我们从布局入手： ...
安卓点击和滑动切换页面FragmentActivity
07-24
安卓FragmentActivity实现多页面点击和左右滑动切换。
Androidfragment结合viewpager的滑动与点击
12-25
综上所述，这个"Androidfragment结合viewpager的滑动与点击"示例涵盖了Android开发中多个重要领域，通过实践这个项目，开发者可以深入理解如何将Fragment和ViewPager协同工作，以及如何处理XML数据、SQLite数据库和...
android中ViewPager结合Fragment进行无限滑动
01-05
实现ViewPager结合Fragment实现无限循环切换，这里也是在适配器里面进行的，当然使用滑动监听也能够实现 import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android...
Android使用TabLayou+fragment+viewpager实现滑动切换页面效果
08-30
Android 使用 TabLayout+Fragment+ViewPager 实现滑动切换页面效果 Android 是一个流行的移动操作系统，它提供了多种方式来实现滑动切换页面效果。其中，使用 TabLayout+Fragment+ViewPager 是一种常见的实现方法...
Android Studio使用ViewPager+Fragment实现仿微信滑动切换界面
12-27
总的来说，使用`ViewPager`和`Fragment`在Android Studio中实现滑动切换界面是一个标准流程，能够帮助开发者创建功能丰富的多页面应用。通过理解并熟练掌握这些组件，你可以为用户提供更加流畅和直观的交互体验。在...
滑动切换fragment
08-01
顶部滑动导航栏，字体和图片跟着滑动条的位置改变
android实现点击按钮切换不同的fragment布局
08-26
主要为大家详细介绍了android实现点击按钮切换不同的fragment布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
利用手势实现fragment的滑动切换小demo
12-16
本例使用手势实现了对fragment的滑动切换
android fragment实现按钮切换
06-19
通过按钮动态切换fragment，实现tab的效果
ViewPage Fragment页面滑动切换
05-21
使用ViewPage以及Fragment进行页面滑动切换
Android Fragment之间的点击切换
红日
04-25 2739
本文主要讲解点击不同按钮之后
Fragment实现Tab页切换，滑动和点击都可切换。
老杨的一天
03-20 755
1.TAB标题栏，top1.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="60dp" android:background="#eee"
Frament滑动切换
Veng的博客
07-15 347
1.主程序的xml文件里,在所需要切换页面的区域添加FrameLayout 布局 <FrameLayout android:id="@+id/fl_fragments" android:layout_width="match_parent" android:layout_height="match_parent" />2.然后，创建所需页面，在这里我创三个publ
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值