Android-底部菜单实现(Fragment+ViewPage)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/LABLENET/article/details/48542461

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{

	@Override
	public 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;
	}

	@Override
	public Fragment getItem(int arg0) {
		return fragments.get(arg0);
	}

	@Override
	public int getCount() {
		return fragments.size();
	}

	/**
	 * 下面的 instantiteItem和destroyItem两个方法 创建不需要修改
	 * 
	 */

	@Override
	public Object instantiateItem(ViewGroup container, int position) {
		return super.instantiateItem(container, position);
	}

	@Override
	public 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;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_fragment_and_viewpage);
		fragments = new ArrayList<Fragment>();
		InitView();
	}

	// 初始化工作
	private void InitView() {

		// 初始化 tabs
		vp_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());
        
	}

	@Override
	public 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 item
		vp_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{

		@Override
		public void onPageSelected(int position) {
			//设置 tab 背景
			ResetTabsImg();
			SetTabsSelectedImg(position);
		}
	}
	
	
}

8.demo 免积分下载

http://download.csdn.net/detail/lablenet/9116507



展开阅读全文

没有更多推荐了,返回首页