Android底部导航栏加图片轮播功能实现

╰半夏微凉° 2023-06-18 06:55 10阅读 0赞

### Android底部导航栏加图片轮播功能实现 ###

前言：最近无聊接了个安卓耍耍（主要是同学不好拒绝嘿嘿嘿。。。）下面附上效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70][]

其实as就有这个自带的功能可以直接创建带底部导航栏的页面，本人上面做了修改大家可以参考。。。废话不多说了上代码

1、先写xml文件

创建activity\_main.xml

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="lzw.com.heardapp_1.MainActivity"> 
    
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpagermain"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp"/>
    
    
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation" />
    
    </android.support.constraint.ConstraintLayout>

创建activity\_shouye.xml

2、写实现类

MainActivity

package lzw.com.heardapp_1;
    
    import android.os.Bundle;
    import android.support.annotation.NonNull;
    import android.support.design.widget.BottomNavigationView;
    import android.support.v4.app.Fragment;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.AppCompatActivity;
    import android.view.MenuItem;
    import android.widget.TextView;
    
    import java.util.ArrayList;
    import java.util.List;
    
    public class MainActivity extends AppCompatActivity {
    
        private ViewPager viewPager;
        private BottomNavigationView navigation;
        private List<Fragment> listFragment;//存储页面对象
    
        private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
                = new BottomNavigationView.OnNavigationItemSelectedListener() {
    
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
    
                switch (item.getItemId()) {
                    case R.id.navigation_home:
                        viewPager.setCurrentItem(0);  //添加第一个
                        return true;
                    case R.id.navigation_dashboard:
                        //viewPager.setCurrentItem(1);
                        return true;
                    case R.id.navigation_notifications:
                        //viewPager.setCurrentItem(2);
                        return true;
                }
                return false;
            }
        };
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            initView();
    
    
        }
    
        //初始化组件
    
        private void initView() {
    
            navigation = (BottomNavigationView) findViewById(R.id.navigation);
            viewPager = (ViewPager) findViewById(R.id.viewpagermain);
    
            //向ViewPager添加各页面
            listFragment = new ArrayList<>();
            listFragment.add(new Fragment_shouye());  //添加第一个页面
            // listFragment.add(new Fragment2());  //添加第二个页面
            //listFragment.add(new Fragment3());  //添加第三个页面
    
            MyFragAdapter myAdapter = new MyFragAdapter(getSupportFragmentManager(), this, listFragment);
            viewPager.setAdapter(myAdapter);
    
            navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    
        }
    }

Fragment\_shouye

package lzw.com.heardapp_1;
    
    /**
     * Created by ASUS on 2019/3/17.
     */
    
    import android.os.Bundle;
    import android.os.Handler;
    import android.os.Message;
    import android.support.annotation.Nullable;
    import android.support.v4.app.Fragment;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.LayoutInflater;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    import android.widget.RadioGroup;
    
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Timer;
    import java.util.TimerTask;
    
    public class Fragment_shouye extends Fragment {
        private ViewPager viewPager;
        private RadioGroup group;
        //图片资源
        private int[] imageIds = {R.drawable.go_photo1,R.drawable.go_photo2};
        //存放图片的数组
        private List<ImageView> mList;
        //当前索引位置以及上一个索引位置
        private int index = 0,preIndex = 0;
        //是否需要轮播标志
        private boolean isContinue = true;
        //定时器，用于实现轮播
        private Timer timer;
        private View view;
    
        Handler mHandler  = new Handler(){
            @Override
            public void handleMessage(Message msg) {
                super.handleMessage(msg);
                switch (msg.what){
                    case 1:
                        index++;
                        System.out.println("==========index: "+index);
                        viewPager.setCurrentItem(index);
                }
            }
        };
    
        @Nullable
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, Bundle savedInstanceState) {
            view = inflater.inflate(R.layout.activity_shouye, container, false);
            viewPager = (ViewPager)view.findViewById(R.id.viewpager);
            group = (RadioGroup) view.findViewById(R.id.group);
    
            mList = new ArrayList<>();
            viewPager.setAdapter(pagerAdapter);
            viewPager.addOnPageChangeListener(onPageChangeListener);
            viewPager.setOnTouchListener(onTouchListener);
            initRadioButton(imageIds.length);
            timer = new Timer();//创建Timer对象
            //执行定时任务
            timer.schedule(new TimerTask() {
                @Override
                public void run() {
                    //首先判断是否需要轮播，是的话我们才发消息
                    if (isContinue) {
                        mHandler.sendEmptyMessage(1);
                    }
                }
            },2000,2000);//延迟2秒，每隔2秒发一次消息
            return view;
        }
    
        /**
         * 根据图片个数初始化按钮
         * @param length
         */
        private void initRadioButton(int length) {
            for(int i = 0;i<length;i++){
                ImageView imageview = new ImageView(view.getContext());
                imageview.setImageResource(R.drawable.rg_selector);//设置背景选择器
                imageview.setPadding(20,0,0,0);//设置每个按钮之间的间距
                //将按钮依次添加到RadioGroup中
                group.addView(imageview, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
                //默认选中第一个按钮，因为默认显示第一张图片
                group.getChildAt(0).setEnabled(false);
            }
        }
    
        /**
         * 根据当前触摸事件判断是否要轮播
         */
        View.OnTouchListener onTouchListener  = new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()){
                    //手指按下和划动的时候停止图片的轮播
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_MOVE:
                        isContinue = false;
                        break;
                    default:
                        isContinue = true;
                }
                return false;
            }
        };
        /**
         *根据当前选中的页面设置按钮的选中
         */
        ViewPager.OnPageChangeListener onPageChangeListener = new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }
            @Override
            public void onPageSelected(int position) {
                index = position;//当前位置赋值给索引
                setCurrentDot(index%imageIds.length);
            }
            @Override
            public void onPageScrollStateChanged(int state) {
    
            }
        };
    
        /**
         * 设置对应位置按钮的状态
         * @param i 当前位置
         */
        private void setCurrentDot(int i) {
            if(group.getChildAt(i)!= null){
                group.getChildAt(i).setEnabled(false);//当前按钮选中 **********************
            }
            if(group.getChildAt(preIndex)!= null){
                group.getChildAt(preIndex).setEnabled(true);//上一个取消选中*********************
                preIndex = i;//当前位置变为上一个，继续下次轮播
            }
        }
        PagerAdapter pagerAdapter = new PagerAdapter() {
            @Override
            public int getCount() {
                //返回一个比较大的值，目的是为了实现无限轮播
                return Integer.MAX_VALUE;
            }
    
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }
    
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                position = position%imageIds.length;
                ImageView imageView = new ImageView(view.getContext());
                imageView.setImageResource(imageIds[position]);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
                container.addView(imageView);
                mList.add(imageView);
                return imageView;
            }
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mList.get(position));
            }
        };
    }

3、写适配器

MyFragAdapter

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1][]

后续会上传整个项目 有需要的朋友加扣扣联系博主哦~~~~1500916937

\-------------------------------------------------分割线---------------------------------------------------------

已上传至 [https://download.csdn.net/download/sm16111/12007679][https_download.csdn.net_download_sm16111_12007679]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191130212650372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191130213616687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NtMTYxMTE=,size_16,color_FFFFFF,t_70
[https_download.csdn.net_download_sm16111_12007679]: https://download.csdn.net/download/sm16111/12007679