安卓开发_慕课网_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

 

相关文章
|
11天前
|
Android开发 容器
35. 【Android教程】视频页面:ViewPager
35. 【Android教程】视频页面:ViewPager
19 3
|
29天前
|
Android开发 移动开发 小程序
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
binder机制原理面试,安卓app开发教程
|
1天前
|
前端开发 JavaScript Android开发
手机APP开发|基于安卓APP实现掌上党支部——党员app
手机APP开发|基于安卓APP实现掌上党支部——党员app
|
2天前
|
存储 Android开发 Kotlin
Kotlin开发安卓app,在使用 MediaPlayer 播放 res/raw 中的音乐时遇到突然中断的问题,而 onErrorListener 没有接收到任何报错
在使用 Android MediaPlayer 播放 res/raw 中的音乐时遇到中断问题,可能的原因包括资源问题、媒体文件编码格式、生命周期管理和设备资源配置。要排查问题,检查音频文件是否正确包含,格式编码是否支持,MediaPlayer 是否正确管理及释放,以及设备是否有足够存储和配置。通过设置 onErrorListener 日志和确保在 onDestroy 中释放资源来调试。如果文件过大,考虑使用 AssetManager。遵循这些步骤可帮助诊断并解决播放中断的问题。
|
2天前
|
Android开发 Kotlin
kotlin开发安卓应用 如何修改app安装后的名称
在 Android 应用中,要修改安装后的显示名称,需更新 AndroidManifest.xml 文件中 application 标签的 android:label 属性。可直接在该属性内设置新名称,或在 res/values/strings.xml 文件中修改 app_name 并在 manifest 中引用。推荐使用 strings.xml 方式,以便支持多语言和集中管理。
|
3天前
|
缓存 Android开发 Kotlin
【安卓app开发】kotlin Jetpack Compose框架 | 先用OKhttp下载远程音频文件再使用ExoPlayer播放
使用 Kotlin 的 Jetpack Compose 开发安卓应用时,可以结合 OkHttp 下载远程音频文件和 ExoPlayer 进行播放。在 `build.gradle` 添加相关依赖后,示例代码展示了如何下载音频并用 ExoPlayer 播放。代码包括添加依赖、下载文件、播放文件及简单的 Compose UI。注意,示例未包含完整错误处理和资源释放,实际应用需补充这些内容。
|
3天前
|
存储 Android开发 Kotlin
开发安卓app OKhttp下载后使用MediaPlayer播放
在Android Jetpack Compose应用程序中,要使用OkHttp下载远程音频文件并在本地播放,你需要完成以下几个步骤: 1. **添加依赖**:确保`build.gradle`文件包含OkHttp和Jetpack Compose的相关依赖。 2. **下载逻辑**:创建一个`suspend`函数,使用OkHttp发起网络请求下载音频文件到本地。 3. **播放逻辑**:利用`MediaPlayer`管理音频播放状态。 4. **Compose UI**:构建用户界面,包含下载和播放音频的按钮。
|
3天前
|
存储 Android开发
安卓app,MediaPlayer播放本地音频 | 按钮控制播放和停止
在Jetpack Compose中,不直接操作原生Android组件如`Button`和`MediaPlayer`,而是使用Compose UI构建器定义界面并结合ViewModel管理音频播放逻辑。以下示例展示如何播放本地音频并用按钮控制播放/停止:创建一个`AudioPlayerViewModel`管理`MediaPlayer`实例和播放状态,然后在Compose UI中使用`Button`根据`isPlaying`状态控制播放。记得在`MainActivity`设置Compose UI,并处理相关依赖和权限。
|
6天前
|
安全 Android开发 数据安全/隐私保护
同样的 APP 为何在 Android 8 以后网络感觉变卡?
【6月更文挑战第8天】Android 8 及以后系统中,APP 网络感觉变卡源于更严格的安全机制和后台限制,系统对网络优化的侧重改变,以及APP自身兼容性问题。开发者需优化APP,适应新系统,用户可更新APP或检查权限设置。通过共同努力,有望改善网络卡顿现象,提升用户体验。
|
29天前
|
Android开发
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)
Android使用ViewPager实现图片轮播系列之三:手动滑动 + 左右箭头(1)