仿淘宝商品详情页面
–
title: 仿淘宝商品详情页面
tags: android
grammar_cjkRuby: true
先来一张效果图
使用的第三方库
allprojects {
repositories {
google()
maven { url "https://jitpack.io" }
jcenter()
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//一个封装好的adapter
implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.40'
implementation 'com.android.support:design:27.1.1'
}
enter code here主布局
"1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/home_detail_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="@dimen/common_dimens_0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="@dimen/common_dimens_200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="@+id/home_detail_iv_tt"
android:layout_width="match_parent"
android:layout_height="@dimen/common_dimens_200dp"
android:scaleType="centerCrop"
android:src="@mipmap/home_ic_back" />
<android.support.v7.widget.Toolbar
android:id="@+id/home_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="@dimen/common_dimens_80dp"
android:background="@color/common_color_white_FF"
android:fitsSystemWindows="true"
app:contentInsetStart="@dimen/common_dimens_0dp"
app:layout_collapseMode="pin">
<RelativeLayout
android:id="@+id/home_detail_relayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/common_color_white_FF"
android:orientation="vertical">
<ImageView
android:id="@+id/home_detail_iv_back"
android:layout_width="@dimen/common_dimens_20dp"
android:layout_height="@dimen/common_dimens_16dp"
android:layout_centerVertical="true"
android:layout_marginLeft="@dimen/common_dimens_15dp"
android:src="@mipmap/home_ic_back_arrow" />
<ImageView
android:id="@+id/home_detail_iv_share"
android:layout_width="@dimen/common_dimens_18dp"
android:layout_height="@dimen/common_dimens_18dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="@dimen/common_dimens_20dp"
android:src="@mipmap/home_ic_share" />
<TextView
android:id="@+id/home_detail_tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="商品"
android:textSize="@dimen/common_dimens_18sp" />
<android.support.design.widget.TabLayout
android:id="@+id/home_detail_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/common_dimens_30dp"
android:layout_alignParentBottom="true"
app:tabBackground="@color/common_color_transparent_00"
app:tabIndicatorColor="@color/common_color_transparent_00" />
RelativeLayout>
android.support.v7.widget.Toolbar>
android.support.design.widget.CollapsingToolbarLayout>
android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/home_detail_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<LinearLayout
android:id="@+id/home_status_bar_bottom"
android:layout_width="match_parent"
android:layout_height="@dimen/common_dimens_50dp"
android:layout_gravity="bottom"
android:background="@color/common_color_white_FF"
android:orientation="horizontal">
<LinearLayout
android:layout_width="@dimen/common_dimens_0dp"
android:layout_height="match_parent"
android:layout_margin="@dimen/common_dimens_5dp"
android:layout_weight="1"
android:orientation="horizontal">
<ImageView
android:layout_width="@dimen/common_dimens_0dp"
android:layout_height="@dimen/common_dimens_25dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@mipmap/home_ic_detail_home" />
<ImageView
android:layout_width="@dimen/common_dimens_0dp"
android:layout_height="@dimen/common_dimens_25dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@mipmap/home_customer_service" />
<ImageView
android:layout_width="0dp"
android:layout_height="@dimen/common_dimens_25dp"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@mipmap/home_detail_shopping_cart" />
LinearLayout>
<LinearLayout
android:layout_width="@dimen/common_dimens_0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:layout_width="@dimen/common_dimens_0dp"
android:layout_height="match_parent"
android:layout_margin="@dimen/common_dimens_5dp"
android:layout_weight="1"
android:background="@color/common_color_black_33"
android:text="@string/home_add_your_card"
android:textColor="@color/common_color_white_FF"
android:textSize="@dimen/common_dimens_14sp" />
<Button
android:layout_width="@dimen/common_dimens_0dp"
android:layout_height="match_parent"
android:layout_margin="@dimen/common_dimens_5dp"
android:layout_weight="1"
android:background="@color/common_color_orange_00"
android:text="@string/home_buy_at_once"
android:textColor="@color/common_color_white_FF"
android:textSize="@dimen/common_dimens_14sp" />
LinearLayout>
LinearLayout>
android.support.design.widget.CoordinatorLayout>
enter code herefragmen的布局就是放了一个文本显示1、2、3、4、5
activity中的代码
private void initView() {
mToolbarTb = (Toolbar) findViewById(R.id.home_detail_toolbar);
mFLayout = findViewById(R.id.home_detail_relayout);
imageView = (ImageView) findViewById(R.id.home_detail_iv_tt);
tabLayout = (TabLayout) findViewById(R.id.home_detail_tab);
recyclerView = (RecyclerView) findViewById(R.id.home_detail_recyclerview);
mAppBarLayout = findViewById(R.id.home_detail_appbar);
statusBarLayout = (LinearLayout) findViewById(R.id.home_status_bar_bottom);
statusBarLayout.setBackgroundColor(Color.argb(255, 255, 255, 255));
tvTitle = (TextView) findViewById(R.id.home_detail_tv_title);
ivBack = (ImageView) findViewById(R.id.home_detail_iv_back);
ivBack.setOnClickListener(this);
ivShare = (ImageView) findViewById(R.id.home_detail_iv_share);
ivShare.setOnClickListener(this);
}
enter code herestatusBarLayout在代码里面设置颜色才是有效的
滑动渐变色
mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
float percent = Float.valueOf(Math.abs(verticalOffset)) / Float.valueOf(appBarLayout.getTotalScrollRange());
//第一种
int toolbarHeight = appBarLayout.getTotalScrollRange();
int dy = Math.abs(verticalOffset);
if (dy <= toolbarHeight) {
float scale = (float) dy / toolbarHeight;
float alpha = scale * 255;
mToolbarTb.setBackgroundColor(Color.argb((int) alpha, 255, 255, 255));
tvTitle.setTextColor(Color.argb((int) alpha, 0, 0, 0));
tabLayout.setTabTextColors(Color.argb((int) alpha, 0, 0, 0), Color.argb((int) alpha, 233, 150, 122));
// Log.d(TAG, "onOffsetChanged:alpha" + alpha);
}
// ivBack.setAlpha(percent);
// ivShare.setAlpha(percent);
// Log.d(TAG, "onOffsetChanged:percent" + percent);
}
});
enter code here当tablayout被选中时候RecyclerView滑动的位置
private void initTablayout() {
tabLayout.addTab(tabLayout.newTab().setText("商品"));
tabLayout.addTab(tabLayout.newTab().setText("评价"));
tabLayout.addTab(tabLayout.newTab().setText("详情"));
tabLayout.addTab(tabLayout.newTab().setText("推荐"));
tabLayout.addTab(tabLayout.newTab().setText("商品"));
tabLayout.addTab(tabLayout.newTab().setText("评价"));
// tabLayout.addTab(tabLayout.newTab().setText("详情"));
// tabLayout.addTab(tabLayout.newTab().setText("推荐"));
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
int tabPosition = tab.getPosition();
//mYDy 判断是上滑还是下滑true是手指上滑
if (layoutManager != null&&mYDy) {
layoutManager.scrollToPositionWithOffset(tabPosition, 0);
layoutManager.setStackFromEnd(true);
Log.d(TAG, "onTabSelected:tabPosition "+tabPosition);
}else if(layoutManager != null&&!mYDy){
//这里是下滑的时候，滑动到tabPosition这个条目的底部
layoutManager.scrollToPositionWithOffset(tabPosition+1, 5);
layoutManager.setStackFromEnd(false);
}
mYDy=true;
mAppBarLayout.setExpanded(false);
if (tabPosition==0) {
mAppBarLayout.setExpanded(true);
}
// layoutManager.scrollToPositionWithOffset(tabPosition, 0);
// layoutManager.setStackFromEnd(true);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
enter code hererecyclerview滑动策略
private void inRecyclview() {
ArrayList list = new ArrayList();
TestBean testBeanzero = new TestBean();
testBeanzero.setPrice(0);
TestBean testBeanone = new TestBean();
testBeanone.setPrice(1);
TestBean testBeantwo = new TestBean();
testBeantwo.setPrice(2);
TestBean testBeanthree = new TestBean();
testBeanthree.setPrice(3);
TestBean testBeanfour = new TestBean();
testBeanfour.setPrice(4);
TestBean testBeanfive = new TestBean();
testBeanfive.setPrice(5);
// TestBean testBeansix = new TestBean();
// testBeansix.setPrice(6);
// TestBean testBeanseven = new TestBean();
// testBeanseven.setPrice(7);
list.add(testBeanzero);
list.add(testBeanone);
list.add(testBeantwo);
list.add(testBeanthree);
list.add(testBeanfour);
list.add(testBeanfive);
// list.add(testBeansix);
// list.add(testBeanseven);
layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
MyGoodsDetailAdapter myGoodsDetailAdapter = new MyGoodsDetailAdapter(R.layout.home_detail_item, list);
recyclerView.setAdapter(myGoodsDetailAdapter);
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
int firstVisibleItemPosition = layoutManager.findFirstVisibleItemPosition();
int firstCompletelyVisibleItemPosition = layoutManager.findFirstCompletelyVisibleItemPosition();
int lastCompletelyVisibleItemPosition = layoutManager.findLastCompletelyVisibleItemPosition();
int lastVisibleItemPosition = layoutManager.findLastVisibleItemPosition();
Log.i(TAG, "onScrolled:firstVisibleItemPosition " + firstVisibleItemPosition);
Log.i(TAG, "onScrolled:firstCompletelyVisibleItemPosition " + firstCompletelyVisibleItemPosition);
Log.i(TAG, "onScrolled:lastCompletelyVisibleItemPosition " + lastCompletelyVisibleItemPosition);
Log.i(TAG, "onScrolled:lastVisibleItemPosition " + lastVisibleItemPosition);
if (firstVisibleItemPosition < 8 && dy > 0) {
mYDy = true;
//Log.i(TAG, "onScrolled:firstVisibleItemPosition " + firstVisibleItemPosition);
} else if (dy < 0) {
mYDy = false;
}
tabLayout.getTabAt(firstVisibleItemPosition).select();
// Log.i(TAG, "onScrolled:lastCompletelyVisibleItemPosition "+lastCompletelyVisibleItemPosition);
// Log.i(TAG, "onScrolled:lastVisibleItemPosition "+lastVisibleItemPosition);
//
}
});
// recyclerView.setOnFlingListener(new RecyclerView.OnFlingListener() {
// @Override
// public boolean onFling(int velocityX, int velocityY) {
// return false;
// }
// });
}
enter code here dy > 0手指上滑，向下滚动
Toolbar的状态栏
private void initToolbar() {
mToolbarTb.setTitle("商品");
mToolbarTb.getBackground().setAlpha(0); //先设置透明
setSupportActionBar(mToolbarTb);
ActionBar actionBar = getSupportActionBar();
if (actionBar != null) {
actionBar.setDisplayShowTitleEnabled(false); //是否隐藏标题
actionBar.setDisplayHomeAsUpEnabled(false); //是否显示返回按钮
}
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
WindowManager.LayoutParams layoutParams = getWindow().getAttributes();
layoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | layoutParams.flags);
}
}
enter code hereDemo
enter description here