安卓开发_慕课网_ViewPager与FragmentPagerAdapter实现Tab实现Tab(App主界面)

简介: 学习内容来自“慕课网” ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来。效果就是可以拖动内容区域来改变相应的功能图标亮暗 思路: Fragment作为内容区域 点击功能按钮,想将所有的图标变为暗色图标,再调用相应的Fragment,并使对应的图标变亮 效果图: 布局文件部分 activity_main.

学习内容来自“慕课网”

ViewPager与FragmentPagerAdapter实现Tab 将这两种实现Tab的方法结合起来。效果就是可以拖动内容区域来改变相应的功能图标亮暗

思路:

Fragment作为内容区域

点击功能按钮,想将所有的图标变为暗色图标,再调用相应的Fragment,并使对应的图标变亮

效果图:

布局文件部分

activity_main.xml

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical"
 6      >    
 7     <include layout="@layout/top"/>
 8     
 9     <android.support.v4.view.ViewPager   //这里是关键部分
10         android:layout_width="fill_parent"
11         android:layout_height="0dp"
12         android:layout_weight="1"
13         android:id="@+id/id_viewpager">
14         
15     </android.support.v4.view.ViewPager>
16     
17     <include layout="@layout/bottom"/>
18 </LinearLayout>
19     
activity_main

以下布局文件部分是固定的,和前两种方法用到的是一样的,做过前两种方法的可以直接复制代码

头部部分:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:background="@drawable/title_bar"
 5     android:layout_height="45dp"
 6     android:gravity="center"
 7     android:orientation="vertical" >
 8     <TextView 
 9         android:layout_height="wrap_content"
10         android:layout_width="wrap_content"
11         android:layout_gravity="center"
12         android:text="微信"
13         android:textColor="#ffffff"
14         android:textSize="20sp"
15         android:textStyle="bold"
16         
17         />
18 
19 </LinearLayout>
top.xml

底部部分

  1 <?xml version="1.0" encoding="utf-8"?>
  2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3     android:layout_width="match_parent"
  4     android:layout_height="55dp"
  5     android:background="@drawable/bottom_bar"
  6     android:orientation="horizontal" >
  7     
  8     <LinearLayout 
  9        android:id="@+id/id_tab_weixin"
 10        android:layout_width="0dp"
 11        android:gravity="center"
 12        android:layout_height="fill_parent"
 13        android:layout_weight="1"
 14        android:orientation="vertical"
 15        >
 16         <ImageButton 
 17            android:id="@+id/id_tab_weixin_image"
 18            android:layout_width="wrap_content"
 19            android:layout_height="wrap_content"
 20            android:src="@drawable/tab_weixin_pressed"
 21            android:clickable="false"
 22            android:background="#00000000"
 23            />
 24         <TextView 
 25             android:layout_width="wrap_content"
 26             android:layout_height="wrap_content"
 27             android:text="微信"
 28             android:textColor="#ffffff"
 29             />
 30     </LinearLayout>
 31     
 32     <LinearLayout 
 33        android:id="@+id/id_tab_add"
 34        android:layout_width="0dp"
 35        android:gravity="center"
 36        android:layout_height="fill_parent"
 37        android:layout_weight="1"
 38        android:orientation="vertical"
 39        >
 40         <ImageButton 
 41            android:id="@+id/id_tab_add_image"
 42            android:layout_width="wrap_content"
 43            android:layout_height="wrap_content"
 44            android:clickable="false"
 45            android:src="@drawable/tab_address_normal"
 46            android:background="#00000000"
 47            />
 48         <TextView 
 49             android:layout_width="wrap_content"
 50             android:layout_height="wrap_content"
 51             android:text="通信录"
 52             android:textColor="#ffffff"
 53             />
 54     </LinearLayout>
 55     
 56    <LinearLayout 
 57        android:id="@+id/id_tab_frd"
 58        android:layout_width="0dp"
 59        android:gravity="center"
 60        android:layout_height="fill_parent"
 61        android:layout_weight="1"
 62        android:orientation="vertical"
 63        >
 64         <ImageButton 
 65            android:id="@+id/id_tab_frd_image"
 66            android:layout_width="wrap_content"
 67            android:clickable="false"
 68            android:layout_height="wrap_content"
 69            android:src="@drawable/tab_find_frd_normal"
 70            android:background="#00000000"
 71            />
 72         <TextView 
 73             android:layout_width="wrap_content"
 74             android:layout_height="wrap_content"
 75             android:text="朋友"
 76             android:textColor="#ffffff"
 77             />
 78     </LinearLayout>
 79     
 80     <LinearLayout 
 81        android:id="@+id/id_tab_set"
 82        android:layout_width="0dp"
 83        android:gravity="center"
 84        android:layout_height="fill_parent"
 85        android:layout_weight="1"
 86        android:orientation="vertical"
 87        >
 88         <ImageButton 
 89            android:id="@+id/id_tab_set_image"
 90            android:layout_width="wrap_content"
 91            android:clickable="false"
 92            android:layout_height="wrap_content"
 93            android:src="@drawable/tab_settings_normal"
 94            android:background="#00000000"
 95            />
 96         <TextView 
 97             android:layout_width="wrap_content"
 98             android:layout_height="wrap_content"
 99             android:text="设置"
100             android:textColor="#ffffff"
101             />
102     </LinearLayout>
103 </LinearLayout>
bottom.xml

四个对应fragment部分的布局文件(相似的,只是用来标识效果的文字不同而已)

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:id="@+id/textView1"
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:layout_gravity="center_horizontal"
12         android:text="微信"       //四个 tab_01,tab_01,tab_03,tab_04只是这里显示的文字不同而已
13         android:textAppearance="?android:attr/textAppearanceMedium" />
14 
15 </LinearLayout>
tab_01

 

.java文件部分:

主activity

MainActivity.java

  1 package com.example.tab_three;
  2 
  3 
  4 
  5 import java.util.ArrayList;
  6 import java.util.List;
  7 
  8 import android.os.Bundle;
  9 import android.app.Activity;
 10 import android.support.v4.app.Fragment;
 11 import android.support.v4.app.FragmentActivity;
 12 import android.support.v4.app.FragmentPagerAdapter;
 13 import android.support.v4.view.ViewPager;
 14 import android.support.v4.view.ViewPager.OnPageChangeListener;
 15 import android.view.Menu;
 16 import android.view.View;
 17 import android.view.View.OnClickListener;
 18 import android.view.Window;
 19 import android.widget.ImageButton;
 20 import android.widget.LinearLayout;
 21 
 22 public class MainActivity extends FragmentActivity implements OnClickListener{
 23     private ViewPager mViewPager;
 24     private FragmentPagerAdapter mAdapter; //ViewPager适配器
 25     private List<Fragment> mFragments;
 26     
 27     private LinearLayout mTabWeixin;
 28     private LinearLayout mTabFrd;
 29     private LinearLayout mTabAdd;
 30     private LinearLayout mTabSet;
 31     
 32     private ImageButton mImageWeixin;
 33     private ImageButton mImageFrd;
 34     private ImageButton mImageAdd;
 35     private ImageButton mImageSet;
 36     
 37 
 38     @Override
 39     protected void onCreate(Bundle savedInstanceState) {
 40         super.onCreate(savedInstanceState);
 41         requestWindowFeature(Window.FEATURE_NO_TITLE);
 42         setContentView(R.layout.activity_main);
 43         
 44         initView();
 45         initEvent();
 46         setSelect(0);
 47         
 48     }
 49 
 50 
 51     private void initEvent() {
 52         // TODO Auto-generated method stub
 53         mTabWeixin.setOnClickListener(this);
 54         mTabAdd.setOnClickListener(this);
 55         mTabFrd.setOnClickListener(this);
 56         mTabSet.setOnClickListener(this);
 57     }
 58 
 59 
 60     private void initView() {
 61         // TODO Auto-generated method stub
 62         //初始化
 63         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
 64         
 65         mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
 66         mTabAdd = (LinearLayout) findViewById(R.id.id_tab_add);
 67         mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
 68         mTabSet = (LinearLayout) findViewById(R.id.id_tab_set);
 69         
 70         mImageWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_image);
 71         mImageAdd = (ImageButton) findViewById(R.id.id_tab_add_image);
 72         mImageFrd = (ImageButton) findViewById(R.id.id_tab_frd_image);
 73         mImageSet = (ImageButton) findViewById(R.id.id_tab_set_image);
 74         
 75         //数据的初始化
 76         mFragments = new ArrayList<Fragment>();
 77         Fragment mTab_01 = new WeixinFragment();
 78         Fragment mTab_02 = new AddFragment();
 79         Fragment mTab_03 = new FrdFragment();
 80         Fragment mTab_04 = new SetFragment();
 81         
 82         mFragments.add(mTab_01);
 83         mFragments.add(mTab_02);
 84         mFragments.add(mTab_03);
 85         mFragments.add(mTab_04);
 86         
 87         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())
 88         {
 89             
 90             @Override
 91             public int getCount() {
 92                 // TODO Auto-generated method stub
 93                 //返回数据源的个数
 94                 return mFragments.size();
 95                 
 96             }
 97             
 98             @Override
 99             public Fragment getItem(int arg0) {
100                 // TODO Auto-generated method stub
101                 return mFragments.get(arg0);
102             }
103         };
104         
105         mViewPager.setAdapter(mAdapter);
106         //监听内容区域的滑动效果
107         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
108             
109             @Override
110             public void onPageSelected(int arg0) {
111                 // TODO Auto-generated method stub
112                 int currentItem  = mViewPager.getCurrentItem();
113                 resetImage();
114         switch (currentItem) {
115         case 0:
116             mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
117             break;
118         case 1:
119             mImageAdd.setImageResource(R.drawable.tab_address_pressed);
120             break;
121         case 2:
122             mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
123             break;
124     
125         case 3:
126             mImageSet.setImageResource(R.drawable.tab_settings_pressed);
127             break;
128         default:
129             break;
130         }
131                 
132             }
133             
134             @Override
135             public void onPageScrolled(int arg0, float arg1, int arg2) {
136                 // TODO Auto-generated method stub
137                 
138             }
139             
140             @Override
141             public void onPageScrollStateChanged(int arg0) {
142                 // TODO Auto-generated method stub
143                 
144             }
145         });
146         }
147 
148 
149     @Override
150     public void onClick(View v) {
151         // TODO Auto-generated method stub
152         //先切换图片至暗色
153                 resetImage();
154                 switch (v.getId()) {
155                 case R.id.id_tab_weixin:
156                     setSelect(0);
157                     break;
158                 case R.id.id_tab_add:
159                     setSelect(1);
160                     break;
161                 case R.id.id_tab_frd:
162                     setSelect(2);
163                     break;
164                 case R.id.id_tab_set:
165                     setSelect(3);
166                     break;
167 
168                 default:
169                     break;
170                 }
171     }
172     private void setSelect(int i) {
173         // TODO Auto-generated method stub
174         //设置将点击的那个功能图标为亮色
175         //切换内容区域
176         resetImage();
177         switch (i) {
178         case 0:
179             mImageWeixin.setImageResource(R.drawable.tab_weixin_pressed);
180             break;
181         case 1:
182             mImageAdd.setImageResource(R.drawable.tab_address_pressed);
183             break;
184         case 2:
185             mImageFrd.setImageResource(R.drawable.tab_find_frd_pressed);
186             break;
187     
188         case 3:
189             mImageSet.setImageResource(R.drawable.tab_settings_pressed);
190             break;
191         default:
192             break;
193         }
194         mViewPager.setCurrentItem(i);
195         
196     }
197 
198 
199         //将所有功能图标的界面设为暗色
200         private void resetImage() {
201             // TODO Auto-generated method stub
202             mImageWeixin.setImageResource(R.drawable.tab_weixin_normal);
203             mImageAdd.setImageResource(R.drawable.tab_address_normal);
204             mImageFrd.setImageResource(R.drawable.tab_find_frd_normal);
205             mImageSet.setImageResource(R.drawable.tab_settings_normal);
206             
207         }
208 
209     
210 }
MainActivity

四个相似的.java文件

WeixinFragment.java

 1 package com.example.tab_three;
 2 
 3 import android.os.Bundle;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 
 9 public class WeixinFragment extends Fragment{
10     
11     @Override
12     public View onCreateView(LayoutInflater inflater, ViewGroup container,
13             Bundle savedInstanceState) {
14         // TODO Auto-generated method stub
15     
16         
17         return inflater.inflate(R.layout.tab_1, container,false);
18     }
19 }
WeixinFragment.java

SetFragment.java

 1 package com.example.tab_three;
 2 
 3 import android.os.Bundle;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 
 9 public class SetFragment extends Fragment{
10     
11     @Override
12     public View onCreateView(LayoutInflater inflater, ViewGroup container,
13             Bundle savedInstanceState) {
14         // TODO Auto-generated method stub
15     
16         
17         return inflater.inflate(R.layout.tab_4, container,false);
18     }
19 }
SetFragment.java

FrdFragment.java

 1 package com.example.tab_three;
 2 
 3 import android.os.Bundle;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 
 9 public class FrdFragment extends Fragment{
10     @Override
11     public View onCreateView(LayoutInflater inflater, ViewGroup container,
12             Bundle savedInstanceState) {
13         // TODO Auto-generated method stub
14         return inflater.inflate(R.layout.tab_3, container,false);
15     }
16 
17 }
FrdFragment.xml

AddFragment.java

 1 package com.example.tab_three;
 2 
 3 import android.os.Bundle;
 4 import android.support.v4.app.Fragment;
 5 import android.view.LayoutInflater;
 6 import android.view.View;
 7 import android.view.ViewGroup;
 8 
 9 public class AddFragment extends Fragment{
10     
11     @Override
12     public View onCreateView(LayoutInflater inflater, ViewGroup container,
13             Bundle savedInstanceState) {
14         // TODO Auto-generated method stub
15     
16         
17         return inflater.inflate(R.layout.tab_2, container,false);
18     }
19 }
AddFragment.xml

 

目录
打赏
0
0
0
0
7
分享
相关文章
旅游社用什么工具收报名 + 资料?不开发 App 也能自动收集信息
本文探讨了旅游行业中报名信息收集的常见痛点及解决方案,重点介绍了二维码表单工具在提升信息收集效率、简化操作流程方面的优势。通过对比多种工具,分析其适用场景与实际应用逻辑,为一线旅游从业者提供高效、低成本的执行参考。
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。
使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件
# 使用DevEcoStudio 开发、编译鸿蒙 NEXT_APP 以及使用中文插件 #鸿蒙开发工具 #DevEco Studio
208 1
【一步步开发AI运动APP】十、微调优化内置运动分析器,灵活适配不同的应用场景
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用`ISportOptimizer`对内置运动分析器进行微调优化。相比小程序,APP框架(如uni-app)因技术差异,无法直接修改运动分析器参数,因此提供了统一的优化机制。开发者可通过`ISportOptimizer`获取和更新检测规则、动作样本等,灵活适应不同场景需求,如全民运动赛事的宽松模式或学生体测的严格模式。文中还提供了示例代码,展示如何对具体运动项目(如仰卧起坐)进行优化。需要注意的是,微调优化适用于标准动作的小范围调整,若动作变化过大(如花式跳绳),可期待后续自定义扩展功能。
Thanox安卓系统增加工具下载,管理、阻止、限制后台每个APP运行情况
Thanox是一款Android系统管理工具,专注于权限、后台启动及运行管理。支持应用冻结、系统优化、UI自定义和模块管理,基于Xposed框架开发,安全可靠且开源免费,兼容Android 6.0及以上版本。
87 4
不用开发APP,也能实现设备巡检自动提醒和记录归档
设备巡检新方案!告别纸质表格,用二维码轻松搞定自动提醒和记录归档。某工厂分享如何通过草料二维码实现一物一码、扫码填写巡检信息,自动生成数据归档,还能设置定期提醒,确保巡检任务按时完成。无需额外开发 App,低成本高效管理,为设备巡检提供简单又实用的解决方案。
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
181 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践

热门文章

最新文章

下一篇
BFE 初探
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等