android实现点击按钮,图片在里面滚动的效果??
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了android实现点击按钮,图片在里面滚动的效果??相关的知识,希望对你有一定的参考价值。
请问android要实现这种效果,,用什么控件,要如何布局点击按钮,图片在里面滚动。
是用viewpaper,还是gallay【这个控件过期了,现在用什么代替的】??
其次,gallery虽然过期了,但是还可以继续用的,建议还是用它实现,因为API里提到的2种替换方案,用来实现这样的效果,感觉还是不如gallery来 的方便,干脆;
这种效果很简单,横向布局,按钮+gallery+按钮就可以;
gallery的用法,你可以自行百度,资料很多; 参考技术A 用Gallery就可以了,找到Gallery控件后,给它设置适配器就可以了 参考技术B 建议你还是用viewpaper,这样效果比较好些。
当然,用画廊控件,也能实现的。 参考技术C 不会这玩意
Android-RecyclerView系列 RecyclerView实现Item居中效果
一、实现的效果
1、滑动的时候让每一个Item保持在中间
2、点击某一个Item让其滚动到中间
3、实际实现的效果如下:点击一次自动滚动居中,再次点击跳转到详情页
二、实现的思路:
1、每一次的滑动都让图片保持在中间,其实RecyclerView24.2.0版本以后,Google已经提供一个SnapHelper的辅助类,可以实现每一次滚动结束保持居中。具体用法就是:
LinearSnapHelper类似SnapHelper的一个子类,SnapHelper的另一个子类叫PagerSnapHelper。两者的作用都是滑动结束的时候Item保持在中间的位置。而区别是:LinearSnapHelper可以一次滑动多个Item,而PagerSnapHelper限制你一次只能滑动一个Item。
2、有了SnapHelper工具类解决Item居中问题,但是还需要考虑到一个问题,如何让刚开始的第一张和最后一张也居中呢?我们肯定会想到给第一张要显示的图片设置一个margin,这样第一张和最后一场也能也能居中显示。我们第一反应是在Adapter里直接修改item的LayoutParams,其实官方提供了ItemDecoration,就是给RecyclerView的Item添加修饰。代码如下:
public class GalleryItemDecoration extends RecyclerView.ItemDecoration {
/**
* 自定义默认的Item的边距
*/
private int mPageMargin = 10;
/**
* 第一张图片的左边距
*/
private int mLeftPageVisibleWidth;
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
//计算一下第一中图片距离屏幕左边的距离:(屏幕的宽度-item的宽度)/2。其中item的宽度=实际ImagView的宽度+margin。
//我这里设置的ImageView的宽度为100+margin=110
if (mLeftPageVisibleWidth ==0) {
//计算一次就好了
mLeftPageVisibleWidth = DensityUtil.px2dip(view.getContext(),getScreenWidth(view.getContext()) - DensityUtil.dip2px(110, view.getContext())) / 2;
}
//获取当前Item的position
int position = parent.getChildAdapterPosition(view);
//获得Item的数量
int itemCount = parent.getAdapter().getItemCount();
int leftMagin;
if (position == 0){
leftMagin= dpToPx(mLeftPageVisibleWidth);
}else{
leftMagin=dpToPx(mPageMargin);
}
int rightMagin;
if (position == itemCount-1) {
rightMagin=dpToPx(mLeftPageVisibleWidth);
}else{
rightMagin=dpToPx(mPageMargin);
}
RecyclerView.LayoutParams layoutParams = (RecyclerView.LayoutParams) view.getLayoutParams();
//10,10分别是item到上下的margin
layoutParams.setMargins(leftMagin,10,rightMagin,10);
view.setLayoutParams(layoutParams);
super.getItemOffsets(outRect, view, parent, state);
}
/**
* d p转换成px
* @param dp:
*/
private int dpToPx(int dp){
return (int) (dp * Resources.getSystem().getDisplayMetrics().density + 0.5f);
}
/**
* 获取屏幕的宽度
* @param context:
* @return :
*/
public static int getScreenWidth(Context context) {
WindowManager manager = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
Display display = manager.getDefaultDisplay();
return display.getWidth();
}
}
然后直接给RecyclerView设置ItemDecoration即可:
mRv.addItemDecoration(new GalleryItemDecoration());
3、点击某一张图片让其滚动到中间,这个只需要自定义一个LinearLayoutManager即可:
public class CenterLayoutManager extends LinearLayoutManager {
public CenterLayoutManager(Context context) {
super(context);
}
public CenterLayoutManager(Context context, int orientation, boolean reverseLayout) {
super(context, orientation, reverseLayout);
}
public CenterLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {
RecyclerView.SmoothScroller smoothScroller = new CenterSmoothScroller(recyclerView.getContext());
smoothScroller.setTargetPosition(position);
startSmoothScroll(smoothScroller);
}
private static class CenterSmoothScroller extends LinearSmoothScroller {
CenterSmoothScroller(Context context) {
super(context);
}
@Override
public int calculateDtToFit(int viewStart, int viewEnd, int boxStart, int boxEnd, int snapPreference) {
return (boxStart + (boxEnd - boxStart) / 2) - (viewStart + (viewEnd - viewStart) / 2);
}
}
}
然后调用RecyclerView.smoothScrollToPosition(position)即可;
4、如何判断让Item居中还是跳转到详情页,其实和简单即使用一个int记录一下,如果int==position就跳转到详情页,如果不是就执行RecyclerView.smoothScrollToPosition(position),让其居中。具体代码如下:
public class MainActivity extends AppCompatActivity {
private RecyclerView mRv;
private LinearSnapHelper mLinearSnapHelper;
private RvAdapter mRvAdapter;
/**
* 记录当前选中的位置,默认位置是0
*/
private int nowPosition = 0;
private List<String> mPaths;
private CenterLayoutManager mCenterLayoutManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRv = findViewById(R.id.rv);
mPaths = new ArrayList<>();
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/15685504-0b21-4201-b345-750434acaed5.jpeg");
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/7805bea2-ef27-4b83-86ec-53a4311496ad.jpeg");
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/bca2f034-9ce3-4329-a102-a90cee7d166e.png");
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/f07fdcfb-5934-44e6-abbd-077040e36abb.png");
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/6f5c9878-a669-46c3-9984-895d09ea3e54.jpeg");
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/0562e166-5e53-4aa2-93c3-c1fbb052139b.png");
mPaths.add("http://res.api.youyulm.com/v2/Upload/20180814/31293172-6f51-4f42-8f67-c6683b6dcf33.png");
mLinearSnapHelper = new LinearSnapHelper();
mLinearSnapHelper.attachToRecyclerView(mRv);
mRv.addItemDecoration(new GalleryItemDecoration());
mCenterLayoutManager = new CenterLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
mRv.setLayoutManager(mCenterLayoutManager);
mRvAdapter = new RvAdapter(this,mPaths);
mRv.setAdapter(mRvAdapter);
//Item的点击回调监听
mRvAdapter.setOnItemClickListener(new RvAdapter.OnItemClickListener() {
@Override
public void onIitemClick(int position) {
if (nowPosition == position) {
Toast.makeText(MainActivity.this, "跳转到点击到的详情页", Toast.LENGTH_SHORT).show();
} else {
//使点击到的条目滚动到中间
nowPosition=position;
mRv.smoothScrollToPosition(position);
}
}
});
}
}
以上是关于android实现点击按钮,图片在里面滚动的效果??的主要内容,如果未能解决你的问题,请参考以下文章