ViewPager+Fragment实现侧滑导航栏

本文实例为大家分享了ViewPager+Fragment实现侧滑导航栏的具体代码,供大家参考,具体内容如下

本文主要整理和记录下

本来想用Gif图片,这里暂时就用图片代替下吧:

Activity:

package com.example.administrator.android006;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.example.administrator.android006.Fragment.fragment1;
import com.example.administrator.android006.Fragment.fragment2;
import com.example.administrator.android006.Fragment.fragment3;
import com.example.administrator.android006.Fragment.fragment4;

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

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    //顶部4个按钮
    private LinearLayout main_home_layout,main_msg_layout,main_pal_layout,main_me_layout;
    private ViewPager main_mViewPager;
    //ViewPager的适配器
    private FragmentPagerAdapter mAdapter;
    //4个Fragment碎片的集合
    private List<Fragment> mFragments = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化,加载碎片
        initView();
        initAdapter();
    }

    public void initAdapter(){
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }

            @Override
            public int getCount() {
                return mFragments.size();
            }
        };
        main_mViewPager.setAdapter(mAdapter);
        main_mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //重置ImageView的颜色
                resetImg();
                //设置选中时的图片
                switch (position) {
                    case 0:
                        ((ImageView) main_home_layout.findViewById(R.id.main_home_img))
                                .setImageResource(R.drawable.home_black);
                        break;
                    case 1:
                        ((ImageView) main_msg_layout.findViewById(R.id.main_msg_img))
                                .setImageResource(R.drawable.msg_black);
                        break;
                    case 2:
                        ((ImageView) main_pal_layout.findViewById(R.id.main_pal_img))
                                .setImageResource(R.drawable.pal_black);
                        break;
                    case 3:
                        ((ImageView) main_me_layout.findViewById(R.id.main_me_img))
                                .setImageResource(R.drawable.me_black);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    //重置ImageView的图片
    protected void resetImg(){
        ((ImageView) main_home_layout.findViewById(R.id.main_home_img))
                .setImageResource(R.drawable.home_gray);
        ((ImageView) main_msg_layout.findViewById(R.id.main_msg_img))
                .setImageResource(R.drawable.msg_gray);
        ((ImageView) main_pal_layout.findViewById(R.id.main_pal_img))
                .setImageResource(R.drawable.pal_gray);
        ((ImageView) main_me_layout.findViewById(R.id.main_me_img))
                .setImageResource(R.drawable.me_gray);
    }

    public void initView(){
        main_home_layout = findViewById(R.id.main_home_layout);
        main_msg_layout = findViewById(R.id.main_msg_layout);
        main_pal_layout = findViewById(R.id.main_pal_layout);
        main_me_layout = findViewById(R.id.main_me_layout);
        main_mViewPager = findViewById(R.id.main_mViewPager);

        fragment1 vp_fr1 = new fragment1();
        fragment2 vp_fr2 = new fragment2();
        fragment3 vp_fr3 = new fragment3();
        fragment4 vp_fr4 = new fragment4();
        mFragments.add(vp_fr1);
        mFragments.add(vp_fr2);
        mFragments.add(vp_fr3);
        mFragments.add(vp_fr4);
        main_home_layout.setOnClickListener(this);
        main_msg_layout.setOnClickListener(this);
        main_pal_layout.setOnClickListener(this);
        main_me_layout.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            //点击首页时,设置ViewPager的下标为0
            case R.id.main_home_layout:
                main_mViewPager.setCurrentItem(0);
                break;
            //点击消息时,设置ViewPager的下标为1
            case R.id.main_msg_layout:
                main_mViewPager.setCurrentItem(1);
                break;
            //点击好友时,设置ViewPager的下标为2
            case R.id.main_pal_layout:
                main_mViewPager.setCurrentItem(2);
                break;
            //点击我时,设置ViewPager的下标为3
            case R.id.main_me_layout:
                main_mViewPager.setCurrentItem(3);
                break;
        }
    }
}

.xml文件中:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        >
        <LinearLayout
            android:id="@+id/main_home_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:id="@+id/main_home_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/home_black"
                android:scaleType="fitXY"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="首页"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/main_msg_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:id="@+id/main_msg_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/msg_gray"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="消息"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/main_pal_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:id="@+id/main_pal_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/pal_gray"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="好友"
                />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/main_me_layout"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:orientation="vertical"
            android:gravity="center"
            >
            <ImageView
                android:id="@+id/main_me_img"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:src="@drawable/me_gray"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我"
                />
        </LinearLayout>
    </LinearLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/main_mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>
</LinearLayout>

这个是ViewPager中的其中一个Fragment:

public class fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1,container,false);
    }
}

其Fragment布局:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="我是Fragment1"
        />

</android.support.constraint.ConstraintLayout>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android 利用ViewPager+GridView实现首页导航栏布局分页效果

    最近我尝试使用ViewPager+GridView实现的,看起来一切正常,废话不多说,具体代码如下: 如图是效果图 首先分析下思路 1.首先是怎么布局:整体是一个ViewPager将GridView作为一个View添加到ViewPager的adapter中,下方是圆点 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.a

  • ViewPager顶部导航栏联动效果(标题栏条目多)

    如果标题栏过多,超过屏幕的宽度,该怎么弄,下面我们就来解决一下,效果如下: 其实和之前写的也差不多,我就是在哪个demo里面添加和修改了一下,就加了几个title标题,加了几个图片,最重要的是给TableLayout添加了一个属性: app:tabMode="scrollable" 这个属性就是设置设置TableLayout可以滚动,看我滚动上面的标题栏: 这里我还给标题栏设置了几个附加的属性,让它显得更好看: <span style="white-space:pre&

  • 使用Fragment+ViewPager实现底部导航栏

    前几天准备写一个小程序,一直认为fragment实现底部导航栏,是很容易的事情,可是却遇到了前所未有的问题,先给大家贴出来我出错的界面布局代码: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_paren

  • Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

    前言 在谷歌发布Android Design Support Library之前,app底部tab布局的实现方法就有很多种,其中有RadioGroup+FrameLayout.TabHost+Fragment.FragmentPagerAdapter+ViewPager等方法,虽然这些方法虽然能达到同样的效果,但我个人总觉得有些繁琐.然而,Google在2015的IO大会上,给开发者们带来了全新的Android Design Support Library,里面包含了许多新控件,这些新控件有许多

  • Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)

    ViewPagerIndicator导航栏指示器运行效果: 实现这个效果,我是看了很多大神写的博客和视频后自己敲的,欢迎指正 github地址:https://github.com/dl10210950/TabViewPagerIndicator 自定义一个ViewPagerIndicator 自定义一个Indicator继承LinearLayout,在构造方法里面设置画笔的一些属性 public ViewPagerIndicator(Context context, AttributeSet

  • ViewPager+Fragment实现侧滑导航栏

    本文实例为大家分享了ViewPager+Fragment实现侧滑导航栏的具体代码,供大家参考,具体内容如下 本文主要整理和记录下 本来想用Gif图片,这里暂时就用图片代替下吧: Activity: package com.example.administrator.android006; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.su

  • Android程序开发之Fragment实现底部导航栏实例代码

    流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment

  • Android侧滑导航栏的实例代码

    今天学习的新内容是侧滑导航栏,我想大家肯定都比较熟悉了,因为这个效果在qq里面也有,最近一直跟室友们玩的游戏是快速让自己的头像的点赞量上千.当然我的效果跟qq是没有办法比的,因为那里面的功能是在是太强大了.下面我来展示一下我做的效果截图. 我做的界面有点丑,但是对比之前已经是有了很大的改观了.想做这样的效果的话可以ps几张比较好看的图片. 下面就是粘贴我代码的时间了. activity_main.xml <cn.edu.rjxy.activity.DragLayout xmlns:android

  • 使用RadioButton+Fragment实现底部导航栏效果

    底部导航栏,在我们App项目中是非常常用!而且实现它的方式很多,今天我们就来使用RadioButton+Fragment实现底部导航栏! 下面就让我们动手吧,首先我们打开RadioButtonDemo这个项目,首先修改activity_main.xml文件如下: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.androi

  • Android 中使用RadioGroup和Fragment实现底部导航栏的功能

    在一些购物商城中经常会遇到这类效果,效果图如下: 先看效果图 步骤一: 完成对主界面main.xml的创建: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/

  • Android Fragment实现顶部、底部导航栏

    前言 无论是顶部还是底部导航栏,都是大多数APP的标配,网络上的相关实现教程也非常之多.最近回忆起以前写的小项目,发现对这块内容有些遗忘,不妨就再整理一遍代码逻辑,记录下来,方便日后查阅(指复制粘贴). 实现的方式有很多,本文采用以下方式实现: 底部导航栏:Fragment + BottomNavigationView 顶部导航栏:Fragment + ViewPager2 + TabLayout 底部导航栏 <布局文件> <?xml version="1.0" en

  • 超简单的几行代码搞定Android底部导航栏功能

    超简单,几行代码搞定Android底部导航栏-–应项目需求以及小伙伴的留言,新加了两个方法: 设置底部导航栏背景图片 添加底部导航栏选项卡切换监听事件 底部导航栏的实现也不难,就是下边是几个Tab切换,上边一般是一个FrameLayout,然后FrameLayout中切换fragment. 网上有不少关于Android底部导航栏的文章,不过好像都只是关于下边Tab切的,没有实现Tab与fragment的联动,用的时候还要自己手写这部分代码,对我这个比较懒(据说,懒是程序员的一种美德_#)得程序员

  • Android使用fragment实现左侧导航

    使用简单的fragment实现左侧导航,供大家参考,具体内容如下 先上效果图: MainActivity.java public class MainActivity extends FragmentActivity { // private Handler handler; private ViewPager fragmentViewPager; private ListView leftListView; private List<Fragment> fragmentlist; priva

随机推荐