ViewPager+Fragment搭建App菜单主界面

于 2015-05-07 10:43:15 发布 · 202 阅读 · 0
文章标签：

#ViewPager #Fragment

本文介绍了一种类似于微信的App底部导航菜单实现方法。通过使用Android的ViewPager和Fragment组件，实现了底部菜单按钮点击切换主界面内容的功能，并提供了完整的代码示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目前主流的App导航菜单布局基本上有3中：

1.类似微信：底部横向排列菜单按钮，点击切换主界面内容（也支持左右滑动切换）

2.抽屉式左右滑动导航：点击主界面左上角菜单图标，滑出菜单界面（菜单界面item纵向排列），点击菜单item,收起菜单页，同时切换主界面内容

3.九宫格导航菜单：好像这种用得越来越少了

 

这里实现第一种方法

 

下面开始coding:

1.主界面布局 activity_main.xml

<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">

    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#ffffff">
        
    </LinearLayout>
    
    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000000"/>
    
	<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#ffffff"/>
 	<View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="#000000"/>

    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/bottom" />
</LinearLayout>

 2.引用的底部菜单布局 bottom.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF"
    android:orientation="horizontal">

    <LinearLayout 
        android:id="@+id/menu1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
       	<ImageView 
       	    android:id="@+id/_image1"
       	    android:layout_width="30dp"
       	    android:layout_height="30dp"
       	    android:src="@drawable/ic_launcher"/>
       	<TextView 
       	    android:id="@+id/_text1"
       	    android:layout_width="wrap_content"
       	    android:layout_height="wrap_content"
            android:textColor="#00ACEE"
       	    android:text="aa"/>
    </LinearLayout>
    
    <LinearLayout 
        android:id="@+id/menu2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
       	<ImageView 
       	    android:id="@+id/_image2"
       	    android:layout_width="30dp"
       	    android:layout_height="30dp"
       	    android:src="@drawable/ic_launcher"/>
       	<TextView 
       	    android:id="@+id/_text2"
       	    android:layout_width="wrap_content"
       	    android:layout_height="wrap_content"
       	    android:text="bb"/>
    </LinearLayout>
    
    <LinearLayout 
        android:id="@+id/menu3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
       	<ImageView 
       	    android:id="@+id/_image3"
       	    android:layout_width="30dp"
       	    android:layout_height="30dp"
       	    android:src="@drawable/ic_launcher"/>
       	<TextView 
       	    android:id="@+id/_text3"
       	    android:layout_width="wrap_content"
       	    android:layout_height="wrap_content"
       	    android:text="cc"/>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/menu4"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/_image4"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_launcher"/>
        <TextView
            android:id="@+id/_text4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="dd"/>
    </LinearLayout>

</LinearLayout>

 3.主界面Activity：MainActivity.java

    注意：继承FragmentActivity，而不是Activity 

package com.example.viewpagerfragment;

import java.util.ArrayList;
import java.util.List;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import com.example.adapter.MyAdapter;
import com.example.fragment.Fragment1;
import com.example.fragment.Fragment2;
import com.example.fragment.Fragment3;
import com.example.fragment.Fragment4;

public class MainActivity extends FragmentActivity {

	ViewPager viewPager = null;
	private List<Fragment> list; // Tab页面列表
    private View view;
    private Fragment1 fragment1;
    private Fragment2 fragment2;
    private Fragment3 fragment3;
    private Fragment4 fragment4;
    
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		LayoutInflater inflater = LayoutInflater.from(this);
        view = inflater.inflate(R.layout.activity_main, null);
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE); //去除顶部标题
        setContentView(view);
		
		initialize();
		
		initViewPager();
	}

	private void initialize(){
		viewPager = (ViewPager)findViewById(R.id.viewpager);
	}
	
	private void initViewPager(){
//      viewPager = (ViewPager)findViewById(R.id.viewpager);
        list = new ArrayList<Fragment>();
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        fragment3 = new Fragment3();
        fragment4 = new Fragment4();
        list.add(fragment1);
        list.add(fragment2);
        list.add(fragment3);
        list.add(fragment4);

        FragmentManager fragmentManager = getSupportFragmentManager();
        viewPager.setAdapter(new MyAdapter(fragmentManager,list));
        viewPager.setCurrentItem(0);
        viewPager.setOnPageChangeListener(new MyOnPageChangeListener());

        LinearLayout menu1 = (LinearLayout) view.findViewById(R.id.menu1);
        LinearLayout menu2 = (LinearLayout) view.findViewById(R.id.menu2);
        LinearLayout menu3 = (LinearLayout) view.findViewById(R.id.menu3);
        LinearLayout menu4 = (LinearLayout) view.findViewById(R.id.menu4);
        menu1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setBottomMenu(0);
                viewPager.setCurrentItem(0);
            }
        });
        menu2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setBottomMenu(1);
                viewPager.setCurrentItem(1);
            }
        });
        menu3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setBottomMenu(2);
                viewPager.setCurrentItem(2);
            }
        });
        menu4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                setBottomMenu(3);
                viewPager.setCurrentItem(3);
            }
        });
    }
	

    /**
     * 页卡切换监听
     */
    public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
        public void onPageSelected(int arg0) {
            setBottomMenu(arg0);
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }
    }

    /**
     * 设置底部菜单按钮
     */
    public void setBottomMenu(int position){
        ImageView image1 = (ImageView)view.findViewById(R.id._image1);
        ImageView image2 = (ImageView)view.findViewById(R.id._image2);
        ImageView image3 = (ImageView)view.findViewById(R.id._image3);
        ImageView image4 = (ImageView)view.findViewById(R.id._image4);
        TextView text1 = (TextView)view.findViewById(R.id._text1);
        TextView text2 = (TextView)view.findViewById(R.id._text2);
        TextView text3 = (TextView)view.findViewById(R.id._text3);
        TextView text4 = (TextView)view.findViewById(R.id._text4);
        image1.setImageResource(R.drawable.ic_launcher);
        image2.setImageResource(R.drawable.ic_launcher);
        image3.setImageResource(R.drawable.ic_launcher);
        image4.setImageResource(R.drawable.ic_launcher);
        text1.setTextColor(Color.parseColor("#ADADAD"));
        text2.setTextColor(Color.parseColor("#ADADAD"));
        text3.setTextColor(Color.parseColor("#ADADAD"));
        text4.setTextColor(Color.parseColor("#ADADAD"));
        switch (position) {
            case 0:
                image1.setImageResource(R.drawable.ic_launcher);
                text1.setTextColor(Color.parseColor("#00ACEE"));
                break;
            case 1:
                image2.setImageResource(R.drawable.ic_launcher);
                text2.setTextColor(Color.parseColor("#00ACEE"));
                break;
            case 2:
                image3.setImageResource(R.drawable.ic_launcher);
                text3.setTextColor(Color.parseColor("#00ACEE"));
                break;
            case 3:
                image4.setImageResource(R.drawable.ic_launcher);
                text4.setTextColor(Color.parseColor("#00ACEE"));
                break;
            default:
                break;
        }
    }
    
    private long exitTime = 0;
    /**
     * 重写返回键事件，按两次退出程序
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){
            if((System.currentTimeMillis()-exitTime) > 2000){
                Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
                System.exit(0);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

 4.Adapter

    继承FragmentPagerAdapter

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;

public class MyAdapter extends FragmentPagerAdapter{

	List<Fragment> list = null;

    public MyAdapter(FragmentManager fragmentManager,List<Fragment> list){
        super(fragmentManager);
        this.list = list;
    }

	@Override
	public Fragment getItem(int position) {
		return list.get(position);
	}

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

}

 5.Fragment

package com.example.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.viewpagerfragment.R;

public class Fragment1 extends Fragment {

    View view = null;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
		view = inflater.inflate(R.layout.fragment1, null);
		return view;
	}

	
	@Override
	public void onDestroy() {
		super.onDestroy();
	}

	@Override
	public void onPause() {
		super.onPause();
	}

	@Override
	public void onResume() {
		super.onResume();
	}

}

 

 

 

 

 

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值