Android 仿京东淘宝 商品详情页 商品图片效果
2017-09-14 18:31
585 查看
最近重构商品,产品要求,按照淘宝京东来。。。。
成品如图这个效果
思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码
简单的界面布局
<?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"
android:orientation="vertical">
<com.zhangd.zhangdtest.view.MyScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/im_top"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitXY"
android:src="@drawable/image"/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="11111"
android:gravity="center"/>
<View style="@style/line"/>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="11111"
android:gravity="center"/>
<View style="@style/line"/>
......
</LinearLayout>
</com.zhangd.zhangdtest.view.MyScrollView>
</LinearLayout>
因为Scrollview没有直接的监听滑动距离的方法,只能自己重写一个简单的MyScrollView,通过重写onScrollChanged方法来实时获取滑动的距离
MyScrollView.java
public class MyScrollView extends ScrollView {
private ScrollViewListener scrollViewListener = null;
public interface ScrollViewListener {
void onScrollChanged(int y);
}
public MyScrollView(Context context) {
super(context);
}
public MyScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(y);
}
}
}
然后界面Activity里边,通过比较滑动的距离和图片的高,在滑动的距离比图片高度小的时候,设置图片的margin
public class ScrollViewActivity1 extends BaseActivity implements MyScrollView.ScrollViewListener {
private ImageView im_top;
private MyScrollView scrollView;
private int imageHeight;
@Override
public void setContentView() {
setContentView(R.layout.activity_scroll1);
}
@Override
protected void findViewById() {
im_top = (ImageView) findViewById(R.id.im_top);
scrollView = (MyScrollView) findViewById(R.id.scrollView);
im_top.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
imageHeight = im_top.getHeight();
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
im_top.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
im_top.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
}
});
// 设置滑动监听
scrollView.setScrollViewListener(this);
}
@Override
protected void initView() {
}
/**
* 滑动回调
* @param y
*/
@Override
public void onScrollChanged(int y) {
if (y < imageHeight) {
setMargins(im_top, 0, y / 2, 0, -y / 2);
}
}
public static void setMargins (View v, int l, int t, int r, int b) {
if (v.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
p.setMargins(l, t, r, b);
v.requestLayout();
}
}
}
OK鸟
成品如图这个效果
思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码
简单的界面布局
<?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"
android:orientation="vertical">
<com.zhangd.zhangdtest.view.MyScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/im_top"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitXY"
android:src="@drawable/image"/>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="11111"
android:gravity="center"/>
<View style="@style/line"/>
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="11111"
android:gravity="center"/>
<View style="@style/line"/>
......
</LinearLayout>
</com.zhangd.zhangdtest.view.MyScrollView>
</LinearLayout>
因为Scrollview没有直接的监听滑动距离的方法,只能自己重写一个简单的MyScrollView,通过重写onScrollChanged方法来实时获取滑动的距离
MyScrollView.java
public class MyScrollView extends ScrollView {
private ScrollViewListener scrollViewListener = null;
public interface ScrollViewListener {
void onScrollChanged(int y);
}
public MyScrollView(Context context) {
super(context);
}
public MyScrollView(Context context, AttributeSet attrs,
int defStyle) {
super(context, attrs, defStyle);
}
public MyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void setScrollViewListener(ScrollViewListener scrollViewListener) {
this.scrollViewListener = scrollViewListener;
}
@Override
protected void onScrollChanged(int x, int y, int oldx, int oldy) {
super.onScrollChanged(x, y, oldx, oldy);
if (scrollViewListener != null) {
scrollViewListener.onScrollChanged(y);
}
}
}
然后界面Activity里边,通过比较滑动的距离和图片的高,在滑动的距离比图片高度小的时候,设置图片的margin
public class ScrollViewActivity1 extends BaseActivity implements MyScrollView.ScrollViewListener {
private ImageView im_top;
private MyScrollView scrollView;
private int imageHeight;
@Override
public void setContentView() {
setContentView(R.layout.activity_scroll1);
}
@Override
protected void findViewById() {
im_top = (ImageView) findViewById(R.id.im_top);
scrollView = (MyScrollView) findViewById(R.id.scrollView);
im_top.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
imageHeight = im_top.getHeight();
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN) {
im_top.getViewTreeObserver().removeGlobalOnLayoutListener(this);
} else {
im_top.getViewTreeObserver().removeOnGlobalLayoutListener(this);
}
}
});
// 设置滑动监听
scrollView.setScrollViewListener(this);
}
@Override
protected void initView() {
}
/**
* 滑动回调
* @param y
*/
@Override
public void onScrollChanged(int y) {
if (y < imageHeight) {
setMargins(im_top, 0, y / 2, 0, -y / 2);
}
}
public static void setMargins (View v, int l, int t, int r, int b) {
if (v.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
ViewGroup.MarginLayoutParams p = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
p.setMargins(l, t, r, b);
v.requestLayout();
}
}
}
OK鸟
相关文章推荐
- Android仿淘宝商品浏览界面图片滚动效果
- Android高仿京东淘宝商品列表布局切换效果
- 仿淘宝京东拖拽商品详情页上下滚动黏滞效果
- 【Android】首页图片轮播效果(淘宝、京东首页广告效果)
- android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件
- android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件
- Android 仿淘宝京东商品详情页阻力翻页效果
- 仿淘宝鼠标移动商品图片放大效果
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- javascript实现 京东淘宝等商城的商品图片大图预览功能
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- Android仿淘宝切换商品列表布局效果的示例代码
- jQuery(7)---实现仿京东 在售商品图片的切换效果
- Android仿QQ好友详情页下拉顶部图片缩放效果
- Android 仿淘宝商品详情标题栏变色,布局层叠效果
- (转)Android 模仿淘宝滑动查看图片的效果 Gallery + ImageSwitcher
- android应用开发,类似美团商品详情下拉,顶部图片放大的效果
- 仿京东、淘宝商品详情页上拉显示详情的嵌套ScrollView
- Android中使用TextView实现高仿京东淘宝各种倒计时效果
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)