Android-底部菜单实现（Fragment+ViewPage）

来源：互联网发布：股票历史数据 python 编辑：程序博客网时间：2024/06/06 00:27

1.回顾

上篇已经了解过基本的思路，和推荐的使用Fragment+ViewPage实现 Android底部菜单tab

2.实现

（1）业务实现

（2）Adpater实现

（3）布局实现

3.效果图

4. 布局实现

4.1 top.xml 实现

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="50dp"    android:orientation="vertical">    <TextView        android:layout_width="match_parent"        android:layout_height="match_parent"        android:text="无线"        android:textColor="@android:color/white"        android:textSize="20dp"        android:gravity="center"        android:background="@android:color/holo_blue_dark"/></LinearLayout>

4.2 底部实现

图片自己找，我就不分享了；

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="60dp"    android:background="@android:color/background_light"    android:orientation="horizontal" >    <LinearLayout        android:id="@+id/linear_shouye"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <!-- 通过设置 ImageButton  android:clickable="false" 属性 ; 使其 没有点击的属性,不和 LinearLayout抢占点击事件 -->        <ImageButton            android:id="@+id/img_shouye"            android:layout_width="30dp"            android:layout_height="30dp"            android:background="@android:color/transparent"            android:clickable="false"            android:scaleType="centerCrop"            android:src="@drawable/ic_menu_deal_on" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="首页"            android:textColor="@android:color/black"            android:textSize="16sp" />    </LinearLayout>    <LinearLayout        android:id="@+id/linear_xinxi"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/img_xinxi"            android:layout_width="30dp"            android:layout_height="30dp"            android:background="@android:color/transparent"            android:clickable="false"            android:scaleType="centerCrop"            android:src="@drawable/ic_menu_more_off" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="信息"            android:textColor="@android:color/black"            android:textSize="16sp" />    </LinearLayout>    <LinearLayout        android:id="@+id/linear_gongju"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/img_gongju"            android:layout_width="30dp"            android:layout_height="30dp"            android:background="@android:color/transparent"            android:clickable="false"            android:scaleType="centerCrop"            android:src="@drawable/ic_menu_user_off" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="工具"            android:textColor="@android:color/black"            android:textSize="16sp" />    </LinearLayout>    <LinearLayout        android:id="@+id/linner_wo"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"        android:gravity="center"        android:orientation="vertical" >        <ImageButton            android:id="@+id/img_wo"            android:layout_width="30dp"            android:layout_height="30dp"            android:background="@android:color/transparent"            android:clickable="false"            android:scaleType="centerCrop"            android:src="@drawable/ic_menu_poi_off" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="我"            android:textColor="@android:color/black"            android:textSize="16sp" />    </LinearLayout></LinearLayout>

4.3 主布局实现

<LinearLayout 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:orientation="vertical"    tools:context="${relativePackage}.${activityClass}" >       <include layout="@layout/top"/>            <!--     这里 使用 weight , 设置为 1 ,高度设置为 0dp后 就填充了 页面的剩余部分     -->    <android.support.v4.view.ViewPager        android:id="@+id/vp_fragment_viewpage"        android:layout_width="fill_parent"        android:layout_height="0dp"        android:background="#e9e9e9"        android:layout_weight="1"        >                    </android.support.v4.view.ViewPager>            <include layout="@layout/buttom"/></LinearLayout>

4.4 子页面布局实现

子页面通过 Fragment 进行加载实现；

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center_vertical"    android:orientation="vertical" >    <TextView        android:id="@+id/tv_four"        android:layout_width="match_parent"        android:layout_height="100dp"        android:gravity="center"        android:text="ViewPager FourPage"        android:textSize="20sp" />    <Button        android:id="@+id/btn_fourpage"        android:layout_width="match_parent"        android:layout_height="50dp"        android:text="点击测试" /></LinearLayout>

5.Fragment实现

四个页面对应四个Fragment；

package com.example.framement;import com.example.tabsdemo.R;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;public class PageFourFragment extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {View view=inflater.inflate(R.layout.vp_fourpage,container, false);TextView tv_four=(TextView) view.findViewById(R.id.tv_four);tv_four.setText("PageFourFragment");return view;}}

6.FragmentPageStateAdapter实现

注意：要实现 FragmentManager的构造方法，同时不要删除 super(fm);

package com.example.adapter;import java.util.List;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.view.ViewGroup;public class FragmentViewPageAdapter extends FragmentPagerAdapter {private List<Fragment> fragments;public FragmentViewPageAdapter(FragmentManager fm, List<Fragment> fragments) {super(fm);this.fragments = fragments;}@Overridepublic Fragment getItem(int arg0) {return fragments.get(arg0);}@Overridepublic int getCount() {return fragments.size();}/** * 下面的 instantiteItem和destroyItem两个方法 创建不需要修改 *  */@Overridepublic Object instantiateItem(ViewGroup container, int position) {return super.instantiateItem(container, position);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {super.destroyItem(container, position, object);}}

7.主业务实现

注意：Activity 继承于 FragmentActivity

package com.example.tabsdemo;import java.util.ArrayList;import java.util.List;import com.example.adapter.FragmentViewPageAdapter;import com.example.framement.PageFourFragment;import com.example.framement.PageOneFragment;import com.example.framement.PageThreeFragment;import com.example.framement.PageTwoFragment;import com.example.tabsdemo.PagerViewTagsActivity.vp_tabsOnChangeListener;import android.app.Activity;import android.os.Bundle;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.support.v4.view.ViewPager.SimpleOnPageChangeListener;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.View.OnClickListener;import android.widget.ImageButton;import android.widget.LinearLayout;public class FragmentAndViewpageActivity extends FragmentActivity implements OnClickListener {private ViewPager vp_fragment_viewpage;private LinearLayout linear_shouye, linear_xinxi, linear_wo, linear_gongju;private ImageButton img_shouye, img_xinxi, img_wo, img_gongju;private View one_page, two_page, three_page, four_page;private List<Fragment> fragments;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_fragment_and_viewpage);fragments = new ArrayList<Fragment>();InitView();}// 初始化工作private void InitView() {// 初始化 tabsvp_fragment_viewpage = (ViewPager) findViewById(R.id.vp_fragment_viewpage);linear_shouye = (LinearLayout) findViewById(R.id.linear_shouye);linear_gongju = (LinearLayout) findViewById(R.id.linear_gongju);linear_wo = (LinearLayout) findViewById(R.id.linner_wo);linear_xinxi = (LinearLayout) findViewById(R.id.linear_xinxi);img_gongju = (ImageButton) findViewById(R.id.img_gongju);img_shouye = (ImageButton) findViewById(R.id.img_shouye);img_wo = (ImageButton) findViewById(R.id.img_wo);img_xinxi = (ImageButton) findViewById(R.id.img_xinxi);// 初始化fragment 数据PageOneFragment pageOneFragment = new PageOneFragment();fragments.add(pageOneFragment);PageTwoFragment pageTwoFragment = new PageTwoFragment();fragments.add(pageTwoFragment);PageThreeFragment pageThreeFragment = new PageThreeFragment();fragments.add(pageThreeFragment);PageFourFragment fourFragment = new PageFourFragment();fragments.add(fourFragment);/** * 这里Activity 只有继承 FragmentActivity 的时候 ，才会 getSupportFragmentManager() */// 设置适配器FragmentViewPageAdapter fragmentViewPageAdapter = new FragmentViewPageAdapter(getSupportFragmentManager(), fragments);vp_fragment_viewpage.setAdapter(fragmentViewPageAdapter);        //给tabs 设置点击监听事件        linear_gongju.setOnClickListener(this);        linear_shouye.setOnClickListener(this);        linear_wo.setOnClickListener(this);        linear_xinxi.setOnClickListener(this);                //设置ViewPage 切换效果        vp_fragment_viewpage.setOnPageChangeListener(new vpOnChangeListener());        }@Overridepublic void onClick(View v) {ResetTabsImg();switch (v.getId()) {case R.id.linear_shouye:SetTabsSelectedImg(0);break;case R.id.linear_gongju:SetTabsSelectedImg(2);break;case R.id.linner_wo:SetTabsSelectedImg(3);break;case R.id.linear_xinxi:SetTabsSelectedImg(1);break;}}/** * (1)实现选中后的 tabs的img * (2)切换 viewpager item * @param i */private void SetTabsSelectedImg(int i) {switch (i) {case 0:img_shouye.setImageResource(R.drawable.ic_menu_deal_on);break;case 1:img_xinxi.setImageResource(R.drawable.ic_menu_more_on);break;case 2:img_gongju.setImageResource(R.drawable.ic_menu_user_on);break;case 3:img_wo.setImageResource(R.drawable.ic_menu_poi_on);break;}//切换 viewpage itemvp_fragment_viewpage.setCurrentItem(i);}/** * 将 tabs 的 图片设置 默认颜色 */private void ResetTabsImg() {// 重置tab 图片img_gongju.setImageResource(R.drawable.ic_menu_user_off);img_shouye.setImageResource(R.drawable.ic_menu_deal_off);img_wo.setImageResource(R.drawable.ic_menu_poi_off);img_xinxi.setImageResource(R.drawable.ic_menu_more_off);}/** * 实现滑动 切换 tabs * @author yuan */class vpOnChangeListener extends SimpleOnPageChangeListener{@Overridepublic void onPageSelected(int position) {//设置 tab 背景ResetTabsImg();SetTabsSelectedImg(position);}}}