安卓第五天---将Fragment添加到ViewPager中并实现与底部导航栏的交互(简单的例子)

最新推荐文章于 2023-03-27 15:57:48 发布

原创最新推荐文章于 2023-03-27 15:57:48 发布 · 946 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Android

本文介绍了如何在Android应用中结合ViewPager和Fragment实现底部导航栏的交互。首先，在主页面设置ViewPager和底部导航栏，接着创建多个Fragment并将它们添加到List中供ViewPager使用。当点击底部导航栏的不同位置时，ViewPager会切换到相应的Fragment。同时，详细讲述了Fragment的布局设置、适配器FragmentViewPagerAdapter的创建以及底部栏的交互逻辑实现。

首先,思路是在一个页面设置一个ViewPager,并且在底部添加一个导航栏!
然后创建几个Fragment,将Fragment添加到一个List列表中以便加入ViewPager的适配器中.
其次将底部的控件设置点击事件,点击底部导航栏的位置,可以是ViewPager切换到对应的位置上,以便于显示对应的Fragment.
最后设置ViewPager滑动于底部导航栏的交互.
在这里插入图片描述

首先,设置布局main_activity.xml代码:

<?xml version="1.0" encoding="utf-8"?>

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/bottom_bar"></android.support.v4.view.ViewPager>

<TextView
    android:layout_width="match_parent"
    android:layout_height="1dp"
    android:layout_above="@id/bottom_bar"
    android:background="#000000" />

<LinearLayout
    android:id="@+id/bottom_bar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    android:weightSum="3">


    <ImageView
        android:id="@+id/home_img"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#FFF5EE"
        android:padding="5dp"
        android:src="@drawable/home_unselected" />

    <ImageView
        android:id="@+id/star_img"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#FFF5EE"
        android:padding="5dp"
        android:src="@drawable/star_unselected" />

    <ImageView
        android:id="@+id/mine_img"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="#FFF5EE"
        android:padding="5dp"
        android:src="@drawable/mine_unselected" />


</LinearLayout>

然后为Fragment设置布局(这里只是简单演示如何交互,详细的操作内容以后会详细的去做一个demo)
在这里插入图片描述

<?xml version="1.0" encoding="utf-8"?>

<EditText
    android:id="@+id/message"
    android:layout_centerInParent="true"
    android:layout_width="180dp"
    android:layout_height="50dp" />

<Button
    android:id="@+id/send_button"
    android:text="发送"
    android:layout_below="@id/message"
    android:layout_centerHorizontal="true"
    android:textColor="#FF4500"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

其他的布局代码这里就不贴了,只是一个很简单的布局,然后创建Fragment FirstFragment.class代码: package com.leaves.autum.fragmentdemo;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;

public class FirstFragment extends Fragment {
private EditText message;
private Button send;

@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable final ViewGroup container, @Nullable Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.first_frgment,container,false);
    //在Fragment里面查找到布局里面的控件,得在findViewByID前边加上前缀变成View.findViewByID,这样就可以进行控件的操作了
    message = view.findViewById(R.id.message);
    send = view.findViewById(R.id.send_button);
    
    return view;
}

}
其他的Fragment一次类推!
然后设置ViewPager添加Fragment的一个适配器FragmentViewPagerAdapter.class,
这个配置Fragment的适配器是需要继承FragmentPagerAdapter这个类,相对于前两天的ViewPager适配器来这个适配就相对简单:

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import java.util.List;
public class FragmentViewPagerAdapter extends FragmentPagerAdapter {
private List fragments;

public FragmentViewPagerAdapter(FragmentManager fm, List<Fragment> fragments) {
    super(fm);
    this.fragments = fragments;
}

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

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

}

最后就是底部栏的设置,以及交互Main_activity.class代码:
package com.leaves.autum.fragmentdemo;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

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

public class MainActivity extends AppCompatActivity {
ViewPager viewPager;
ImageView homeView,starView,mineView;
LinearLayout linearLayout;
List fragments = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //找到控件
    viewPager = findViewById(R.id.view_pager);
    linearLayout = findViewById(R.id.bottom_bar);
    homeView = findViewById(R.id.home_img);
    starView = findViewById(R.id.star_img);
    mineView = findViewById(R.id.mine_img);

    //设置fragment列表
    FirstFragment firstFragment = new FirstFragment();
    SecondFragment secondFragment = new SecondFragment();
    ThirdFragment thirdFragment = new ThirdFragment();
    fragments.add(firstFragment);
    fragments.add(secondFragment);
    fragments.add(thirdFragment);

    //创建一个fragmentmanager
    FragmentManager fragmentManager = getSupportFragmentManager();
    FragmentViewPagerAdapter myAdapter = new FragmentViewPagerAdapter(fragmentManager,fragments);
    //设置添加适配器
    viewPager.setAdapter(myAdapter);
    //页面打开时默认设置为第一个fragment选中
    viewPager.setCurrentItem(0);
    homeView.setImageResource(R.drawable.home_selected);
    homeView.setBackgroundColor(Color.parseColor("#FFEC8B"));
    starView.setBackgroundColor(Color.parseColor("#FFF5EE"));
    mineView.setBackgroundColor(Color.parseColor("#FFF5EE"));

    //设置滑动事件,使切换的页面跟底部对应
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int i, float v, int i1) {

        }
	//这个方法就是页面滑动之后底部导航栏的一个状态切换
        @Override
        public void onPageSelected(int i) {
            switch (i){
                case 0:
                //如果在第一个页面,即底部第一个控件被选择设置他的图案为home_selecter
                //反之,设置为unselect,背景颜色也与其他控件区分,以便于区分选择的区域
                    homeView.setImageResource(R.drawable.home_selected);
                    starView.setImageResource(R.drawable.star_unselected);
                    homeView.setImageResource(R.drawable.home_unselected);
                    homeView.setBackgroundColor(Color.parseColor("#FFEC8B"));
                    starView.setBackgroundColor(Color.parseColor("#FFF5EE"));
                    mineView.setBackgroundColor(Color.parseColor("#FFF5EE"));
                    break;
                case 1:
                //意义同case 0
                    starView.setImageResource(R.drawable.star_selected);
                    mineView.setImageResource(R.drawable.mine_unselected);
                    homeView.setImageResource(R.drawable.home_unselected);
                    homeView.setBackgroundColor(Color.parseColor("#FFF5EE"));
                    starView.setBackgroundColor(Color.parseColor("#FFEC8B"));
                    mineView.setBackgroundColor(Color.parseColor("#FFF5EE"));
                    break;
                case 2:
                    viewPager.setCurrentItem(2);
                    mineView.setImageResource(R.drawable.mine_selected);
                    starView.setImageResource(R.drawable.star_unselected);
                    homeView.setImageResource(R.drawable.home_unselected);
                    homeView.setBackgroundColor(Color.parseColor("#FFF5EE"));
                    starView.setBackgroundColor(Color.parseColor("#FFF5EE"));
                    mineView.setBackgroundColor(Color.parseColor("#FFEC8B"));
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int i) {

        }
    });


    //设置点击事件,切换viewPager
    homeView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewPager.setCurrentItem(0);
            homeView.setImageResource(R.drawable.home_selected);
            homeView.setBackgroundColor(Color.parseColor("#FFEC8B"));
            starView.setBackgroundColor(Color.parseColor("#FFF5EE"));
            mineView.setBackgroundColor(Color.parseColor("#FFF5EE"));
        }
    });

    starView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewPager.setCurrentItem(1);
            starView.setImageResource(R.drawable.star_selected);
            homeView.setBackgroundColor(Color.parseColor("#FFF5EE"));
            starView.setBackgroundColor(Color.parseColor("#FFEC8B"));
            mineView.setBackgroundColor(Color.parseColor("#FFF5EE"));
        }
    });

    mineView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            viewPager.setCurrentItem(2);
            mineView.setImageResource(R.drawable.mine_selected);
            homeView.setBackgroundColor(Color.parseColor("#FFF5EE"));
            starView.setBackgroundColor(Color.parseColor("#FFF5EE"));
            mineView.setBackgroundColor(Color.parseColor("#FFEC8B"));
        }
    });

}

}

标签

#Android #Fragment #ViewPager