Android底部导航栏加图片轮播功能实现
前言：最近无聊接了个安卓耍耍（主要是同学不好拒绝嘿嘿嘿。。。）下面附上效果图：
其实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
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="300dp">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RadioGroup
android:id="@+id/group"
android:layout_gravity="center_horizontal|bottom"
android:layout_width="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="horizontal"
android:layout_height="wrap_content">
</RadioGroup>
</FrameLayout>
</LinearLayout>
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
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));
}
};
}
后续会上传整个项目 有需要的朋友加扣扣联系博主哦~~~~1500916937
-------------------------------------------------分割线---------------------------------------------------------
