不做不知道
一做吓一跳
可以记录推荐数据哦！
收录收藏夹
第一次做手机界面
连导航栏底部兰等等尺寸都没搞清楚
添加到收藏
没有新消息
创建收藏夹
公开(受欢迎的收藏夹将有可能选入站酷精选)
私密(仅自己可见)
分享给微信好友
下次自动登录
没收到验证码?
下次自动登录
第三方帐号登录
微信二维码登录Android 利用ViewPager实现底部圆点导航左右滑动效果以及Fragment页面切换
上一篇博文我们介绍了利用ViewPager和Fragment实现顶部滑块左右滑动效果，具体参考(https://blog.csdn.net/a123demi/article/details/)。
而本篇博文将实例讲解利用ViewPager实现底部圆点导航左右滑动效果，以及被滑动界面实现监听事件，同时通过Fragment实现页面的切换。
对于该效果的实现，需要实现以下几个问题：
1. 底部圆点加载和实现方法？
2. 怎样实现左右滑动效果？
3. 被滑动页面，怎样实现监听事件？
4. 滑动页面怎样和其他页面切换？
一.实现效果如下
二.具体代码如下
1.XML布局文件
1&主布局activity_main.xml
注意：id为fragment_switch_ll的LinearLayout是为Fragment切换预留的。
2&Fragment页面切换布局fragment_other.xml
3&左右滑动布局fragment_switch.xml(Fragment页面切换中的另一个布局)
注意：id为viewGroup的LinearLayout是实现圆点ImageView的父容器。
4&左右滑动界面布局view_one.xml(本例带监听事件)，view_one.xml，view_one.xml(只给出其中一个，其他类似)
2.java代码实现
1&主函数MainActivity.java
package com.example.
import android.app.A
import android.app.F
import android.app.FragmentT
import android.os.B
import android.view.V
import android.view.View.OnClickL
import android.widget.B
public class MainActivity extends Activity {
private Button fgSwitchB
private boolean isSwitch =//true:进入SwitchFragment,false:进入OtherFragment
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fgSwitchBtn = (Button) this.findViewById(R.id.fragment_switch_btn);
fgSwitchBtn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// TODO Auto-generated method stub
switchFragment();
public void onResume(){
super.onResume();
switchFragment();
* Fragment界面切换
private void switchFragment(){
Fragment fragment =
if(isSwitch){
fragment = new SwitchFragment();
fragment = new OtherFragment();
isSwitch = !isS
FragmentTransaction ft = this.getFragmentManager().beginTransaction();
ft.replace(R.id.fragment_switch_ll, fragment);
ft.commitAllowingStateLoss();
注意：switchFragment()实现了Fragment的切换，解决了问题4.
2&Fragment切换页面OtherFragment.java
package com.example.
import android.app.F
import android.os.B
import android.view.LayoutI
import android.view.V
import android.view.ViewG
public class OtherFragment extends Fragment {
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View otherView = inflater.inflate(R.layout.fragment_other, container,
return otherV
3&Fragment切换界面及滑动界面SwitchFragment.java
package com.example.
import java.util.ArrayL
import java.util.L
import android.app.A
import android.app.F
import android.content.C
import android.os.B
import android.support.v4.view.ViewP
import android.support.v4.view.ViewPager.OnPageChangeL
import android.view.LayoutI
import android.view.V
import android.view.ViewG
import android.view.View.OnClickL
import android.view.ViewGroup.LayoutP
import android.widget.B
import android.widget.ImageV
import android.widget.LinearL
import android.widget.T
public class SwitchFragment extends Fragment {
private LinearLayout groupViewLl;
private ViewPager viewP
private ImageView[] imageV
private ImageView imageV
private List viewList = new ArrayList();
private LayoutInflater mI
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View switchView = inflater.inflate(R.layout.fragment_switch, container,
mInflater =
groupViewLl = (LinearLayout) switchView.findViewById(R.id.viewGroup);
viewPager = (ViewPager) switchView.findViewById(R.id.viewPager);
return switchV
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
* 将需要滑动的View加入到viewList
View oneView = mInflater.inflate(R.layout.view_one, null);
viewList.add(oneView);
viewList.add(mInflater.inflate(R.layout.view_two, null));
viewList.add(mInflater.inflate(R.layout.view_three, null));
* 定义个圆点滑动导航ImageView，根据View的个数而定
imageViews = new ImageView[viewList.size()];
//滑动界面事件监听，解决问题3
btn = (Button) oneView.findViewById(R.id.btn);
btn.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
Toast.makeText(SwitchFragment.this.getActivity(),
this is view_one, Toast.LENGTH_SHORT).show();
//动态生成ImageView，实现底部圆点(圆点数量根据左右滑动View而确定)，解决问题1
for (int i = 0; i & viewList.size(); i++) {
imageView = new ImageView(this.getActivity());
imageView.setLayoutParams(new LayoutParams(20, 20));
imageView.setPadding(20, 0, 20, 0);
imageViews[i] = imageV
if (i == 0) {
// 默认选中第一张图片
imageViews[i]
.setBackgroundResource(R.drawable.page_indicator_focused);
imageViews[i].setBackgroundResource(R.drawable.page_indicator);
groupViewLl.addView(imageViews[i]);
//通过滑动适配器实现滑动效果，解决问题2
viewPager.setAdapter(new MyPagerAdapter(viewList));
viewPager.setOnPageChangeListener(new SwitchPageChangeListener());
public void onResume() {
super.onResume();
// 指引页面更改事件监听器，设置圆点滑动时的背景变化。
class SwitchPageChangeListener implements OnPageChangeListener {
public void onPageScrollStateChanged(int arg0) {
public void onPageScrolled(int arg0, float arg1, int arg2) {
public void onPageSelected(int arg0) {
for (int i = 0; i & imageViews. i++) {
imageViews[arg0]
.setBackgroundResource(R.drawable.page_indicator_focused);
if (arg0 != i) {
imageViews[i]
.setBackgroundResource(R.drawable.page_indicator);
注意：SwitchPageChangeListener实现了底部导航圆点滑动变色的效果。
4&滑动适配器MyPagerAdapter.java
package com.example.
import java.util.L
import android.os.P
import android.support.v4.view.PagerA
import android.support.v4.view.ViewP
import android.view.V
public class MyPagerAdapter extends PagerAdapter {
private List viewL
public MyPagerAdapter(List viewList){
this.viewList = viewL
public int getCount() {
return viewList.size();
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
public int getItemPosition(Object object) {
return super.getItemPosition(object);
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView(viewList.get(arg1));
public Object instantiateItem(View arg0, int arg1) {
((ViewPager) arg0).addView(viewList.get(arg1));
return viewList.get(arg1);
public void restoreState(Parcelable arg0, ClassLoader arg1) {
public Parcelable saveState() {
public void startUpdate(View arg0) {
public void finishUpdate(View arg0) {
注意：适配器通过添加或删除View来实现页面滑动时，页面变化的效果17:24 提问
移动端h5页面，当软键盘弹出时，会将底部导航footer顶上去，怎么解决？？？
移动端h5页面，当软键盘弹出时，会将底部导航footer顶上去，怎么解决？？？
按赞数排序
这个需要你js来判断下
var oHeight = $(document).height(); //浏览器当前的高度
$(window).resize(function(){
if($(document).height() & oHeight){
$("#footer").css("position","static");
$("#footer").css("position","absolute");
给footer开一个固定定位，固定在底部
$('body').height($('body')[0].clientHeight);
footer的css属性position: fixed。如果ios客户端用的UIWebview内核，在ios11下可能会存在渲染问题，建议使用 animation来解决此问题。
footer的样式写固定在底端
建议你可以先设置一个DIV（记得设置他的大小宽高），然后设置over-flow:hidden属性，这样子就顶不上去了
准确详细的回答，更有利于被提问者采纳，从而获得C币。复制、灌水、广告等回答会被删除，是时候展现真正的技术了！
其他相关推荐长文章读者的福音 让你快速导航到页面底部_网易手机
长文章读者的福音 让你快速导航到页面底部
用微信扫码二维码
分享至好友和朋友圈
　　威锋网讯，在 iOS 中，通过点击状态栏便可以快速到达页面的顶部，这个功能在日常的生活中也被用户广泛使用。而 Skrollerz 这款插件则可以让你快速导航到某个页面的底部。　　安装这款插件后，你会发现在状态栏的中间点击已经没有任何效果了，因为插件将向上滚动和向下滚动分别安排在状态栏的左边和右边。　　这样要快速滚动到页面的顶部，你就需要点击状态栏的左边。相反，要快速到达页面底部，就要点击状态栏的右边。这对于阅读长文章，并希望快速到达底部评论栏的用户来说特别实用。　　这款插件在设置应用里还有专属的设置面板，在这里你可以对插件进行开启或关闭，你也可以安排状态栏左边和右边所负责的滚动方向。　　如果你对这款插件感兴趣，不妨到 BigBoss 源免费下载。
[文章纠错]
本文来源：威锋网
责任编辑：王晓易_NE0011
用微信扫码二维码
分享至好友和朋友圈
加载更多新闻
热门产品:　　　
:　　　　　　　　
:　　　　　　　　　
热门影院：
阅读下一篇
用微信扫描二维码
分享至好友和朋友圈相关热词：
大家都在下载
这些是最新的
Copyright &
haodoxi.com 好东西分享 版权所有&&& 豫ICP备号-2 &&