标签: ViewPager

使用ViewPager的setCurrentItem方法

修改ViewPager调用setCurrentItem时,滑屏的速度 ,解决滑动之间切换动画难看

 在使用ViewPager的过程中,有需要直接跳转到某一个页面的情况,这个时候就需要用到ViewPager的setCurrentItem方法了,它的意思是跳转到ViewPager的指定页面,但在使用这个方法的时候有个问题,跳转的时候有滑动效果,当需要从当前页面跳转到其它页面时,跳转页面跨度过大、或者ViewPager每个页面的视觉效果相差较大时,通过这种方式实现ViewPager跳转显得很不美观,怎么办呢,我们可以去掉在使用ViewPager的setCurrentItem方法时的滑屏速度,具体实现如下:

一、自定义一个Scroll类,用于控制ViewPager滑动速度:
import Android.view.animation.Interpolator;
import android.widget.Scroller;

public class FixedSpeedScroller extends Scroller {
private int mDuration = 0;

    public FixedSpeedScroller(Context context) {
super(context);
}

    public FixedSpeedScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}

    public FixedSpeedScroller(Context context, Interpolator interpolator, boolean flywheel) {
super(context, interpolator, flywheel);
}


@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, mDuration);
}

@Override
public void startScroll(int startX, int startY, int dx, int dy) {
super.startScroll(startX, startY, dx, dy, mDuration);
}
}

二、在初始化ViewPager时,对ViewPager作如下设置:

* 设置ViewPager的滑动速度
*
* */
private void setViewPagerScrollSpeed( ){
try {
Field mScroller = null;
mScroller = ViewPager.class.getDeclaredField(“mScroller”);
mScroller.setAccessible(true);
FixedSpeedScroller scroller = new FixedSpeedScroller( mViewPager.getContext( ) );
mScroller.set( mViewPager, scroller);
}catch(NoSuchFieldException e){

}catch (IllegalArgumentException e){

}catch (IllegalAccessException e){

}
}

使用RecyclerView实现多行水平分页的GridView效果和ViewPager效果

前些天看到有人在论坛上问这种效果怎么实现,没写过也没用过这个功能,网上查了一下,大多是使用ViewPager+GridView或者HorizontalScrollView+GridView实现,不过貌似有点复杂,太懒,没仔细看。这两天学习RecyclerView的使用(网上有很多文章,建议大家阅读本博客的时候先去了解一下),发现RecyclerView可以实现GridView 的横向滚动效果,不过没有分页,因此决定自己写一个。

博文*后也有贴出完整代码,使用Eclipse的同学可以自己新建项目并Copy代码。

效果图:
(由于这里每个Item都很相像,所以效果看起来不是很好,请见谅)
图1:
在这里插入图片描述
图2:
在这里插入图片描述
(删除的操作是在长按事件中写的)
图1是带页码指示器的多行横向分页的GridView效果,拖动距离不足时,还可以滚动回原来的位置(类似于ViewPager拖动距离不足的效果);
图2是和ViewPager一模一样的效果,实现此效果只要设置行数和列数都为1即可。

代码结构:

在这里插入图片描述

  • AutoGridLayoutManager继承自GridLayoutManager并重写了onMeasure方法,目的是使RecyclerView的高度自适应内容高度。
  • DimensionConvert是一个用来转换px和pd的工具类。
  • MainActivity是一个使用示例。
  • PageIndicatorView继承自LinearLayout,存放一些小圆点作为页码指示器。
  • PageRecyclerView继承自RecyclerView,用来完成分页等功能。

先简单讲一下实现步骤,之后贴完整的代码

*步: 实现横向滚动的GridView效果

这个很简单,只要给RecyclerView设置横向的GridLayoutManager就可以了。但是使用过程中发现,RecyclerView并不会自适应内容的高度,因此重写了GridLayoutManager的onMeasure方法(MyGridLayoutManager.java);

@Override
public void onMeasure(RecyclerView.Recycler recycler, RecyclerView.State state, int widthSpec, int heightSpec) {
    View view = recycler.getViewForPosition(0);
    if (view != null) {
        measureChild(view, widthSpec, heightSpec);
        int measuredWidth = View.MeasureSpec.getSize(widthSpec);
        int measuredHeight = view.getMeasuredHeight() * getSpanCount();
        setMeasuredDimension(measuredWidth, measuredHeight);
    }
}

 

第二步:实现自定义行数和列数功能

实现此功能需要重写RecyclerView(MyRecyclerView.java),并添加两个成员变量spanRowspanColumn和一个设置行数列数的方法setPageSize(int spanRow, int spanColumn)
之后,在Adapter中生成Item的时候就可以根据设置好的PageRecyclerView的宽度和列数计算单个Item的宽度,以达到一页正好显示固定列数的目的:

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (itemWidth <= 0) {
        // 计算Item的宽度
        itemWidth = (parent.getWidth() - pageMargin * 2) / spanColumn;
    }

    RecyclerView.ViewHolder holder = mCallBack.onCreateViewHolder(parent, viewType);

    holder.itemView.measure(0, 0);
    holder.itemView.getLayoutParams().width = itemWidth;
    holder.itemView.getLayoutParams().height = holder.itemView.getMeasuredHeight();

    return holder;
}

 

可以看到上面代码中有一个mCallBack变量,这是一个接口的实现类的实例,我们需要创建Adapter实例的时候传入一个此接口的子类实例。

public interface CallBack {

    /**
     * 创建VieHolder
     *
     * @param parent
     * @param viewType
     */
    RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType);

    /**
     * 绑定数据到ViewHolder
     *
     * @param holder
     * @param position
     */
    void onBindViewHolder(RecyclerView.ViewHolder holder, int position);

}

 

此接口共有两个方法,这两个方法和Adapter中需要重写的两个方法一样,用法也一样,分别用来创建ViewHolder实例和给ViewHolder中的控件绑定数据。

第三步:开始分页滚动

1> 分页:
完成第二步之后,布局就调整好了,之后我们实现分页滚动的功能。要分页就肯定需要总页数(totalPage)和当前页码(currentPage),我们需要在设置Adapter适配器之后根据Item的总数和每页的Item数计算总页数:

@Override
public void setAdapter(Adapter adapter) {
    super.setAdapter(adapter);
    // 计算总页数
    totalPage = ((int) Math.ceil(adapter.getItemCount() / (double) (spanRow * spanColumn)));
    mIndicatorView.initIndicator(totalPage);
}

 

然后就可以重写RecyclerView的onTouchEvent方法实现分页,根据ACTION_DOWNACTION_UP时候的坐标计算滑动方向,在ACTION_UP的时候根据滑动的方向使用smoothScrollBy方法向左或向右滑动一个MyRecyclerView的宽度就可以了。
不过这种切换页面的方式很生硬,我们要实现的ViewPager的滑动效果:要滑动超过一定的距离才能切换页码,否则滚回原来的位置。实现此功能需要一个常量,不过为了适应各种宽度的MyRecyclerView,这里根据MyRecyclerView的宽度动态设置*小滚动距离:

private int shortestDistance; // 超过此距离的滑动才有效

@Override
protected void onMeasure(int widthSpec, int heightSpec) {
    super.onMeasure(widthSpec, heightSpec);
    shortestDistance = getMeasuredWidth() / 3;
}

 

还需要其他的几个变量:

private float downX = 0; // 手指按下的X轴坐标
private float slideDistance = 0; // 滑动的距离
private float scrollX = 0; // X轴当前的位置

 

scrollX为当前滚动的位置,重写onScrolled计算滚动到的位置:

@Override
public void onScrolled(int dx, int dy) {
    scrollX += dx;
    super.onScrolled(dx, dy);
}

 

之后就可以编写完整的onTouchEvent方法

@Override
public boolean onTouchEvent(MotionEvent event) {

    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downX = event.getX();
            break;
        case MotionEvent.ACTION_UP:
            slideDistance = event.getX() - downX;
            if (Math.abs(slideDistance) > shortestDistance) {
                // 滑动距离足够,执行翻页
                if (slideDistance > 0) {
                    // 上一页
                    currentPage = currentPage == 1 ? 1 : currentPage - 1;
                } else {
                    // 下一页
                    currentPage = currentPage == totalPage ? totalPage : currentPage + 1;
                }
            }
            // 执行滚动
            smoothScrollBy((int) ((currentPage - 1) * getWidth() - scrollX), 0);
            return true;
        default:
            break;
    }

    return super.onTouchEvent(event);
}

2> 页间距

为了分页更加清晰,还需要给页与页添加间距:
首先添加一个成员变量,和set方法

private int pageMargin = 0; // 页间距
/**
 * 设置页间距
 *
 * @param pageMargin 间距(px)
 */
public void setPageMargin(int pageMargin) {
    this.pageMargin = pageMargin;
}

 

然后重写Adapter的onBindViewHolder方法调整页间距:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    if (spanColumn == 1) {
        // 每个Item距离左右两侧各pageMargin
        holder.itemView.getLayoutParams().width = itemWidth + pageMargin * 2;
        holder.itemView.setPadding(pageMargin, 0, pageMargin, 0);
    } else {
        int m = position % (spanRow * spanColumn);
        if (m < spanRow) {
            // 每页左侧的Item距离左边pageMargin
            holder.itemView.getLayoutParams().width = itemWidth + pageMargin;
            holder.itemView.setPadding(pageMargin, 0, 0, 0);
        } else if (m >= spanRow * spanColumn - spanRow) {
            // 每页右侧的Item距离右边pageMargin
            holder.itemView.getLayoutParams().width = itemWidth + pageMargin;
            holder.itemView.setPadding(0, 0, pageMargin, 0);
        } else {
            // 中间的正常显示
            holder.itemView.getLayoutParams().width = itemWidth;
            holder.itemView.setPadding(0, 0, 0, 0);
        }
    }

}

 

3> 占位Item

为了*后不足一页时也能完整显示,还需要在*后不足一页时,生成占位的View,因此修改Adapter的onBindViewHolder方法和getItemCount方法:

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    ...

    if (position < dataList.size()) {
        holder.itemView.setAlpha(1);
        mCallBack.onBindViewHolder(holder, position);
    } else {
        holder.itemView.setAlpha(0);
    }
}

@Override
public int getItemCount() {
    int m = dataList.size() % (spanRow * spanColumn);
    if (m == 0) {
        return dataList.size();
    } else {
       return dataList.size() + (spanRow * spanColumn - m);
   }
}

至此,分页功能就完成了,为了功能更丰满,还需要添加一个分页指示器(就是效果图中的小圆点),这个功能还是很简单的,新建一个类继承LinearLayout并根据总页数生成一些小圆点的View,然后提供一个修改当前页码的方法就OK啦。

第四步:删除Item

*后还有一个删除Item的功能,实现方式还是使用系统的Adapter的notifyItemRemoved(int position);方法,由于前面分页时给部分Item设置了padding,所以为了布局不会错乱,还需要更新其他改变的Item:

// 删除Item
notifyItemRemoved(position);
// 更新界面上发生改变的Item
notifyItemRangeChanged(position, currentPage * spanRow * spanColumn);

 

然后还要更新页码指示器,这里就不贴代码了,直接看下面的类就可以了。
使用的时候只要把指示器和MyRecyclerView按照自己的需求布局,并在切换页面的时候更新指示器就完成了。

改:

  1. 上面分页滑动是在onTouchEvent()方法中实现的,但是后来发现,这种实现方式会导致给Item添加onClickListeneronLongClickListeneronTouchListener的时候会产生事件冲突,因此修改为在onScrollStateChanged()方法中实现,代码如下:
/*
     * 0: 停止滚动且手指移开; 1: 开始滚动; 2: 手指做了抛的动作(手指离开屏幕前,用力滑了一下)
     */
private int scrollState = 0; // 滚动状态
@Override
public void onScrollStateChanged(int state) {
    switch (state) {
        case 2:
            scrollState = 2;
            break;
        case 1:
            scrollState = 1;
            break;
        case 0:
            if (slideDistance == 0) {
                break;
            }
            scrollState = 0;
            if (slideDistance < 0) { // 上页
                currentPage = (int) Math.ceil(scrollX / getWidth());
                if (currentPage * getWidth() - scrollX < shortestDistance) {
                    currentPage += 1;
                }
            } else { // 下页
                currentPage = (int) Math.ceil(scrollX / getWidth()) + 1;
                if (currentPage <= totalPage) {
                    if (scrollX - (currentPage - 2) * getWidth() < shortestDistance) {
                        // 如果这一页滑出距离不足,则定位到前一页
                        currentPage -= 1;
                    }
                } else {
                    currentPage = totalPage;
                }
            }
            // 执行自动滚动
            smoothScrollBy((int) ((currentPage - 1) * getWidth() - scrollX), 0);
            // 修改指示器选中项
            mIndicatorView.setSelectedPage(currentPage - 1);
            slideDistance = 0;
            break;
    }
    super.onScrollStateChanged(state);
}

@Override
public void onScrolled(int dx, int dy) {
    scrollX += dx;
    if (scrollState == 1) {
        slideDistance += dx;
    }

    super.onScrolled(dx, dy);
}

 

RecyclerView的GridLayoutManager是从上到下从左到右排列的,而我们分页时大多需要的是从左到右从上到下排列,因此增加一个方法调整位置(此方法只适用于3*3排列的,还没有找到通用的方法,如果那位同学有方法,麻烦分享一下,先谢过)

private void countRealPosition(int position) {
    // 为了使Item从左到右从上到下排列,需要position的值
    int m = position % (spanRow * spanColumn);
    switch (m) {
        case 1:
        case 5:
            realPosition = position + 2;
            break;
        case 3:
        case 7:
            realPosition = position - 2;
            break;
        case 2:
            realPosition = position + 4;
            break;
        case 6:
            realPosition = position - 4;
            break;
        case 0:
        case 4:
        case 8:
            realPosition = position;
            break;
    }
}

 

<<<<<<<<<<<<<<<<<<<<<<使用方法参考MainActivity.java>>>>>>>>>>>>>>>>>>>>

上面讲的不够详细,具体见代码>>>>>>>>>>>>>>

完整代码:

AutoGridLayoutManager.java

使用这个类替代GridLayoutManager是为了使RecyclerView及其子类能够自适应内容的高度。

import android.content.Context;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by shichaohui on 2015/7/9 0009.
 * <p>
 * 重写GridLayoutManager,在{@link RecyclerView#setLayoutManager(RecyclerView.LayoutManager)}使用
 * 此类替换{@link GridLayoutManager},使{@link RecyclerView}能够自使用内容的高度
 * </p>
 */
public class AutoGridLayoutManager extends GridLayoutManager {

    private int measuredWidth = 0;
    private int measuredHeight = 0;

    public AutoGridLayoutManager(Context context, AttributeSet attrs,
                                 int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public AutoGridLayoutManager(Context context, int spanCount) {
        super(context, spanCount);
    }

    public AutoGridLayoutManager(Context context, int spanCount,
                                 int orientation, boolean reverseLayout) {
        super(context, spanCount, orientation, reverseLayout);
    }

    @Override
    public void onMeasure(RecyclerView.Recycler recycler,
                          RecyclerView.State state, int widthSpec, int heightSpec) {
        if (measuredHeight <= 0) {
            View view = recycler.getViewForPosition(0);
            if (view != null) {
                measureChild(view, widthSpec, heightSpec);
                measuredWidth = View.MeasureSpec.getSize(widthSpec);
                measuredHeight = view.getMeasuredHeight() * getSpanCount();
            }
        }
        setMeasuredDimension(measuredWidth, measuredHeight);
    }

}

 

PageRecyclerView.java

重写RecyclerView实现分页

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.support.v7.widget.RecyclerView;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;
import java.util.Objects;

/**
 * Created by shichaohui on 2015/7/9 0009.
 * <p>
 * 横向分页的GridView效果
 * </p>
 * <p>
 * 默认为1行,每页3列,如果要自定义行数和列数,请在调用{@link PageRecyclerView#setAdapter(Adapter)}方法前调用
 * {@link PageRecyclerView#setPageSize(int, int)}方法自定义行数
 * </p>
 */
public class PageRecyclerView extends RecyclerView {

    private Context mContext = null;

    private PageAdapter myAdapter = null;

    private int shortestDistance; // 超过此距离的滑动才有效
    private float downX = 0; // 手指按下的X轴坐标
    private float slideDistance = 0; // 滑动的距离
    private float scrollX = 0; // X轴当前的位置

    private int spanRow = 1; // 行数
    private int spanColumn = 3; // 每页列数
    private int totalPage = 0; // 总页数
    private int currentPage = 1; // 当前页

    private int pageMargin = 0; // 页间距

    private PageIndicatorView mIndicatorView = null; // 指示器布局

    public PageRecyclerView(Context context) {
        this(context, null);
    }

    public PageRecyclerView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PageRecyclerView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        defaultInit(context);
    }

    // 默认初始化
    private void defaultInit(Context context) {
        this.mContext = context;
        setLayoutManager(new AutoGridLayoutManager(
                mContext, spanRow, AutoGridLayoutManager.HORIZONTAL, false));
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    /**
     * 设置行数和每页列数
     *
     * @param spanRow    行数,<=0表示使用默认的行数
     * @param spanColumn 每页列数,<=0表示使用默认每页列数
     */
    public void setPageSize(int spanRow, int spanColumn) {
        this.spanRow = spanRow <= 0 ? this.spanRow : spanRow;
        this.spanColumn = spanColumn <= 0 ? this.spanColumn : spanColumn;
        setLayoutManager(new AutoGridLayoutManager(
                mContext, this.spanRow, AutoGridLayoutManager.HORIZONTAL, false));
    }

    /**
     * 设置页间距
     *
     * @param pageMargin 间距(px)
     */
    public void setPageMargin(int pageMargin) {
        this.pageMargin = pageMargin;
    }

    /**
     * 设置指示器
     *
     * @param indicatorView 指示器布局
     */
    public void setIndicator(PageIndicatorView indicatorView) {
        this.mIndicatorView = indicatorView;
    }

    @Override
    protected void onMeasure(int widthSpec, int heightSpec) {
        super.onMeasure(widthSpec, heightSpec);
        shortestDistance = getMeasuredWidth() / 3;
    }

    @Override
    public void setAdapter(Adapter adapter) {
        super.setAdapter(adapter);
        this.myAdapter = (PageAdapter) adapter;
        update();
    }

    // 更新页码指示器和相关数据
    private void update() {
        // 计算总页数
        int temp = ((int) Math.ceil(myAdapter.dataList.size() / (double) (spanRow * spanColumn)));
        if (temp != totalPage) {
            mIndicatorView.initIndicator(temp);
            // 页码减少且当前页为*后一页
            if (temp < totalPage && currentPage == totalPage) {
                currentPage = temp;
                // 执行滚动
                smoothScrollBy(-getWidth(), 0);
            }
            mIndicatorView.setSelectedPage(currentPage - 1);
            totalPage = temp;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            case MotionEvent.ACTION_MOVE:
                if (currentPage == totalPage && downX - event.getX() > 0) {
                    return true;
                }
                break;
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                break;
            case MotionEvent.ACTION_UP:
                slideDistance = event.getX() - downX;
                if (Math.abs(slideDistance) > shortestDistance) {
                    // 滑动距离足够,执行翻页
                    if (slideDistance > 0) {
                        // 上一页
                        currentPage = currentPage == 1 ? 1 : currentPage - 1;
                    } else {
                        // 下一页
                        currentPage = currentPage == totalPage ? totalPage : currentPage + 1;
                    }
                    // 修改指示器选中项
                    mIndicatorView.setSelectedPage(currentPage - 1);
                }
                // 执行滚动
                smoothScrollBy((int) ((currentPage - 1) * getWidth() - scrollX), 0);
                return true;
            default:
                break;
        }

        return super.onTouchEvent(event);
    }

    @Override
    public void onScrolled(int dx, int dy) {
        scrollX += dx;
        super.onScrolled(dx, dy);
    }

    /**
     * 数据适配器
     */
    public class PageAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

        private List<?> dataList = null;
        private CallBack mCallBack = null;
        private int itemWidth = 0;
        private int itemCount = 0;

        /**
         * 实例化适配器
         *
         * @param data
         * @param callBack
         */
        public PageAdapter(List<?> data, CallBack callBack) {
            this.dataList = data;
            this.mCallBack = callBack;
            itemCount = dataList.size() + spanRow * spanColumn;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            if (itemWidth <= 0) {
                // 计算Item的宽度
                itemWidth = (parent.getWidth() - pageMargin * 2) / spanColumn;
            }

            RecyclerView.ViewHolder holder = mCallBack.onCreateViewHolder(parent, viewType);

            holder.itemView.measure(0, 0);
            holder.itemView.getLayoutParams().width = itemWidth;
            holder.itemView.getLayoutParams().height = holder.itemView.getMeasuredHeight();

            return holder;
        }

        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            if (spanColumn == 1) {
                // 每个Item距离左右两侧各pageMargin
                holder.itemView.getLayoutParams().width = itemWidth + pageMargin * 2;
                holder.itemView.setPadding(pageMargin, 0, pageMargin, 0);
            } else {
                int m = position % (spanRow * spanColumn);
                if (m < spanRow) {
                    // 每页左侧的Item距离左边pageMargin
                    holder.itemView.getLayoutParams().width = itemWidth + pageMargin;
                    holder.itemView.setPadding(pageMargin, 0, 0, 0);
                } else if (m >= spanRow * spanColumn - spanRow) {
                    // 每页右侧的Item距离右边pageMargin
                    holder.itemView.getLayoutParams().width = itemWidth + pageMargin;
                    holder.itemView.setPadding(0, 0, pageMargin, 0);
                } else {
                    // 中间的正常显示
                    holder.itemView.getLayoutParams().width = itemWidth;
                    holder.itemView.setPadding(0, 0, 0, 0);
                }
            }

            if (position < dataList.size()) {
                holder.itemView.setVisibility(View.VISIBLE);
                mCallBack.onBindViewHolder(holder, position);
            } else {
                holder.itemView.setVisibility(View.INVISIBLE);
            }

        }

        @Override
        public int getItemCount() {
            return itemCount;
        }

        /**
         * 删除Item
         * @param position 位置
         */
        public void remove(int position) {
            if (position < dataList.size()) {
                // 删除数据
                dataList.remove(position);
                itemCount--;
                // 删除Item
                notifyItemRemoved(position);
                // 更新界面上发生改变的Item
                notifyItemRangeChanged(position, currentPage * spanRow * spanColumn);
                // 更新页码指示器
                update();
            }
        }

    }

    public interface CallBack {

        /**
         * 创建VieHolder
         *
         * @param parent
         * @param viewType
         */
        RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType);

        /**
         * 绑定数据到ViewHolder
         *
         * @param holder
         * @param position
         */
        void onBindViewHolder(RecyclerView.ViewHolder holder, int position);

    }

}

 

PageIndicatorView.java

页码指示器 ,此类可以作为一个工具类,在ViewPager做的轮播图上也可以使用

import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.LinearLayout;

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

/**
 * Created by shichaohui on 2015/7/10 0010.
 * <p/>
 * 页码指示器类,获得此类实例后,可通过{@link PageIndicatorView#initIndicator(int)}方法初始化指示器
 * </P>
 */
public class PageIndicatorView extends LinearLayout {

    private Context mContext = null;
    private int dotSize = 15; // 指示器的大小(dp)
    private int margins = 4; // 指示器间距(dp)
    private List<View> indicatorViews = null; // 存放指示器

    public PageIndicatorView(Context context) {
        this(context, null);
    }

    public PageIndicatorView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PageIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    private void init(Context context) {
        this.mContext = context;

        setGravity(Gravity.CENTER);
        setOrientation(HORIZONTAL);

        dotSize = DimensionConvert.dip2px(context, dotSize);
        margins = DimensionConvert.dip2px(context, margins);
    }

    /**
     * 初始化指示器,默认选中*页
     *
     * @param count 指示器数量,即页数
     */
    public void initIndicator(int count) {

        if (indicatorViews == null) {
            indicatorViews = new ArrayList<>();
        } else {
            indicatorViews.clear();
            removeAllViews();
        }
        View view;
        LayoutParams params = new LayoutParams(dotSize, dotSize);
        params.setMargins(margins, margins, margins, margins);
        for (int i = 0; i < count; i++) {
            view = new View(mContext);
            view.setBackgroundResource(android.R.drawable.presence_invisible);
            addView(view, params);
            indicatorViews.add(view);
        }
        if (indicatorViews.size() > 0) {
            indicatorViews.get(0).setBackgroundResource(android.R.drawable.presence_online);
        }
    }

    /**
     * 设置选中页
     *
     * @param selected 页下标,从0开始
     */
    public void setSelectedPage(int selected) {
        for (int i = 0; i < indicatorViews.size(); i++) {
            if (i == selected) {
                indicatorViews.get(i).setBackgroundResource(android.R.drawable.presence_online);
            } else {
                indicatorViews.get(i).setBackgroundResource(android.R.drawable.presence_invisible);
            }
        }
    }

}

 

DimensionConvert.java

用来转换dip和px的工具类

import android.content.Context;

/**
 * Created by shichaohui on 2015/7/10 0010.
 */
public class DimensionConvert {

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     *
     * @param context
     * @param dpValue 要转换的dp值
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

    /**
     * 根据手机的分辨率从 px(像素) 的单位 转成为 dp
     *
     * @param context
     * @param pxValue 要转换的px值
     */
    public static int px2dip(Context context, float pxValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (pxValue / scale + 0.5f);
    }
}

 

MainActivity.java

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import android.widget.Toast;

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

public class MainActivity extends Activity {

    private PageRecyclerView mRecyclerView = null;
    private List<String> dataList = null;
    private PageRecyclerView.PageAdapter myAdapter = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initData();

        mRecyclerView = (PageRecyclerView) findViewById(R.id.cusom_swipe_view);
        // 设置指示器
        mRecyclerView.setIndicator((PageIndicatorView) findViewById(R.id.indicator));
        // 设置行数和列数
        mRecyclerView.setPageSize(3, 3);
        // 设置页间距
        mRecyclerView.setPageMargin(30);
        // 设置数据
        mRecyclerView.setAdapter(myAdapter = mRecyclerView.new PageAdapter(dataList, new PageRecyclerView.CallBack() {
            @Override
            public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
                View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.item, parent, false);
                return new MyHolder(view);
            }

            @Override
            public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
                ((MyHolder)holder).tv.setText(dataList.get(position));
            }
        }));

    }

    private void initData() {
        dataList = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            dataList.add(String.valueOf(i));
        }
    }

    public class MyHolder extends RecyclerView.ViewHolder {

        public TextView tv = null;

        public MyHolder(View itemView) {
            super(itemView);
            tv = (TextView) itemView.findViewById(R.id.text);
            tv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, getAdapterPosition() + "", Toast.LENGTH_SHORT).show();
                }
            });
            tv.setOnLongClickListener(new View.OnLongClickListener() {
                @Override
                public boolean onLongClick(View v) {
                    myAdapter.remove(getAdapterPosition());
                    return true;
                }
            });
        }
    }  *后是两个布局文件:

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">

        <com.example.sch.myapplication.PageRecyclerView
            android:id="@+id/cusom_swipe_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.example.sch.myapplication.PageIndicatorView
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_marginBottom="20dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"/>

</LinearLayout>

 

item.xml

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

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:background="#770000ff"
        android:gravity="center" />

</LinearLayout>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

END

Android view滑动冲突的完美解决方案 listview和scroView

ViewPager已经为我们处理了滑动冲突!

 

针对上面*种场景,由于外部与内部的滑动方向不一致,那么我们可以根据当前滑动方向,水平还是垂直来判断这个事件到底该交给谁来处理。至于如何获得滑动方向,我们可以得到滑动过程中的两个点的坐标。如竖直距离与横向距离的大小比较;

 

针对第二种场景,由于外部与内部的滑动方向一致,那么不能根据滑动角度、距离差或者速度差来判断。这种情况下必需通过业务逻辑来进行判断。比较常见ScrollView嵌套了ListView。

 

 

滑动冲突解决套路
套路一 外部拦截法:

即父View根据需要对事件进行拦截。逻辑处理放在父View的onInterceptTouchEvent方法中。我们只需要重写父View的onInterceptTouchEvent方法,并根据逻辑需要做相应的拦截即可。

public boolean onInterceptTouchEvent(MotionEvent event) {
boolean intercepted = false;
int x = (int) event.getX();
int y = (int) event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
intercepted = false;
break;
}
case MotionEvent.ACTION_MOVE: {
if (满足父容器的拦截要求) {
intercepted = true;
} else {
intercepted = false;
}
break;
}
case MotionEvent.ACTION_UP: {
intercepted = false;
break;
}
default:
break;
}
mLastXIntercept = x;
mLastYIntercept = y;
return intercepted;
}
上面伪代码表示外部拦截法的处理思路,需要注意下面几点

根据业务逻辑需要,在ACTION_MOVE方法中进行判断,如果需要父View处理则返回true,否则返回false,事件分发给子View去处理。
ACTION_DOWN 一定返回false,不要拦截它,否则根据View事件分发机制,后续ACTION_MOVE 与 ACTION_UP事件都将默认交给父View去处理!
原则上ACTION_UP也需要返回false,如果返回true,并且滑动事件交给子View处理,那么子View将接收不到ACTION_UP事件,子View的onClick事件也无法触发。而父View不一样,如果父View在ACTION_MOVE中开始拦截事件,那么后续ACTION_UP也将默认交给父View处理!
套路二 内部拦截法:

即父View不拦截任何事件,所有事件都传递给子View,子View根据需要决定是自己消费事件还是给父View处理。这需要子View使用requestDisallowInterceptTouchEvent方法才能正常工作。下面是子View的dispatchTouchEvent方法的伪代码:

public boolean dispatchTouchEvent(MotionEvent event) {
int x = (int) event.getX();
int y = (int) event.getY();

switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
parent.requestDisallowInterceptTouchEvent(true);
break;
}
case MotionEvent.ACTION_MOVE: {
int deltaX = x – mLastX;
int deltaY = y – mLastY;
if (父容器需要此类点击事件) {
parent.requestDisallowInterceptTouchEvent(false);
}
break;
}
case MotionEvent.ACTION_UP: {
break;
}
default:
break;
}

mLastX = x;
mLastY = y;
return super.dispatchTouchEvent(event);
}
父View需要重写onInterceptTouchEvent方法:

public boolean onInterceptTouchEvent(MotionEvent event) {

int action = event.getAction();
if (action == MotionEvent.ACTION_DOWN) {
return false;
} else {
return true;
}
}
使用内部拦截法需要注意:

内部拦截法要求父View不能拦截ACTION_DOWN事件,由于ACTION_DOWN不受FLAG_DISALLOW_INTERCEPT标志位控制,一旦父容器拦截ACTION_DOWN那么所有的事件都不会传递给子View。
滑动策略的逻辑放在子View的dispatchTouchEvent方法的ACTION_MOVE中,如果父容器需要获取点击事件则调用 parent.requestDisallowInterceptTouchEvent(false)方法,让父容器去拦截事件。

总结:

发现内部拦截和外面拦截的重要,

ACTION_DOWN,都不要拦截子类
要在
MotionEvent.ACTION_MOVE根据情况,是父类滑动还是子类滑动
可以看出外部拦截法实现起来更加简单,而且也符合View的正常事件分发机制,所以推荐使用外部拦截法(重写父View的onInterceptTouchEvent,父View决定是否拦截)来处理滑动冲突

 

Android两级导航菜单栏的实现

Android两级导航菜单栏的实现–FragmentTabHost结合ViewPager与Android 开源项目PagerSlidingTabStrip

简单总结一下,外层Tab用TabHost,类层Tab用Viepager+FramentStatePagerAdapter解决方案。

本篇将使用PagerSlidingTabStrip 和ViewPager实现子Tab导航菜单栏的页面滑动。当然,你也可以直接把PagerSlidingTabStrip 和ViewPager放到项目中当做主Tab导航菜单栏使用,只要思路掌握了,就可以随心所欲的灵活运用了。

 

先看一下效果图(二级Tab导航菜单栏可以实现滑动):

%title插图%num %title插图%num

重写fragment_message.xml

 

  1. <?xml version=“1.0” encoding=”utf-8″?>  
  2. <LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”  
  3.     android:layout_width=“match_parent”  
  4.     android:layout_height=“match_parent”  
  5.     android:orientation=“vertical” >  
  6.     <com.example.testbase.customer.PagerSlidingTabStrip  
  7.         android:id=“@+id/tabs”  
  8.         android:layout_width=“match_parent”  
  9.         android:layout_height=“40dp” />  
  10.     <android.support.v4.view.ViewPager  
  11.         android:id=“@+id/pager”  
  12.         android:layout_width=“match_parent”  
  13.         android:layout_height=“wrap_content”  
  14.         android:layout_below=“@+id/tabs” />  
  15. </LinearLayout>  

 

 

重写 FragmentMessage

 

 

  1. public class FragmentMessage extends Fragment {  
  2.     private SubFragment1 subFragment1;  
  3.     private SubFragment2 subFragment2;  
  4.     private SubFragment3 subFragment3;  
  5.     /** 
  6.      * PagerSlidingTabStrip的实例 
  7.      */  
  8.     private PagerSlidingTabStrip tabs;  
  9.     /** 
  10.      * 获取当前屏幕的密度 
  11.      */  
  12.     private DisplayMetrics dm;  
  13.     @Override  
  14.     public void onCreate(Bundle savedInstanceState) {// 在前面执行  
  15.         super.onCreate(savedInstanceState);  
  16.         // 获取参数  
  17.         Bundle bundle = getArguments();
  18.         if (null != bundle) {  
  19.             //  
  20.         }
  21.     }
  22.     @Override  
  23.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  24.             Bundle savedInstanceState) {
  25.         T.showShort(getActivity(), “FragmentMessage==onCreateView”);  
  26.         View view = inflater.inflate(R.layout.fragment_message, null);  
  27.         initView(view);
  28.         return view;  
  29.     }
  30.     private void initView(View view) {  
  31.         dm = getResources().getDisplayMetrics();
  32.         ViewPager pager = (ViewPager) view.findViewById(R.id.pager);
  33.         tabs = (PagerSlidingTabStrip) view.findViewById(R.id.tabs);
  34.         pager.setAdapter(new MyPagerAdapter(getChildFragmentManager()));  
  35.         tabs.setViewPager(pager);
  36.         setTabsValue();
  37.     }
  38.     /** 
  39.      * 对PagerSlidingTabStrip的各项属性进行赋值。 
  40.      */  
  41.     private void setTabsValue() {  
  42.         // 设置Tab是自动填充满屏幕的  
  43.         tabs.setShouldExpand(true);  
  44.         // 设置Tab的分割线是透明的  
  45.         tabs.setDividerColor(Color.TRANSPARENT);
  46.         // tabs.setDividerColor(Color.BLACK);  
  47.         // 设置Tab底部线的高度  
  48.         tabs.setUnderlineHeight((int) TypedValue.applyDimension(  
  49.                 TypedValue.COMPLEX_UNIT_DIP, 1, dm));  
  50.         // 设置Tab Indicator的高度  
  51.         tabs.setIndicatorHeight((int) TypedValue.applyDimension(  
  52.                 TypedValue.COMPLEX_UNIT_DIP, 4, dm));// 4  
  53.         // 设置Tab标题文字的大小  
  54.         tabs.setTextSize((int) TypedValue.applyDimension(  
  55.                 TypedValue.COMPLEX_UNIT_SP, 16, dm)); // 16  
  56.         // 设置Tab Indicator的颜色  
  57.         tabs.setIndicatorColor(Color.parseColor(“#45c01a”));// #45c01a  
  58.         // 设置选中Tab文字的颜色 (这是我自定义的一个方法)  
  59.         tabs.setSelectedTextColor(Color.parseColor(“#45c01a”));// #45c01a  
  60.         // 取消点击Tab时的背景色  
  61.         tabs.setTabBackground(0);  
  62.     }
  63.     // FragmentPagerAdapter FragmentStatePagerAdapter //不能用FragmentPagerAdapter  
  64.     public class MyPagerAdapter extends FragmentStatePagerAdapter {  
  65.         public MyPagerAdapter(FragmentManager fm) {  
  66.             super(fm);  
  67.             // TODO Auto-generated constructor stub  
  68.         }
  69.         private final String[] titles = { “SubOne”, “SubTwo”, “SubThree” };  
  70.         @Override  
  71.         public CharSequence getPageTitle(int position) {  
  72.             return titles[position];  
  73.         }
  74.         @Override  
  75.         public int getCount() {  
  76.             return titles.length;  
  77.         }
  78.         @Override  
  79.         public Fragment getItem(int position) {  
  80.             switch (position) {  
  81.             case 0:  
  82.                 if (null == subFragment1) {  
  83.                     subFragment1 = new SubFragment1();  
  84.                 }
  85.                 return subFragment1;  
  86.             case 1:  
  87.                 if (null == subFragment2) {  
  88.                     subFragment2 = new SubFragment2();  
  89.                 }
  90.                 return subFragment2;  
  91.             case 2:  
  92.                 if (null == subFragment3) {  
  93.                     subFragment3 = new SubFragment3();  
  94.                 }
  95.                 subFragment1 = new SubFragment1();  
  96.                 return subFragment3;  
  97.             default:  
  98.                 return null;  
  99.             }
  100.         }
  101.     }
  102. }

 

 

再添加 SubFragment1(这里只给出一个,其它类似)

 

  1. public class SubFragment1 extends Fragment {  
  2.     @Override  
  3.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  4.             Bundle savedInstanceState) {
  5.         T.showShort(getActivity(), “SubFragment1==onCreateView”);  
  6.         TextView tv = new TextView(getActivity());  
  7.         tv.setTextSize(25);  
  8.         tv.setBackgroundColor(Color.parseColor(“#FFA07A”));  
  9.         tv.setText(“SubFragment1”);  
  10.         tv.setGravity(Gravity.CENTER);
  11.         return tv;  
  12.     }
  13. }

感觉没什么可写了……当然,你会发现切换ViewPager的时候,它所管理的Fragment生命周期很有意思,具体需求具体解决,方案很多……

适配Android 华为等底部虚拟键

在app开发中有很多项目使用底部tab+ ViewPager + fragment 的框架,那么这个时候如果app安装在底部带有虚拟键的设备上的话,会产生设备底部的虚拟键遮挡app底部tab的情况,这个时候对app的外观和功能的使用都产生了很大的影响,下边我们对此情况进行适配。

1、首先我们进行工具类的封装,主要思路是addOnGlobalLayoutListener全局监听视图的变化(onGlobalLayoutListener是viewTreeObserver的内部类,当视图变化时onGlobalLayoutListener可以监听到),那么当视图的高度发生变化时,就对这个视图重新布局,使视图不被遮挡。

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Rect;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;

import java.lang.reflect.Method;

public class NavigationBarUtil {
public static void initActivity(View content) {
new NavigationBarUtil(content);
}

private View mObserved;//被监听的视图
private int usableHeightView;//视图变化前的可用高度
private ViewGroup.LayoutParams layoutParams;

private NavigationBarUtil(View content) {
mObserved = content;
//给View添加全局的布局监听器监听视图的变化
mObserved.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
resetViewHeight();
}
});
layoutParams = mObserved.getLayoutParams();
}

/**
* 重置视图的高度,使不被底部虚拟键遮挡
*/
private void resetViewHeight() {
int usableHeightViewNow = CalculateAvailableHeight();
//比较布局变化前后的View的可用高度
if (usableHeightViewNow != usableHeightView) {
//如果两次高度不一致
//将当前的View的可用高度设置成View的实际高度
layoutParams.height = usableHeightViewNow;
mObserved.requestLayout();//请求重新布局
usableHeightView = usableHeightViewNow;
}
}

/**
* 计算试图高度
* @return
*/
private int CalculateAvailableHeight() {
Rect r = new Rect();
mObserved.getWindowVisibleDisplayFrame(r);
return (r.bottom – r.top);//如果不是沉浸状态栏,需要减去顶部高度
// return (r.bottom );//如果是沉浸状态栏
}

/**
* 判断底部是否有虚拟键
* @param context
* @return
*/
public static boolean hasNavigationBar(Context context) {
boolean hasNavigationBar = false;
Resources rs = context.getResources();
int id = rs.getIdentifier(“config_showNavigationBar”, “bool”, “android”);
if (id > 0) {
hasNavigationBar = rs.getBoolean(id);
}
try {
Class systemPropertiesClass = Class.forName(“android.os.SystemProperties”);
Method m = systemPropertiesClass.getMethod(“get”, String.class);
String navBarOverride = (String) m.invoke(systemPropertiesClass, “qemu.hw.mainkeys”);
if (“1”.equals(navBarOverride)) {
hasNavigationBar = false;
} else if (“0”.equals(navBarOverride)) {
hasNavigationBar = true;
}
} catch (Exception e) {
}
return hasNavigationBar;
}
}
2、在需要适配的activity 的 onCreate方法中的 super.onCreate(savedInstanceState)之后 调用
if(NavigationBarUtil.hasNavigationBar(this)){
NavigationBarUtil.initActivity(findViewById(android.R.id.content));
}
(推荐封装base 这样就可以直接继承base就可以)。

*后的效果就是app底部tab 在设备的虚拟键之上。

Android底部导航栏,三种风格和实现

一、效果图展示

%title插图%num

如果动图没有动的话,也可以看下面这个静态图

%title插图%num

以下挨个分析每个的实现,这里只做简单的效果展示,大家可以基于目前代码做二次开发。

二、BottomNavigationView
这是 Google 给我们提供的一个专门用于底部导航的 View,你只需要在新建 Activity 的时候选择 “Bottom Navigation Activity”,IDE 就会自动使用 BottomNavigationView 帮你生成好相应的代码了。

1. 在 xml 中使用
<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” />
这里面唯一要注意的就是 app:menu 属性了,它指定了你的导航栏显示的页面菜单是怎样的。

2. menu 的布局文件
<?xml version=”1.0″ encoding=”utf-8″?>
<menu xmlns:android=”http://schemas.android.com/apk/res/android”>

<item
android:id=”@+id/navigation_home”
android:icon=”@drawable/ic_home_black_24dp”
android:title=”@string/title_home” />

<item
android:id=”@+id/navigation_dashboard”
android:icon=”@drawable/ic_dashboard_black_24dp”
android:title=”@string/title_dashboard” />

<item
android:id=”@+id/navigation_notifications”
android:icon=”@drawable/ic_notifications_black_24dp”
android:title=”@string/title_notifications” />

</menu>
3. 在 Activity 中调用
private TextView mTextMessage;

private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
= new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
case R.id.navigation_home:
mTextMessage.setText(R.string.title_home);
return true;
case R.id.navigation_dashboard:
mTextMessage.setText(R.string.title_dashboard);
return true;
case R.id.navigation_notifications:
mTextMessage.setText(R.string.title_notifications);
return true;
}
return false;
}
};

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

mTextMessage = findViewById(R.id.message);
BottomNavigationView navigation = findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
}
这里的演示 code 都是 IDE 自动生成的,由于 BottomNavigationView 目前我还没有在项目中实际使用过,这里不做过多分析,使用起来不难,以上代码已经足以满足我们的基本使用要求了。

三、RadioGroup + ViewPager
这是一种比较常见了的,下面 4 个 tab 的导航按钮,可以切换不同的页面,这里页面使用了 ViewPager + Fragment 的组合,实现了滑动的页面效果,也可以不使用 ViewPager,这个根据产品的定义来使用即可。

1. 布局文件
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.style2.Style2Activity”>

<android.support.v4.view.ViewPager
android:id=”@+id/fragment_vp”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_above=”@+id/tabs_rg” />

<RadioGroup
android:id=”@+id/tabs_rg”
android:layout_width=”match_parent”
android:layout_height=”56dp”
android:layout_alignParentBottom=”true”
android:background=”#dcdcdc”
android:orientation=”horizontal”>

<RadioButton
android:id=”@+id/today_tab”
style=”@style/Custom.TabRadioButton”
android:checked=”true”
android:drawableTop=”@drawable/tab_sign_selector”
android:text=”今日” />

<RadioButton
android:id=”@+id/record_tab”
style=”@style/Custom.TabRadioButton”
android:drawableTop=”@drawable/tab_record_selector”
android:text=”记录” />

<RadioButton
android:id=”@+id/contact_tab”
style=”@style/Custom.TabRadioButton”
android:drawableTop=”@drawable/tab_contact_selector”
android:text=”通讯录” />

<RadioButton
android:id=”@+id/settings_tab”
style=”@style/Custom.TabRadioButton”
android:drawableTop=”@drawable/tab_setting_selector”
android:text=”设置” />
</RadioGroup>
</RelativeLayout>
2. Activity 类
public class Style2Activity extends AppCompatActivity {

private ViewPager mViewPager;
private RadioGroup mTabRadioGroup;

private List<Fragment> mFragments;
private FragmentPagerAdapter mAdapter;

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

private void initView() {
// find view
mViewPager = findViewById(R.id.fragment_vp);
mTabRadioGroup = findViewById(R.id.tabs_rg);
// init fragment
mFragments = new ArrayList<>(4);
mFragments.add(BlankFragment.newInstance(“今日”));
mFragments.add(BlankFragment.newInstance(“记录”));
mFragments.add(BlankFragment.newInstance(“通讯录”));
mFragments.add(BlankFragment.newInstance(“设置”));
// init view pager
mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
mViewPager.setAdapter(mAdapter);
// register listener
mViewPager.addOnPageChangeListener(mPageChangeListener);
mTabRadioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
}

@Override
protected void onDestroy() {
super.onDestroy();
mViewPager.removeOnPageChangeListener(mPageChangeListener);
}

private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
RadioButton radioButton = (RadioButton) mTabRadioGroup.getChildAt(position);
radioButton.setChecked(true);
}

@Override
public void onPageScrollStateChanged(int state) {

}
};

private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
for (int i = 0; i < group.getChildCount(); i++) {
if (group.getChildAt(i).getId() == checkedId) {
mViewPager.setCurrentItem(i);
return;
}
}
}
};

private class MyFragmentPagerAdapter extends FragmentPagerAdapter {

private List<Fragment> mList;

public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
this.mList = list;
}

@Override
public Fragment getItem(int position) {
return this.mList == null ? null : this.mList.get(position);
}

@Override
public int getCount() {
return this.mList == null ? 0 : this.mList.size();
}
}

}
这里唯一注意点的就是两个监听事件,要实现底部导航按钮和页面的联动。

四、带页面跳转功能的底部导航
很多 APP 的底部导航栏中间有一个很大的按钮,点击后通常是打开一个新的页面,这里我们要实现的就是这种底部导航。
依旧是使用 RadioGroup 来做,只不过中间一个 tab 我们先用一个空的 View 来占位,然后在这个 View 的位置放置一个较大的按钮来覆盖住。

1. 布局文件
<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:tools=”http://schemas.android.com/tools”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.style3.Style3Activity”>

<FrameLayout
android:id=”@+id/fragment_container”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_above=”@+id/tabs_rg” />

<RadioGroup
android:id=”@+id/tabs_rg”
android:layout_width=”match_parent”
android:layout_height=”56dp”
android:layout_alignParentBottom=”true”
android:background=”#dcdcdc”
android:orientation=”horizontal”>

<RadioButton
android:id=”@+id/today_tab”
style=”@style/Custom.TabRadioButton”
android:checked=”true”
android:drawableTop=”@drawable/tab_sign_selector”
android:text=”今日” />

<RadioButton
android:id=”@+id/record_tab”
style=”@style/Custom.TabRadioButton”
android:drawableTop=”@drawable/tab_record_selector”
android:text=”记录” />

<View style=”@style/Custom.TabRadioButton” />

<RadioButton
android:id=”@+id/contact_tab”
style=”@style/Custom.TabRadioButton”
android:drawableTop=”@drawable/tab_contact_selector”
android:text=”通讯录” />

<RadioButton
android:id=”@+id/settings_tab”
style=”@style/Custom.TabRadioButton”
android:drawableTop=”@drawable/tab_setting_selector”
android:text=”设置” />
</RadioGroup>

<ImageView
android:id=”@+id/sign_iv”
android:layout_width=”80dp”
android:layout_height=”80dp”
android:layout_alignParentBottom=”true”
android:layout_centerHorizontal=”true”
android:background=”@android:color/transparent”
android:src=”@mipmap/sign” />
</RelativeLayout>
2. Activity 类
public class Style3Activity extends AppCompatActivity {

private RadioGroup mTabRadioGroup;
private SparseArray<Fragment> mFragmentSparseArray;

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

private void initView() {
mTabRadioGroup = findViewById(R.id.tabs_rg);
mFragmentSparseArray = new SparseArray<>();
mFragmentSparseArray.append(R.id.today_tab, BlankFragment.newInstance(“今日”));
mFragmentSparseArray.append(R.id.record_tab, BlankFragment.newInstance(“记录”));
mFragmentSparseArray.append(R.id.contact_tab, BlankFragment.newInstance(“通讯录”));
mFragmentSparseArray.append(R.id.settings_tab, BlankFragment.newInstance(“设置”));
mTabRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// 具体的fragment切换逻辑可以根据应用调整,例如使用show()/hide()
getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,
mFragmentSparseArray.get(checkedId)).commit();
}
});
// 默认显示*个
getSupportFragmentManager().beginTransaction().add(R.id.fragment_container,
mFragmentSparseArray.get(R.id.today_tab)).commit();
findViewById(R.id.sign_iv).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(Style3Activity.this, SignActivity.class));
}
});
}

}
注意:

如果这里你也想使用 ViewPager 来展示 Fragment 的话,一定要注意这里的 RadioGroup 中间有一个占位的 View,即两者的监听事件里,实现联动时要考虑多个这个 View 的存在。

使用ViewPager + Fragment实现滑动菜单Tab效果 –简易版

描述:

之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的;

*近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发;

APP已经完善了一部分,现在就想把已经做好的功能整理一下,记录下来。

 

效果图:

可以手动滑动菜单

也可以通过点击头部菜单进行切换

%title插图%num         %title插图%num

 

项目效果图:

%title插图%num %title插图%num

 

具体实现的代码:

前台代码(activity_main.xml):

%title插图%num View Code

 

主界面代码(MainActivity.java):

%title插图%num View Code

 

需要多少个Fragment,便创建多少个,这里只举例写一个,其它相同

建立Fragment(fragment_one.xml):

%title插图%num View Code

 

Fragment界面代码(OneFragment.java):

%title插图%num View Code

 

strings.xml:

<string name="detail_tab">明细</string>
<string name="category_report_tab">类别报表</string>

 

colors.xml:

<color name="main_tab_text_color">#000000</color>

 

单个 Activity 控件过多,对手机影响大么?

单个 Activity 控件过多,对手机影响大么?
以小米 8 为例

现在有个 Activity 用于显示设备的某些信息,设备有好几项属性需要显示,所以我在一个 Activity 里面使用 ViewPager 来显示设备信息,用户左右滑动就能查看设备的信息。

但随着需求越来越多,导致 ViewPager 所在的 Activity 控件越来越多,比如*个页面时设备基本信息,大概有近 20 个信息,每个信息都至少需要一个 TextView 和 TextEdit,有些条目还要 Spinner,多个 RadioButton 等。这样 ViewPager 的一个页面就有 50 多个各种控件

第二个页面是设备连接其他设备的列表,大概 60 多个页面

第三个页面是设备的当前支持的一些协议信息,控件 100+。。。。

然后因为小公司,也没有架构师,所以导致需求不断增加,ViewPager 的页面不断增加,而 ViewPager 所在的 Activity 里的控件非常多,目前各种 TextView,TextEdit,Spinner,Radiobutton,Button 等已经超过 700 个了

我向问下以小米 8 为例,这样一个包含这么多控件的 Activity,对手机的硬件压力大吗?

• 2021-03-04 09:27:17 +08:00
SwiftFrank 1
SwiftFrank 24 天前
建议了解下 Android UI 的渲染相关知识,简单点讲效率跟你单个 Layout(XML)的嵌套层级有关系,推荐使用 ConstrainLayout,页面尽量解耦,方便维护和测试。另外建议看看 Jetpack Compose 的 Navigation 组件,应用单 Activity 的设计。
ssynhtn 2
ssynhtn 24 天前 via Android
太长的页面可以换成 recyclerview
QBugHunter 3
QBugHunter 24 天前
@ssynhtn
每个页面的显示设备某个方面的信息,每个页面之间的信息没有太多的关联以及共同点,用 recyclerview 这种滚动页面用户体验不太好
QBugHunter 4
QBugHunter 24 天前
@SwiftFrank
ViewPager 的每个页面嵌套非常简单,每个页面都是诺干行,每行一个都是 TextView+TextEdit/RadioButton/Spinner 等
QBugHunter 5
QBugHunter 24 天前
@SwiftFrank
每个页面布局文件就 2-3 层嵌套,就是控件的数目比较大。。。
coolesting 6
coolesting 24 天前 via Android
viewpager 里面放的是 fragment,每次翻页都 replace 掉,不会有太大的性能消耗。

如果你数据是一直加载却一直用 add 的方式来添加内容,那估计肯定消耗内存的。
KNOX 7
KNOX 24 天前 via Android
考虑下 ViewPager2? 因为是基于 RecyclerView 实现的,可以利用复用来减轻实时渲染压力,而且不应该只看一个设备。
NexTooo 8
NexTooo 24 天前
@QBugHunter #3 纯好奇,单个页面如果要全塞下几十个 View 显示信息的话,那字体应该不能大到哪儿去,这种情况下用户体验好么……
QBugHunter 9
QBugHunter 24 天前
@NexTooo
没有,比如设备状态,需要 TextView+2 个 RadioButton(开和关)+RadioGroup,总计 4 个控件
然后一个设备信息页面,有十几条这样的信息,一个屏幕可以显示 10 条+,用一个 ScrollView 滚动*多半个屏幕就可以显示全部信息了,对于用户来说不算糟糕,但这样一个页面十几条信息,每条 3-5 个控件,总计就 40+了

一个页面向下滚动*长的都没有超过 1 个屏幕,但那个页面控件 100+。。。

然后这个 ViewPager 有 6 个 view,现在还要加。。。。。

因为设计一改再改,所以 ViewPager 所在的 Activity 的控件数量就非常多了(加上刚提的需求,可能会超过 800 )
mcluyu 10
mcluyu 24 天前
不是 Android 开发,有类似性能调试工具的直接看下渲染,滑动时性能消耗什么样?总的来说你这些东西看起来都不如随便拉出个游戏消耗的 1/10 多。。

Arthur5 11
Arthur5 24 天前
@QBugHunter 一屏就 40 个控件还好吧。不显示的控件又不会绘制到屏幕上,上下滑动的页面用 RecyclerView 复用,左右滑动的 ViewPager 默认只保留当前和左一右一的 3 个页面。
StrorageBox 12
StrorageBox 24 天前
看你怎么写的了,如果 google 建议写法,正确添加的 fragment,没有任何问题。
不过看你所说“一个页面向下滚动*长的都没有超过 1 个屏幕,但那个页面控件 100+。。”,就知道不容乐观了,会有问题的,建议先学习一下 Android 绘制相关知识还有 viewpager1 的机制及 Android 界面的内存使用这三方面知识,然后再着手进行优化。
QBugHunter 13
QBugHunter 24 天前
@Arthur5
一个页面 40-100 个控件,然后这个 ViewPage 目前 6 个页面,现在还要再加 3 个。。。。
NexTooo 14
NexTooo 23 天前
@QBugHunter 我是觉得你可能需要先确定目前的绘制性能消耗如何,有必要了再优化吧,比如*限开到 9 个界面之后的情况。因为感觉如你这么说,要么不动,动起来是个蛮大的工程了。但我感觉若是基本的绘制优化做到位,应该不会有太大的问题,毕竟都是很简单的 View 而不是一些带复杂动画、大内存控件。
你可以看看绘制层级、View 嵌套层级这两块的优化模式,以及 ViewPager1 的机制进一步优化 Fragment 的回收与重建。细节的话我不清楚具体的情况就想不到别的,能想到的就是多个格式不同的文本可以通过富文本拼接的方式合并成一个 TextView
lwlizhe 15
lwlizhe 23 天前
我感觉控件数量跟渲染没啥关系吧

如果卡的话应该是控件本身的问题,或者层级结构什么的,或者说一个控件里面有个 xml 需要解析这种,总之应该是 xml 的锅;
要是直接 textView 那帮没啥 xml 内容的东西应该不影响渲染吧;无非就是 canvas 本身的操作,这块应该没啥问题吧;

我觉的现在你们这更大的问题反而是维护成本问题……假如来个人接手代码,会不会看一眼直接爆炸~
QBugHunter 16
QBugHunter 23 天前
@lwlizhe
这是我接手别人的代码。。。。。
QBugHunter 17
QBugHunter 23 天前
@lwlizhe
想换成碎片,但项目太赶了,我还有别的事情要处理,实在没时间把这个 ViewPager 里的 View 全部换成碎片了,所以只能暂时再加几个 View
pekki 18
pekki 23 天前
屏幕总共就那点大,怎么可能放下几十个控件,详细了解一下 android 屏幕绘制的机制,只不过是不断的重复绘制罢了,性能上影响不大,你看视频每秒都在重绘几十次也不卡啊。
lwlizhe 19
lwlizhe 23 天前
@QBugHunter 略表同情……感觉除了这块,还有其他地方的坑在等着你……这应该是个大坑项目~
hongch 20
hongch 21 天前
如果几十个控件 tv 、et 都会影响到性能的话,你让那些做游戏的怎么办?

友情链接: SITEMAP | 旋风加速器官网 | 旋风软件中心 | textarea | 黑洞加速器 | jiaohess | 老王加速器 | 烧饼哥加速器 | 小蓝鸟 | tiktok加速器 | 旋风加速度器 | 旋风加速 | quickq加速器 | 飞驰加速器 | 飞鸟加速器 | 狗急加速器 | hammer加速器 | trafficace | 原子加速器 | 葫芦加速器 | 麦旋风 | 油管加速器 | anycastly | INS加速器 | INS加速器免费版 | 免费vqn加速外网 | 旋风加速器 | 快橙加速器 | 啊哈加速器 | 迷雾通 | 优途加速器 | 海外播 | 坚果加速器 | 海外vqn加速 | 蘑菇加速器 | 毛豆加速器 | 接码平台 | 接码S | 西柚加速器 | 快柠檬加速器 | 黑洞加速 | falemon | 快橙加速器 | anycast加速器 | ibaidu | moneytreeblog | 坚果加速器 | 派币加速器 | 飞鸟加速器 | 毛豆APP | PIKPAK | 安卓vqn免费 | 一元机场加速器 | 一元机场 | 老王加速器 | 黑洞加速器 | 白石山 | 小牛加速器 | 黑洞加速 | 迷雾通官网 | 迷雾通 | 迷雾通加速器 | 十大免费加速神器 | 猎豹加速器 | 蚂蚁加速器 | 坚果加速器 | 黑洞加速 | 银河加速器 | 猎豹加速器 | 海鸥加速器 | 芒果加速器 | 小牛加速器 | 极光加速器 | 黑洞加速 | movabletype中文网 | 猎豹加速器官网 | 烧饼哥加速器官网 | 旋风加速器度器 | 哔咔漫画 | PicACG | 雷霆加速