`
LeoAioria
  • 浏览: 10072 次
  • 性别: 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
评论
发表评论

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

相关推荐

    ViewPager+Fragment的app导航Activity的实现

    在Android应用开发中，`ViewPager` 和 `Fragment` 是构建多页面、动态界面的重要组件，尤其在实现App导航Activity时，它们的结合使用能够提供流畅的滑动切换效果。本篇将详细介绍如何利用 `ViewPager` 和 `Fragment`...

    Fragment+viewpagerIndicator实现APP主界面.zip

    综上所述，"Fragment+ViewPagerIndicator实现APP主界面"是Android开发中一种高效、灵活的设计方式，能够为用户提供直观、便捷的界面导航，同时充分利用了Fragment的模块化优势和ViewPager的滑动功能。通过合理地组合...

    Fragment+Viewpager实现app主界面.zip

    在Android应用开发中，"Fragment+ViewPager实现app主界面"是一种常见的设计模式，它用于创建一个可滑动的多面板用户界面。Fragment是Android SDK提供的一种组件，它允许开发者在单个Activity中添加多个可独立操作的...

    Android ViewPager+Fragment实现QQ界面.rar

    在Android开发中，ViewPager是一种非常重要的视图切换组件，它允许用户通过左右滑动来浏览多个页面，这种设计常用于应用的主界面、设置界面或者像QQ这样的社交应用中。结合Fragment，我们可以创建一个功能丰富的多...

    viewpager+fragment切换页面

    创建`activity_main.xml`和`fragment_my.xml`布局文件，分别用于设置`ViewPager`和`Fragment`的界面。例如，`fragment_my.xml`可以包含一个简单的TextView来展示页面内容。 至此，一个基本的`ViewPager + Fragment`...

    ViewPager&amp;Fragment实现页面切换、底部导航栏

    1. **创建Fragment类**：首先，我们需要为每个页面创建一个Fragment子类，继承自`androidx.fragment.app.Fragment`。每个Fragment应包含自己的布局文件，并实现必要的业务逻辑。 2. **设置ViewPager**：在主...

    用Fragment+Viewpager+BottomNavigationView实现界面切换

    在Activity中，使用`BottomNavigationView.OnNavigationItemSelectedListener`监听菜单项的点击事件，并在`onNavigationItemSelected`方法中根据选中的菜单项更新`ViewPager`当前显示的`Fragment`。 6. **连接...

    android viewpager+fragment实现底部导航栏

    2. **设置布局**：在主Activity的布局文件中添加`ViewPager`和`BottomNavigationView`。`ViewPager`用于显示和切换`Fragment`，而`BottomNavigationView`则用于显示底部导航栏并处理点击事件。 ```xml &lt;androidx....

    viewpager+fragment

    在Android开发中，`ViewPager`和`Fragment`是构建复杂用户界面（UI）的重要组件，尤其是在设计滑动页面切换的主界面时。本教程将深入探讨如何利用`ViewPager`和`Fragment`来实现一个功能丰富的主页UI显示。 `...

    Android Tab（TabLayout+Fragment）实现源码

    在这个项目中，可能包含了一个主Activity，它设置了TabLayout和ViewPager，以及几个Fragment类，每个Fragment代表一个Tab的内容。项目的源码可能展示了如何自定义Fragment的内容，以及如何在Adapter中设置Tab的标题...

    仿闲鱼tabbar+fragment+二次点击刷新当前fragment

    综上所述，实现"仿闲鱼tabbar+fragment+二次点击刷新当前fragment"需要对Android的Fragment、TabLayout、ViewPager有深入理解，并熟练掌握事件处理和界面交互技巧。通过实践和不断优化，我们可以创建出功能完备且...

    fragment底部导航栏

    代码文件通常会包含Fragment的实现、主Activity的布局和事件处理，以及底部导航栏的菜单定义。图片素材则可能用于自定义导航栏的图标，以满足应用的视觉风格。通过学习这些素材，你可以更好地理解和实现底部导航栏...

    Viewpager-Fragment 无限制添加

    在实现动态添加`Fragment`到`ViewPager`时，我们首先需要定义一个基础的`Fragment`类，这个类通常会继承自`androidx.fragment.app.Fragment`。在这个`Fragment`中，我们将编写页面的具体内容和布局。例如： ```java...

    ViewPage+Fragment界面滑动

    - **Fragment**：一种可以嵌入到`Activity`中的UI片段，用于构建复杂的UI界面，每个`Fragment`代表一个独立的屏幕部分。 - **RadioGroup**：一种容器控件，用于包含多个`RadioButton`，并确保在同一时间只能有一个`...

    ViewPager整合Fragment实现导航

    在本教程中，我们将探讨如何利用ViewPager整合Fragment来创建一个动态的、可滑动的Tab导航界面。 首先，我们需要了解ViewPager的基本概念。ViewPager是Android Support Library中的一个控件，它可以展示一系列的...

    android利用viewPager和Fragment实现典型的选项卡界面

    在Android应用开发中，创建一个典型的选项卡界面是常见的需求，可以为用户提供多视图的交互体验。`ViewPager`和`Fragment...通过分析这些文件，可以更深入地理解`ViewPager`和`Fragment`在实现选项卡界面中的具体用法。

    高仿微信6.0主界面

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

    基于Android的Fragment+ViewPager实现滑屛切换界面应用设计与实现1(源码)

    在Android应用开发中，Fragment和ViewPager是两个非常重要的组件，它们常常被用来构建动态、交互性强的用户界面。本教程将深入探讨如何结合这两者来实现一个左右滑动切换界面的应用设计与实现。 Fragment是Android ...

    Fragment 结合viewpager使用 和Fragment 多次套用

    1. **创建Fragment类**：首先，你需要为每个要在`ViewPager`中展示的`Fragment`创建一个对应的类，继承自`androidx.fragment.app.Fragment`（如果是AndroidX库）或`android.app.Fragment`（如果是支持库）。...

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