`
LeoAioria
  • 浏览: 9768 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

ViewPager+Fragment搭建App菜单主界面

ViewPagerFragment 
阅读更多

目前主流的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();
	}

}

 

 

 

 

 

 

 

 

 

  • 大小: 22.6 KB
  • 大小: 24.2 KB
分享到：
Android程序中任意位置获取Context
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Android ViewPager+Fragment超高仿微信主界面

    Android ViewPager+RadioGroup+Fragment超高仿微信主界面底部滑动、点击菜单

    Fragment+viewpagerIndicator实现APP主界面.zip

    Fragment+viewpagerIndicator实现APP主界面.zip

    Fragment+Viewpager实现app主界面.zip

    Fragment+Viewpager实现app主界面.zip 可滑动 Fragment为内容控制

    高仿微信6.0主界面

    高仿微信6.0主界面 1.使用viewpager+fragment 编写 主界面的 tab bar; 2.自定义 OverflowButton 修改button 图标； 3.修改 tab 图标颜色 切换； 4.解决内存 杀去导致 图标和view 不一致；

    Android App在ViewPager中使用Fragment的实例讲解

    据说Android最推荐的是在ViewPager中使用FragMent，即ViewPager中的页面不像前面那样用LayoutInflater直接从布局文件加载，而是一个个Fragment。注意这里的Fragment 是android.support.v4.view包里的Fragment,而不是...

    APP-Tabs:多种多样的App主界面Tab实现方法

    多种多样的App主界面Tab实现方法 TAB第一种实现方式：ViewPager+RadioGroup TAB第二种实现方式：Fragment+RadioGroup TAB第三种实现方式：FragmentPagerAdapter+ViewPager TAB第四种实现方式：ViewPagerIndicator+...

    PocketWeather

    消息界面使用TabLayout+ViewPager分为“口袋消息”界面和“历史上的今天界面”。消息界面的数据是从聚合数据网上抓取的。 作为一个综合性的app，口袋天气具备了登陆注册功能，使用的是Bmob后端云服务。短信验证码...

    Android在多种设计下实现懒加载机制的方法

    查看了大多数资料只介绍了在 View Pager + Fragment 组合的情况下实现的懒加载，但是现在大多数App更多的是 Fragmentmanager 去管理主页面多个 Fragment 的显示与隐藏,然后主界面的某个或多个 Fragment 里又嵌套了多...

    Android利用ViewPager实现带小圆球的图片滑动

    如有些播放器一样，在开始安装 app 时，都会出现引导界面，然后才进入主界面，但是在重新启动 app 时却不会再出现该引导界面。 下面实现的就是该类似的功能，只是把引导界面都做成了图片显示，这样更能够体现不同的...

    APP前端开发设计文档

    APP前端开发设计文档 根据《UI设计说明》文档中对UI界面的设计，主界面内是一个ViewPager空间，内放两个Fragment，分别是内放百度MapView的GISFragment和用于列表显示的

    android顶部滑动导航

    主界面 android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F0EFF5" &gt; android:id="@+id/sayit_rl_tab" android:layout_width="fill_parent" android:...

Magicbox
Global site tag (gtag.js) - Google Analytics